<template>
  <div>
    <Modal
      v-model="openModal"
      :footer-hide="true"
      :mask-closable="false"
      title="重点人群重复类型统计"
      width="60%"
      @on-visible-change="handleVisibleChange">
      <Alert>
        该人员涉及到多种重点人群类型，去重统计后为{{ count }}种。
      </Alert>
      <Table :columns="columns1" :data="tableList" stripe>
        <template slot="address" slot-scope="{ row, index }">
          {{ row.cityName }}{{ row.areaName }}{{ row.streetName }}{{ row.communityName }}
        </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 { getRepeatTypeStatisticsDetail } from '@/api/repetitiveType'
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: 'KeyTypesDialog',
  components: { DetailsTemplate5, DetailsTemplate4, DetailsTemplate3, DetailsTemplate2, DetailsTemplate1 },
  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: 'sysType', align: 'center', width: '200px' },
        { title: '录入地区', slot: 'address', align: 'center', 'minWidth': 251 },
        { title: '更新时间', slot: 'updateDate', align: 'center', width: '180px' },
        { title: '操作', slot: 'active', align: 'center', width: '100px' }
      ],
      count: 0
    }
  },
  methods: {
    parseTime,
    init (v) {
      this.getInfo(v)
      this.openModal = true
    },
    getInfo (cardNo) {
      getRepeatTypeStatisticsDetail(cardNo).then(res => {
        if (res.data.errcode === 0) {
          this.tableList = res.data.data.list
          this.count = res.data.data.count
        } else {
          this.tableList = []
        }
      }).catch(() => {
        this.tableList = []
      })
    },
    handleVisibleChange (v) {
      if (!v) {
        this.tableList = []
      }
    },
    handleClick (v) {
      // this.$refs.detailsTemplate1ref.init(v)
      switch (v.sysTypeKey) {
        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>
