<template>
  <div class="comp-review">
    <div class="table">
      <BaseTable
        ref="baseTableRef"
        showIndex
        :api="systemQueryAllApproveFlowMapApi"
        tableName="APPROVAL_CONFIG"
        fullHeight
        :actionList="actionList"
      >
        <template #leftOptions>
          <el-button type="primary" :icon="Plus" @click="opoenFun({})">新增配置</el-button>
        </template>
        <template #flowList="{ row }">
          <div class="tag-list">
            <el-tag v-for="(item, index) in row.flowList" :key="index" class="tag" type="primary">
              {{ item.flowName }}
            </el-tag>
          </div>
        </template>
      </BaseTable>
    </div>
    <Dialog v-model="dialogVisible" :diaTitle="`${editId ? '编辑' : '新增'}`" :width="400">
      <div class="content">
        <TableForm
          ref="tableFormRef"
          v-model:data="formData"
          :formAttrs="{
            moduleCode: {
              disabled: editId,
            },
            flowList: {
              multiple: true,
            },
          }"
          :itemNum="3"
          tableName="APPROVAL_CONFIG"
          @change="changeFun"
        />
      </div>
      <template #footer>
        <div>
          <el-button @click="closeFun">取消</el-button>
          <el-button type="primary" @click="editFun">确定</el-button>
        </div>
      </template>
    </Dialog>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import BaseTable from '@/components/common/table/baseTable.vue';
import Dialog from '@/components/common/dialog/index.vue';
import TableForm from '@/components/common/table/tableForm.vue';
import { Plus } from '@element-plus/icons-vue';
import { useI18n } from 'vue-i18n';
import {
  systemQueryAddApproveFlowMapApi,
  systemQueryAllApproveFlowMapApi,
  systemUpdateApproveFlowMapApi,
  systemDeleteApproveFlowMapApi,
} from '@/api/system/systemApprove';
import { ElMessage } from 'element-plus';

const { t } = useI18n();
const dialogVisible = ref(false);
const formData = ref<any>({});
const flowListData = ref<any>([]);
const baseTableRef = ref<any>();
const tableFormRef = ref<any>();

const actionList = ref([
  {
    title: t('通用.编辑'),
    type: 'primary',
    click: (row: any) => {
      opoenFun(row);
    },
  },
  {
    title: t('通用.删除'),
    needConfirm: true,
    confirmTip: t('通用.确认删除吗'),
    type: 'danger',
    click: (row: any) => {
      delFun(row.moduleCode);
    },
  },
]);

const editId = ref('');
const opoenFun = (data: any) => {
  const { id, flowList = [], moduleCode, moduleName } = data;
  editId.value = id;
  if (id) {
    formData.value = {
      moduleCode,
      moduleName,
      flowList: flowList.map((item: any) => item.flowCode).join(','),
    };
    flowListData.value = flowList;
  } else {
    formData.value = {};
    tableFormRef.value?.resetFun();
  }
  dialogVisible.value = true;
};

const editFun = async () => {
  const valid = await tableFormRef.value.validateFun();
  if (valid) {
    const params = {
      ...formData.value,
      flowList: flowListData.value,
    };
    let api: any = systemQueryAddApproveFlowMapApi;
    if (editId.value) {
      api = systemUpdateApproveFlowMapApi;
    }
    api(params).then((res: any) => {
      if (res.code === 200) {
        ElMessage.success('操作成功');
        resetFun();
        closeFun();
      }
    });
  }
};

const changeFun = (data: any) => {
  if (data.key === 'flowList') {
    flowListData.value = data.val?.map((item: any) => {
      return {
        flowCode: item.value,
        flowName: item.label,
      };
    });
  }
};

const delFun = (moduleCode: any) => {
  const params = {
    moduleCode,
  };
  systemDeleteApproveFlowMapApi(params).then((res: any) => {
    if (res.code === 200) {
      resetFun();
    }
  });
};

const closeFun = () => {
  dialogVisible.value = false;
};

const resetFun = () => {
  baseTableRef.value?.resetFun();
};
</script>

<style lang="scss" scoped>
.comp-review {
  width: 100%;
  height: 100%;
  .table {
    width: 100%;
    height: 100%;
    .tag-list {
      max-width: 100%;
      overflow-x: auto;
      .tag {
        margin-right: 5px;
        margin-bottom: 5px;
      }
    }
  }
}
</style>
