<template>
  <el-dialog :title="openTitle" :visible.sync="visible" v-dialogDrag @open="open" @close="handleClose" custom-class="common-dialog over-dialog item-dialog"
    :close-on-click-modal="false" width="90%">
    <div class="ls-search-form">
      <div class="search-style">
        <el-row :gutter="10">
          <el-col :span="4">
            <label>客户名称</label>
            <el-input v-model="queryParam.customerName" placeholder="请输入" class="el-input--small" @keyup.enter.native="doSearch"></el-input>
          </el-col>
          <el-col :span="4">
            <label>项目名称</label>
            <el-input v-model="queryParam.projectOrVisitName" placeholder="请输入" class="el-input--small" @keyup.enter.native="doSearch"></el-input>
          </el-col>
          <el-col :span="4">
            <label>责任人</label>
            <el-input v-model="queryParam.taskUser" placeholder="请输入" class="el-input--small" @keyup.enter.native="doSearch"></el-input>
          </el-col>
          <el-col :span="4">
            <label>发起人</label>
            <el-input v-model="queryParam.creater" placeholder="请输入" class="el-input--small" @keyup.enter.native="doSearch"></el-input>
          </el-col>
          <el-col :span="8">
            <label>时间范围</label>
            <el-date-picker v-model="tiem" size="mini" type="daterange" clearable range-separator="至" start-placeholder="开始日期"
              end-placeholder="结束日期" value-format="yyyy-MM-dd HH:mm:ss" @change="timeData">
            </el-date-picker>
          </el-col>
        </el-row>
      </div>
      <div class="btns-wrap">
        <el-button type="warning" size="mini"  @click="doSearch">查询</el-button>
        <el-button type="info" size="mini" plain @click="reset">重置</el-button>
        <el-button type="primary" size="mini"  @click="addProject">确定</el-button>
      </div>
    </div>
    <!-- <div class="ls-table-warp"> -->
      <el-table class="todo-table dic-table" size="mini"  stripe border @selection-change="handleSelectionChange"
        height="100%"   :data="reportData" ref="multipleTable">
        <el-table-column type="selection" width="50">
        </el-table-column>
         <el-table-column type="index" label="序号" width="60" show-overflow-tooltip></el-table-column>
        <el-table-column v-for="(item,index) in colunms" :key="index" :prop="item.prop" :label="item.label"
          :min-width="item.width" :show-overflow-tooltip="item.tooltip" :fixed="item.fixed">
        </el-table-column>
      </el-table>
    <!-- </div> -->
    <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>
  import commonSelect from '../../../../components/common-select.vue'
  import commonSelectList from '../../../../common/commonSelectList.js'
  export default {
    name: "dialog-task-list",
    components: {
      commonSelect,
    },
    mounted: function() {

    },
    computed: {
      sid() {
        return this.$common.getUrlParams('sid');
      }
    },
    created() {
      this.midrangeData()
      this.tabtdata()
    },
    methods: {
      async midrangeData() {
        this.taskStatus = await commonSelectList.initDictDataGet(this, 'Crm_Task_Status');
        this.eventType = await commonSelectList.initDictDataGet(this, 'Crm_Event_Type');
        this.importLevel = await commonSelectList.initDictDataGet(this, 'Crm_Import_Level');

      },
      timeData() {
        this.queryParam.startTime = this.tiem[0]
        this.queryParam.endTime = this.tiem[1]
        console.log(this.tiem)
      },
      //添加
      addProject() {
        // const paramForm = this.tabtle
        if (this.tabtle.length == 0) {
          this.$message({
            message: '请先选择引用的报告',
            type: 'warning'
          });
        } else {
          var _this = this
          this.$emit('taskData', this.tabtle)
          _this.handleClose()
        }
      },
      init(data = []) {
        this.reportData.forEach((item, index) => {
          data.forEach(child => {
              item.id === child.id && (this.reportData.splice(index, 1));
          })
        })
      },
      tabtdata() {
        let param = {
          currPage: this.pager.curPage,
          pageSize: this.pager.pageSize,
          creater: this.queryParam.creater,
          customerName: this.queryParam.customerName,
          endTime: this.queryParam.endTime,
          projectOrVisitName: this.queryParam.projectOrVisitName,
          startTime: this.queryParam.startTime,
          taskUser: this.queryParam.taskUser,
        }
        console.log(787878)
        this.$ajax.post({
          domain: 'crmUrl',
          url: 'task.listPageByTypeCiteTask',
          data: JSON.stringify(param),
          success: function(res) {
            if (res.errorCode == 200) {
              this.reportData = res.data.records
              this.pager.totalRow = res.data.total
              this.pager.totals = res.data.total || 0;
            } else {
              this.$message.error(res.msg);
            }
          }.bind(this),
          error: function(res) {
            this.$message.error(res.msg);
          }.bind(this)
        });
      },
      doSearch() {
        this.tabtdata()
      },
      reset() {
        this.queryParam = {
          customerName: '',
          projectOrVisitName: '',
          taskUser: "",
          creater: "",
          startTime: "",
          endTime: "",
        }
        this.tiem=[]
        this.doSearch();
      },
      open() {
        console.log(this.rowList, 223344)
      },
      // 日志信息展示
      showLogsInfo: function(msg) {
        this.$refs.logRef.logMsg = msg;
        this.$refs.logRef.visible = true;
      },
      //选中的数据
      handleSelectionChange(val) {
        console.log(val)
        this.tabtle = val
      },
      // 变更页面显示数量
      pagerHandleSizeChange(val) {
        this.pager.pageSize = val;
        this.tabtdata();
      },
      // 变更当前页面
      pagerHandleCurrentChange(val) {
        this.pager.curPage = val;
        this.tabtdata();
      },
      //关闭弹窗
      handleClose() {
        this.tabtle = []
        this.$refs.multipleTable.clearSelection();
        this.visible = false;
      },
    },
    data() {
      return {
        queryParam: {
          customerName: '',
          projectOrVisitName: '',
          taskUser: "",
          creater: "",
          startTime: "",
          endTime: "",
        },
        eventType: [],
        taskStatus: [],
        importLevel: [],
        pager: {
          curPage: 1,
          pageSize: 10,
          pageOptions: [10, 20, 30],
          totalRow: 0
        },
        openTitle: "",
        tabtle: [],
        visible: false,
        tiem: "",
        reportData: [],
        //表格列
        colunms: [{
            prop: 'visitReportCode',
            label: '拜访编码',
            width: 100,
            fixed: false,
            tooltip: true
          },
          {
            prop: 'projectCode',
            label: '关联项目',
            width: 100,
            fixed: false,
            tooltip: true
          },
          {
            prop: 'customerName',
            label: '客户名称',
            width: 100,
            fixed: false,
            tooltip: true
          },
          {
            prop: 'taskId',
            label: '任务ID',
            width: 100,
            fixed: false,
            tooltip: true
          },
          {
            prop: 'itemTypeKey',
            label: '事项类型',
            width: 100,
            fixed: false,
            tooltip: true
          },
          {
            prop: 'taskUser',
            label: '责任人',
            width: 100,
            fixed: false,
            tooltip: true
          },
          {
            prop: 'taskContent',
            label: '事项简述',
            width: 100,
            fixed: false,
            tooltip: true
          },
          {
            prop: 'emergencyDegreeKey',
            label: '紧要程度  ',
            width: 100,
            fixed: false,
            tooltip: true
          },
          {
            prop: 'taskRequestDateFormat',
            label: '截止时间',
            width: 100,
            fixed: false,
            tooltip: true
          },
          {
            prop: 'statusKey',
            label: '状态',
            width: 100,
            fixed: false,
            tooltip: true
          },

        ]

      }
    },


  }
</script>

<style type="text/css" lang="scss">
  .el-input__inner {
    height: 32px;
  }
</style>
