<template>
  <el-dialog
    v-dialogDrag
    title="客户"
    :visible.sync="visible"
    append-to-body
    @open="open"
    @close="close"
    v-dialogDrag
    :close-on-click-modal="false"
    custom-class="common-dialog"
    width="1100px">
    <el-form label-position="left"  size="small"
      label-width="80px" @submit.native.prevent >
      <el-row :gutter="5">
        </common-select>
        <el-col :span="6">
          <el-form-item label="客户名称"   >
           <el-input v-model="queryParam.customerName"
            v-inputFilter:trim
            @keyup.enter.native="doQuery(1)"
            placeholder="请输入" />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="客户属性"   >
            <common-select
             v-model="queryParam.customerClassifyId"
             dict-type="Crm_Customer_Type" >
            </common-select>
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item label="客户集团"   >
            <common-select
             v-model="queryParam.groupId"
             dict-type="Crm_Group_Company" >
            </common-select>
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item label="销售人员"   >
           <el-input v-model="queryParam.salesName"
            v-inputFilter:trim
            @keyup.enter.native="doQuery(1)"
            placeholder="请输入" />
          </el-form-item>
        </el-col>
        <el-col :span="2">
          <el-button @click="doQuery(1)"
            class="fr"
            size="small" type="warning">查询</el-button>
        </el-col>
      </el-row>
    </el-form>
    <div class="table-wrap">
      <el-table :data="tableData"
      ref="tableRef"
      border height="300px"
      highlight-current-row size="mini" stripe>
        <el-table-column label="序号" width="50" type="index">
          <template  slot-scope="scope">
            {{ (pager.currPage - 1) * pager.pageSize + scope.$index+1 }}
          </template>
        </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-cm',
  created() {
    // this.doQuery();
  },
  methods: {
    open(){
      // this.doQuery();
    },
    doQuery(current){
      if ( typeof current != 'undefined') {
         this.pager.currPage = current;
      }
      let valid = Object.values(this.queryParam).every(item => item == '');
      if(valid){
        this.$message('查询条件为空!');
        return;
      }
      let param = {
        currPage: this.pager.currPage,
        pageSize: this.pager.pageSize,
      };
      param = Object.assign(param, this.queryParam);
      this.$ajax.post({
        domain: 'crmCmUrl',
        url: 'cmInfo.findCmInfoSimplifyPage',
        data: param,
        requestType: 'body',
        showLoad: true,
        success: function(res) {
          if (res.errorCode === 200) {
            this.tableData = res.data.records || [];
            this.tableData.forEach(item=>{
              if(item.cmFollowList && item.cmFollowList.length){
                item.deptName = item.cmFollowList[0].deptName;
                item.salesName = item.cmFollowList[0].salesName;
                item.assistantName = item.cmFollowList[0].assistantName;
                item.salesRepresent = item.cmFollowList[0].salesRepresent;
              }
            })
            this.pager.total = res.data.total;
          }
        }.bind(this),
        error: function(res) {
          this.$message.error(res.body.msg || res.msg);
        }.bind(this)
      });
    },
    formatter(row, column, cellValue, index) {
      if (column.property == 'isDefault') {
        return row.isDefault == 1 ? '是' : '否';
      } else {
        return cellValue;
      }
    },
    close() {
      this.visible = false;
    }
  },
  props: [],
  data() {
    return {
      visible: false,
      queryParam: {
        customerName: '',
        salesName: '',
        customerClassifyId: '',
        groupId: '',
      },
      columns: [
        { prop: 'customerNo', label: '客户编码', width: 80, fixed: false, tooltip: true },
        { prop: 'customerName', label: '客户名称', width: 80, fixed: false, tooltip: true },
        { prop: 'customerClassify', label: '客户归属', width: 80, fixed: false, tooltip: true },
        { prop: 'groupName', label: '客户集团', width: 80, fixed: false, tooltip: true },
        { prop: 'deptName', label: '销售部门', width: 150, fixed: false, tooltip: true},
        { prop: 'salesName', label: '销售人员', width: 80, fixed: false, tooltip: true },
        { prop: 'salesRepresent', label: '销售代表', width: 80, fixed: false, tooltip: true },
        { prop: 'assistantName', label: '商务', width: 80, fixed: false, tooltip: true },
      ],
      tableData: [],
      pager: {
        currPage: 1,
        pageSize: 10,
        pageOptions: [10, 20, 30, 50],
        total: 0
      },

    };
  },

};
</script>

<style type="text/css" scoped lang="scss">
/deep/.el-table .el-table__body td {
  cursor: default;
}
</style>
