<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="姓名:" prop="name" style="margin-bottom: 0">
          <Input v-model.trim="formInline.name" :clearable="true" placeholder="请输入姓名" />
        </FormItem>
        <FormItem label="身份证号:" prop="cardNo" style="margin-bottom: 0">
          <Input v-model.trim="formInline.cardNo" :clearable="true" :maxlength="18" placeholder="请输入身份证号" />
        </FormItem>
        <FormItem label="类型名称:" prop="sysType" style="margin-bottom: 0">
          <Select v-model="formInline.sysType" clearable multiple placeholder="请选择类型名称">
            <Option v-for="item in typeList" :key="item.value" :value="item.value">{{ item.label }}</Option>
          </Select>
        </FormItem>
        <FormItem style="margin-bottom: 0">
          <Button type="primary" @click="handleSubmit()">搜索</Button>
          <Button type="primary" style="margin-left: 8px" @click="handleReset()">重置</Button>
        </FormItem>
      </Form>
    </div>
    <Table :columns="columns1" :data="tableList" stripe @on-sort-change="getSortList">
      <template slot="count" slot-scope="{ row, index }">
        <Button style="color: #305cab; font-weight: 600;" type="text" @click="handleClick(row.cardNo)">{{ row.count }}</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"
    />
    <KeyTypesDialog ref="keyTypesRef" />
  </div>
</template>

<script>
import KeyTypesDialog from './components/KeyTypesDialog.vue'
import { getRepeatTypeStatistics } from '@/api/repetitiveType'

export default {
  name: 'repetitiveType',
  components: { KeyTypesDialog },
  data () {
    return {
      formInline: {
        name: '',
        cardNo: '',
        sysType: []
      },
      params: {
        orderType: 0,
        pageNo: 1,
        pageSize: 10,
        totalRecord: 0
      },
      tableList: [],
      columns1: [
        { title: '姓名', key: 'name', align: 'center' },
        { title: '身份证号', key: 'cardNo', align: 'center' },
        { title: '重点人群种类', slot: 'count', align: 'center', sortable: 'custom' },
        { title: '重点人群类型名称', key: 'sysTypeName', align: 'center' }
      ],
      typeList: [
        { label: '”三失一偏“人员', value: '1' },
        { label: '刑满释放人员', value: '2' },
        { label: '严重精神障碍患者', value: '3' },
        { label: '涉重点信访事项人员', value: '4' },
        { label: '涉重点涉法涉诉类矛盾人员', value: '5' }
      ],
      loading: false
    }
  },
  computed: {
    company_id () {
      return this.$store.state.user.severUserInfo.company_id
    },
    company_name () {
      return this.$store.state.user.severUserInfo.company_name
    }
  },
  mounted () {
    this.getList()
  },
  methods: {
    getSortList () {
      const orderTypeList = [0, 1, 2]
      switch (this.params.orderType) {
        case 0:
          this.params.orderType = orderTypeList[1]
          break
        case 1:
          this.params.orderType = orderTypeList[2]
          break
        case 2:
          this.params.orderType = orderTypeList[0]
          break
        default:
          this.params.orderType = orderTypeList[0]
      }
      this.getList()
    },
    getList () {
      this.loading = true
      if (!this.formInline.sysType) this.formInline.sysType = []
      const data = Object.assign({}, this.params, this.formInline)
      getRepeatTypeStatistics(data)
        .then((res) => {
          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
        })
        .finally(() => {
          this.loading = false
        })
    },
    handleSubmit () {
      this.getList()
    },
    handleReset () {
      this.params.orderType = 0
      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.keyTypesRef.init(v)
    }
  }
}
</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>
