<template>
  <div class="control-area">
    <FormMessage
      v-model="listQuery"
      :formList="formData"
      ref="elform"
      :rules="rules"
    >
      <!-- 布控范围-->
      <template #bkfwList="{ row }">
        <el-button @click="openDialog('01')">选择</el-button>
        <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>
      <!-- 布控范围-->
      <template #bkSjSx>
        {{
          listQuery?.bkSjKs && listQuery?.bkSjJs
            ? calculateDays(listQuery.bkSjKs, listQuery.bkSjJs)
            : "--"
        }}
      </template>
    </FormMessage>

    <!-- 列表弹窗 -->
    <DialogList
      :Single="false"
      :roleIds="roleIds"
      v-if="chooseShow"
      @chooseDate="chooseDate"
      :titleValue="chooseTitle"
      v-model="chooseShow"
      :bqLx="chooseType"
      :dic="{ D_GS_SSYJ }"
      bqDl="02"
    ></DialogList>

    <!-- <div class="map"></div> -->
    <!-- <el-form :model="formData" label-width="auto" label-position="left">
       时间选择 -->
    <!-- <el-row :gutter="20">
        <el-col :span="6">
          <el-form-item label="布控开始时间">
            <el-date-picker
              v-model="formData.bkSjKs"
              type="datetime"
              placeholder="选择开始时间"
              format="YYYY-MM-DD HH:mm"
              value-format="YYYY-MM-DD HH:mm"
              style="width: 100%"
            />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="布控结束时间">
            <el-date-picker
              v-model="formData.bkSjJs"
              type="datetime"
              placeholder="选择结束时间"
              format="YYYY-MM-DD HH:mm"
              value-format="YYYY-MM-DD HH:mm"
              style="width: 100%"
            />
          </el-form-item>
        </el-col>
      </el-row> -->

    <!-- 布控要求和级别 -->
    <!-- <el-row :gutter="20">
        <el-col :span="6">
          <el-form-item label="处置要求">
            <el-select v-model="formData.czYq" placeholder="请选择">
              <el-option
                :label="item.label"
                :value="item.id"
                v-for="item in D_GS_BK_CZYQ"
                :key="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="布控等级">
            <el-select v-model="formData.bkDj" placeholder="请选择">
              <el-option
                :label="item.label"
                :value="item.id"
                v-for="item in D_GS_BK_DJ"
                :key="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="布控要旨">
            <el-select v-model="formData.bkYz" placeholder="请选择">
              <el-option
                :label="item.label"
                :value="item.id"
                v-for="item in D_GS_BK_YZ"
                :key="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row> -->

    <!-- 布控事由 -->
    <!-- <el-form-item label="布控事由">
        <el-input
          v-model="formData.bkSy"
          type="textarea"
          :rows="4"
          placeholder="请输入布控事由"
        />
      </el-form-item> -->

    <!-- 上传附件 -->
    <!-- <el-form-item label="上传附件">
        <el-upload
          action="#"
          :auto-upload="false"
          :on-change="handleFileChange"
          :file-list="fileList"
        >
          <el-button type="primary">
            <el-icon><Plus /></el-icon>
            支持jpg、png、pdf等上传
          </el-button>
        </el-upload>
      </el-form-item>
    </el-form> -->
  </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";
import DialogList from "@/views/backOfficeSystem/IntelligentControl/myControl/components/ui/dialogList.vue";
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
  },
  {
    label: "布控开始时间",
    prop: "bkSjKs",
    type: "datetime"
  },
  {
    label: "布控结束时间",
    prop: "bkSjJs",
    type: "datetime"
  },
  {
    label: "布控失效时间",
    prop: "bkSjSx",
    type: "slot"
  },

  {
    label: "处置要求",
    prop: "czYq",
    type: "select",
    options: D_GS_BK_CZYQ
  },
  {
    label: "布控等级",
    prop: "bkDj",
    type: "select",
    options: D_GS_BK_DJ
  },
  {
    label: "布控要旨",
    prop: "bkYz",
    type: "select",
    options: D_GS_BK_YZ
  },
  {
    label: "布控事由",
    prop: "bkSy",
    type: "textarea"
  },
  {
    label: "上传附件",
    prop: "bkFj",
    type: "upload",
    isImg: false
  }
]);
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 openDialog = (type) => {
  chooseShow.value = true;
  chooseType.value = type;
  chooseTitle.value = type == "01" ? "请选择布控范围" : "请选择人员标签";
  roleIds.value =
    type == "01"
      ? tableDate.bkfwList.map((item) => item.id)
      : tableDate.rybqList.map((item) => item.id);
};

const calculateDays = (start, end) => {
  if (!start || !end) return null; // 如果参数为空，返回 null
  const startDate = new Date(start);
  const endDate = new Date(end);

  // 检查日期是否有效
  if (isNaN(startDate) || isNaN(endDate)) return null;

  const diffInDays = (endDate - startDate) / (24 * 60 * 60 * 1000); // 计算天数差
  return diffInDays.toFixed(1); // 保留1位小数（返回字符串，如 "6.3"）
};

// 选择数据
const chooseDate = (data) => {
  if (chooseType.value == "01") {
    tableDate.bkfwList = data;
    listQuery.value.bkfwList = tableDate.bkfwList.map((item) => item.id);
  } else {
    tableDate.rybqList = data;
    listQuery.value.rybqList = tableDate.rybqList.map((item) => item.id);
  }
};
const handleFileChange = (file, fileList) => {
  console.log(file, fileList);
};

// 2. 暴露获取数据的方法
const getFormData = () => {
  if (listQuery.value.bkSjLx == "01") {
    listQuery.value.bkSjSx = calculateDays(listQuery.value.bkSjKs, listQuery.value.bkSjJs);
  }
  console.log(listQuery.value, "listQuery.value",'数据');
  // 可以在这里添加验证逻辑
  return {
    formData: listQuery.value
  };
};
// 接收父组件传入的数据并回显
const setFormData = (data) => {
  tableDate.bkfwList = data.bkfwList ?? [];
  tableDate.rybqList = data.rybqList ?? [];
  listQuery.value = {
    ...data // 假设 data 包含所有需要的字段
  };
};
// 3. 暴露方法给父组件
defineExpose({
  getFormData,
  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>
