<template>
  <Dialog v-model="visible" diaTitle="选择删除审核流程" :width="400" @close="closeFun">
    <div class="content">
      <div class="tip">
        <el-icon class="icon" :size="16">
          <Warning />
        </el-icon>
        <span>数据将在审核通过后自动删除</span>
      </div>
      <div class="form">
        <TableForm
          ref="TableFormRef"
          v-model:data="formData"
          tableName="APPROVE_DEL_FORM"
          @change="changeFun"
        />
      </div>
    </div>
    <template #footer>
      <div>
        <el-button @click="closeFun">{{ $t('通用.取消') }}</el-button>
        <el-button type="primary" @click="submitFun">{{ $t('通用.确定') }}</el-button>
      </div>
    </template>
  </Dialog>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue';
import { Warning } from '@element-plus/icons-vue';
import Dialog from '@/components/common/dialog/index.vue';
import TableForm from '@/components/common/table/tableForm.vue';
import { ElMessage } from 'element-plus';

interface Props {
  modelValue: boolean;
  api: any;
  params?: any;
}

const props = withDefaults(defineProps<Props>(), {
  modelValue: false,
  api: null,
  params: {},
});

watch(
  () => props.modelValue,
  (val: boolean) => {
    visible.value = val;
    if (!val) {
      if (TableFormRef.value) {
        TableFormRef.value.resetFun();
      }
    }
  }
);

const emit = defineEmits(['update:modelValue', 'confirm']);
const TableFormRef = ref<any>();
const formData = ref<any>({});
const visible = ref(false);

const changeFun = (data: any) => {
  const { key, val } = data;
  if (key === 'templateId') {
    formData.value.templateId = val.value;
    formData.value.templateName = val.label;
  }
};

const submitFun = async () => {
  const valid = await TableFormRef.value.validateFun();
  if (valid) {
    if (props.api) {
      const params = {
        ...props.params,
        ...formData.value,
      };
      props.api(params).then((res: any) => {
        if (res.code === 200) {
          ElMessage.success('操作成功');
          closeFun();
          emit('confirm');
        }
      });
    }
  }
};

const closeFun = () => {
  emit('update:modelValue', false);
};
</script>

<style lang="scss" scoped>
.content {
  .tip {
    display: flex;
    align-items: center;
    padding-bottom: 10px;
    font-size: 12px;
    line-height: 14px;
    color: var(--el-text-color-secondary);
    .icon {
      color: var(--el-color-danger);
      cursor: pointer;
    }
    span {
      padding-left: 4px;
    }
  }
}
</style>
