<script setup name="flowConfiguration">
import { reactive, ref, getCurrentInstance, h, onMounted } from 'vue'
import ElTree from '@/components/elTree/index.vue'
import { processConfigList, processStatusSet } from '@/http/apis/systemManage/flowConfiguration'
import { useRouter } from 'vue-router'
import { getIsShowRegionTree, getTreeParams } from '@/utils/getIsShowRegionTree'

const { proxy } = getCurrentInstance(),
  router = useRouter(),
  tableListRef = ref(),
  column = reactive([
    {
      label: '序号',
      type: 'index',
      width: '80'
    },
    {
      label: '流程名称',
      key: 'formName',
      prop: 'formName'
    },
    {
      label: '状态',
      key: 'isStop',
      prop: 'isStop',
      width: '80',
      render: row => [
        h('span', {
          class: [
            'dot mr-4',
            `bg-${row.isStop ? 'danger' : 'success'}`
          ]
        }),
        h(
          'span',
          {
            class:
                    row.isStop
                      ? 'text-danger' : 'text-success'

          },
          !row.isStop ? '启用' : '禁用'
        )]
    },
    {
      label: '操作',
      slot: 'action',
      width: '120',
      fixed: 'right'
    }
  ]),
  data = ref([]),
  regionCode = ref(),
  getTableData = async () => {
    const res = await processConfigList({ regionCode: regionCode.value * 1 })
    data.value = res.data.records
  },
  changeStatusData = (data) => {
    const text = data.isStop ? '启用' : '禁用'
    proxy.$messageBox
      .confirm(`是否${text}该流程?`, '提示！', {
        type: 'warning'
      })
      .then(async () => {
        await processStatusSet({
          formId: data.formId,
          processDefId: data.processDefId,
          state: data.isStop
        })
        proxy.$message.success(`${text}成功！`)
        getTableData()
      })
  },
  getTree = (value) => {
    regionCode.value = value.regionLevel === 3 ? value.regionCode : undefined
    getTableData()
  }
onMounted(() => {
  if (!getIsShowRegionTree(['SUPER_ADMIN', 'REGION_MANAGER'])) getTableData()
})
</script>

<template>
  <el-row>
    <el-col v-if="getIsShowRegionTree(['SUPER_ADMIN','REGION_MANAGER'])" style="padding-right: 16px" :span="4">
      <elTree :params="getTreeParams({'SUPER_ADMIN':false,'REGION_MANAGER':false})" @get-tree="getTree" />
    </el-col>
    <el-col :span="getIsShowRegionTree(['SUPER_ADMIN','REGION_MANAGER'])?20:24">
      <div>
        <el-card shadow="never">
          <template #header>
            <div class="flex justify-between items-center">
              <span>流程列表</span>
            </div>
          </template>
          <table-list
            ref="tableListRef"
            :column="column"
            :data="data"
            :pagination="false"
            @get-table-data="getTableData"
          >
            <template #action="{ scope }">
              <a @click="router.push({name:'configEdit',query:{formId:scope.row.formId,formName:scope.row.formName, regionCode:scope.row.regionCode,processDefId:scope.row.processDefId}})">编辑</a>
              <a v-if="false" @click="changeStatusData(scope.row)">{{ !scope.row.isStop?'禁用':'启用' }}</a>
            </template>
          </table-list>
        </el-card>
      </div>
    </el-col>
  </el-row>
</template>
<style lang="less" scoped>
</style>
