<template>
  <div id="task-list" class="ls-vertical">
    <navbar icon="check" title="任务列表" :buttons="btns" @clickbutton="clickbtn"></navbar>
    <search ref="searchRef" @query="querySearch" @callback="querySearch"></search>
    <div class="ls-container" >
      <div class="btns-project"><el-button @click="handleAdd" type="primary" size="mini" icon="el-icon-plus">指派任务</el-button></div>
      <el-tabs v-model="activeTab" @tab-click="tabChange">
        <el-tab-pane v-for="(items, index) in tabTable" :key="index" :label="items.label" :name="items.name">
          <el-table
            :data="tableData"
            ref="multipleRef"
            size="mini"
            stripe
            border
            height="100%"
            :cell-style="cellStyle"
            @row-dblclick="show"
          >
            <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"
              :sortable="item.sortable"
              :label="item.label"
              :fixed="item.fixed"
              :min-width="item.width"
              :show-overflow-tooltip="item.tooltip"
            >
              <template v-if="item.prop == 'emergencyDegreeKey' || item.prop == 'createTimeFormat' || item.prop == 'taskRequestDateFormat'" slot="header">
                <span v-if="item.prop == 'emergencyDegreeKey' ">紧要程度</span>
                <span v-if="item.prop == 'createTimeFormat' ">提交时间</span>
                <span v-if="item.prop == 'taskRequestDateFormat' ">截止时间</span>
                <span class="caret-wrapper">
                 <i @click="handleAscending($event, 'ascending', item.prop)" class="sort-caret ascending"></i>
                 <i @click="handleAscending($event, 'descending', item.prop)" class="sort-caret descending"></i>
                </span>
              </template>
            </el-table-column>

            <el-table-column label="操作" min-width="200" fixed="right">
              <template slot-scope="scope">
                <el-button v-if="scope.row.status != 'draft'" @click="handleDetail(scope.row)" type="text">详情</el-button>
                <el-button v-if="scope.row.status == 'draft'" @click="taskEdit(scope.row)" type="text">编辑</el-button>
                <el-button v-if="scope.row.status == 'draft'" @click="taskDelet(scope.row)" type="text">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
      </el-tabs>
      <!-- 分页-->
      <ls-pagination :pager.sync="pager" @query="doQuery"></ls-pagination>
      <!-- 编辑新增子组件-->
      <dig-task-list :preservationData="true" :hideedit="true" ref="digTaskListRef" :rowList="rowList" @callback="doQuery"></dig-task-list>
    </div>
  </div>
</template>
<script>
import search from './components/task-list-search.vue';
import commonSelectList from '../../../common/commonSelectList.js';
export default {
  name: 'taskLisk',
  components: {
    search
  },
  beforeDestroy() {
    localStorage.removeItem('taskStatus');
  },
  created() {},
  updated() {

  },
  activated() {
    this.doQuery();
  },
  methods: {
    //双击点击查看详情
    show(row) {
      this.EditdialogFormVisible = true;
      this.showform = row;
      this.handleDetail(row)
    },
    /**
     * 控制表格的颜色
     * row为某一行的除操作外的全部数据，column为某一列的属性，
     * rowIndex为某一行（从0开始数起），columnIndex为某一列（从0开始数起）
     */
    cellStyle({ row, column, rowIndex, columnIndex }) {
      let cellStyle;
      if (column.label === '状态') {
        switch (row.status) {
          //草稿
          case 'draft':
            cellStyle = '';
            break;

          case 'finish':
            cellStyle = 'color: #67C23A;';
            break;

          //取消
          case 'cancel':
            cellStyle = 'color: #909399;';
            break;

          //调整
          case 'cancel':
            adjust = 'color: #F56C6C;';
            break;

          //其它
          default:
            cellStyle = 'color: #409EFF;';
        }
      }
      return cellStyle;
    },

    //条件查询框数据
    querySearch() {
      this.queryParam = this.$refs.searchRef.queryParam;
      this.pager.currPage = 1;
      this.currentChange(this.pager.currPage);
    },

    // 查询数据
    doQuery(current = {}) {
      var keycount = 0;
      for (var item in current) {
        keycount++;
      }
      if (keycount > 0) {
        this.queryParam = current;
      }
      this.queryParam.taskLookOver = this.tabTableTab;
      this.queryParam.sortField=this.sortField;
      this.queryParam.sort=this.sort;
      let param = {
        currPage: this.pager.curPage,
        pageSize: this.pager.size,
        queryParam: this.queryParam
      };
      this.$ajax.post({
        domain: 'crmUrl',
        url: 'task.listPageTaskInfo',
        data: JSON.stringify(param),
        success: function(res) {
          if (res.errorCode == 200) {
            this.tableData = res.data.records || [];
            this.pager.totals = res.data.total || 0;
            this.pager.currPage = res.data.current;
            this.pager.pageSize = res.data.size;
          } else {
            this.$message.error(res.msg);
          }
        }.bind(this),
        error: function(res) {
          this.$message.error(res.msg);
        }.bind(this)
      });
    },
    handleAscending(e, sort, prop){
      let ct = e.currentTarget;
      document.querySelectorAll('.sort-caret.ascending').forEach(item=>{
        item.style.borderBottomColor = '#C0C4CC';
      })
      document.querySelectorAll('.sort-caret.descending').forEach(item=>{
        item.style.borderTopColor = '#C0C4CC';
      })

      if(ct.classList[1] == 'ascending'){
        ct.style.borderBottomColor = '#409eff';
      } else {
        ct.style.borderTopColor = '#409eff';
      }
      if(sort == 'ascending'){
        this.sort = 'ASC';
      }else {
        this.sort = 'DESC';
      }

      if(prop == 'emergencyDegreeKey'){ //紧要程度
        this.sortField = 'EMERGENCY_DEGREE';
      } else if(prop == 'createTimeFormat'){//提交时间
        this.sortField = 'create_time';
      }else {
        this.sortField = 'TASK_REQUEST_DATE';//截止时间
      }
      this.doQuery();
    },
    //tab 改变
    tabChange(tab, event, index) {
      this.activeTab = tab.name;
      switch (tab.name) {
        case 'all':
          this.tabTableTab = 'all';
          break;
        case 'launch':
          this.tabTableTab = 'myCreate';
          break;
        case 'responsible':
          this.tabTableTab = 'myResponsible';
          break;
        case 'coordination':
          this.tabTableTab = 'mySynergy';
          // this.pager.
          break;
        default:
      }
      this.pager.curPage = 1;
      this.pager.size = 10;
      this.doQuery();
    },
    //新增
    handleAdd() {
      this.$refs.digTaskListRef.visible = true;
      this.$refs.digTaskListRef.openTitle = '指派任务';
      this.$refs.digTaskListRef.resetAws([], []);
    },
    //详情
    handleDetail(row) {
      if(row.status==='draft'){
         this.taskEdit(row)
      }else{
        this.$router.push({
          path: 'taskDetail',
          query: {
            rowData: row.id,
            activeTab: this.activeTab,
            currentPage: this.pager.current
          }
        });
      }
    },

    //点击编辑将值到详情里
    taskEdit(row) {
      this.rowList = row;
      this.$refs.digTaskListRef.visible = true;
      this.$refs.digTaskListRef.openTitle = '修改任务';
      this.$refs.digTaskListRef.editDetail(row);
    },

    //分页
    sizeChange(val) {
      this.pager.pageSize = val;
      this.doQuery();
    },

    currentChange(val) {
      this.pager.curPage = val;
      this.doQuery();
    },

    taskDelet(row) {
      console.log(row);
      let param = [row.id];
      this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
        cancelButtonText: '取消',
        confirmButtonText: '确定',
        type: 'warning'
      })
        .then(() => {
          this.$ajax.post({
            domain: 'crmUrl',
            url: 'task.deleteTasks',
            data: JSON.stringify(param),
            success: function(res) {
              if (res.errorCode == 200) {
                this.$message({
                  type: 'success',
                  message: '删除成功!'
                });
                this.doQuery();
              } else {
                this.$message.error(res.msg);
              }
            }.bind(this),
            error: function(res) {
              this.$message.error(res.msg);
            }.bind(this)
          });
        })
        .catch(() => {});
    },

    // 导航栏按钮操作
    clickbtn(type) {
      switch (type) {
        case 'refresh':
          this.pager.curPage = 1;
          this.pager.size = 10;
          this.doQuery();
          break;
      }
    }
  },
  data() {
    return {

      btns: [
        {
          title: '',
          btnEvent: 'refresh',
          size: '',
          circle: 'circle',
          type: 'refresh',
          show: true,
          icon: ''
        }
      ],
      rowList: {},
      queryParam: {
        taskLookOver: 0
      },
      isShowDlalog: false,
      activeTab: 'all',
      tabTableTab: 'all',
      //分页参数
      pager: {
        curPage: 1,
        size: 20,
        pageOptions: [20, 30, 50],
        totals: 0
      },
      tabTable: [
        {
          label: '全部任务',
          name: 'all'
        },
        {
          label: '我发起的',
          name: 'launch'
        },
        {
          label: '我负责的',
          name: 'responsible'
        },
        {
          label: '协同参与',
          name: 'coordination'
        }
      ],
      tableData: [],
      users: [], //v-mdoel aws-org users
      sortField: '',
      sort: '',
      colunms: [
        //表格列
        {
          prop: 'taskId',
          label: '任务ID',
          width: 100,
          fixed: false,
          tooltip: true
        },
        {
          prop: 'itemTypeKey',
          label: '事项类型',
          width: 100,
          fixed: false,
          tooltip: true
        },
        {
          prop: 'taskContent',
          label: '任务描述',
          width: 100,
          fixed: false,
          tooltip: true
        },
        {
          prop: 'taskUser',
          label: '责任人',
          width: 100,
          fixed: false,
          tooltip: true
        },
        {
          prop: 'userNamesStr',
          label: '协同人员',
          width: 100,
          fixed: false,
          tooltip: true
        },
        {
          prop: 'customerName',
          label: '客户名称',
          width: 100,
          fixed: false,
          tooltip: true
        },
        {
          prop: 'emergencyDegreeKey',
          label: '紧要程度',
          width: 120,
          fixed: false,
          tooltip: true
        },
        {
          prop: 'creater',
          label: '提交人员',
          width: 100,
          fixed: false,
          tooltip: true
        },
        {
          prop: 'createTimeFormat',
          label: '提交时间',
          width: 120,
          fixed: false,
          tooltip: true
        },
        {
          prop: 'statusKey',
          label: '状态',
          width: 100,
          fixed: false,
          tooltip: true
        },
        {
          prop: 'taskRequestDateFormat',
          label: '截止时间',
          width: 120,
          fixed: false,
          tooltip: true
        },
        {
          prop: 'visitReportCode',
          label: '关联拜访报告',
          width: 120,
          fixed: false,
          tooltip: true
        },
        {
          prop: 'projectCode',
          label: '关联项目',
          width: 120,
          fixed: false,
          tooltip: true
        }
      ]
    };
  }
};
</script>

<style lang="scss">
#task-list{
.ls-container {
    position: relative;
    padding: 15px 15px 0;
    overflow: auto;
    > .btns-project {
      position: absolute;
      right: 10px;
      top: 16px;
      z-index: 9;
      float: right;
    }

    .el-tabs {
      overflow: hidden;
      .table-wrap {
        flex: 1;
        display: flex;
        flex-direction: column;
        overflow: auto;
      }
    }
    .el-table .el-table__empty-block {
      min-height: unset;
    }

  }
}
</style>
