<template>

  <el-dialog  title="客户" :visible.sync="visible" :append-to-body="isDialog" @close="close" @open="open" width="1000px"
     v-dialogDrag :close-on-click-modal="false" custom-class="common-dialog over-dialog item-dialog ">
    <div class="item-search">
      <div class="input-div">
        <el-input size="small" v-model="queryParam.customerFullName" v-inputFilter:trim
           @keyup.enter.native="toQueryCustomer"  placeholder="请输入客户名称" clearable />
        <el-input size="small" v-model="queryParam.customerNo" v-inputFilter:trim
           @keyup.enter.native="toQueryCustomer"   placeholder="请输入客户编号" clearable />
        <common-select v-model="queryParam.customerStatus"
                       placeholder="请选择客户状态"
                       dictType="data_permission_customer_status" >
        </common-select>
        <el-select v-model="queryParam.customerType"  size="small"
             placeholder="请选择客户类型" clearable >
           <el-option
             v-for="item in customerTypelList"
             :key="item.key"
             :label="item.key"
             :value="item.key">
           </el-option>
         </el-select>
      </div>
      <div>
        <el-button type="primary" @click="toQueryCustomer" size="mini">查询</el-button>
        <el-button type="warning" @click="handleSure" size="mini">确认</el-button>
      </div>
    </div>

      <el-table :data="tableData"
         ref="tableRef"
         border  height="100%"  @cell-dblclick="cellDblclick"
         highlight-current-row size="mini" stripe >
         <!-- <el-table-column width="60" type="selection">
         </el-table-column> -->

         <el-table-column label="选择" width="60" fixed>
           <template slot-scope="scope">
             <el-radio v-model="rowVal" :label="scope.row">&nbsp;</el-radio>
           </template>
         </el-table-column>

        <el-table-column
          v-for="(item,index) in columns"
          :key="index"
          :prop="item.prop"
          :min-width="item.width"
          :label="item.label"
          :fixed="item.fixed"
          :formatter="item.format">
        </el-table-column>
      </el-table>
      <!-- 分页-->
      <ls-pagination :pager.sync="pager"  @query="queryCustomer"></ls-pagination>

  </el-dialog>
</template>

<script>
    import commonSelect from '@/common/commonSelectList.js'
    export default {
        name: 'dialog-customer',
        props: {
          isDialog: {
              type: Boolean,
              default: false,
              required: false
          },
          ismult: { //是否多选
            type: Boolean,
            default: false
          },
          notStatusList:{
            type:Array,
            required: false
          },
          customerType: {
            type: String,
            default: '',
          },

        },
        created(){
          this.getDictList();
          this.queryCustomer();
        },
        updated(){
          if(this.$refs.tableRef){
            this.$refs.tableRef.doLayout();
          }
        },
        methods: {

            //获取数字字典下拉框数据
            async getDictList(){
              this.customerTypelList = await commonSelect.initDictDataPost(this, 'Crm_Customer_Type');
            },
            toQueryCustomer () {
              this.pager.curPage = 1;
              this.queryCustomer();
            },
            queryCustomer () {
                let param = {
                  busSystem: 'cloud-crm-project',
                  currPage: this.pager.curPage,
                  pageSize: this.pager.size,
                  notStatusList:this.notStatusList,
                  uid: this.$common.getUrlParams('uid') || '',
                }
                Object.assign(param, this.queryParam);
                this.$ajax.post({
                    domain: 'dataQueryUrl',
                    url: 'bus.crmCustomerListPage',
                    data: param,
                    requestType: 'body',
                    showLoad: true,
                    success: function (res) {
                        if (res.errorCode === 200) {
                            this.pager.totals = res.data.totalCount || 0;
                            this.tableData = res.data.list || [];
                        }
                    }.bind(this),
                    error: function (res) {
                       this.$message({
                         type: 'error',
                         message: res.body.msg || res.msg
                       })
                    }.bind(this)
                })
            },
            cellDblclick(row, column, cell, event){
              this.$emit('setCustValue', row);
              this.visible = false;
            },
            handleSure(){
              // let selectRows = this.$refs.tableRef.selection;
              // if(!selectRows.length){
              //   this.$message('请先选中行数据');
              //   return;
              // }else if(this.ismult){
              //   this.$emit('setCustValue', selectRows);
              //   this.visible = false;
              //   return;
              // } else if(!this.ismult && selectRows.length >1){
              //    this.$message('不支持多选行数据');
              //    return;
              // }

              if (!this.rowVal) {
                this.$message('请双击行或选择数据');
                return;
              }
              this.$emit('setCustValue', this.rowVal);
              // this.$emit('setCustValue', selectRows[0]);
              this.visible = false;
            },
            open(){
              if(this.customerType){
                let ct = this.customerType;
                this.customerTypelList.forEach(item=>{
                  if(ct === item.vaule){
                    ct = item.key;
                  }
                })
                this.queryParam.customerType = ct;
                this.toQueryCustomer();
              }
            },
            close(){
              this.$refs.tableRef.clearSelection();
              this.visible = false;
            },

        },
        data () {
            return {
               rowVal: '',
                visible: false,
               // 格字段
                columns: [
                   {label: '客户全称', prop: 'customerFullName', width: '120', fixed: false},
                   {label: '客户编号', prop: 'customerNo', width: '110', fixed: false},
                   {label: '客户状态', prop: 'customerStatus', width: '100', fixed: false},
                   // {label: '客户等级', prop: 'customerGrade', width: '100', fixed: false},
                   {label: '客户类型', prop: 'customerType', width: '100', fixed: false},
                ],

                tableData: [],
                customerTypelList: [], //客户类型数据列表

                queryParam: {
                  customerFullName: "",
                  customerNo:  "",
                  customerStatus: "",
                  customerType: "",
                },

                //分页参数
                pager: {
                  curPage: 1,
                  size: 10,
                  pageOptions: [10, 20, 30],
                  totals: 0
                },

            }
        },

    }
</script>

<style type="text/css" scoped  lang="scss">
  .el-dialog {
    .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;
        }
      }
    }

  }

</style>
