<template>
  <div class="control-area">
    <FormMessage
      v-model="listQuery"
      :formList="formData"
      ref="elform"
      :rules="rules"
    >
      <!-- 布控范围-->
      <template #bkfwList="{ row }">
        <div class="boxlist">
          <MyTable
            :tableData="tableDate.bkfwList"
            :tableColumn="tableDate.tableColumn"
            :tableHeight="tableDate.tableHeight"
            :key="tableDate.keyCount"
            :tableConfiger="tableDate.tableConfiger"
            :controlsWidth="tableDate.controlsWidth"
          >
            <!-- 操作 -->
            <template #controls="{ row }">
              <el-link type="danger" @click="delDictItem(row.id)">删除</el-link>
            </template>
          </MyTable>
        </div>
      </template>
    </FormMessage>
  </div>
</template>

<script setup>
import {
  reactive,
  ref,
  onMounted,
  getCurrentInstance,
  nextTick,
  computed
} from "vue";
const { proxy } = getCurrentInstance();
import MyTable from "@/components/aboutTable/MyTable.vue";
import FormMessage from "@/components/aboutTable/FormMessage.vue";
import { qcckPost, qcckPut } from "@/api/qcckApi.js";

const { D_GS_BK_CZYQ, D_GS_BK_CZJSDWLX, D_GS_BK_DJ, D_GS_BK_YZ, D_GS_BK_SJLX } =
  proxy.$dict(
    "D_GS_BK_CZYQ",
    "D_GS_BK_CZJSDWLX",
    "D_GS_BK_DJ",
    "D_GS_BK_YZ",
    "D_GS_BK_SJLX"
  ); //获取字典数据

const chooseShow = ref(false); //选择弹窗
const chooseTitle = ref(""); //选择弹窗
const dialogForm = ref(false); //弹窗
const chooseType = ref("01"); //选择弹窗类型
const roleIds = ref([]); //选择弹窗角色id
const fileList = ref([]); //上传附件
const tableDate = reactive({
  bkfwList: [], //表格数据
  rybqList: [], //内置表格数据
  keyCount: 0,
  rykeyCount: 0,
  tableConfiger: {
    rowHieght: 61,
    showSelectType: "null",
    loading: false
  },
  total: 0,
  tableHeight: 225,
  pageConfiger: {
    pageSize: 20,
    pageCurrent: 1
  }, //分页
  controlsWidth: 90, //操作栏宽度
  tableColumn: [
    { label: "集合名称", prop: "jhMc" },
    { label: "集合说明", prop: "jhSm" }
  ]
});
const formData = ref([
  { label: "布控范围", prop: "bkfwList", type: "slot", width: "90%" },
  {
    label: "布控时间类型",
    prop: "bkSjLx",
    type: "select",
    options: D_GS_BK_SJLX,
    disabled: true
  },
  {
    label: "布控开始时间",
    prop: "bkSjKs",
    type: "datetime",
    disabled: true
  },
  {
    label: "布控结束时间",
    prop: "bkSjJs",
    type: "datetime",
    disabled: true
  },
  {
    label: "布控失效时间",
    prop: "bkSjSx",
    type: "datetime",
    disabled: true
  },

  {
    label: "处置要求",
    prop: "czYq",
    type: "select",
    options: D_GS_BK_CZYQ,
    disabled: true
  },
  {
    label: "布控等级",
    prop: "bkDj",
    type: "select",
    options: D_GS_BK_DJ,
    disabled: true
  },
  {
    label: "布控要旨",
    prop: "bkYz",
    type: "select",
    options: D_GS_BK_YZ,
    disabled: true
  },
  {
    label: "布控事由",
    prop: "bkSy",
    type: "textarea",
    disabled: true
  },
  {
    label: "上传附件",
    prop: "bkFj",
    type: "upload",
    isImg: false,
    disabled: true
  }
]);
const rules = reactive({
  // bkSjKs: [{ required: true, message: "请选择布控开始时间", trigger: "blur" }],
  // bkSjJs: [{ required: true, message: "请选择布控结束时间", trigger: "blur" }],
  czYq: [{ required: true, message: "请选择处置要求", trigger: "change" }],
  bkDj: [{ required: true, message: "请选择布控等级", trigger: "change" }],
  bkYz: [{ required: true, message: "请选择布控要旨", trigger: "change" }]
});
const listQuery = ref({});

// 接收父组件传入的数据并回显
const setFormData = (data) => {
  tableDate.bkfwList = data.bkfwList;
  tableDate.rybqList = data.rybqList;
  listQuery.value = {
    ...data // 假设 data 包含所有需要的字段
  };
};
// 3. 暴露方法给父组件
defineExpose({
  setFormData
});
</script>

<style lang="scss" scoped>
.control-area {
  .map {
    height: 200px;
    border: 1px solid #ccc;
    border-radius: 5px;
    box-sizing: border-box;
    margin: 10px 0;
  }
  .el-form {
    /* max-width: 1200px;
    margin: 20px auto; */
  }

  :deep(.el-textarea__inner) {
    font-family: inherit;
  }
}
.boxlist {
  width: 99%;
  height: 225px;
  margin-top: 10px;
  overflow: hidden;
}
</style>
