<template>
  <a-card :bordered="false">
    <workflow-detail-resso
      :visible.sync="detailVisible"
      :workflowId="workflowId"
      direction="left"
      v-if="workflowId"/>
    <x-form-table
      ref="xFormTableTodo"
      title="流程查询"
      queryParamsName="todoApplyResolution"
      :fixedQueryForm="todoFixedQueryForm"
      @action="toDetail">
      <template #button="{ selectedRowKeys }">
        <a-button type="primary" icon="plus" @click="onAddItemSubmit">新增</a-button>
        <a-popconfirm
          :title="'确定删除' + selectedRowKeys.length + '条数据吗？'"
          :disabled="!selectedRowKeys.length"
          @confirm="deleteItem(selectedRowKeys)">
          <a-button type="danger" icon="delete" :disabled="!selectedRowKeys.length">删除</a-button>
        </a-popconfirm>
      </template>
    </x-form-table>
  </a-card>
</template>

<script>
import XFormTable from '@vue2-client/base-client/components/common/XFormTable/XFormTable'
import WorkflowDetail from '@vue2-client/pages/WorkflowDetail/WorkflowDetail.vue'
import WorkflowDetailResso from '@vue2-client/pages/WorkflowDetail//WorkflowPageDetail/WorkflowDetailResso.vue'
import { mapState } from 'vuex'
import moment from 'moment'
import { workFlowViewApi } from '@vue2-client/services/api/workFlow'
import { postByServiceName } from '@vue2-client/services/api'

export default {
  name: 'WorkflowListResolution',
  components: {
    XFormTable,
    WorkflowDetail,
    WorkflowDetailResso
  },
  data () {
    return {
      // 控制组件可见
      detailVisible: false,
      // 当前报建编号
      workflowId: undefined,
      // 查询条件
      todoFixedQueryForm: undefined,
      // 是否显示新增表单
      addItemVisible: false,
      // 新增表单数据
      addItemForm: {
        taskName: this.details.f_task_name,
        projectName: this.details.f_entry_name,
        processName: '开发内部分配',
        completeTime: this.details.f_complete_time
      },
      // 表单验证规则
      addItemFormRules: {
        taskName: { required: true, message: '请输入任务名称' },
        processName: { required: true, message: '请选择流程名称' }
      },
      // 项目选项
      projectOptions: [],
      // 流程选项
      processOptions: [],
      // 已选择的流程
      processChecked: undefined,
      // 逾期任务排行榜
      overdueRanking: [],
      overdueRankingLoading: false,
      // 当前页签
      tabsKey: '0',
      projectExceptionList: [],
      // 获取f_workflow_id的数据组
      fApplyId: [],
      Apply: [],
      // 查询的数据
      dataForm: [],
      datres: null
    }
  },
  computed: {
    ...mapState('account', ['user'])
  },
  props: {
    workflowProjectId: {
      type: String,
      required: true
    },
    details: {
      type: Object,
      required: true
    }
  },
  watch: {
    detailVisible: function (newVal) {
      // 关闭详情抽屉刷新表格
      if (!newVal) {
        if (this.details.f_workflow_dataid) {
          this.dataForm = this.details.f_workflow_dataid.split(',')
          this.todoFixedQueryForm = { a_id: this.details.f_workflow_dataid }
        } else {
          this.todoFixedQueryForm = { a_id: null }
        }
        this.$refs.xFormTableTodo.refreshTable(false)
      }
    }
  },
  created () {
    postByServiceName(workFlowViewApi.getWorkFlowCategoryTree, {}).then(res => {
      this.processOptions = res
    })
    postByServiceName(workFlowViewApi.getWorkFlowStepWorkFlowId,
      { name: this.user.name }).then(res => {
      this.Apply = res
      this.Apply.forEach(all => {
        this.fApplyId.push(all.f_workflow_id)
      })
    })
    if (this.details.f_workflow_dataid) {
      this.dataForm = this.details.f_workflow_dataid.split(',')
      this.todoFixedQueryForm = { a_id: this.details.f_workflow_dataid }
    } else {
      this.todoFixedQueryForm = { a_id: null }
    }
  },
  methods: {
    toDetail (record, id) {
      this.workflowId = id + ''
      this.detailVisible = true
    },
    addItem () {
      this.addItemVisible = true
    },
    // 创建任务提交
    onAddItemSubmit () {
      const saveData = {
        handler: this.user.name,
        createdBy: this.user.name,
        workflowparentid: this.workflowProjectId,
        ...this.addItemForm
      }
      if (!saveData.projectName) {
        saveData.projectName = '公共项目（适用无具体项目登记）'
      }
      postByServiceName(workFlowViewApi.createWorkflowTask, saveData).then(res => {
        if (res && res.msg === 'ok') {
          this.$message.success('创建成功')
          this.processChecked = undefined
          this.addItemVisible = false
          this.updataFromdas(res.workflowId)
          this.toDetail(undefined, res.workflowId)
        } else {
          this.$message.success('创建失败，请重试')
        }
      })
    },
    updataFromdas (datv) {
      this.dataForm.push(datv)
      let ataFo = null
      if (this.dataForm.length === 1) {
        ataFo = datv
        this.details.f_workflow_dataid = ataFo
      } else {
        ataFo = this.dataForm.join(',')
        this.details.f_workflow_dataid = ataFo
      }
      postByServiceName(workFlowViewApi.updateWorkFlow, {
        idStr: this.workflowProjectId,
        dataid: ataFo
      }).then(res => {
        this.datres = res
      })
    },
    // 删除任务
    deleteItem (idList) {
      postByServiceName('/logic/getApplyListByIds', { workflowIds: idList }).then(res => {
        if (res.every(ele => ele.f_created_by === this.user.name)) {
          console.log(idList)
          postByServiceName(workFlowViewApi.deleteWorkFlow, { idList }).then(() => {
            if (this.$refs.xFormTableTodo) {
              this.$refs.xFormTableTodo.refreshTable(false)
            }
            if (this.$refs.xFormTableCreate) {
              this.$refs.xFormTableCreate.refreshTable(false)
            }
            if (this.$refs.xFormTableAll) {
              this.$refs.xFormTableAll.refreshTable(false)
            }
            this.$message.success('删除成功')
          })
        } else {
          this.$message.error('只能删除自己创建的')
        }
      })
    },
    disabledDate (date) {
      return date.isBefore(moment(), 'day')
    },
  }
}
</script>
<style lang="less" scoped>
.overdue-header {
  margin: 0;
  display: inline-block;
  padding: 0 5px;
}

.overdue-header-danger {
  background: #EF573D;
  color: #fff;
  border-radius: 2px;
}

.overdue-ranking {
  .icon {
    margin-right: 6px;
    padding: 0 5px;
    color: #fff;
    //background: #EF573D;
    background: #aaa;
  }

  &:nth-of-type(n+4) {
    .icon {
      background: #aaa;
    }
  }

  &:nth-of-type(n+10) {
    .icon {
      padding: 0 2px;
    }
  }

  .name {
    margin-right: 6px;
  }

  display: inline-block;
  min-width: 94px;
  margin: 8px 0;
}
</style>
