<template>
  <div>
    <el-dialog :title="title" :close-on-click-modal="false" draggable width="1100px" height="500px" @close="close"
      v-model="visible">
      <div style="height: calc(100% - 80px);">
        <el-form size="small" :inline="true" class="query-form" ref="searchForm" :model="searchForm"
          @submit.native.prevent>
          <!-- 搜索框-->
          <el-form-item label="姓名" prop="name">
            <el-input size="small" v-model="searchForm.name" placeholder="请输入姓名" clearable></el-input>
          </el-form-item>
          <el-form-item label="联系方式1" prop="contactFirst">
            <el-input size="small" v-model="searchForm.contactFirst" placeholder="请输入联系方式1" clearable></el-input>
          </el-form-item>
          <el-form-item label="联系方式2" prop="contactSecond">
            <el-input size="small" v-model="searchForm.contactSecond" placeholder="请输入联系方式2" clearable></el-input>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="list()" size="small" icon="el-icon-search">查询</el-button>
            <el-button @click="resetSearch()" size="small" icon="el-icon-refresh-right">重置</el-button>
          </el-form-item>
        </el-form>

        <vxe-table border="inner" auto-resize resizable height="400px" :loading="loading" size="small"
          ref="projectTable" show-header-overflow show-overflow highlight-hover-row :menu-config="{}" :print-config="{}"
          :sort-config="{ remote: true }" :data="dataList" :row-config="{ isCurrent: true }"
          :checkbox-config="{ trigger: 'row' }">
          <vxe-column type="seq" width="60" title="序号"></vxe-column>
          <vxe-column type="checkbox" width="40px"></vxe-column>
          <vxe-column min-width="160" align="center" title="客户名称" field="clientName"></vxe-column>
          <vxe-column min-width="120" align="center" title="姓名" field="name"></vxe-column>
          <vxe-column min-width="160" align="center" title="部门" field="officeId"></vxe-column>
          <vxe-column min-width="160" align="center" title="职务" field="position"></vxe-column>
          <vxe-column min-width="160" align="center" title="联系方式1" field="contactFirst"></vxe-column>
          <vxe-column min-width="160" align="center" title="联系方式2" field="contactSecond"></vxe-column>

        </vxe-table>
        <vxe-pager background size="small" :current-page="tablePage.currentPage" :page-size="tablePage.pageSize"
          :total="tablePage.total" :page-sizes="[10, 20, 100, 1000, { label: '全量数据', value: 1000000 }]"
          :layouts="['PrevPage', 'JumpNumber', 'NextPage', 'FullJump', 'Sizes', 'Total']"
          @page-change="currentChangeHandle">
        </vxe-pager>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button size="small" @click="close()" icon="el-icon-circle-close">关闭</el-button>
          <el-button size="small" type="primary" v-if="method != 'view'" @click="getProgram()"
            icon="el-icon-circle-check" v-noMoreClick>确定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import projectRecordsService from '@/api/cw/projectRecords/ProjectRecordsService'
export default {
  data() {
    return {
      title: '联系人选择',
      method: '',
      visible: false,
      loading: false,
      tablePage: {
        total: 0,
        currentPage: 1,
        pageSize: 10,
        orders: []
      },
      dataList: [],
      searchForm: {
        contractId: '', // 合同id
        name: '',
        sex: '',
        officeId: '',
        position: '',
        contactFirst: '',
        contactSecond: ''
      },
      checkType: '',
      detail: '',
      num: true // num为true是多选，false是单选
    }
  },
  created() {
  },
  components: {
  },
  methods: {
    /**
     * @param contractId 合同id
     */
    init(contractId) {
      console.log(contractId)
      if (this.commonJS.isEmpty(contractId)) {
        this.$message.error('请先选择合同信息')
        return
      }
      this.searchForm.contractId = contractId
      this.visible = true
      this.list()
    },
    // 表单提交
    getProgram() {
      let rows
      if (this.commonJS.isEmpty(this.$refs.projectTable.getCheckboxRecords())) {
        this.$message.error('请至少选择一条数据')
        return
      }
      if (this.num === false) {
        if (this.$refs.projectTable.getCheckboxRecords().length > 1) {
          this.$message.error('最多选择一条数据')
          return
        }
      }
      rows = this.$refs.projectTable.getCheckboxRecords()
      this.close()
      this.$emit('getProgram', rows)
    },
    list() {
      this.loading = true
      projectRecordsService.getContractClientList({
        'current': this.tablePage.currentPage,
        'size': this.tablePage.pageSize,
        'orders': this.tablePage.orders,
        ...this.searchForm
      }).then((data) => {
        this.dataList = data.records
        this.tablePage.total = data.total
        this.loading = false
      })
    },
    // 当前页
    currentChangeHandle({ currentPage, pageSize }) {
      this.tablePage.currentPage = currentPage
      this.tablePage.pageSize = pageSize
      this.list()
    },
    resetSearch() {
      this.$refs.searchForm.resetFields()
      this.list()
    },
    close() {
      this.detail = ''
      this.visible = false
    }
  }
}
</script>
<style>
.messageZindex {
  z-index: 9999 !important;
}
</style>
