<script setup lang="ts">
import { ref, reactive, onMounted } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import type { DrawerProps, FormItemProps, FormProps } from "element-plus";
import { postUpdateDept, getQuotaSourceList } from "@/api/indexDefine";
import {
  getSelectDictListtApi,
  select,
  getFromSelectDictListtApi,
  selectFrom
} from "@/api/select";
import { getStateData, getStateType } from "@/config/tag";
const emit = defineEmits(["closeEditDialog"]);
const formRef = ref();
const drawer = ref(false);
const disabledShow = ref<any>(true);
onMounted(() => {
  getSelectDictListtApi();
  getFromSelectDictListtApi();
});
const direction = ref<DrawerProps["direction"]>("rtl");
const formLabelAlign = reactive({
  id: "",
  name: "",
  categoryName: "",
  define: "",
  caliber: "",
  source: "",
  statue: null
});
const rules = reactive<FormProps["rules"]>({
  name: [{ required: true, message: "请输入指标名称", trigger: "blur" }],
  define: { required: true, message: "请输入指标定义", trigger: "blur" },
  caliber: { required: true, message: "请输入指标口径", trigger: "blur" },
  statue: { required: true, message: "请选择指标状态", trigger: "blur" }
});
const handleClose = (done: () => void) => {
  if (disabledShow.value) {
    disabledShow.value = true;
    drawer.value = false;
  } else {
    ElMessageBox.confirm("配置项未保存，确认关闭", {
      type: "warning"
    }).then(() => {
      formRef.value.clearValidate(); // 清除验证错误
      formRef.value.resetFields(); // 重置表单字段
      disabledShow.value = true;
      drawer.value = false;
    });
  }
};
function cancelClick() {
  formRef.value.validate(valid => {
    if (valid) {
      disabledShow.value = true;
    }
  });
}
// 确认
const postUpdateDeptApi = async () => {
  const { code, msg } = await postUpdateDept(formLabelAlign);
  if (code === 200) {
    ElMessage({
      message: "修改成功",
      type: "success"
    });
    disabledShow.value = true;
    drawer.value = false;
    emit("closeEditDialog");
  } else {
    ElMessage.error(msg);
  }
};
function confirmClick() {
  formRef.value.validate(valid => {
    if (valid) {
      postUpdateDeptApi();
    }
  });
}
const open = row => {
  Object.assign(formLabelAlign, row);
  getQuotaSourceListApi();
  drawer.value = true;
};
// 编辑
const editClick = () => {
  disabledShow.value = false;
};
// 来源
const sourceDataList = ref([]);
const getQuotaSourceListApi = async () => {
  const { data, code } = await getQuotaSourceList();
  console.log("1112132", data);
  if (code == 200) {
    sourceDataList.value = data;
  }
};
defineExpose({
  open
});
</script>

<template>
  <div>
    <el-drawer
      v-model="drawer"
      :direction="direction"
      :before-close="handleClose"
    >
      <template #header>
        <h4>指标详情</h4>
      </template>
      <template #default>
        <div>
          <el-form
            ref="formRef"
            label-position="top"
            label-width="auto"
            :rules="rules"
            :model="formLabelAlign"
          >
            <el-form-item label="指标名称" label-position="top" prop="name">
              <el-input
                v-model="formLabelAlign.name"
                :disabled="disabledShow"
              />
            </el-form-item>
            <el-form-item label="指标分类" label-position="top">
              <el-select
                :key="formLabelAlign.categoryName"
                v-model="formLabelAlign.categoryName"
                :disabled="disabledShow"
                placeholder="请选择状态"
              >
                <el-option
                  v-for="(item, index) in select"
                  :key="index"
                  :label="item.dictValue"
                  :value="item.dictValue"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="指标定义" label-position="top" prop="define">
              <el-input
                v-model="formLabelAlign.define"
                :disabled="disabledShow"
                type="textarea"
              />
            </el-form-item>
            <el-form-item label="指标口径" label-position="top" prop="caliber">
              <el-input
                v-model="formLabelAlign.caliber"
                :disabled="disabledShow"
                type="textarea"
              />
            </el-form-item>
            <el-form-item label="来源" label-position="top">
              <el-select
                v-model="formLabelAlign.source"
                :disabled="disabledShow"
                clearable
                filterable
                placeholder="请选择来源"
              >
                <el-option
                  v-for="item in sourceDataList"
                  :key="item.id"
                  :label="item.sourceValue"
                  :value="item.sourceValue"
              /></el-select>
            </el-form-item>
            <el-form-item label="状态" label-position="top" prop="statue">
              <el-select
                :key="formLabelAlign.statue"
                v-model="formLabelAlign.statue"
                :disabled="disabledShow"
                placeholder="请选择状态"
              >
                <el-option label="草稿" :value="0" />
                <el-option label="发布" :value="1" />
                <el-option label="下架" :value="2" />
              </el-select>
            </el-form-item>
          </el-form>
        </div>
      </template>
      <template #footer>
        <el-button v-if="disabledShow" type="warning" @click="editClick"
          >编辑</el-button
        >
        <div v-else>
          <el-button @click="cancelClick">取消</el-button>
          <el-button type="primary" @click="confirmClick">确认</el-button>
        </div>
      </template>
    </el-drawer>
  </div>
</template>
