<template>
  <el-dialog title="拜访列表" :visible.sync="visible" :append-to-body="isDialog" width="1000px" @close="close"
    :close-on-click-modal="false" v-dialogDrag custom-class="common-dialog over-dialog item-dialog ">
    <div class="item-search">
      <div class="input-div">
        <el-input  size="small" v-model="queryParam.customer"  @keyup.enter.native="toQueryCustomer" placeholder="请输入客户名称" />
        <el-input  size="small" v-model="queryParam.visitSubject"  @keyup.enter.native="toQueryCustomer" placeholder="请输入拜访主题" />
      <el-date-picker style="margin-right: 10px;" @change="timeData"  v-model="timeDatas" type="daterange" size="small"
            clearable range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"
            value-format="timestamp" :default-time="['00:00:00', '23:59:59']" :picker-options="pickerOptions">
        </el-date-picker>
        <el-input  size="small" v-model="queryParam.visitCode"  @keyup.enter.native="toQueryCustomer" placeholder="请输入拜访编号" />
      </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%" highlight-current-row size="mini"
      stripe @cell-dblclick="cellDblclick" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="50">
      </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>
    <!-- 分页-->
    <el-pagination @size-change="pagerHandleSizeChange" @current-change="pagerHandleCurrentChange"
      :current-page="pager.currPage" :page-sizes="pager.pageOptions" :page-size="pager.pageSize" :total="pager.totalRow"
      layout="total, sizes, prev, pager, next, jumper">
    </el-pagination>
  </el-dialog>
</template>

<script>
  export default {
    name: 'cite-visits',
    props: {
      isDialog: {
        type: Boolean,
        default: false,
        required: false
      }
    },
    created() {
      this.queryCustomer();
    },
   
    methods: {
      toQueryCustomer() {
        this.queryParam.customerId =  this.queryParam.customerId
        this.pager.curPage = 1
        this.queryCustomer(this.customerId)
      },
      queryCustomer(customerId) {
        if(customerId!=null&&customerId!=''){
          this.queryParam.customerId = customerId;
          this.customerId = customerId;
        }else{
          this.customerId = '';
          this.queryParam.customerId = '';
        }
        console.log("this.queryParam.customerId===>",this.queryParam.customerId)
        let projectParam = {
          currPage: this.pager.curPage,
          pageSize: this.pager.pageSize,
          queryParam: {
            unDraftFlag: 'draft',
            visitCode:this.queryParam.visitCode,
            customer:this.queryParam.customer,
            customerId:this.queryParam.customerId,
            visitSubject:this.queryParam.visitSubject,
            createStartTime:this.queryParam.createStartTime,
            createEndTime:this.queryParam.createEndTime,
            createrId:'byUid'
          }
        }
        this.$ajax.post({
          domain: 'crmUrl',
          url: 'visit.visitReportListByStatus',
          data: projectParam,
          requestType: 'body',
          showLoad: true,
          success: function(res) {
            if (res.errorCode === 200) {
              this.pager.totalRow = res.data.total || 0;
              this.tableData = res.data.records || [];
            }
          }.bind(this),
          error: function(res) {
            this.$message({
              type: 'error',
              message: res.body.msg || res.msg
            })
          }.bind(this)
        })
      },
      //选中的数据
      handleSelectionChange(val) {
        console.log("val===>",val)
        this.visitList = val
      },

      //选中的数据
      handleSelectionChange(val) {
        this.visitList = []
        let arr = val
        let arr2 = this.visitList
          for (var i = 0; i < arr.length; i++) {
                arr2.push(arr[i])
          }
          this.visitList = arr2
      },

      // 双击选中行
     cellDblclick(row, column, cell, event){
       this.$emit('visitrow', [row]);
       this.visible = false;
     },
      // 变更页面显示数量
      pagerHandleSizeChange(val) {
        this.pager.pageSize = val;
        this.queryCustomer(this.customerId);
      },
      // 变更当前页面
      pagerHandleCurrentChange(val) {
        this.pager.curPage = val;
        this.queryCustomer(this.customerId);
      },
      handleSure() {
        if (this.visitList===null||this.visitList.length===0) {
          this.$message('请选择数据!');
          return;
        }
        let newarr= this.unique(this.visitList);
        console.log("newarr=>",newarr)
        this.$emit('visitrow', newarr);
      },
      //时间范围
      timeData() {
        if (this.timeDatas == "" || this.timeDatas == undefined) {
            this.queryParam.createStartTime = ""
            this.queryParam.createEndTime = ""
        } else {
          this.queryParam.createStartTime = this.timeDatas[0]
          this.queryParam.createEndTime = this.timeDatas[1]
        }
      },
      unique(arr) {
       const res = new Map();
       return arr.filter((arr) => !res.has(arr.id) && res.set(arr.id, 1));
      },
      close(){
        this.$refs.tableRef.clearSelection()
      }

    },
    data() {
      return {
        timeDatas: [],
        visible: false,
        rowVal: '',
        // 格字段
        columns: [{
            label: '客户名称',
            prop: 'customer',
            width: '120',
            fixed: false
          },
          {
            label: '拜访编号',
            prop: 'visitCode',
            width: '110',
            fixed: false
          },
          // {
          //   label: '拜访时间',
          //   prop: 'visitDate',
          //   width: '100',
          //   fixed: false
          // },
          {
            label: '创建时间',
            prop: 'createTime',
            width: '100',
            fixed: false
          },
          {
            label: '拜访主题',
            prop: 'visitSubject',
            width: '100',
            fixed: false
          },
        ],
        tableData: [],
        visitList:[],
        customerId:'',
        queryParam: {
          customer: '',
          customerId:'',
          visitCode: '',
          createStartTime:'',
          createEndTime:'',
        },
        pager: {
          curPage: 1,
          pageSize: 10,
          pageOptions: [10, 20, 30],
          totalRow: 0
        },
        pickerOptions: {
              disabledDate(time) {
                const _now = new Date(new Date().getFullYear(), new Date().getMonth(), new Date().getDate() + 1, 0, 0, 0).getTime()
                const seven = 6 * 24 * 60 * 60 * 1000
                const sevenDays = _now + seven
                return time.getTime() < _now || time.getTime() > sevenDays // 限制日期间隔最大7天且需大于当天
              }
        },

      }
    },

  }
</script>

<style type="text/css" lang="scss">
  .el-dialog {
    .item-search {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 10px;

      .input-div {
        display: flex;
        flex: 1;

        .el-input,
        .el-select {
          margin-right: 10px;
        }
        .el-date-editor{
          min-width: 250px;
          .el-range-separator{
            width: unset;
          }
        }
      }
    }

  }
</style>
