<template>
  <el-dialog title="拜访列表" :visible.sync="visible" :append-to-body="isDialog" width="1000px"
    :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.visitCode"  @keyup.enter.native="toQueryCustomer" placeholder="请输入拜访编号" />
        <el-input size="small" v-model="queryParam.visitSubject"  @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"  border height="100%" highlight-current-row size="mini"
      stripe @cell-dblclick="cellDblclick">

      <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>
    <!-- 分页-->
    <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>
    <!-- <ls-pagination :pager.sync="pager"  @query="queryCustomer"></ls-pagination> -->
  </el-dialog>
</template>

<script>
  export default {
    name: 'vivst-list',
    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
          }
        }
        // Object.assign(param, this.queryParam);
        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)
        })
      },
      // 双击选中行
     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.rowVal) {
          this.$message('请双击行选择数据');
          return;
        }
        console.log(this.rowVal)
        this.$emit('visitrow', this.rowVal);
        this.visible = false;
      },

    },
    data() {
      return {
        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: 'visitSubject',
            width: '100',
            fixed: false
          },
        ],
        tableData: [],
        customerId:'',
        queryParam: {
          customer: "",
          customerId:"",
          visitCode: "",
        },
        pager: {
          curPage: 1,
          pageSize: 10,
          pageOptions: [10, 20, 30],
          totalRow: 0
        },

      }
    },

  }
</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;

        .el-input,
        .el-select {
          margin-right: 10px;
        }
      }
    }

  }
</style>
