<script setup name="flowPathConfiguration">
import { reactive, ref, onMounted, getCurrentInstance, h } from 'vue'
import { useRouter } from 'vue-router'
import { procdefSave, procEnable, procDisable, procdefUnit } from '@/http/apis/systemManage/flowConfiguration'
import { storeToRefs } from 'pinia'
import store from '@/store'
import { delById, procdefDetail } from '@/http/apis/unitSet/flowPathConfiguration'
const { proxy } = getCurrentInstance(),
  userInfo = storeToRefs(store.userStore).userInfo || {},
  router = useRouter(),
  tableListRef = ref(),
  column = reactive([
    {
      label: '序号',
      type: 'index',
      width: '80'
    },
    {
      label: '流程名称',
      key: 'processDefName',
      prop: 'processDefName',
      minWidth: '200'
    },
    {
      label: '流程类型',
      key: 'type',
      width: '140',
      render: row =>
        h(
          'span',
          row.type === 'DEFAULT' ? '默认流程' : row.type === 'SEAL' ? '盖章流程' : row.type === 'JOINT_REVIEW' ? '重大项目联审流程' : '其他流程'
        )
    },
    {
      label: '状态',
      key: 'isStop',
      width: '80',
      render: row => [
        h('span', {
          class: [
            'dot mr-4',
            `${!row.isStop ? 'bg-success' : 'bg-danger'}`
          ]
        }),
        h(
          'span',
          {
            class: !row.isStop ? 'text-success' : 'text-danger'
          },
          !row.isStop ? '启用' : '禁用'
        )]
    },
    {
      label: '创建时间',
      key: 'created',
      prop: 'created',
      width: '240'
    },
    {
      label: '操作',
      slot: 'action',
      fixed: 'right',
      width: '270'
    }
  ]),
  data = ref([]),
  total = ref(0),
  getTableData = async (pageParams = tableListRef.value.pageParams) => {
    const res = await procdefUnit({ ...pageParams, orgCode: userInfo.value.empPosUnitCode })
    total.value = res.data.total
    data.value = res.data.records
  },

  // 编辑流程
  editFlow = (row) => {
    router.push({ name: 'unitConfigEdit', query: { processDefId: row.processDefId }})
  },
  // 删除流程
  del = (row) => {
    proxy.$messageBox
      .confirm('是否删除该流程?', '提示！', {
        type: 'warning'
      })
      .then(async () => {
        await delById({ processDefId: row.processDefId })
        proxy.$message.success('删除成功！')
        getTableData()
      })
  },
  // 禁用、启用
  changeStatus = (data) => {
    const text = !data.isStop ? '禁用' : '启用'
    proxy.$messageBox
      .confirm(`是否${text}该流程?`, '提示！', {
        type: 'warning'
      })
      .then(async () => {
        if (text === '启用') {
          await procEnable({
            processDefId: data.processDefId
          })
        } else {
          await procDisable({
            processDefId: data.processDefId
          })
        }
        proxy.$message.success(`${text}成功！`)
        getTableData()
      })
  },
  // 编辑信息弹窗
  addFolowModal = ref(false),
  modalTitle = ref(),
  showModal = async (row) => {
    addFolowModal.value = true
    modalTitle.value = row ? '编辑信息' : '新增流程'
    if (row && row.processDefId) {
      const res = await procdefDetail({ processDefId: row.processDefId })
      addForm.value = {
        ...res.data,
        isEnable: !res.data.isStop
      }
    } else {
      addForm.value = {
        isEnable: true,
        type: 'OTHER'
      }
    }
  },
  addFormRef = ref(),
  flowTypeObj = ref({
    'DEFAULT': '默认流程',
    'SEAL': '盖章流程',
    'OTHER': '其他流程',
    'JOINT_REVIEW': '重大项目联审流程'
  }),
  addFormRules = {
    processDefName: [{ required: true, message: '请填写流程名称', trigger: 'blur' }],
    type: [{ required: true, message: '请选择流程类型', trigger: 'change' }]
  },
  addForm = ref({
    type: 'OTHER'
  }),
  submit = async formEl => {
    if (!formEl) {
      return
    }
    await formEl.validate(async valid => {
      if (valid) {
        const postData = {
          ...addForm.value,
          process: addForm.value.process ? JSON.parse(addForm.value.process) : undefined,
          orgCode: userInfo.value.empPosUnitCode,
          isStop: !addForm.value.isEnable
        }
        await procdefSave(postData)
        proxy.$message.success('提交成功！')
        getTableData()
        addFolowModal.value = false
        addForm.value = {
          type: 'OTHER'
        }
      }
    })
  },
  close = () => {
    addFolowModal.value = false
  }

onMounted(() => {
  getTableData()
})
</script>

<template>
  <div>
    <el-card shadow="never">
      <template #header>
        <div class="flex justify-between items-center">
          <span>流程列表</span>
          <el-button
            type="primary"
            icon="Plus"
            size="small"
            @click="()=>showModal()"
          >增加流程</el-button>
        </div>
      </template>
      <table-list
        ref="tableListRef"
        :column="column"
        :data="data"
        :total="total"
        @get-table-data="getTableData"
      >
        <template #action="{ scope }">
          <a v-if="scope.row.type==='OTHER'" @click="showModal(scope.row)">编辑信息</a>
          <a @click="editFlow(scope.row)">编辑流程</a>
          <a v-if="scope.row.type==='OTHER'" @click="changeStatus(scope.row)">{{ !scope.row.isStop ?'禁用':'启用' }}</a>
          <a
            v-if="scope.row.type==='OTHER'"
            class="text-danger"
            @click="del(scope.row)"
          >删除</a>
        </template>
      </table-list>
    </el-card>
    <el-dialog
      :model-value="addFolowModal"
      :title="modalTitle"
      width="600px"
      @close="close"
    >
      <el-form
        ref="addFormRef"
        :model="addForm"
        :rules="addFormRules"
        label-width="90px"
        label-suffix=":"
      >
        <el-row>
          <el-col :span="24">
            <el-form-item
              label="流程名称"
              prop="processDefName"
            >
              <el-input
                v-model="addForm.processDefName"
                placeholder="请填写 "
              />
            </el-form-item>
          </el-col>
          <el-col v-if="false" :span="24">
            <el-form-item
              label="流程类型"
              prop="type"
            >
              <el-radio-group v-model="addForm.type">
                <el-radio
                  v-for="(v,k) in flowTypeObj"
                  :key="k"
                  :label="k"
                >{{ v }}</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>

        <el-form-item
          label="状态"
          prop="isEnable"
        >
          <el-switch
            v-model="addForm.isEnable"
            style="
                  --el-switch-on-color: #4ecb74;
                --el-switch-off-color: #ff3b30;
                "
          />&nbsp;
          <span :style="{ color: !addForm.isEnable ? '#FF3B30':'#4ECB74' }">{{
            !addForm.isEnable ? "已禁用":"已启用"
          }}</span>
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button
          type="primary"
          @click="submit(addFormRef)"
        >
          提交
        </el-button>
        <el-button
          @click="close"
        >
          关闭
        </el-button>
      </template>
    </el-dialog>
  </div>
</template>
<style lang="less" scoped>
</style>
