<template>
  <Dialog
    v-model="visible"
    showFooter
    v-bind="$attrs"
    show-cancel-button
    show-confirm-button
    :diaTitle="$t('工况库.提交评审')"
    :confirm-closable="false"
    :width="500"
    :height="300"
  >
    <template #default>
      <el-form ref="formRef" :rules="rules" :model="form" label-width="120">
        <el-form-item :label="$t('工况库.审批')" prop="bApprove">
          <el-radio-group v-model="form.bApprove">
            <el-radio :value="true" size="large">{{ $t('通用.是') }}</el-radio>
            <el-radio :value="false" size="large">{{ $t('通用.否') }}</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item
          :label="$t('工况库.审核模版')"
          prop="approveTemplateId"
          v-if="form.bApprove === true"
        >
          <ApproveList v-model="form.approveTemplateId" @change="onApproveChangeFun" />
        </el-form-item>
        <el-form-item :label="$t('工况库.升版')" prop="bNewVersion">
          <el-radio-group v-model="form.bNewVersion" :disabled="props.isInitial">
            <el-radio :value="true" size="large">{{ $t('通用.是') }}</el-radio>
            <el-radio :value="false" size="large">{{ $t('通用.否') }}</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item
          :label="$t('工况库.升大版本')"
          prop="versionType"
          v-if="form.bNewVersion === true"
        >
          <el-radio-group v-model="form.versionType" :disabled="props.isInitial">
            <el-radio :value="1" size="large">{{ $t('通用.是') }}</el-radio>
            <el-radio :value="0" size="large">{{ $t('通用.否') }}</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
    </template>
    <template #footer>
      <div>
        <el-button @click="onCancelFun">{{ $t('通用.取消') }}</el-button>
        <el-button type="primary" @click="onConfirmFun">{{ $t('通用.确定') }}</el-button>
      </div>
    </template>
  </Dialog>
</template>

<script setup lang="ts">
import { ref, reactive, computed, watch } from 'vue';
import Dialog from '@/components/common/dialog/index.vue';
import type { FormInstance, FormRules } from 'element-plus';
import ApproveList from '@/components/common/approveList/index.vue';

interface Props {
  isInitial: boolean;
  modelValue: boolean;
}

const props = withDefaults(defineProps<Props>(), {
  isInitial: false,
  modelValue: false,
});
const emits = defineEmits(['update:modelValue', 'confirm']);
const visible = computed({
  get: () => props.modelValue,
  set: (val) => emits('update:modelValue', val),
});
const form = reactive<any>({
  bApprove: true,
  approveTemplateId: '',
  bNewVersion: false,
  versionType: 0,
});
const formRef = ref<FormInstance>();
interface RuleForm {
  bApprove: boolean;
  approveTemplateId: string;
  bNewVersion: boolean;
  versionType: 0 | 1; // 0：生成小版本 1：生成大版本
}
const rules = reactive<FormRules<RuleForm>>({
  bApprove: [{ required: true, message: '请选择是否审批', trigger: 'blur' }],
  approveTemplateId: [{ required: true, message: '请选择审核模版', trigger: 'blur' }],
  bNewVersion: [{ required: true, message: '请选择是否升版', trigger: 'blur' }],
  versionType: [{ required: true, message: '请选择升版类型', trigger: 'blur' }],
});
const onCancelFun = () => {
  visible.value = false;
};
const onConfirmFun = async () => {
  if (!formRef.value) {
    return;
  }
  await formRef.value.validate((valid) => {
    if (valid) {
      emits('confirm', form);
    }
  });
};

watch(
  () => props.modelValue,
  (val) => {
    if (val) {
      resetFun();
      form.bNewVersion = false;
      form.versionType = 0;
    }
  }
);

const onApproveChangeFun = (data: any) => {
  form.approveTemplateName = data.label;
};
const resetFun = () => {
  if (!formRef.value) {
    return;
  }
  formRef.value.resetFields();
};
</script>

<style scoped lang="scss">
.user-item {
  width: 100%;
  height: 100%;
}

:deep(.el-select .el-select__tags-text) {
  max-width: 80px !important;
}
</style>
