<template>
  <el-dialog title="客户选择" :visible.sync="showFlag" modal width="80%" center>
    <el-form :model="queryParams" ref="queryForm" size="small" inline label-width="68px">
      <el-form-item label="客户编码" prop="clientCode">
        <el-input v-model="queryParams.clientCode" placeholder="请输入客户编码" clearable @keyup.enter.native="handleQuery"/>
      </el-form-item>
      <el-form-item label="客户名称" prop="clientName">
        <el-input v-model="queryParams.clientName" placeholder="请输入客户名称" clearable @keyup.enter.native="handleQuery"/>
      </el-form-item>
      <el-form-item label="客户简称" prop="clientNick">
        <el-input v-model="queryParams.clientNick" placeholder="请输入客户简称" clearable @keyup.enter.native="handleQuery"/>
      </el-form-item>
      <el-form-item label="英文名称" prop="clientEn">
        <el-input v-model="queryParams.clientEn" placeholder="请输入客户英文名称" clearable @keyup.enter.native="handleQuery"/>
      </el-form-item>
      <el-form-item label-width="0">
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>
    <el-table v-loading="loading" :data="list" ref="multipleTable" @select-all="onSelectAll" @select="onSelect" @row-dblclick="handleRowDbClick">
      <el-table-column type="selection"/>
      <el-table-column label="客户编码" prop="clientCode"/>
      <el-table-column label="客户名称" width="150px" prop="clientName" :show-overflow-tooltip="true"/>
      <el-table-column label="客户简称" prop="clientNick"/>
      <el-table-column label="客户类型" prop="clientType">
        <dict-tag slot-scope="{row}" :options="dict.type['mes_client_type']" :value="row.clientType"/>
      </el-table-column>
      <el-table-column label="客户电话" prop="tel"/>
      <el-table-column label="联系人" prop="contact1"/>
      <el-table-column label="联系人-电话" prop="contact1Tel"/>
      <el-table-column label="是否启用" prop="enableFlag">
        <dict-tag slot-scope="{row}" :options="dict.type['sys_yes_no']" :value="row.enableFlag"/>
      </el-table-column>
    </el-table>
    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList"/>
    <div slot="footer">
      <el-button type="primary" @click="confirmSelect">确 定</el-button>
      <el-button @click="showFlag = false">取 消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { listClient } from '@/api/mes/md/client'

export default {
  name: 'ClientSelector',
  dicts: ['sys_yes_no', 'mes_client_type'],
  data() {
    return {
      showFlag: false,
      loading: false,
      queryParams: { pageNum: 1, pageSize: 10 },
      total: 0,
      list: [],
      selectedRows: null
    }
  },
  created() {
    this.getList()
  },
  methods: {
    /** 查询物料编码列表 */
    getList() {
      this.loading = true
      listClient(this.queryParams).then(response => {
        this.list = response.rows
        this.total = response.total
      }).finally(() => this.loading = false)
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1
      this.getList()
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm('queryForm')
      this.handleQuery()
    },
    onSelect(rows, row) {
      this.$refs.multipleTable.clearSelection()
      this.$refs.multipleTable.toggleRowSelection(row)
      this.selectedRows = row
    },
    onSelectAll() {
      this.$refs.multipleTable.clearSelection()
      this.selectedRows = null
    },
    handleRowDbClick(row) {
      if (row) {
        this.selectedRows = row
        this.$emit('onSelected', this.selectedRows)
        this.showFlag = false
      }
    },
    //确定选中
    confirmSelect() {
      if (!this.selectedRows) {
        return this.$notify({title: '提示',type: 'warning',message: '请至少选择一条数据!'})
      }
      this.$emit('onSelected', this.selectedRows)
      this.showFlag = false
    }
  }
}
</script>
