<!--待办事项列表-->
<template>
  <div >
    <TableHeader date-picker>
      <template #select>
          <el-form-item label="流程状态">
              <el-select v-model="tableStore.table.params.status" clearable placeholder="请选择流程状态">
                  <el-option
                      v-for="item in statusSelect"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id"
                  ></el-option>
              </el-select>
          </el-form-item>
      </template>
      <template #operation>
        <el-button icon='el-icon-Plus' type='primary' @click='add'>新增</el-button>
      </template>
    </TableHeader>
    <!--表格-->
    <Table ref='tableRef'></Table>
    <!--弹框-->
    <monitor-quit-popup ref='deviceQuitPopup' />
  </div>
</template>

<script setup lang='ts'>
import TableStore from '@/utils/tableStore'
import Table from '@/components/table/index.vue'
import TableHeader from '@/components/table/header/index.vue'
import { onMounted, provide, ref ,watch} from 'vue'
import { useRouter } from 'vue-router'
import MonitorQuitPopup from '@/views/pqs/supervise/retire/monitorQuitPopup.vue'
import { ElMessage } from 'element-plus'
import { ElMessageBox } from 'element-plus/es'
import { cancelQuitRunningDevice } from '@/api/supervision-boot/device/quitRunningDev'

import { useDictData } from '@/stores/dictData'
const dictData = useDictData()
const statusSelect = dictData.statusSelect()

import { useAdminInfo } from '@/stores/adminInfo'
//获取登陆用户姓名和部门
const adminInfo = useAdminInfo()
defineOptions({
  name: 'supervision/retire'
})
const { push, options, currentRoute } = useRouter()
const flag = ref(false)
const deviceQuitPopup = ref()
const tableStore = new TableStore({
  url: '/supervision-boot/quitRunningDevice/list',
  method: 'POST',
  publicHeight:65,
  column: [
    {
      field: 'index',
      title: '序号',
      width: '60',
      formatter: (row: any) => {
        return (tableStore.table.params.pageNum - 1) * tableStore.table.params.pageSize + row.rowIndex + 1
      }
    },
    { title: '供电公司', field: 'gdName', minWidth: 130 },
    { title: '变电站', field: 'subName', minWidth: 160 },
    { title: '监测点', field: 'deviceName', minWidth: 200 },
    { title: '退运原因', field: 'propertyNo', minWidth: 160 },
    {
      title: '变更前状态', field: 'devOriginalStatus', minWidth: 130,
      render: 'tag',
      custom: {
        0: 'success',
        1: 'warning',
        2: 'danger',
        3: 'warning',
        4: 'info'
      },
      replaceValue: {
        0: '运行',
        1: '检修',
        2: '停运',
        3: '调试',
        4: '退运'
      }
    },
    {
      field: 'status', title: '流程状态', minWidth: 100,
      render: 'tag',
      custom: {
        1: 'primary',
        2: 'success',
        3: 'danger',
        4: 'warning'
      },
      replaceValue: {
        1: '审批中',
        2: '审批通过',
        3: '审批不通过',
        4: '已取消'
      }
    },
    { field: 'createTime', title: '开始时间', minWidth: 170 },
    {
            field: 'createBy',
            title: '填报人',
            minWidth: 80,
            formatter: (row: any) => {
                return dictData.state.userList.filter(item => item.id == row.cellValue)[0]?.name
            }
        },
    {
      title: '操作',
      align: 'center',
      minWidth: '150',
      fixed: 'right',
      render: 'buttons',
      buttons: [
        {
          name: 'productSetting',
          title: '流程详情',
          type: 'primary',
          icon: 'el-icon-EditPen',
          render: 'basicButton',
          click: row => {
            handleAudit(row.processInstanceId, row.historyInstanceId)
          }
        },
        {
          name: 'edit',
          title: '重新发起',
          type: 'warning',
          icon: 'el-icon-Open',
          render: 'basicButton',
          disabled: row => {
            return !(row.createBy == adminInfo.$state.id||  row.status == 3 || row.status == 4)
          },
          click: row => {
            deviceQuitPopup.value.open('重新发起退运', row)
          }
        },
        {
          name: 'cancel',
          title: '取消',
          type: 'danger',
          icon: 'el-icon-Open',
          render: 'basicButton',
          disabled: row => {
            return row.createBy != adminInfo.$state.id || row.status !== 1
          },
          click: row => {
            cancelLeave(row)
          }
        }
      ]
    }
  ],
  beforeSearchFun: () => {
    // for (let key in tableStore.table.params) {
    //   if (tableStore.table.params[key] === '') {
    //     delete tableStore.table.params[key]
    //   }

    // }
    tableStore.table.params.deviceType = 2
  }
})
tableStore.table.params.searchValue = ''
tableStore.table.params.status = ''
provide('tableStore', tableStore)

//新增退运终端信息
const add = () => {
  deviceQuitPopup.value.open('监测点退运')
}

/** 流程实例详情 */
const handleAudit = (instanceId: string, historyInstanceId: string) => {
  push({
    name: 'BpmProcessInstanceDetail',
    state: {
      id: instanceId,
      historyInstanceId
    }
  })
}

/**取消流程操作*/
const cancelLeave = async (row: any) => {
  // 二次确认
  const { value } = await ElMessageBox.prompt('请输入取消原因', '取消流程', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    inputPattern: /^[\s\S]*.*\S[\s\S]*$/, // 判断非空，且非空格
    inputErrorMessage: '取消原因不能为空'
  })
  // 发起取消
  let data = {
    id: row.id,
    processInstanceId: row.processInstanceId,
    reason: value
  }
  await cancelQuitRunningDevice(data)
  ElMessage.success('取消成功')
  // 加载数据
  tableStore.index()
}

onMounted(() => {
  // 加载数据
  tableStore.index()
})
watch(
    () => currentRoute.value.path,
    () => {
        if (flag.value && options.history.state.forward?.split('/')[1] == 'bpm') {
            tableStore.index()
            flag.value = false
        }
    },
    {
        deep: true
    }
)

</script>
