<template>
  <div>
    <Modal
      v-model="openModal"
      :footer-hide="true"
      :mask-closable="false"
      title="重点人群重复录入统计"
      width="60%"
      @on-visible-change="handleVisibleChange">
      <Table :columns="columns1" :data="tableList" stripe>
        <template slot="address" slot-scope="{ row, index }">
          {{ row.areaCity }}{{ row.areaArea }}{{ row.areaStreet }}{{ row.areaCommunity }}
        </template>
        <template slot="updateDate" slot-scope="{ row, index }">
          {{  parseTime(row.updateDate) }}
        </template>
        <template slot="active" slot-scope="{ row, index }">
          <Button style="color: #305cab;" type="text" @click="handleClick(row)">详情</Button>
        </template>
      </Table>
    </Modal>
    <DetailsTemplate1 ref="detailsTemplate1ref" />
    <DetailsTemplate2 ref="detailsTemplate2ref" />
    <DetailsTemplate3 ref="detailsTemplate3ref" />
    <DetailsTemplate4 ref="detailsTemplate4ref" />
    <DetailsTemplate5 ref="detailsTemplate5ref" />
  </div>
</template>

<script>
import { getDisCountByIdCardlist } from '@/api/duplicateEntry'
import { parseTime } from '@/libs/util'
import DetailsTemplate1 from '@/view/people-info/details-template/index1.vue'
import DetailsTemplate2 from '@/view/people-info/details-template/index2.vue'
import DetailsTemplate3 from '@/view/people-info/details-template/index3.vue'
import DetailsTemplate4 from '@/view/people-info/details-template/index4.vue'
import DetailsTemplate5 from '@/view/people-info/details-template/index5.vue'

export default {
  name: 'KeyPointPeopleDialog',
  components: { DetailsTemplate2, DetailsTemplate1, DetailsTemplate3, DetailsTemplate5, DetailsTemplate4 },
  data () {
    return {
      openModal: false,
      tableList: [],
      columns1: [
        { type: 'index', title: '序号', align: 'center', width: '80px' },
        { title: '姓名', key: 'name', align: 'center', width: '120px' },
        { title: '联系方式', key: 'phone', align: 'center', width: '180px' },
        { title: '类型', key: 'sysTypeText', align: 'center', width: '180px' },
        { title: '录入地区', slot: 'address', align: 'center', 'minWidth': 180 },
        { title: '更新时间', slot: 'updateDate', align: 'center', width: '180px' },
        { title: '操作', slot: 'active', align: 'center', width: '100px' }
      ]
    }
  },
  methods: {
    parseTime,
    init (v) {
      this.getInfo(v)
      this.openModal = true
    },
    getInfo (item) {
      getDisCountByIdCardlist({ cardNo: item.cardNo, code: item.code, level: item.level }).then(res => {
        if (res.data.errcode === 0) {
          this.tableList = res.data.data
        } else {
          this.tableList = []
        }
      })
    },
    handleVisibleChange (v) {
      if (!v) {
        this.tableList = []
      }
    },
    handleClick (v) {
      console.log('v>>>', v)
      switch (v.sysType) {
        case '1':
          this.$refs.detailsTemplate1ref.init(v)
          break
        case '2':
          this.$refs.detailsTemplate2ref.init(v)
          break
        case '3':
          this.$refs.detailsTemplate3ref.init(v)
          break
        case '4':
          this.$refs.detailsTemplate4ref.init(v)
          break
        case '5':
          this.$refs.detailsTemplate5ref.init(v)
          break
      }
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
