<template>
  <el-popover
    popper-class="dinw"
    :visible="visible"
    :width="getConfiger.width"
    :trigger="getConfiger.trigger"
  >
    <template #reference
      ><span class="deBtn" @click="handleClick">{{
        getConfiger.selectName
      }}</span></template
    >
    <div class="flex just-between align-center">
      <span>{{ title }}</span>
      <span @click="visible = false">
        <el-icon>
          <Close />
        </el-icon>
      </span>
    </div>
    <Search :searchArr="common.searchConfiger" @submit="onSearch" />
    <div class="tableBox flex" v-if="visible">
      <!-- 左边 -->
      <div class="table">
        <MyTable
          @chooseData="chooseDataL"
          :tableData="pageDataL.tableData"
          :tableColumn="pageDataL.tableColumn"
          :tableHeight="common.tableHeight"
          :key="common.keyCount"
          :tableConfiger="common.tableConfiger"
        >
          <!-- 是否报备 -->
          <template #sfbb="{ row }">
            <dict-tag
              :options="props.dic.D_BZ_SF"
              :value="row.sfbb"
              :tag="false"
            />
          </template>
          <!-- 警种类型 -->
          <template #lx="{ row }">
            <dict-tag
              :options="props.dic.D_BZ_RYJZLB"
              :value="row.lx"
              :tag="false"
            />
          </template>
          <!-- 人员类型 -->
          <template #fl="{ row }">
            <dict-tag
              :options="props.dic.D_BZ_RYMFJLB"
              :value="row.fl"
              :tag="false"
            />
          </template>
          <!-- 设备类型 -->
          <template #pddtlx="{ row }">
            <dict-tag
              :options="props.dic.D_BZ_PDDTLX"
              :value="row.pddtlx"
              :tag="false"
            />
          </template>
          <!-- 班次类型 -->
          <template #bcQwBbzl="{ row }">
            <dict-tag
              :options="props.dic.D_QW_BBZL"
              :value="row.bcQwBbzl"
              :tag="false"
            ></dict-tag>
          </template>
          <!-- 跨越天数 -->
          <template #bcKtsDict="{ row }">
            <dict-tag
              :options="props.dic.D_QW_BC_KTS"
              :value="row.bcKtsDict"
              :tag="false"
            ></dict-tag>
          </template>
          <!-- 请选择大类别 -->
          <template #jyjtfwlb="{ row }">
            <dict-tag
              :options="props.dic.D_JCGL_JYCL_JYJTFWLB"
              :value="row.jyjtfwlb"
              :tag="false"
            ></dict-tag>
          </template>
          <!-- 请选择小类别 -->
          <template #jyjtgjlb="{ row }">
            <dict-tag
              :options="props.dic.D_JCGL_JYCL_JYJTGJLB"
              :value="row.jyjtgjlb"
              :tag="false"
            ></dict-tag>
          </template>
          <!-- 设备类型 -->
          <template #sblx="{ row }">
            <dict-tag
              :options="props.dic.D_JCGL_ZDSB_SBLX"
              :value="row.sblx"
              :tag="false"
            ></dict-tag>
          </template>
          <!-- 终端类别 -->
          <template #sblb="{ row }">
            <dict-tag
              :options="props.dic.D_JCGL_ZDSB_SBLB"
              :value="row.sblb"
              :tag="false"
            ></dict-tag>
          </template>
          <!-- 器械类型 -->
          <template #qxlx="{ row }">
            <dict-tag
              :options="props.dic.D_JCGL_JYQX_QXLX"
              :value="row.qxlx"
              :tag="false"
            ></dict-tag>
          </template>
          <!-- 报备种类 -->
          <template #jzQwBbzl="{ row }">
            <dict-tag
              :options="props.dic.D_QW_BBZL"
              :value="row.jzQwBbzl"
              :tag="false"
            ></dict-tag>
          </template>
          <!-- 巡防区域类别 -->
          <template #xqlb="{ row }">
            <dict-tag
              :options="props.dic.D_QW_XQLB"
              :value="row.xqlb"
              :tag="false"
            ></dict-tag>
          </template>
          <!-- 巡防区域类型 -->
          <template #xqlx="{ row }">
            <dict-tag
              :options="props.dic.D_QW_XQLX"
              :value="row.xqlx"
              :tag="false"
            ></dict-tag>
          </template>
          <!-- 警务站类型： -->
          <template #jwzLx="{ row }">
            <dict-tag
              :options="props.dic.D_BZ_JWZLX"
              :value="row.jwzLx"
              :tag="false"
            ></dict-tag>
          </template>
          <!-- 时间段 -->
          <template #sdList="{ row }">
            <div v-for="(it, idxx) in row.sdList" :key="idxx">
              {{ it.kssj }} - {{ it.jssj }}
            </div>
          </template>
          <!-- 检查站 -->
          <template #jczlx="{ row }">
            <span v-if="row.jczlx == '1'">固定检查站</span>
            <span v-if="row.jczlx == '2'">临时检查站</span>
            <span v-if="row.jczlx == '3'">动态检查站</span>
          </template>
        </MyTable>
      </div>
      <!-- 切换按钮 -->
      <div
        class="cnt flex just-center align-center"
        v-if="!getConfiger.isRadio"
      >
        <el-button :icon="Back" circle @click="upLeft" />
        <el-button :icon="Right" circle @click="upRight" />
      </div>
      <!-- 右边 -->
      <div class="table" v-if="!getConfiger.isRadio">
        <MyTable
          @chooseData="chooseDataR"
          :tableData="pageDataR.tableData"
          :tableColumn="pageDataR.tableColumn"
          :tableHeight="common.tableHeight"
          :key="common.keyCount"
          :tableConfiger="common.tableConfiger"
        >
          <!-- 是否报备 -->
          <template #sfbb="{ row }">
            <dict-tag
              :options="props.dic.D_BZ_SF"
              :value="row.sfbb"
              :tag="false"
            />
          </template>
          <!-- 警种类型 -->
          <template #lx="{ row }">
            <dict-tag
              :options="props.dic.D_BZ_RYJZLB"
              :value="row.lx"
              :tag="false"
            />
          </template>
          <!-- 人员类型 -->
          <template #fl="{ row }">
            <dict-tag
              :options="props.dic.D_BZ_RYMFJLB"
              :value="row.fl"
              :tag="false"
            />
          </template>
          <!-- 设备类型 -->
          <template #pddtlx="{ row }">
            <dict-tag
              :options="props.dic.D_BZ_PDDTLX"
              :value="row.pddtlx"
              :tag="false"
            />
          </template>
          <!-- 班次类型 -->
          <template #bcQwBbzl="{ row }">
            <dict-tag
              :options="props.dic.D_QW_BBZL"
              :value="row.bcQwBbzl"
              :tag="false"
            ></dict-tag>
          </template>
          <!-- 跨越天数 -->
          <template #bcKtsDict="{ row }">
            <dict-tag
              :options="props.dic.D_QW_BC_KTS"
              :value="row.bcKtsDict"
              :tag="false"
            ></dict-tag>
          </template>
          <!-- 请选择大类别 -->
          <template #jyjtfwlb="{ row }">
            <dict-tag
              :options="props.dic.D_JCGL_JYCL_JYJTFWLB"
              :value="row.jyjtfwlb"
              :tag="false"
            ></dict-tag>
          </template>
          <!-- 请选择小类别 -->
          <template #jyjtgjlb="{ row }">
            <dict-tag
              :options="props.dic.D_JCGL_JYCL_JYJTGJLB"
              :value="row.jyjtgjlb"
              :tag="false"
            ></dict-tag>
          </template>
          <!-- 设备类型 -->
          <template #sblx="{ row }">
            <dict-tag
              :options="props.dic.D_JCGL_ZDSB_SBLX"
              :value="row.sblx"
              :tag="false"
            ></dict-tag>
          </template>
          <!-- 终端类别 -->
          <template #sblb="{ row }">
            <dict-tag
              :options="props.dic.D_JCGL_ZDSB_SBLB"
              :value="row.sblb"
              :tag="false"
            ></dict-tag>
          </template>
          <!-- 器械类型 -->
          <template #qxlx="{ row }">
            <dict-tag
              :options="props.dic.D_JCGL_JYQX_QXLX"
              :value="row.qxlx"
              :tag="false"
            ></dict-tag>
          </template>
          <!-- 报备种类 -->
          <template #jzQwBbzl="{ row }">
            <dict-tag
              :options="props.dic.D_QW_BBZL"
              :value="row.jzQwBbzl"
              :tag="false"
            ></dict-tag>
          </template>
          <!-- 巡防区域类别 -->
          <template #xqlb="{ row }">
            <dict-tag
              :options="props.dic.D_QW_XQLB"
              :value="row.xqlb"
              :tag="false"
            ></dict-tag>
          </template>
          <!-- 巡防区域类型 -->
          <template #xqlx="{ row }">
            <dict-tag
              :options="props.dic.D_QW_XQLX"
              :value="row.xqlx"
              :tag="false"
            ></dict-tag>
          </template>
          <!-- 时间段 -->
          <template #sdList="{ row }">
            <div v-for="(it, idxx) in row.sdList" :key="idxx">
              {{ it.kssj }} - {{ it.jssj }}
            </div>
          </template>
          <!-- 检查站 -->
          <template #jczlx="{ row }">
            <span v-if="row.jczlx == '01'">固定检查站</span>
            <span v-if="row.jczlx == '02'">临时检查站</span>
            <span v-if="row.jczlx == '03'">动态检查站</span>
          </template>
        </MyTable>
      </div>
    </div>
    <div class="footInfoBtn flex just-between align-center">
      <Pages
        @changeNo="changeNo"
        @changeSize="changeSize"
        :tableHeight="common.tableHeight"
        :pageConfiger="{ ...listQuery }"
      />
      <el-button type="primary" @click="submitDate">确定选择</el-button>
    </div>
  </el-popover>
</template>

<script setup>
import { Right, Back } from "@element-plus/icons-vue";
import { qcckGet, qcckPost } from "@/api/qcckApi.js";
import MyTable from "@/components/aboutTable/MyTable.vue";
import emitter from "@/utils/eventBus.js";
import Pages from "@/components/aboutTable/Pages.vue";
import Search from "@/components/aboutTable/Search.vue";
import {
  reactive,
  defineProps,
  ref,
  watch,
  getCurrentInstance,
  watchEffect,
  onMounted,
  onUnmounted,
  nextTick
} from "vue";
const { proxy } = getCurrentInstance();
const props = defineProps({
  configer: {
    type: Object,
    default: {}
  },
  dic: Object,
  modelValue: {
    type: Array,
    default: []
  },
  rightData: {
    type: Array,
    default: []
  },
  deptment: {
    type: Object,
    default: {
      bmdm: JSON.parse(localStorage.getItem("deptId"))[0].deptCode,
      bmmc: JSON.parse(localStorage.getItem("deptId"))[0].deptName
    }
  }
});
const emits = defineEmits(["update:modelValue", "change"]);

const common = reactive({
  tableHeight: 360,
  keyCount: 0,
  total: 0,
  pageConfiger: {
    pageSize: 20,
    pageCurrent: 1
  }, //分页
  tableConfiger: {
    loading: false,
    rowHieght: 61,
    showSelectType: "checkBox",
    haveControls: false,
    showIndex: false,
    defaultSelectKeys: [] // 默认选中的key集合
  },
  searchConfiger: [
    {
      showType: "input",
      prop: "key",
      placeholder: "请输入关键字",
      label: "关键字"
    }
  ] //搜索
});
const pageDataL = reactive({
  tableData: [],
  tableColumn: [{ label: "班次名称", prop: "bcmc" }]
});
const pageDataR = reactive({
  tableData: [],
  tableColumn: [{ label: "班次名称", prop: "bcmc" }]
});
let getConfiger = reactive({
  placement: "right", //方向 right/left/bottom/top/top-start/top-end .....
  trigger: "click", //气泡框类型 = click (点击),hover(鼠标滑过),
  isRadio: false, //是否单选
  width: 1000, //宽度
  selectName: "选择",
  lx: null, //查询的类型 - 民警(mj)
  rowKey: "id"
});
const visible = ref(false);
const title = ref("");

const listQuery = ref({
  total: 0,
  pageSize: 20,
  pageCurrent: 1
});
const url = ref("");
const hasChoosedL = ref([]); //左边选择的数据
const hasChoosedR = ref([]); //右边选择的数据

const handleClick = () => {
  const deptId = localStorage.getItem("deptId")
    ? JSON.parse(localStorage.getItem("deptId"))
    : [];
  (listQuery.value.ssbmdm = deptId[0].deptCode),
    (visible.value = !visible.value);
  if (visible.value) handleData(getConfiger.lx);
};
// 接收数据类型
const handleData = (val, type) => {
  let arr = [];
  switch (val) {
    case "mj":
    case "fj":
      title.value = "选择人员";
      url.value = "/mosty-jcz/tbQwXfll/getXfllList";
      arr = [
        { label: "报备", prop: "sfbb", showSolt: true },
        { label: "姓名", prop: "xm" },
        { label: "警号", prop: "jh" },
        { label: "所属部门", prop: "ssbm", showOverflowTooltip: true },

        { label: "人员类型", prop: "fl", showSolt: true },
        { label: "警种", prop: "lx", showSolt: true }
      ];
      pageDataL.tableColumn = arr;
      pageDataR.tableColumn = arr.filter((v) => {
        return v.label != "报备";
      });
      if (!type) {
        common.searchConfiger = [
          {
            showType: "department",
            prop: "ssbmdm",
            label: "所属部门",
            lazy: false
          },
          {
            showType: "input",
            prop: "xm",
            placeholder: "请输入姓名",
            label: "姓名"
          },
          {
            showType: "input",
            prop: "jh",
            placeholder: "请输入警号",
            label: "警号"
          }
        ];
      }
      break;
    case "pdh":
      title.value = "频道号选择";
      url.value = "/mosty-base/sysDeptExtendPdh/selectPage";
      pageDataL.tableColumn = [
        { label: "频道名称", prop: "pdmc" },
        { label: "频道号", prop: "pdh" },
        { label: "频道电台类型", prop: "pddtlx", showSolt: true }
      ];
      if (!type) {
        common.searchConfiger = [
          {
            showType: "input",
            prop: "pdmc",
            placeholder: "请输入频道名称",
            label: "频道名称"
          },
          {
            showType: "input",
            prop: "pdh",
            placeholder: "请输入频道号",
            label: "频道号"
          },
          {
            showType: "select",
            prop: "pddtlx",
            placeholder: "请输入频道电台类型",
            label: "频道电台类型",
            options: props.dic.D_BZ_PDDTLX
          }
        ];
      }
      break;
    case "zbbc":
      title.value = "班次选择";
      url.value = "/mosty-qwzx/tbQwglQwbc/selectPage";
      pageDataL.tableColumn = [
        { label: "班次名称", prop: "bcMc" },
        { label: "班次类型", prop: "bcQwBbzl", showSolt: true },
        { label: "开始时间", prop: "bcKssj" },
        { label: "结束时间", prop: "bcJssj" },
        { label: "跨越天数", prop: "bcKtsDict", showSolt: true }
      ];
      if (!type) {
        common.searchConfiger = [
          {
            showType: "input",
            prop: "bcMc",
            placeholder: "请输入班次名称",
            label: "班次名称"
          }
        ];
      }
      break;
    case "xfq":
    case "bxd":
    case "bxx":
      title.value =
        val == "xfq" ? "巡防区名称" : val == "bxd" ? "必巡点" : "必巡线";
      url.value = "/mosty-qwzx/tbQwglXfqy/selectPage";
      pageDataL.tableColumn = [
        { label: "名称", prop: "xqmc" },
        { label: "类别", prop: "xqlb", showSolt: true },
        { label: "类型", prop: "xqlx", showSolt: true }
      ];
      pageDataR.tableColumn = [
        { label: "名称", prop: "xqmc" },
        { label: "类别", prop: "xqlb", showSolt: true },
        { label: "类型", prop: "xqlx", showSolt: true }
      ];
      if (!type) {
        common.searchConfiger = [
          {
            showType: "input",
            prop: "xqmc",
            placeholder: "请输入名称",
            label: "名称"
          }
        ];
      }
      break;
    case "cl":
      title.value = "车辆选择";
      url.value = "/mosty-jcz/tpJczXfcl/getXfclList";
      arr = [
        { label: "号牌号码", prop: "cph" },
        { label: "车辆名称", prop: "clmc" },
        { label: "大类别", prop: "jyjtfwlb", showSolt: true },
        { label: "小类别", prop: "jyjtgjlb", showSolt: true }
      ];
      pageDataL.tableColumn = arr;
      pageDataR.tableColumn = arr;
      if (!type) {
        common.searchConfiger = [
          {
            showType: "input",
            prop: "cph",
            placeholder: "请输入车辆名称",
            label: "车辆名称"
          }
        ];
      }
      break;
    case "zdsb":
      title.value = "终端选择";
      url.value = "/mosty-jcgl/tbJcglZdsb/selectPage";
      arr = [
        { label: "设备编号", prop: "sbbh" },
        { label: "设备名称", prop: "sbmc" },
        { label: "终端类别", prop: "sblb", showSolt: true },
        { label: "设备类型", prop: "sblx", showSolt: true }
      ];
      pageDataL.tableColumn = arr;
      pageDataR.tableColumn = arr;
      if (!type) {
        common.searchConfiger = [
          {
            showType: "input",
            prop: "sbmc",
            placeholder: "请输入设备名称",
            label: "设备名称"
          },
          {
            showType: "select",
            prop: "sblb",
            placeholder: "请选择设备类型",
            label: "设备类型",
            options: props.dic.D_JCGL_ZDSB_SBLX
          }
        ];
      }

      break;
    case "jyqx":
      title.value = "装备选择";
      url.value = "/mosty-jcz/tpJczJyqx/selectJyqx";
      arr = [
        { label: "器械名称", prop: "qxMc" },
        { label: "器械编号", prop: "qxbh" },
        { label: "器械类型", prop: "qxlx", showSolt: true },
        { label: "数量", prop: "sl" }
      ];
      pageDataL.tableColumn = arr;
      pageDataR.tableColumn = arr;
      if (!type) {
        common.searchConfiger = [
          {
            showType: "input",
            prop: "qxMc",
            placeholder: "请输入器械名称",
            label: "器械名称"
          }
        ];
      }
      break;
    case "jz":
      title.value = "警组";
      url.value = "/mosty-qwzx/tbQwglJz/selectPage";
      pageDataL.tableColumn = [
        { label: "警组名称", prop: "jzMc" },
        { label: "报备类型", prop: "jzQwBbzl", showSolt: true }
      ];
      if (!type) {
        common.searchConfiger = [
          {
            showType: "input",
            prop: "jzMc",
            placeholder: "警组名称",
            label: "警组名称"
          }
        ];
      }
      break;
    case "kfd":
      title.value = "快反点";
      url.value = "/mosty-jcgl/tpJcglKfd/selectKfdList";
      pageDataL.tableColumn = [
        { label: "快反点名称", prop: "kfdMc" },
        { label: "快反点地址", prop: "kfdDz" }
      ];
      if (!type) {
        common.searchConfiger = [
          {
            showType: "input",
            prop: "kfdMc",
            placeholder: "请输入名称",
            label: "快反点名称"
          }
        ];
      }
      break;
    case "jcz":
      title.value = "检查站";
      url.value = "/mosty-jcz/jcz/selectJczList";
      pageDataL.tableColumn = [
        { label: "检查站名称", prop: "jczmc" },
        { label: "检查站类型", prop: "jczlx", showSolt: true }
      ];
      if (!type) {
        common.searchConfiger = [
          {
            showType: "input",
            prop: "jczmc",
            placeholder: "检查站名称",
            label: "检查站名称"
          }
        ];
      }
      break;
    case "znzb":
      title.value = "智能装备";
      url.value = "/mosty-jcz/tbJczTcsb/selectPage";
      let crr = [
        { label: "设备名称", prop: "sbmc" },
        { label: "设备编号", prop: "sbbh" },
        { label: "所属部门", prop: "gldwmc" }
      ];
      pageDataL.tableColumn = crr;
      pageDataR.tableColumn = crr;
      if (!type) {
        common.searchConfiger = [
          {
            showType: "input",
            prop: "sbmc",
            placeholder: "请输入设备名称",
            label: "设备名称"
          }
        ];
      }
      break;
    case "hxg":
      title.value = "选择护学岗";
      url.value = "/mosty-jcgl/tbNbhyXxjbxx/selectPage";
      let zrr = [
        { label: "学校名称", prop: "xxMc" },
        { label: "学校地址", prop: "xxDz" },
        { label: "时间段", prop: "sdList", showSolt: true }
      ];
      pageDataL.tableColumn = zrr;
      pageDataR.tableColumn = zrr;
      if (!type) {
        common.searchConfiger = [
          {
            showType: "input",
            prop: "xxMc",
            placeholder: "请输入学校名称",
            label: "学校名称"
          }
        ];
      }
      break;
    case "jwz":
      title.value = "选择警务站";
      url.value = "/mosty-jcgl/tbJcglJwz/selectJwzList";
      pageDataL.tableColumn = [
        { label: "警务站名称", prop: "jwzMc" },
        { label: "负责人姓名", prop: "fzrXm" },
        { label: "警务站类型", prop: "jwzLx", showSolt: true }
      ];
      if (!type) {
        common.searchConfiger = [
          {
            showType: "input",
            prop: "jwzMc",
            placeholder: "请输入警务站名称",
            label: "警务站名称"
          }
        ];
      }
      break;
  }
  if (val && visible.value) getData();
};

// 搜索
const onSearch = (val) => {
  common.pageConfiger.pageCurrent = 1;
  listQuery.value = { ...listQuery.value, ...val };
  handleData(getConfiger.lx, "look");
};
// 获取数据
const getData = () => {
  if (getConfiger.lx == "jyqx")
    listQuery.value.pageNo = listQuery.value.pageCurrent;
  if (getConfiger.lx == "mj") listQuery.value.jllx = "01";
  if (getConfiger.lx == "fj") listQuery.value.jllx = "02";
  if (getConfiger.lx == "zbbc") listQuery.value.bcQwBbzl = getConfiger.bclx;
  if (getConfiger.lx == "jz") listQuery.value.jzQwBbzl = getConfiger.jzlx;
  if (getConfiger.lx == "kfd") listQuery.value.dwlxs = "01";
  if (getConfiger.lx == "zfjly") listQuery.value.sblx = "06";
  if (getConfiger.lx == "bxd") listQuery.value.xqlx = "01";
  if (getConfiger.lx == "xfq") listQuery.value.xqlx = "03";
  if (getConfiger.lx == "bxx") listQuery.value.xqlx = "02";
  common.tableConfiger.loading = true;

  let params = { ...listQuery.value };
  // params.ssbmdm = props.deptment.bmdm;
  params.pageNo = params.pageCurrent;
  qcckGet(params, url.value)
    .then((res) => {
      if (getConfiger.lx == "cl") {
        pageDataL.tableData =
          res.records.map((item) => {
            return { id: item.cid, ...item };
          }) || [];
      } else {
        pageDataL.tableData = res.records || [];
      }
      listQuery.value.total = res.total;
      common.tableConfiger.loading = false;
    })
    .catch(() => {
      common.tableConfiger.loading = false;
    });
};
// 左边选择z
const chooseDataL = (val) => {
  if (getConfiger.isRadio) {
    hasChoosedL.value = val[0];
  } else {
    hasChoosedL.value = val;
  }
};
// 右边选择的数据
const chooseDataR = (val) => {
  console.log(val);
  hasChoosedR.value = val;
};
// 添加数据
const upRight = () => {
  const data = [...pageDataR.tableData, ...hasChoosedL.value];
  pageDataR.tableData = data.reduce((acc, curr) => {
    const x = acc.find((item) => item.id == curr.id);
    if (!x) {
      return acc.concat([curr]);
    } else {
      return acc;
    }
  }, []);
  // pageDataR.tableData = [...map.values]
};
// 移除数据
const upLeft = () => {
  pageDataR.tableData = pageDataR.tableData.filter((item) => {
    return !hasChoosedR.value.includes(item);
  });
};

// 提交数据
const submitDate = () => {
  if (getConfiger.isRadio) {
    console.log(hasChoosedL.value);

    emits("update:modelValue", hasChoosedL.value); //单选
    emits("change", hasChoosedL.value);
  } else {
    if (pageDataR.tableData.length == 0)
      return proxy.$message.warning("请选择数据");
    emits("update:modelValue", pageDataR.tableData); //多选
    emits("change", pageDataR.tableData);
  }
  visible.value = false;
};

// 改变分页
const changeNo = (val) => {
  listQuery.value.pageCurrent = val;
  handleData(getConfiger.lx);
};
//  页数
const changeSize = (val) => {
  listQuery.value.pageSize = val;
  handleData(getConfiger.lx);
};

watch(
  () => props.configer,
  (val) => {
    getConfiger = { ...getConfiger, ...val };

    if (getConfiger.lx) handleData(getConfiger.lx);
    if (getConfiger.isRadio) common.tableConfiger.showSelectType = "radio";
    if (getConfiger.rowKey) common.tableConfiger.rowKey = getConfiger.rowKey;
  },
  { immediate: true }
);

watch(
  () => props.modelValue,
  (val) => {
    if (val && val.length > 0) {
      common.tableConfiger.defaultSelectKeys = props.modelValue.map((it) => {
        return it.id || it.cid;
      });
      pageDataR.tableData = props.modelValue;
    } else {
      common.tableConfiger.defaultSelectKeys = [];
      pageDataR.tableData = [];
    }
  },
  { immediate: true, deep: true }
);
</script>

<style lang="scss">
.tableBox .cnt {
  width: 100px;
}

.tableBox .table {
  flex: 1 0 0;
  overflow: hidden;
}

.deBtn {
  display: inline-block;
  border-radius: 40px;
  width: 70px;
  height: 28px;
  line-height: 28px;
  text-align: center;
  color: #fff;
  background-color: #3e85c3;
  border-color: #2b669a;
  box-shadow: 0 1px 1px rgb(90 90 90 / 30%);
  margin: 0 10px;
}

::v-deep .el-table tr {
  color: #000;
}

::v-deep .el-table td.el-table__cell {
  color: #505152;
}

// ::v-deep .el-popper{
//     position: fixed !important;
//     top: 50% !important;
//      left: 50% !important;
//   transform: translate(-50%, -50%) !important;
// }
.dinw {
  position: absolute !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  top: 50% !important;
  // width: 1000px;
  margin: 0px !important;
}
</style>
