<template>
  <div>
    <div class="bigBox" :style="{ height: bigHeight }">
      <div class="right-bottom-header">
        <div class="title">检查内容配置</div>
        <div class="btnBox">
          <el-button type="primary" @click="closeEvent">
            <el-icon>
              <Back />
            </el-icon>
            <span>返回</span>
          </el-button>
        </div>
      </div>
      <div class="bottom-box">
        <!-- 树 -->
        <div class="left">
          <div class="treeBox">
            <el-tree ref="tree" node-key="id" :highlight-current="true" :data="treeData" :props="defaultProps"
              @node-click="handleNodeClick" />
          </div>
        </div>

        <div class="right">
          <div class="right-bottom">
            <!-- 左边多选 -->
            <div class="left-check-box">
              <div class="header-box">
                <div>待选择({{ leftList.length }})</div>
                <el-button @click="saveItems" type="primary">保存</el-button>
              </div>
              <el-checkbox v-model="checkAll" :indeterminate="isIndeterminate"
                @change="handleCheckAllChange"></el-checkbox>
              <el-checkbox-group v-model="LeftcheckList" @change="handleCheckedCitiesChange">
                <el-checkbox :label="item" v-for="(item, index) in leftList" :key="item">
                  <div class="check-text">{{ index + 1 }} {{ item.name }}</div>
                </el-checkbox>
              </el-checkbox-group>
            </div>
            <div class="right-check-box">
              <div class="header-box">
                <div>已选择({{ tableDataright.length }})</div>
                <el-button @click="overDelete" type="primary">批量删除</el-button>
              </div>
              <el-table ref="multipleTableRef" stripe :data="tableDataright" style="width: 100%"
                @selection-change="handleSelectionChange" border>
                <el-table-column type="index" />
                <el-table-column type="selection" />
                <el-table-column label="排查项" property="itemName">
                </el-table-column>
                <el-table-column property="subclassName" label="分类" />
              </el-table>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- <littleDialog :title="title" :diaShow="subDiaShow" @changeVi="changeVi" @save="save" :xgName="xgName">
    </littleDialog> -->
    <!-- <subDialog2 :diaShow="subDiaShow2" @changeVi2="changeVi2" :glId="glId"></subDialog2> -->
  </div>
</template>

<script setup>
// 引入
import { reactive, onMounted, ref, nextTick, defineProps } from "vue";
// import littleDialog from "../../components/littleDialog.vue";
// import subDialog2 from "../../components/subDialog2.vue";
import { getApi, postApi, deleteApi, putApi } from "@/api/tobAcco_api.js";
import popperConfirm from "../../components/popperConfirm.vue";

// 数据

const bigHeight = ref(); //整个高度
const emit = defineEmits(["close"]);
const props = defineProps({
  tabId: {
    type: String,
    default: ""
  }
});

// 树的数据
const treeData = ref([]);
const treeId = ref("");
const defaultProps = {
  label: "label",
  children: "child"
};

const LeftcheckList = ref([]); //左边选中的数据
const leftList = ref([]);

// 已选中项
const checkedList = ref([]);
// 传参的字符串
const postData = ref("");

const tableData = ref([]);
const multipleSelection = ref([]);
const tableDataright = ref([]);
// 标识树
const tree = ref();
// 获取树节点的code
const treeCode = ref("JCGLYH-207");
// 控制外层新增弹出框的可见与可不见
const subDiaShow = ref(false);
// 控制表格里管理弹出框可见与不可见
const subDiaShow2 = ref(false);
// 分页
const listQuery = ref({
  pageNum: 1,
  pageSize: 20
});
const checkAll = ref(false);
const isIndeterminate = ref(true);
const total = ref(0);
const title = ref("");
const xgName = ref("");
// 外层修改时的id
const xgId = ref("");
// 管理ID
const glId = ref("");
// 是否删除
const delTitle = ref("是否确认删除当前项?");
const delContent = ref("删除");
// 返回上一级
const closeEvent = () => {
  emit("close");
};
// 全选
const handleCheckAllChange = (val) => {
  // if (LeftcheckList.value === leftList.value) {
  //   checkAll.value = true
  // }
  if (val) {
    LeftcheckList.value = leftList.value;
  } else {
    LeftcheckList.value = [];
  }
  postData.value = LeftcheckList.value.map((item) => {
    return {
      tid: props.tabId,
      itemid: item.id,
      itemname: item.name,
      yhlevel: item.lv
    };
  });
  isIndeterminate.value = false;
};
const handleCheckedCitiesChange = (val) => {
  // LeftcheckList.value.forEach((item) => {
  //   let obj = {}
  //   obj = {
  //     tid: props.tabId,
  //     itemid: item.id,
  //     itemname: item.name,
  //     yhlevel: item.lv
  //   }
  //   checkedList.value.push(obj)
  // })
  postData.value = LeftcheckList.value.map((item) => {
    return {
      tid: props.tabId,
      itemid: item.id,
      itemname: item.name,
      yhlevel: item.lv
    };
  });
  const checkedCount = value.length;
  checkAll.value = checkedCount === leftList.value.length;
  isIndeterminate.value =
    checkedCount > 0 && checkedCount < leftList.value.length;
};

// 表格的选择
const handleSelectionChange = (val) => {
  multipleSelection.value = val.map((item) => {
    return {
      itemIds: item.id
    };
  });
};

const bigHeightFn = () => {
  bigHeight.value = window.innerHeight - 147 + "px";
};

// 请求基树的数据
const getTreeData = () => {
  postApi({}, "/mosty-jcgl/overalltemplateitem/getTreeList").then((res) => {
    treeData.value = res;
    treeId.value = treeData.value[0].child[0].id;
    setTimeout(() => {
      tree.value.setCurrentKey(treeData.value[0].child[0].id);
      notItems();
    }, 200);
  });
};

// 未选择选择项
const notItems = () => {
  leftList.value = [];
  postApi(
    {},
    `/mosty-jcgl/overalltemplateitem/getCheckItem/${treeId.value}/${props.tabId}`
  ).then((res) => {
    res.forEach((item, index) => {
      let obj = {};
      obj = {
        name: item.itemName,
        value: index,
        id: item.id,
        lv: item.yhLv
      };
      leftList.value.push(obj);
    });
  });
};

// 保存选择项
const saveItems = () => {
  postApi(
    postData.value,
    "/mosty-jcgl/overalltemplateitem/addTemplateItem"
  ).then((res) => {
    notItems();
    getTabData(props.tabId);
  });
  LeftcheckList.value = [];
  postData.value = [];
};

// 点击树节点
const handleNodeClick = (e) => {
  treeId.value = e.id;
  leftList.value = [];
  notItems();
};

// 获取右侧表格数据
const getTabData = (id) => {
  postApi({}, `/mosty-jcgl/overalltemplateitem/chooselist/${id}`).then(
    (res) => {
      tableDataright.value = res;
    }
  );
};

onMounted(() => {
  bigHeightFn();
  getTreeData();
  getTabData(props.tabId);
});

// 批量删除
const overDelete = () => {
  postApi(
    { itemIds: multipleSelection.value, tid: props.tabId },
    "/mosty-jcgl/overalltemplateitem/delItem"
  ).then((res) => {

    getTabData(props.tabId);
    notItems();
  });
};

// 外层新增
const addHander = () => {
  title.value = "新增";
  subDiaShow.value = true;
};
// 接收外层新增保存
const save = (val) => {
  if (title.value === "新增") {
    getApi(
      { sortName: val, sortType: treeCode.value, isBase: "1" },
      "/mosty-jcgl/pcqd/addPcqd"
    ).then((res) => {
      getPcData(treeCode.value);
    });
  }
  if (title.value === "修改") {
    putApi(
      { sortName: val, sortType: treeCode.value, isBase: "1", id: xgId.value },
      "/mosty-jcgl/pcqd/updatePcqd"
    ).then((res) => {
      getPcData(treeCode.value);
    });
  }
};
// 关闭弹窗(在子组件可以修改父组件的值)
const changeVi = (val) => {
  subDiaShow.value = val;
  xgName.value = "";
};
const changeVi2 = (val) => {
  subDiaShow2.value = val;
};
// 管理
const handleManage = (index, row) => {
  subDiaShow2.value = true;
  glId.value = row.id;
};
// 修改
const handleEdit = (index, row) => {
  title.value = "修改";
  subDiaShow.value = true;
  xgName.value = row.sortName;
  xgId.value = row.id;
};
// 删除排查清单的某一项(传给子组件)
const Delete = (index, row) => {
  deleteApi({}, `/mosty-jcgl/pcqd/delPcqd/${row.id}`).then((res) => {
    getPcData(treeCode.value);
  });
};
</script>

<style lang="scss" scoped>
.bigBox {
  .bottom-box {
    display: flex;
    height: calc(100% - 60px);
  }

  .right-bottom-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 10px;
    box-sizing: border-box;
    border: 1px solid rgb(37, 65, 37);
  }

  .title {
    height: 60px;
    line-height: 60px;
    font-size: 18px;
    color: #0f0f0f;
  }

  .left {
    width: 300px;
    height: 100%;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--el-color-primary);

    .treeBox {
      margin-top: 15px;

      height: 100%;
      overflow: auto;
    }
  }

  .right {
    width: calc(100% - 300px);
    height: 100%;

    .left-check-box {
      width: 40%;
      padding: 10px;
      box-sizing: border-box;
      border-right: 1px solid rgb(78, 122, 11);
      height: 100%;
      overflow: auto;
    }

    .header-box {
      display: flex;
      justify-content: space-between;

      >div {
        color: #000;
      }
    }

    .check-text {
      overflow: hidden; // 溢出隐藏
      white-space: nowrap; // 强制一行
      text-overflow: ellipsis; // 文字溢出显示省略号
    }

    .right-check-box {
      height: 100%;
      width: 70%;
      padding: 10px;
      box-sizing: border-box;
    }

    .right-bottom {
      height: 100%;
      display: flex;
      justify-content: space-between;
    }
  }
}

.el-table {
  height: 97%;

  overflow: auto;
}

::v-deep .el-checkbox {
  display: block;
  color: #000 !important;
}

::v-deep .el-checkbox__input.is-checked+.el-checkbox__label {
  color: rgb(84, 216, 84) !important;
}

::v-deep .el-checkbox__label {
  display: inline-grid;
  white-space: pre-line;
  // word-wrap: break-word;
  line-height: 20px;
}
</style>