<template>
  <div class="dialog" v-if="dialogForm">
    <div class="head_box">
      <span class="title">行为标签管理{{ title }} </span>
      <div>
        <el-button
          type="primary"
          size="small"
          :loading="loading"
          @click="submit"
          >保存</el-button
        >
        <el-button size="small" @click="close">关闭</el-button>
      </div>
    </div>
    <div class="form_cnt">
      <FormMessage
        v-model="listQuery"
        :formList="formData"
        ref="elform"
        :rules="rules"
      >
        <template #bqDlMc>
          <el-input
            readonly
            @click="showDialog = true"
            v-model="listQuery.bqDlMc"
            placeholder="请选择标签大类"
            clearable
          />
        </template>
      </FormMessage>
    </div>
    <!-- 选择框 -->
    <DialogList
      bqDl="02"
      bqLx="02"
      titleValue="选择大类"
      v-model="showDialog"
      :dic="props.dic"
      @chooseDate="chooseDate"
    ></DialogList>
  </div>
</template>

<script setup>
import DialogList from "@/views/backOfficeSystem/fourColorManage/components/dialogList.vue";
import FormMessage from "@/components/aboutTable/FormMessage.vue";
import { qcckGet, qcckPost, qcckPut } from "@/api/qcckApi.js";
import {
  ref,
  defineProps,
  defineExpose,
  reactive,
  defineEmits,
  getCurrentInstance
} from "vue";
const emit = defineEmits(["updateDate"]);
const props = defineProps({
  type: String,
  dic: Object
});
const showDialog = ref(false); //弹窗
const listQuery = ref({}); //表单
const loading = ref(false);
const elform = ref();
const title = ref("");
const { proxy } = getCurrentInstance();
const dialogForm = ref(false); //弹窗
const formData = reactive([
  { label: "标签名称", prop: "bqMc", type: "input" },
  { label: "标签代码", prop: "bqDm", type: "input" },
  {
    label: "标签等级",
    prop: "bqDj",
    type: "select",
    options: props.dic.D_GS_BQ_DJ
  },
  {
    label: "标签颜色",
    prop: "bqYs",
    type: "select",
    options: props.dic.D_GS_SSYJ
  },
  { label: "标签分值", prop: "bqFz", type: "number", max: 100 },
  { label: "标签说明", prop: "bqSm", type: "textarea", width: "100%" }
]);

const rules = reactive({
  bqMc: [{ required: true, message: "请输入标签名称", trigger: "blur" }],
  bqDm: [{ required: true, message: "请输入标签代码", trigger: "blur" }],
  bqDj: [
    { required: true, message: "请选择标签等级", trigger: ["blur", "change"] }
  ],
  bqYs: [
    { required: true, message: "请选择标签颜色", trigger: ["blur", "change"] }
  ],
  bqFz: [
    { required: true, message: "请输入标签分值", trigger: ["blur", "change"] }
  ]
});

// 初始化数据
const init = (type, row) => {
  title.value = type == "add" ? "新增" : "编辑";
  dialogForm.value = true;
  if (props.type == "标签细类")
    formData.push({
      label: "标签大类",
      prop: "bqDlMc",
      width: "100%",
      type: "slot"
    });
  if (row) getDataById(row.id);
};

// 根据id查询详情
const getDataById = (id) => {
  qcckGet({}, "/mosty-gsxt/tbGsxtBqgl/selectVoById/" + id).then((res) => {
    listQuery.value = res;
  });
};

// 提交
const submit = () => {
  elform.value.submit((data) => {
    let url =
      title.value == "新增"
        ? "/mosty-gsxt/tbGsxtBqgl/save"
        : "/mosty-gsxt/tbGsxtBqgl/update";
    let params = {
      ...data,
      bqLb: props.dic.D_GS_BQ_LB.find((it) => it.zdmc == props.type).dm
    };
    params.bqLx = "02";
    loading.value = true;
    qcckPost(params, url)
      .then((res) => {
        proxy.$message({ type: "success", message: title.value + "成功" });
        emit("updateDate");
        loading.value = false;
        close();
      })
      .catch(() => {
        loading.value = false;
      });
  });
};

// 选择的数据
const chooseDate = (val) => {
  if (!val && val.length == 0) return;
  listQuery.value.bqDlId = val[0].id;
  listQuery.value.bqDlMc = val[0].bqMc;
};

// 关闭
const close = () => {
  listQuery.value = {};
  dialogForm.value = false;
  loading.value = false;
  if (props.type == "标签细类") formData.pop();
};
defineExpose({ init });
</script>

<style lang="scss" scoped>
@import "~@/assets/css/layout.scss";
@import "~@/assets/css/element-plus.scss";
</style>
