<template>
  <div>
    <up-down-layout :handleFlag.sync="handleFlag">
      <search-form @clearParam="clearParam" @handleFilter="handleFilter" :formValue.sync="queryParas"
                   :componentList="componentList" slot="query"></search-form>
      <template v-slot:table>
        <data-table :api="api" :operateBtnLayout="operateBtnLayout" :queryParas="queryParas" :menuFlag="true"
                    :sourceData.sync="sourceData" :loadCount.sync="loadCount" :columns="columns" v-bind="elHeightObj"
                    :row-style="setRowStyle" @sort-change="sortChange" ref="taskTable">
          <template v-slot:keywords="scope">
            <div v-for="(item, key) in toJsonParseText(scope.data.row.keywords)" :key="key">
              <span>{{item}}</span>
            </div>
          </template>
          <el-table-column :label="$t('common.operate')" align="center" width="120px">
            <template v-slot="scope">
              <auth-button v-if="scope.row.status === '1'" class="iconCircle" icon="iconfont iconlingqu" :title="$t('taskManage.todoTask.receive')" @click="handleTask('receive', scope.row)"></auth-button>
              <auth-button v-if="scope.row.status === '2'" class="iconCircle" icon="iconfont iconbanli-active" :title="$t('taskManage.todoTask.handle')" @click="handleTask('handle', scope.row)"></auth-button>
            </template>
          </el-table-column>
        </data-table>
      </template>
    </up-down-layout>
    <offlineTaskManageEdit :visible.sync="showOffline" :editModel="offlineModel" :form="offlineForm" @submit-success="handleFilter"></offlineTaskManageEdit>
    <projectTaskManageEdit :visible.sync="showProject" :editModel="projectModel" :form="projectForm" @submit-success="handleFilter"></projectTaskManageEdit>
    <project-three-certificates-edit :visible.sync="showProjectFile" :editModel="projectFileModel" :form="projectFileForm" @submit-success="handleFilter"></project-three-certificates-edit>
  </div>
</template>
<script>
import BasePage from '@/pages/basePage.js'
import { upDownLayout, searchForm, DataTable, authButton } from 'newepoch-components'
import SelectTaskName from '@/components/element/dataAduit/SelectTaskName.vue'
import SelectTaskStatus from '@/components/element/dataAduit/SelectTaskStatus.vue'
import offlineTaskManageEdit from '@/pages/dataAudit/taskManage/offlineTaskManageEdit.vue'
import projectTaskManageEdit from '@/pages/dataAudit/taskManage/projectTaskManageEdit.vue'
import projectThreeCertificatesEdit from '@/pages/dataAudit/certificateAudit/projectThreeCertificatesEdit.vue'
import * as format from '@/filters/index.js'
import taskManageApi from '@/api/dataAudit/taskManageApi.js'
import mixin from '@/pages/mixin.js'
import cn from '@/i18n/langs/cn.js'

const { taskManage: { todoTask }, common } = cn
export default {
  name: 'taskManageList',
  extends: new BasePage(),
  mixins: [mixin],
  components: {
    upDownLayout,
    searchForm,
    DataTable,
    authButton,
    SelectTaskName,
    SelectTaskStatus,
    offlineTaskManageEdit,
    projectTaskManageEdit,
    projectThreeCertificatesEdit
  },
  data () {
    return {
      handleFlag: true,
      showProjectFile: false,
      showOffline: false,
      showProject: false,
      projectFileModel: '',
      offlineModel: '',
      projectModel: '',
      projectFileForm: {},
      offlineForm: {},
      projectForm: {},
      operateBtnLayout: '',
      sortWay: {},
      queryParas: {
        createTimeOrder: ''
      },
      sourceData: [],
      componentList: [
        // 流程名称
        {
          label: todoTask.processName,
          disabled: false,
          clearable: true,
          value: 'processName',
          placeholder: common.pleaseSelect,
          labelWidth: '80px',
          componentName: SelectTaskName
        },
        // 任务名称
        {
          label: todoTask.taskName,
          disabled: false,
          clearable: true,
          value: 'taskName',
          placeholder: common.pleaseSelect,
          labelWidth: '80px',
          componentName: SelectTaskName
        },
        // 关键字
        {
          label: todoTask.keyWords,
          disabled: false,
          clearable: true,
          value: 'keyWords',
          placeholder: common.pleaseInput,
          labelWidth: '80px',
          componentName: 'el-input'
        },
        // 任务状态
        {
          label: todoTask.taskStatus,
          disabled: false,
          clearable: true,
          value: 'taskStatus',
          placeholder: common.pleaseSelect,
          labelWidth: '80px',
          componentName: SelectTaskStatus,
          options: [
            {
              id: '1',
              name: '待领取'
            },
            {
              id: '2',
              name: '已领取'
            }
          ]
        }
      ],
      columns: [
        // 流程名称
        {
          prop: 'processName',
          align: 'left',
          label: todoTask.processName,
          width: '300px'
        },
        // 任务名称
        {
          prop: 'taskName',
          align: 'left',
          label: todoTask.taskName,
          width: '250px'
        },
        // 审核轮数
        {
          prop: 'auditRoundBillRow',
          align: 'center',
          label: todoTask.auditRounds,
          width: '200px'
        },
        // 发起时间
        {
          prop: 'createTime',
          align: 'center',
          label: todoTask.launchTime,
          width: '250px',
          format: (row) => { return format.formatDatetime(row.createTime) },
          sortable: true
        },
        // 备注
        {
          prop: 'keywords',
          align: 'left',
          label: todoTask.memo,
          width: '350px',
          slot: true
        }
      ]
    }
  },
  created () {
    // 回车事件查询
    let _this = this
    document.onkeydown = function () {
      let key = window.event.keyCode
      if (key === 13) {
        _this.handleFilter()
      }
    }
  },
  computed: {
    api () {
      return taskManageApi.offLine
    }
  },
  mounted () {
    this.handleFilter()
  },
  methods: {
    // 排序回调
    sortChange (column, prop, order) {
      this.sortWay = column
      this.queryParas.pageIndex = 1
      this.handleFilter()
    },
    // 重写查询方法
    handleFilter () {
      let _this = this
      // 处理排序
      if (_this.UtilJs.isEmpty(_this.sortWay.order)) {
        this.queryParas.createTimeOrder = ''
      } else {
        this.queryParas.createTimeOrder = this.sortWay.order.replace('ending', '')
      }
      _this.$refs.taskTable.loadTableData()
    },
    toJsonParseText (data) {
      let arr = data.split('\n')
      return arr
    },
    handleTask (model, data) {
      let _this = this
      if (model === 'receive') {
        taskManageApi.offLine.receive(data.taskId, data.assetInfoId).then(res => {
          if (res && res.data) {
            _this.handleFilter()
            _this.showEdit(data)
          }
        })
      } else if (model === 'handle') {
        _this.showEdit(data)
      }
    },
    showEdit (data) {
      let _this = this
      if (data.taskName === '项目公司资料审核') {
        _this.projectModel = 'E'
        _this.projectForm = Object.assign({ taskType: '4' }, data)
        _this.showProject = true
      } else if (data.taskName === '保理业务线下审核') {
        _this.offlineModel = 'E'
        _this.offlineForm = Object.assign({ taskType: '3' }, data)
        _this.showOffline = true
      } else {
        _this.projectFileModel = 'E'
        _this.projectFileForm = Object.assign({}, data)
        _this.showProjectFile = true
      }
    },
    setRowStyle (rowData) {
      let ifsUrgent = rowData.row.ifsUrgent
      if (ifsUrgent === 1) {
        return 'background-color: #ffe9e9;'
      }
    }
  }
}
</script>
