<template>
  <view class="content">
    <view class="top-view">
		<view class="top-text-view">您已关联{{ childList.length }}个小孩</view>
        <view class="top-btn-view">
            <u-button :custom-style="btnStyle" size="mini" @click="toEdit">新增</u-button>
        </view>
	</view>
    <view class="order-view">
        <u-loading class="loading" :show="isLoading" size="36"></u-loading>
        <no-content-tips :src="'/static/child_empty.png'" :isShow="(!isLoading && childList.length === 0)" :tips="'您还没添加小孩哦~'" />
        <view class="card item-card" v-for="item in childList" :key="item.id">
          <view class="item-content-view">
            <view class="item-avater-view">
                <img class="avater" src="@/static/avater.png" />
            </view>
            <view class="item-text-view">
                <view class="name-text-view">
                   <view class="name-text"><text>{{ item.name }}</text></view>  <u-tag class="tag" v-if="item.type === 1" text="家长接送" type="primary" size="mini" />
                </view>
                <view class="school-text-view">
                    <text>{{ item.school }}/{{ item.class }}</text>
                </view>
                <view class="phone-text-view">
                    <text>家长联系方式：{{ item.phone }}</text>
                </view>
            </view>
          </view>
          <view class="item-bottom-view">
                <u-button type="primary" plain size="mini" shape="circle"><u-icon name="trash" size="28"></u-icon>删除</u-button>
                <u-button :custom-style="editBtnStyle" plain size="mini" shape="circle"><u-icon name="edit-pen" size="28"></u-icon>编辑</u-button>
          </view>
        </view>
    </view>
  </view>
</template>

<script>
import noContentTips from '@/components/common/noContentTips.vue'

export default {
  data: () => ({
    childList: [{
            id: '1',
            type: 1,
            name: '乐大棒',
            school: '红英小学',
            class: '六年级-1班',
            phone: '17750182256'
        },{
            id: '2',
            type: 1,
            name: '乐笑棒',
            school: '红英小学',
            class: '三年级-1班',
            phone: '17750182256'
        }
    ],
    current: 0, // tabs组件的current值，表示当前活动的tab选项
    isLoading: false,
    btnStyle: {
        background: 'linear-gradient(0deg, #0251FF 0%, #2794F6 100%)',
        color: '#fff',
        width: '100rpx',
        height: '50rpx'
    },
    editBtnStyle: {
        background: 'linear-gradient(0deg, #0251FF 0%, #2794F6 100%)',
        color: '#fff',
        marginLeft: '30rpx'
    }
  }),
  components: {
      "no-content-tips": noContentTips
  },
  computed: {},
  methods: {
	// scroll-view到底部加载更多
	toEdit() {
        uni.navigateTo({
            url: '/pages/my/child/edit-child'
        })
	}
  },
  watch: {},

  // 组件周期函数--监听组件挂载完毕
  mounted() {
      
  },
  // 组件周期函数--监听组件数据更新之前
  beforeUpdate() {},
  // 组件周期函数--监听组件数据更新之后
  updated() {},
  // 组件周期函数--监听组件激活(显示)
  activated() {},
  // 组件周期函数--监听组件停用(隐藏)
  deactivated() {},
  // 组件周期函数--监听组件销毁之前
  beforeDestroy() {}
}
</script>

<style scoped>
.card {
    margin: 0 auto;
    background: #FFFFFF;
    border: 1px solid rgba(255, 255, 255, 0.5);
    box-shadow: 0px 0px 15px 1px #F0F0F0;
    border-radius: 10px;
}
.item-card {
    margin: 20rpx auto;
    width: 677rpx;
    height: 300rpx;
    align-items: center;
}
.top-view {
    height: 86rpx;
    margin: 30rpx;
}
.top-text-view {
    display: inline-block;
    font-size: 25rpx;
    font-weight: 400;
    color: #333333;
    vertical-align: middle;
}
.top-btn-view {
    float: right;
}
.avater {
    width: 140rpx;
	border-radius: 50%;
	/* new */
	height: 140rpx;
}
.item-content-view {
    display: flex;
    height: 200rpx;
    margin-left: 30rpx;
    margin-right: 30rpx;
    margin-top: 20rpx;
}
.item-text-view {
    margin-left: 30rpx;
}
.name-text {
    display: inline-block;
    max-width: 250rpx;
    font-size: 36rpx;
    font-weight: bold;
    color: #333333;
    overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
    vertical-align: middle;
}
.tag {
    margin-left: 36rpx;
}
.school-text-view {
    margin-top: 15rpx;
    font-size: 24rpx;
    font-weight: 400;
    overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
    color: #333333;
}
.phone-text-view {
    margin-top: 15rpx;
    font-size: 24rpx;
    font-weight: 400;
    overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
    color: #A3ABBF;
}
.item-bottom-view {
    margin-right: 30rpx;
    float: right;
}
</style>
