<template>
  <div>
    <!-- <toolbar
      @onSearch="filterData"
    /> -->
    <white-board>
      <el-row class="header" :gutter="20">
        <el-col class="flex-end" :span="24">
          <el-button type="primary" @click="exportTable">导出</el-button>
        </el-col>
      </el-row>
      <table-with-page
        :items="items"
        :stripe="true"
      >
        <template slot="table">
          <el-table-column
            label="微信昵称"
            min-width="100"
          >
            <template slot-scope="scope">
              <span>{{ scope.row.nickName || '-' }}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="用户手机"
            min-width="140"
          >
            <template slot-scope="scope">
              <span>{{ scope.row.mobile || '-' }}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="小孩信息"
            align="center"
          >
            <el-table-column
              label="小孩姓名"
              min-width="100"
            >
              <template slot-scope="scope">
                <div v-for="(children, index) in scope.row.baby" :key="index">{{ children.name }}</div>
              </template>
            </el-table-column>
            <el-table-column
              label="小孩性别"
              min-width="80"
            >
              <template slot-scope="scope">
                <div v-for="(children, index) in scope.row.baby" :key="index">{{ children.gender }}</div>
              </template>
            </el-table-column>
            <el-table-column
              label="小孩生日"
              min-width="80"
            >
              <template slot-scope="scope">
                <div v-for="(children, index) in scope.row.baby" :key="index">{{ children.birthday }}</div>
              </template>
            </el-table-column>
          </el-table-column>
        </template>
      </table-with-page>
    </white-board>
  </div>
</template>

<script>
// import { getTagTypeInArr, setStatus } from '@/utils'

import { getList, exportTable } from '@/model/baby'
import mxFilterList from '@/mixins/filterList'

export default {
  name: 'BabyPage',

  mixins: [mxFilterList({
    fetchList: getList // 在下方data再声明一个 fetchList: getList 同等效果
  })],

  data() {
    return {
      items: [],
      dialogVisible: false,
      item: {},
      num: null
    }
  },

  created() {
    this.reload()
  },

  beforedestroy() {
  },

  methods: {
    exportTable() {
      exportTable()
    }
  }
}
</script>

<style scoped>
.header {
  padding: 4px 20px 6px 20px;
}
.toolbar-txt {
  font-size: 13px;
  padding: 5px;
  line-height: 1.7;
}
.flex-end {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
</style>
