<template>
  <div class="app-container">
    <!--    <el-card>-->
    <el-tabs v-model="activeName">
      <el-tab-pane
        v-for="c in approval_type"
        :key="c.value"
        :label="c.label"
        :name="c.value"
      />
    </el-tabs>
    <el-card>
      <el-row :gutter="10" class="mb8">
        <el-col :span="1.5">
          <el-button
            v-hasPermi="['workflow:config:*']"
            type="primary"
            icon="Plus"
            @click="handleAdd"
          >新增</el-button>
        </el-col>
      </el-row>

      <el-table v-loading="loading" :data="configList" border>
        <el-table-column type="index" width="55" label="序号" align="center" />
        <!--      <el-table-column v-if="true" label="流程配置ID" align="center" prop="wkId" />-->
        <el-table-column label="流程名称" align="center" prop="wkName" min-width="150" :show-overflow-tooltip="true" />
        <el-table-column label="流程类型" align="center" prop="wkType" min-width="120">
          <template #default="scope">
            {{ scope.row.wkType == "0" ? "通用流程" : "特殊流程" }}
          </template>
        </el-table-column>
        <el-table-column label="适用范围" min-width="100" align="center" prop="wkDeptname" :show-overflow-tooltip="true" />
        <el-table-column label="审核层级" align="center" prop="deep" width="80" />
        <el-table-column label="是否跳过无管理员层级" align="center" prop="isSkip" width="160">
          <template #default="scope">
            {{ scope.row.isSkip == "0" ? "是" : "否" }}
          </template>
        </el-table-column>
        <el-table-column label="是否审核自动生效" align="center" prop="isEffect" width="150">
          <template #default="scope">
            {{ scope.row.isEffect == "0" ? "是" : "否" }}
          </template>
        </el-table-column>
        <el-table-column label="生效时间（小时）" width="130" align="center" prop="effectVal">
          <template #default="scope">
            {{ scope.row.isEffect == "0" ? scope.row.effectVal : "--" }}
          </template>
        </el-table-column>
        <el-table-column label="创建时间" align="center" prop="createTime" width="160" />
        <el-table-column label="是否启动" align="center" prop="status">
          <template #default="scope">
            <el-switch
              v-model="scope.row.status"
              active-value="0"
              inactive-value="1"
              @change="handleStatusChange(scope.row)"
            />
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="260" fixed="right">
          <template #default="scope">
            <el-button
              v-hasPermi="['workflow:config:*']"
              type="primary"
              @click="handleUpdate(scope.row)"
            >修改</el-button>
            <el-button
              v-hasPermi="['workflow:config:*']"
              type="danger"
              @click="handleDelete(scope.row)"
            >删除</el-button>
            <el-button
              v-hasPermi="['workflow:config:*']"
              type="warning"
              @click="handleCopy(scope.row)"
            >复制</el-button>
          </template>
        </el-table-column>
      </el-table>

      <pagination
        v-show="total > 0"
        v-model:page="queryParams.pageNum"
        v-model:limit="queryParams.pageSize"
        :total="total"
        @pagination="getList"
      />
    </el-card>

    <!--    </el-card>-->
    <!-- 添加或修改审批流程配置对话框 -->
    <el-dialog v-model="open" :title="title" width="880px" append-to-body>
      <el-form
        ref="configRef"
        :model="form"
        :rules="rules"
        label-width="170px"
        label-suffix="："
      >
        <el-form-item label="流程名称" prop="wkName">
          <el-input
            v-model="form.wkName"
            placeholder="请输入流程名称"
            style="width: 400px"
            clearable
          />
        </el-form-item>
        <el-form-item label="流程类型" prop="wkType">
          <el-select
            v-model="form.wkType"
            placeholder="流程类型"
            style="width: 400px"
          >
            <el-option label="通用流程" value="0" />
            <el-option label="特殊流程" value="1" />
          </el-select>
        </el-form-item>
        <el-form-item label="适用范围" prop="wkDeptArr">
          <el-tree-select
            v-model="form.wkDeptArr"
            clearable
            style="width: 400px"
            :data="deptOptions"
            :props="{ value: 'id', label: 'label', children: 'children' }"
            value-key="id"
            placeholder="请选择归属协会/道馆"
            check-strictly
            multiple
          />
        </el-form-item>
        <el-form-item label="审批流程" prop="rulesArr">
          <el-checkbox-group v-model="form.rulesArr">
            <div v-for="t in targetArr" :key="t.value">
              <el-checkbox :label="t.value" :disabled="t.disabled">{{ t.name }}</el-checkbox>
            </div>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="是否跳过无管理员层级" prop="isSkip">
          <el-radio-group v-model="form.isSkip">
            <el-radio label="1">否</el-radio>
            <el-radio label="0">是</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="是否自动生效" prop="isEffect">
          <el-row style="width: 100%">
            <el-col :span="4">
              <el-radio-group v-model="form.isEffect">
                <el-radio label="1">否</el-radio>
                <el-radio label="0">是</el-radio>
              </el-radio-group>
            </el-col>
            <el-col :span="20">
              <el-input
                v-show="form.isEffect == '0'"
                v-model="form.effectVal"
                type="number"
              >
                <template #prepend>上一层级审核通过后</template>
                <template #append>小时，如下一层级不审核，则默认审核通过</template>
              </el-input>
            </el-col>
          </el-row>
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <el-radio-group v-model="form.status">
            <el-radio label="0">启用</el-radio>
            <el-radio label="1">停用</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button :loading="buttonLoading" type="primary" @click="submitForm">确 定</el-button>
          <el-button @click="cancel">取 消</el-button>
        </div>
      </template>
    </el-dialog>

    <copy-config ref="copyConfigRef" />
  </div>
</template>

<script setup name="Approval">
import { getCurrentInstance, onMounted, ref, toRefs, watch } from 'vue'
import { reactive } from '@vue/runtime-core'
import _ from 'lodash'
import {
  addConfig,
  changeConfigStatus,
  delConfig,
  getConfig,
  listConfig,
  updateConfig
} from '@/api/workflow/config'
import { deptTreeSelect } from '@/api/system/user'
import CopyConfig from './copyConfig'

const { proxy } = getCurrentInstance()
const { approval_type } = proxy.useDict('approval_type')

const activeName = ref('')

const loading = ref(true)
const configList = ref([])
const total = ref(0)
const open = ref(false)
const title = ref('')
const buttonLoading = ref(false)
const deptOptions = ref(undefined)
const targetArr = [
  { name: '团体会员（俱乐部）', value: '6', disabled: true },
  { name: '区协会', value: '5', disabled: false },
  { name: '市协会', value: '4', disabled: false },
  { name: '省协会', value: '2', disabled: true },
  { name: '中跆协', value: '1', disabled: true }
]

const data = reactive({
  form: {},
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    wkClassify: undefined
  },
  rules: {
    wkName: [{ required: true, message: '流程名称不能为空', trigger: 'blur' }],
    wkType: [
      { required: true, message: '流程类型不能为空', trigger: 'change' }
    ],
    wkDeptArr: [
      { required: true, message: '适用范围不能为空', trigger: 'change' }
    ],
    rulesArr: [
      { required: true, message: '审批流程不能为空', trigger: 'change' }
    ]
  }
})

const { form, queryParams, rules } = toRefs(data)

watch(approval_type, (val) => {
  if (val && val.length > 0) {
    activeName.value = val[0].value
  }
}, { immediate: true })

watch(activeName, (val) => {
  if (!val) {
    return
  }

  queryParams.value.wkClassify = val
  getList()
}, { immediate: true })

function handleAdd() {
  reset()
  open.value = true
  title.value = '添加审批流程'
}

function getList() {
  loading.value = true
  listConfig(queryParams.value).then((res) => {
    configList.value = res.rows
    total.value = res.total
    loading.value = false
  })
}

function reset() {
  form.value = {
    wkId: null,
    wkName: null,
    wkClassify: null,
    wkType: '0',
    wkDeptArr: [],
    rulesArr: ['1', '2', '6'],
    deep: 0,
    isSkip: '1',
    isEffect: '1',
    effectVal: null,
    status: '0'
  }
  proxy.resetForm('configRef')
}

function handleStatusChange(row) {
  const text = row.status === '0' ? '启用' : '停用'
  proxy.$modal
    .confirm('确认要"' + text + '" "' + row.wkName + '"?')
    .then(function() {
      return changeConfigStatus(row.wkId, row.status)
    })
    .then(() => {
      proxy.$modal.msgSuccess(text + '成功')
    })
    .catch(function() {
      row.status = row.status === '0' ? '1' : '0'
    })
}

function handleUpdate(row) {
  loading.value = true
  reset()
  const _wkId = row.wkId
  getConfig(_wkId).then((response) => {
    const data = response.data
    data.wkDeptArr = data.wkDept.split(',')
    data.rulesArr = data.rules.split(',')
    form.value = data

    loading.value = false
    open.value = true
    title.value = '修改审批流程'
  })
}

/** 删除按钮操作 */
function handleDelete(row) {
  proxy.$modal
    .confirm('是否确认删除 "' + row.wkName + '"？')
    .then(function() {
      loading.value = true
      return delConfig(row.wkId)
    })
    .then(() => {
      loading.value = true
      getList()
      proxy.$modal.msgSuccess('删除成功')
    })
    .catch(() => {})
    .finally(() => {
      loading.value = false
    })
}

/** 提交按钮 */
function submitForm() {
  proxy.$refs['configRef'].validate((valid) => {
    if (valid) {
      if (form.value.isEffect == '0' && !form.value.effectVal) {
        proxy.$modal.msgError('请输入生效时间')
        return
      }

      form.value.wkClassify = activeName.value
      form.value.wkDept = form.value.wkDeptArr.join(',')
      form.value.wkDeptname = getWkDeptNames(form.value.wkDeptArr)
      form.value.rules = _.orderBy(form.value.rulesArr, null, ['desc']).join(',')
      form.value.deep = form.value.rulesArr.length

      buttonLoading.value = true
      if (form.value.wkId) {
        updateConfig(form.value)
          .then((response) => {
            proxy.$modal.msgSuccess('修改成功')
            open.value = false
            getList()
          })
          .finally(() => {
            buttonLoading.value = false
          })
      } else {
        addConfig(form.value)
          .then((response) => {
            proxy.$modal.msgSuccess('新增成功')
            open.value = false
            getList()
          })
          .finally(() => {
            buttonLoading.value = false
          })
      }
    }
  })
}

// 取消按钮
function cancel() {
  open.value = false
  reset()
}

onMounted(() => {
  deptTreeSelect().then((response) => {
    deptOptions.value = response.data
  })
})

function getWkDeptNames(ids) {
  const getWkDeptName = (id, list) => {
    let name = null
    _.find(list, (l) => {
      if (l.id == id) {
        name = l.label
        return true
      } else {
        if (l.children && l.children.length > 0) {
          name = getWkDeptName(id, l.children)
          return name
        } else {
          return false
        }
      }
    })
    return name
  }

  const wkDeptNames = []
  _.each(ids, (id) => {
    wkDeptNames.push(getWkDeptName(id, deptOptions.value))
  })

  return wkDeptNames.join('，')
}

// 复制流程
function handleCopy(row) {
  proxy.$refs['copyConfigRef'].open(
    row.wkId,
    approval_type.value,
    row.wkClassify
  )
}
</script>