<template>
  <el-dialog
    v-dialogDrag
    title="选择代理商"
    :visible.sync="visible"
    append-to-body
    @close="close"
    v-dialogDrag
    :close-on-click-modal="false"
    custom-class="common-dialog over-dialog table-dig "
    width="1100px"
  >
    <el-form :model="paramForm" label-position="left" ref="formRef" label-width="110px" size="mini">
      <el-row :gutter="20">
        <el-col :span="8">
          <el-form-item label="客户编码"><el-input v-model="paramForm.customerNo" placeholder="请输入" /></el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="客户名称"><el-input v-model="paramForm.customerName" placeholder="请输入" /></el-form-item>
        </el-col>
        <el-col :span="2"><el-button @click="doQuery" type="warning" size="mini" icon="el-icon-search">查询</el-button></el-col>
        <el-col :span="2"><el-button type="primary" @click="handleSure" size="mini" icon="el-icon-check">确认</el-button></el-col>
      </el-row>
    </el-form>

    <div class="table-wrap">
      <el-table :data="tableData" ref="tableRef" class="single-select-table" border height="100%" @cell-dblclick="cellDblclick" highlight-current-row size="mini" stripe>
        <el-table-column label="选择" width="50">
          <template slot-scope="scope">
            <el-radio v-model="rowVal" :label="scope.row">&nbsp;</el-radio>
          </template>
        </el-table-column>
        <el-table-column label="序号" width="50" type="index"></el-table-column>
        <el-table-column
          v-for="(item, index) in columns"
          :key="index"
          :prop="item.prop"
          :formatter="formatter"
          :min-width="item.width"
          :label="item.label"
          :fixed="item.fixed"
          :show-overflow-tooltip="item.tooltip"
        ></el-table-column>
      </el-table>
    </div>
    <!-- 分页-->
    <ls-pagination :curr-page.sync="pager.currPage" :page-size.sync="pager.pageSize" :total="pager.total" :page-options="pager.pageOptions" @query="doQuery"></ls-pagination>
  </el-dialog>
</template>

<script>
export default {
  name: 'dig-customer-list',
  created() {
    this.doQuery();
  },
  updated() {
    if (this.$refs.tableRef) {
      this.$refs.tableRef.doLayout();
    }
  },
  data() {
    return {
      visible: false,
      flag: '', //标识
      rowVal: '',
      // 格字段
      columns: [
        { prop: 'customerNo', label: '客户编码', width: 80, fixed: false, tooltip: true },
        { prop: 'customerName', label: '客户名称', width: 80, fixed: false, tooltip: true },
        { prop: 'gradeId', label: '等级', width: 80, fixed: false, tooltip: true },
        { prop: 'areaName', label: '销售区域', width: 80, fixed: false, tooltip: true },
        { prop: 'salesName', label: '业务', width: 80, fixed: false, tooltip: true }
      ],
      tableData: [],
      paramForm: {},
      //分页参数
      pager: {
        currPage: 1,
        pageSize: 10,
        pageOptions: [10, 20, 30, 50],
        total: 0
      }
    };
  },
  methods: {
    doQuery() {
      let param = {
        currPage: this.pager.currPage,
        pageSize: this.pager.pageSize,
        customerNo: this.paramForm.customerNo,
        customerName: this.paramForm.customerName,
        customerClassifyIds: this.customerTypes,
        approveStatus:'audited'
      };
      this.$ajax.post({
        domain: 'crmCmUrl',
        url: 'cmInfo.findAgentCorrelationPage',
        data: JSON.stringify(param),
        requestType: 'body',
        showLoad: true,
        success: function(res) {
          if (res.errorCode === 200) {
            this.tableData = res.data.records || [];
            this.pager.total = res.data.total;
            this.tableData.forEach((item, i) => {
              item.cmFollowList.forEach(item2 => {
                if (item2.whetherMain == 'Y') {
                  item.deptName = item2.deptName;
                  item.salesRepresent = item2.salesRepresent;
                  item.salesName = item2.salesName;
                  item.assistantName = item2.assistantName;
                }
              });
            });
          }
        }.bind(this),
        error: function(res) {
          this.$message.error(res.body.msg || res.msg);
        }.bind(this)
      });
    },
    //默认
    cellDblclick(row, column, cell, event) {
      row.typeId = '';
      this.$emit('selectRow', row, this.flag);
      this.visible = false;
    },
    handleSure() {
      if (!this.rowVal) {
        this.$message('请先选中行数据');
        return;
      }
       this.rowVal.typeId = '';
      this.$emit('selectRow', this.rowVal);
      this.visible = false;
    },
    formatter(row, column, cellValue, index) {
      if (column.property == 'isDefault') {
        return row.isDefault == 1 ? '是' : '否';
      } else if (column.property == 'edi') {
        return row.edi == 1 ? '是' : '否';
      } else {
        return cellValue;
      }
    },
    close() {
      for (let item in this.queryParam) {
        this.queryParam[item] = '';
      }
      this.$refs.tableRef.clearSelection();
      this.visible = false;
    }
  },
  props: ["customerTypes"],
  watch: {
    customerType(newVal, oldVal) {
      if (newVal && newVal.length) {
        console.log("newVal===>",newVal)
        this.doQuery();
      }
    }
  }
};
</script>

<style type="text/css" scoped lang="scss">
.el-dialog.table-dig {
  .item-search {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    .input-div {
      flex: 1;
      display: flex;
      .el-input,
      .el-select {
        margin-right: 10px;
      }
    }
    .btns {
      flex: 1;
      display: flex;
      justify-content: flex-end;
    }
  }
  .table-wrap{
    flex: 1;
    overflow: hidden;
  }
}
</style>
