<template>
    <div>
        <Modal :title="modalTitle" v-model="modalShow" :width="modalWidth" @on-ok="saveOption" :mask-closable="false" :closable="false">
            <Form :model="searchObj" inline >
                <FormItem>
                    <Input v-model="searchObj.card_no" class="search-input" clearable placeholder="请输入身份证号"/>
                </FormItem>
                <FormItem>
                    <Button class="search-btn" type="primary" @click="searchAction">
                        <Icon type="ios-search"/>
                        搜索
                    </Button>
                </FormItem>
            </Form>
            <!-- <div v-if="oneShow">
                选择人员：
                <Tag type="border" closable color="primary" @on-close="handleClose"
                     v-for="(item,index) in tableNewData" :key="index">{{item.nickname}}
                </Tag>
            </div> -->
            <vxe-table
                    ref="xTable"
                    border
                    resizable
                    highlight-hover-row
                    size="medium"
                    :loading="tableLoading"
                    align="center"
                    header-align="center"
                    :sort-config="{trigger: 'cell'}"
                    :data="tableData">
                <vxe-table-column type="seq" title="编号" min-width="60"></vxe-table-column>
                <vxe-table-column field="user_id" title="用户id" v-if="false"></vxe-table-column>
                <vxe-table-column field="nickname" title="用户" min-width="200"></vxe-table-column>
                <vxe-table-column field="card_no" title="身份证号" min-width="200"></vxe-table-column>
                <vxe-table-column field="mobile" title="手机号" min-width="200"></vxe-table-column>
                <vxe-table-column title="操作" min-width="107">
                    <template v-slot="{row}">
                        <Button type="error" size="small" ghost
                                @click="chooseAction(row)" class="btn-style">选择
                        </Button>
                    </template>
                </vxe-table-column>
            </vxe-table>
            <Row type="flex" justify="end">
                <Page show-sizer show-total :current="pageObj.pageNo" :page-size="pageObj.pageSize"
                      :total="pageObj.totalRecord"
                      @on-change="getPageNo" :page-size-opts="[10,20,50,100]" @on-page-size-change="pageSizeChange"/>
            </Row>
        </Modal>
    </div>
</template>

<script>
import { getUser } from '@/api/system'
export default {
  name: 'optionModal',
  props: {
    modalTitle: {
      type: String,
      default: () => {
        return ''
      }
    },
    modalType: {
      type: String,
      default: () => {
        return 'info'
      }
    },
    modalWidth: {
      type: Number,
      default: () => {
        return 800
      }
    }
  },
  data () {
    return {
      user_id: '',
      card_no: '',
      nickname: '',
      modalShow: false,
      searchObj: {},
      pageObj: {
        pageNo: 1,
        pageSize: 10,
        totalRecord: 0
      },
      tableLoading: false,
      tableData: [],
      tableNewData: [],
      oneShow: false
    }
  },
  methods: {
    newData () {
      this.tableNewData = []
      this.oneShow = false
    },
    searchAction () {
      this.pageObj.pageNo = 1
      this.init()
    },

    init () {
      let param = {
        card_no: this.searchObj.card_no,
        pageSize: this.pageObj.pageSize,
        pageNo: this.pageObj.pageNo
      }
      getUser(param).then(ret => {
        if (ret.data.errcode === 0) {
          this.tableData = ret.data.data.results
          this.pageObj.totalRecord = ret.data.data.totalRecord
        } else {
          this.$Message.error('数据获取错误' + ret.data.errmsg)
        }
      })
    },
    pageSizeChange (pageSize) {
      this.pageObj.pageSize = pageSize
      this.init()
    },
    getPageNo (pageNo) {
      this.pageObj.pageNo = pageNo
      this.init()
    },
    handleClose (checked, id) {
      let index = -1
      this.tableNewData.forEach((item, i) => {
        if (item.user_id === id) {
          index = i
        }
      })
      this.tableNewData.splice(index, 1)
      this.user_id = ''
      this.card_no = ''
      this.nickname = ''
      this.oneShow = false
    },
    chooseAction (row) {
      // if (this.tableNewData.some(som => som.user_id === row.user_id)) {
      //   this.$Message.warning('正在选此人员')
      // } else if (this.tableNewData.length > 0) {
      //   this.$Message.warning('只能选择一名人员')
      // } else {
      //   this.tableNewData.push(row)
      //   this.user_id = this.tableNewData[0].user_id
      //   this.nickname = this.tableNewData[0].nickname
      //   this.card_no = this.tableNewData[0].card_no
      //   this.oneShow = true
      //   this.$Message.success('选择成功')
      // }
      console.log(row.nickname, 'row')
      this.$emit('saveOption', row.user_id, row.nickname, row.card_no)
    },
    modalAction () {
      this.modalShow = !this.modalShow
    },
    saveOption () {
      this.$emit('saveOption', this.user_id, this.nickname, this.card_no)
    },
    success (val) {
      val = this.$common.xeUtils.isEmpty(val) ? '操作成功' : val
      this.$Message.success(val)
    },
    error (data) {
      this.$Message.error({
        content: '操作失败,\n' + data.errmsg
      })
    }
  },
  mounted () {
    this.init()
  },
  watch: {
  },
  computed: {}
}
</script>

<style scoped lang="less">
</style>
