<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 #sfbqIdList>
          <el-button @click="openDialog('01')">选择</el-button>
          <div class="boxlist">
            <MyTable
              :tableData="tableDate.sfbqIdList"
              :tableColumn="tableDate.tableColumn"
              :tableHeight="tableDate.tableHeight"
              :key="tableDate.keyCount"
              :tableConfiger="tableDate.tableConfiger"
              :controlsWidth="tableDate.controlsWidth"
            >
              <template #bqLx="{ row }">
                <DictTag
                  :value="row.bqLx"
                  :tag="false"
                  :options="props.dic.D_GS_BQ_LX"
                />
              </template>
              <template #bqLb="{ row }">
                <DictTag
                  :value="row.bqLb"
                  :tag="false"
                  :options="props.dic.D_GS_BQ_LB"
                />
              </template>
              <template #bqYs="{ row }">
                <DictTag
                  :value="row.bqYs"
                  :tag="false"
                  :options="props.dic.D_GS_SSYJ"
                />
              </template>
              <template #bqDj="{ row }">
                <DictTag
                  :tag="false"
                  :value="row.bqDj"
                  :options="props.dic.D_GS_BQ_DJ"
                />
              </template>
              <!-- 操作 -->
              <template #controls="{ row }">
                <el-link
                  type="danger"
                  @click="delDictItem(row.id, '身份标签细类')"
                  >删除</el-link
                >
              </template>
            </MyTable>
          </div>
        </template>
        <!-- 行为标签细类 -->
        <template #xwbqIdList>
          <el-button @click="openDialog('02')">选择</el-button>
          <div class="boxlist">
            <MyTable
              :tableData="tableDate.xwbqIdList"
              :tableColumn="tableDate.tableColumn"
              :tableHeight="tableDate.tableHeight"
              :key="tableDate.keyCount"
              :tableConfiger="tableDate.tableConfiger"
              :controlsWidth="tableDate.controlsWidth"
            >
              <template #bqLx="{ row }">
                <DictTag
                  :value="row.bqLx"
                  :tag="false"
                  :options="props.dic.D_GS_BQ_LX"
                />
              </template>
              <template #bqLb="{ row }">
                <DictTag
                  :value="row.bqLb"
                  :tag="false"
                  :options="props.dic.D_GS_BQ_LB"
                />
              </template>
              <template #bqYs="{ row }">
                <DictTag
                  :value="row.bqYs"
                  :tag="false"
                  :options="props.dic.D_GS_SSYJ"
                />
              </template>
              <template #bqDj="{ row }">
                <DictTag
                  :tag="false"
                  :value="row.bqDj"
                  :options="props.dic.D_GS_BQ_DJ"
                />
              </template>
              <!-- 操作 -->
              <template #controls="{ row }">
                <el-link
                  type="danger"
                  @click="delDictItem(row.id, '行为标签细类')"
                  >删除</el-link
                >
              </template>
            </MyTable>
          </div>
        </template>
      </FormMessage>
    </div>
    <!-- 列表弹窗 -->
    <DialogList
      :Single="false"
      :roleIds="roleIds"
      v-if="chooseShow"
      :dic="props.dic"
      @chooseDate="chooseDate"
      :titleValue="chooseTitle"
      v-model="chooseShow"
      :bqLx="chooseType"
      bqDl="02"
    ></DialogList>
  </div>
</template>

<script setup>
import MyTable from "@/components/aboutTable/MyTable.vue";
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,
  defineExpose,
  defineProps,
  reactive,
  defineEmits,
  getCurrentInstance
} from "vue";
const emit = defineEmits(["updateDate"]);
const { proxy } = getCurrentInstance();
const props = defineProps({
  dic: Object
});
const roleIds = ref([]); //角色id
const chooseType = ref("01"); //选择弹窗类型
const chooseShow = ref(false); //选择弹窗
const chooseTitle = ref(""); //选择弹窗
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: "input" },
  { label: "组合标签说明", prop: "bqSm", type: "input" },
  { label: "身份标签细类", prop: "sfbqIdList", type: "slot", width: "100%" },
  { label: "行为标签细类", prop: "xwbqIdList", type: "slot", width: "100%" }
]);
const rules = reactive({
  bqMc: [{ required: true, message: "请输入组合标签名称", trigger: "blur" }],
  bqDm: [{ required: true, message: "请输入组合标签代码", trigger: "blur" }],
  zhbqjf: [{ required: true, message: "请输入组合标签积分", trigger: "blur" }],
  sfbqIdList: [
    { required: true, message: "请选择身份标签细类", trigger: "change" }
  ],
  xwbqIdList: [
    { required: true, message: "请选择行为标签细类", trigger: "change" }
  ]
});

const tableDate = reactive({
  sfbqIdList: [], //表格数据
  xwbqIdList: [], //表格数据
  keyCount: 0,
  tableConfiger: {
    rowHieght: 61,
    showSelectType: "null",
    loading: false
  },
  total: 0,
  tableHeight: 225,
  pageConfiger: {
    pageSize: 20,
    pageCurrent: 1
  }, //分页
  controlsWidth: 90, //操作栏宽度
  tableColumn: [
    { label: "标签名称", prop: "bqMc", showOverflowTooltip: true },
    { label: "标签代码", prop: "bqDm" },
    { label: "标签大类名称", prop: "bqDlMc" },
    { label: "标签类型", prop: "bqLx", showSolt: true },
    { label: "标签类别", prop: "bqLb", showSolt: true },
    { label: "标签颜色", prop: "bqYs", showSolt: true },
    { label: "标签等级", prop: "bqDj", showSolt: true }
  ]
});
const listQuery = ref({}); //表单
const loading = ref(false);
const elform = ref();
const title = ref("");
// 初始化数据
const init = (type, row) => {
  dialogForm.value = true;
  title.value = type == "add" ? "新增" : "编辑";
  if (row) getDataById(row.id);
};
// 根据id查询详情
const getDataById = (id) => {
  qcckGet({}, "/mosty-gsxt/tbGsxtBqzh/selectVoById/" + id).then((res) => {
    listQuery.value = res;
    tableDate.sfbqIdList = res.sfbqList;
    listQuery.value.sfbqIdList = res.sfbqList.map((item) => item.id);
    tableDate.xwbqIdList = res.xwbqList;
    listQuery.value.xwbqIdList = res.xwbqList.map((item) => item.id);
    tableDate.keyCount++;
  });
};

// 提交
const submit = () => {
  elform.value.submit((data) => {
    let url =
      title.value == "新增"
        ? "/mosty-gsxt/tbGsxtBqzh/save"
        : "/mosty-gsxt/tbGsxtBqzh/update";
    let params = { ...data };
    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 openDialog = (type) => {
  chooseShow.value = true;
  chooseType.value = type;
  chooseTitle.value = type == "01" ? "选择身份标签细类" : "选择行为标签细类";
  roleIds.value =
    type == "01"
      ? tableDate.sfbqIdList.map((item) => item.id)
      : tableDate.xwbqIdList.map((item) => item.id);
};
// 选择数据
const chooseDate = (data) => {
  if (chooseType.value == "01") {
    tableDate.sfbqIdList = data;
    listQuery.value.sfbqIdList = tableDate.sfbqIdList.map((item) => item.id);
  } else {
    tableDate.xwbqIdList = data;
    listQuery.value.xwbqIdList = tableDate.xwbqIdList.map((item) => item.id);
  }
};

// 删除
const delDictItem = (id, type) => {
  switch (type) {
    case "身份标签细类":
      tableDate.sfbqIdList = tableDate.sfbqIdList.filter(
        (item) => item.id !== id
      );
      listQuery.value.sfbqIdList = tableDate.sfbqIdList.map((item) => item.id);
      break;
    case "行为标签细类":
      tableDate.xwbqIdList = tableDate.xwbqIdList.filter(
        (item) => item.id !== id
      );
      listQuery.value.xwbqIdList = tableDate.xwbqIdList.map((item) => item.id);
      break;
  }
};
// 关闭
const close = () => {
  listQuery.value = {};
  tableDate.sfbqIdList = [];
  tableDate.xwbqIdList = [];
  dialogForm.value = false;
  loading.value = false;
};
defineExpose({ init });
</script>

<style lang="scss" scoped>
@import "~@/assets/css/layout.scss";
@import "~@/assets/css/element-plus.scss";
.boxlist {
  width: 99%;
  height: 225px;
  margin-top: 10px;
  overflow: hidden;
}
</style>
