<template>
  <div class="contradiction-div">
    <div class="search-div">
      <Form
        ref="formInline"
        :label-width="70"
        :model="formInline"
        inline
        label-position="left"
        size="large"
      >
        <FormItem label="姓名:" rop="name" style="margin-bottom: 0">
          <Input v-model.trim="formInline.name" :clearable="true" :maxlength="20" placeholder="请输入姓名" />
        </FormItem>
        <FormItem label="身份证号:" prop="cardno" style="margin-bottom: 0">
          <Input v-model.trim="formInline.cardno" :clearable="true" :maxlength="18" placeholder="请输入身份证号" />
        </FormItem>
        <FormItem style="margin-bottom: 0">
          <Button type="primary" @click="handleSubmit()">搜索</Button>
          <Button style="margin-left: 8px" @click="handleReset()">重置</Button>
        </FormItem>
      </Form>
    </div>
    <Table :columns="columns1" :data="tableList" stripe @on-sort-change="getSortList">
      <template slot="recordCount" slot-scope="{ row, index }">
        <Button style="color: #305cab; font-weight: 600;" type="text" @click="handleClick(row)">{{ row.recordCount }}</Button>
      </template>
    </Table>
    <Page
      :current="params.pageNo"
      :page-size="params.pageSize"
      :show-sizer="true"
      :show-total="true"
      :total="params.totalRecord"
      class="page_style"
      @on-change="changePageNo"
      @on-page-size-change="changePageSize"
    />
    <KeyPointPeopleDialog ref="keyPointPeopleRef" />
  </div>
</template>

<script>
import KeyPointPeopleDialog from '@/view/people-info/duplicateEntry/components/KeyPointPeopleDialog.vue'
import { getDisCountByIdCardPage } from '@/api/duplicateEntry'

export default {
  name: 'duplicateEntry',
  components: { KeyPointPeopleDialog },
  data () {
    return {
      formInline: {
        name: '',
        cardno: ''
      },
      params: {
        orderBy: undefined,
        pageNo: 1,
        pageSize: 10,
        totalRecord: 0
      },
      tableList: [],
      columns1: [
        { title: '姓名', key: 'name', align: 'center' },
        { title: '身份证号', key: 'cardNo', align: 'center' },
        { title: '录入次数', slot: 'recordCount', align: 'center', sortable: 'custom' }
      ],
      loading: false
    }
  },
  computed: {
    companyId () {
      return this.$store.state.user.severUserInfo.company_id
    },
    level () {
      return this.$store.state.user.severUserInfo.company_grade
    }
  },
  mounted () {
    this.getList()
  },
  methods: {
    getSortList () {
      const orderTypeList = [undefined, 'countAsc', 'countDesc']
      switch (this.params.orderBy) {
        case undefined:
          this.params.orderBy = orderTypeList[1]
          break
        case 'countAsc':
          this.params.orderBy = orderTypeList[2]
          break
        case 'countDesc':
          this.params.orderBy = orderTypeList[0]
          break
        default:
          this.params.orderBy = orderTypeList[0]
      }
      this.getList()
    },
    getList () {
      this.loading = true
      const data = Object.assign({}, this.params, this.formInline, {
        code: this.companyId,
        level: this.level
      })
      getDisCountByIdCardPage(data)
        .then((res) => {
          if (res.data && res.data.errcode === 0) {
            this.tableList = res.data.data.results
            this.params.pageNo = res.data.data.pageNo
            this.params.pageSize = res.data.data.pageSize
            this.params.totalRecord = res.data.data.totalRecord
          } else {
            this.tableList = []
            this.params.pageNo = 1
            this.params.pageSize = 10
            this.params.totalRecord = 0
          }
        })
        .finally(() => {
          this.loading = false
        })
    },
    handleSubmit () {
      this.getList()
    },
    handleReset () {
      this.$refs.formInline.resetFields()
      this.handleSubmit()
    },
    changePageNo (pageNo) {
      if (pageNo) this.params.pageNo = pageNo
      this.handleSubmit()
    },
    changePageSize (pageSize) {
      this.params.pageSize = pageSize
      this.changePageNo()
    },
    handleClick (v) {
      this.$refs.keyPointPeopleRef.init({ ...v, code: this.companyId, level: this.level })
    }
  }
}
</script>

<style lang="less" scoped>
.contradiction-div {
  padding: 10px;
  .search-div {
    width: 100%;
    padding: 15px 30px 15px 15px;
    border: 1px solid skyblue;
    border-radius: 5px;
    background-color: #f6fdfd;
    margin-bottom: 15px;
  }
}
.text-b {
  font-weight: 600;
}
.page_style {
  margin-top: 10px;
  text-align: right;
}
</style>
