<template>
  <div class="bigBox" :style="{ height: bigHeight }">

    <div class="right">
      <!-- 头部 -->
      <div class="titleBox">
        <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="tabBox">
        <!-- 组织机构信息 -->
        <div class="left" :style="{ width: lfBoxWid }">
          <div class="title">
            <span v-if="iconChange">组织机构信息</span>
            <el-icon @click="handleCollapse" v-show="iconChange">
              <DArrowLeft />
            </el-icon>
            <el-icon @click="handleCollapse" v-show="!iconChange">
              <DArrowRight />
            </el-icon>
          </div>
          <div class="treeBox" :style="{ height: treeHeight }">
            <MOSTY.DepartmentTree width="100%" placeholder="管理部门ID" clearable filterable :searchType="'03'"
              @getdeptId="getdeptId" @getdeptData="getdeptData" />
          </div>
        </div>
        <div class="box_count">
          <div class="count_top">
            <span class="tit">待选择</span>
            <el-button @click="addgl">保存</el-button>
          </div>
          <div class="table_bo">
            <el-table ref="multipleTableRef" :data="wgltableData" v-loading="tableloading" element-loading-text="数据加载中..."
              height="60vh" style="width: 100%" @selection-change="handleSelectionChange" border>
              <el-table-column type="selection" width="55" />
              <el-table-column label="排查项" property="questionname">
              </el-table-column>
            </el-table>
            <div class="fenyes">
              <el-pagination class="pagination" @size-change="handleSizeChange" @current-change="handleCurrentChange"
                :current-page="listQuery.pageCurrent" :page-sizes="[2, 5, 10, 20]" :page-size="listQuery.pageSize"
                layout="total, prev, pager, next, sizes, jumper" :total="total"></el-pagination>
            </div>
          </div>
        </div>
        <div class="box_count">
          <div class="count_top">
            <span class="tit">已选择</span>

            <el-button @click="delxzx">删除选择项</el-button>
          </div>
          <div class="table_bo">
            <el-table ref="multipleTableRef2" :data="ygltableData" v-loading="tableloading2"
              element-loading-text="数据加载中..." style="width: 100%" height="60vh" @selection-change="handleSelectionChange2"
              border>
              <el-table-column type="selection" width="55" />
              <el-table-column label="排查项" property="questionname">
              </el-table-column>
              <el-table-column label="分类" property="questionname">
              </el-table-column>
            </el-table>

            <div class="fenyes">
              <el-pagination class="pagination" @size-change="handleSizeChanges" @current-change="handleCurrentChanges"
                :current-page="listQuerys.pageCurrent" :page-sizes="[2, 5, 10, 20]" :page-size="listQuerys.pageSize"
                layout="total, prev, pager, next, sizes, jumper" :total="totals"></el-pagination>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import {
  onMounted,
  ref,
  defineEmits,
  reactive,
  defineProps,
  watch,
  getCurrentInstance
} from "vue";
import { ElTable } from "element-plus";
import * as MOSTY from "@/components/MyComponents/index";
import { getApi, deleteApi, postApi } from "@/api/tobAcco_api.js";
import { ElMessage } from "element-plus";
const { proxy } = getCurrentInstance();
const { D_TB_YWLX, D_TB_KTTX } = proxy.$dict("D_TB_YWLX", "D_TB_KTTX");

const props = defineProps({
  Row: Object
});
const bigHeight = ref({})
const listQuery = ref({
  pageCurrent: 1,
  pageSize: 20,
  qtype: "0"
});
const listQuerys = ref({
  pageCurrent: 1,
  pageSize: 20
});
const lfBoxWid = ref("300px");
const iconChange = ref(true);
const totals = ref(0);
const total = ref(0);
const inds = ref();
const emits = defineEmits(["close"]);
const FromData = ref({});
const typelist = ref([
  { title: "消防", qclass: "1", count: 0 },
  { title: "交通", qclass: "2", count: 0 },
  { title: "生产", qclass: "3", count: 0 },
  { title: "设备", qclass: "4", count: 0 },
  { title: "电器", qclass: "5", count: 0 },
  { title: "食品", qclass: "6", count: 0 },
  { title: "特种作业", qclass: "7", count: 0 },
  { title: "特种设备", qclass: "8", count: 0 },
  { title: "其他", qclass: "9", count: 0 }
]);
const yxtype = ref([
  { title: "单选题", qtype: "0", count: 0 },
  { title: "多选题", qtype: "1", count: 0 },
  { title: "判断题", qtype: "2", count: 0 }
]);
const tableloading = ref(false);
const tableloading2 = ref(false);
const wgltableData = ref([]);
const ygltableData = ref([]);
const multipleTableRef = ref();
const multipleTableRef2 = ref();
const multipleSelection = ref([]);
const multipleSelection2 = ref([]);

onMounted(() => {
  FromData.value.name = props.Row.name;
  FromData.value.type = props.Row.type;
  listQuery.value.qclass = props.Row.type;
  listQuery.value.id = props.Row.id;
  listQuerys.value.id = props.Row.id;
  getwglList();
  getyglList();
  getTotal();
});
//试卷考题统计
function getTotal() {
  getApi(
    { id: listQuery.value.id, qclass: listQuery.value.qclass },
    "/mosty-jcgl/exampaper/getExamPaperCount"
  ).then((res) => {
    if (res) {
      //待选择
      qtypelisy.value.forEach((item1) => {
        let found = false;
        res.qTypeList.forEach((item2) => {
          if (item1.qtype === item2.qtype) {
            item1.count = item2.count;
            found = true;
          }
        });
        if (!found) {
          item1.count = 0;
        }
      });
      //试卷类型
      typelist.value.forEach((item1) => {
        let found1 = false;
        res.qClassList.forEach((item2) => {
          if (item1.qclass === item2.qclass) {
            item1.count = item2.count;
            found1 = true;
          }
        });
        if (!found1) {
          item1.count = 0;
        }
      });
      //以选择
      yxtype.value.forEach((item1) => {
        let found2 = false;
        res.list.forEach((item2) => {
          if (item1.qtype === item2.qtype) {
            item1.count = item2.count;
            found2 = true;
          }
        });
        if (!found2) {
          item1.count = 0;
        }
      });
    }
  });
}

//查询试卷未关联的试题
function getwglList() {
  tableloading.value = true;
  getApi(
    listQuery.value,
    "/mosty-jcgl/exampaper/getExamlibByPaperIdNotExists"
  ).then((res) => {
    if (res.records) {
      wgltableData.value = res.records;
      total.value = res.total;
      tableloading.value = false;
    }
  });
}
const getdeptId = () => {

}
const getdeptData = () => {

}
//	查询试卷已关联的试题
function getyglList() {
  tableloading2.value = true;
  getApi(listQuerys.value, "/mosty-jcgl/exampaper/getExamlibByPaperId").then(
    (res) => {
      if (res.records) {
        ygltableData.value = res.records;
        totals.value = res.total;
        tableloading2.value = false;
      }
    }
  );
}
const handleCollapse = () => {
  iconChange.value = !iconChange.value;
  if (iconChange.value) {
    lfBoxWid.value = "300px";
    // rgBoxWid.value = 'calc(100% - 300px)'
  } else {
    lfBoxWid.value = "40px";
    // rgBoxWid.value = 'calc(100% - 40px)'
  }
};
function changClick(val, row) {
  listQuery.value.qclass = row.qclass;
  listQuery.value.pageCurrent = 1;
  getTotal();
  getwglList();
}
//选择
function changtext(val) {
  listQuery.value.qtype = val.qtype;
  listQuery.value.pageCurrent = 1;
  getwglList();
}
//清空选中项
function toggleSelection() {
  multipleTableRef.value.clearSelection();
}
function toggleSelection2() {
  multipleTableRef2.value.clearSelection();
}
//获取选中项
const handleSelectionChange = (val) => {
  multipleSelection.value = val.map((item) => {
    return item.id;
  });
};
const handleSelectionChange2 = (val) => {
  multipleSelection2.value = val.map((item) => {
    return item.id;
  });
};
//添加选择项
function addgl() {
  postApi(
    { id: listQuery.value.id, libList: multipleSelection.value },
    "/mosty-jcgl/exampaper/addExamlib"
  ).then((res) => {
    ElMessage.success("添加成功");
    getwglList();
    getyglList();
    getTotal();
  });
}
//删除选择项
function delxzx() {
  deleteApi(
    { id: listQuery.value.id, libList: multipleSelection2.value },
    "/mosty-jcgl/exampaper/delExamlib"
  ).then((res) => {
    ElMessage.success("删除成功");
    getwglList();
    getyglList();
    getTotal();
  });
}
const CloseEvent = () => {
  emits("close");
};
//分页
const handleSizeChange = (currentSize) => {
  listQuery.value.pageSize = currentSize;
  getwglList();
};
const handleCurrentChange = (currentPage) => {
  listQuery.value.pageCurrent = currentPage;
  getwglList();
};
//已关联
const handleSizeChanges = (currentSize) => {
  listQuerys.value.pageSize = currentSize;
  getyglList();
};
const handleCurrentChanges = (currentPage) => {
  listQuerys.value.pageCurrent = currentPage;
  getyglList();
};
</script>

<style lang="scss" scoped>
.ld_box {
  display: flex;
  margin-right: 30px;
}

.el-form {
  width: 100%;
  align-items: center;
}

.el-form-item {
  display: flex;
  margin-right: 10px;
}

.addbtn {
  margin-bottom: 10px;
}

.bigBox {
  display: block !important;
  padding: 0 14px;
  box-sizing: border-box;
  color: #000;
}

::v-deep .el-upload-list {
  width: 50%;
}

.title-box {
  height: 50px;

  >div {
    width: 50%;
    height: 50px;
    line-height: 50px;
    margin: auto;
    color: #000;
    text-align: center;
    font-size: 18px;
  }
}

.tabBox {
  display: flex;
  height: 80vh;

  .box_left {
    width: 286px;
    padding: 10px;
    background: #f3f3f3;

    .title_box {
      font-size: 15px;
      font-weight: 600;
      text-align: center;
    }

    .type_box {
      li {
        padding: 12px 0;
        text-align: center;
        border-radius: 2px;
        font-size: 15px;
        background-color: white;
        box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.2);
        cursor: pointer;
        color: #002060;
        margin: 10px;
      }

      .active {
        background-color: #a8d8db;
        color: #fff;
        text-shadow: 1px 1px 3px #333;
      }
    }
  }

  .box_count {
    padding: 10px;
    width: 45%;
    border-right: 1px solid #ddd;
    background: #f7f7f7;

    .count_top {
      width: 100%;
      display: flex;
      justify-content: space-between;
      padding: 10px;
      border-bottom: #beb9b9;

      .tit {
        font-size: 16px;
        font-weight: 600;
      }
    }

    .table_bo {
      height: 60vh;

      .el-table--fit {
        position: unset;
      }

      .fenye {
        top: 90%;
      }
    }
  }
}

.activebtn {
  background-color: green;
  color: #fff;
  border: none;
}

::v-deep .el-input__inner {
  background: none;
  border: none;
  color: #0b0b0b;
}

::v-deep .el-select .el-input.is-focus .el-input__inner {
  background: none;
  border: none;
}

.left {
  padding: 0 10px;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--el-color-primary);

  .title {
    display: flex;
    justify-content: space-between;
  }
}
</style>
