<template>
  <div>
    <MOSTY.PageTree :pageTitle="'检查内容配置'" :isShowLeftTree="false">
      <template #serach>
        <div class="btnBox">
          <el-button type="primary" @click="closeEvent">
            <el-icon>
              <Back />
            </el-icon>
            <span>返回</span>
          </el-button>
        </div>
      </template>
      <template #table>
        <div class="bottom-box">
          <div class="right">
            <div class="right-bottom">
              <!-- 左边多选 -->
              <div class="left-check-box pd10">
                <div style='display:flex;justify-content:space-between;'>
                  <div style='color:black;'>待选择({{ leftList.length }}) <span style='color:red;'>红色：本季度已检查</span></div>
                  <el-button @click="saveItems" type="primary">保存</el-button>
                </div>
                <div style='height:calc(100vh - 340px)'>
                  <el-table ref="multipleTableRef" stripe :data="leftList" height='100%' style="width: 100%"
                    @selection-change="handleCheckedCitiesChange" border>
                    <el-table-column type="selection" />
                    <el-table-column property="orgname" label="单位" sortable show-overflow-tooltip />
                    <el-table-column property="objname" label="风险单元" sortable show-overflow-tooltip />
                    <el-table-column label="风险等级" property="risklevel" sortable>
                      <template #default="{ row }">
                        <span v-if="row.risklevel == '4'" class="fxdjspan reds">重大风险</span>
                        <span v-else-if="row.risklevel == '3'" class="fxdjspan orgs">较大风险</span>
                        <span v-else-if="row.risklevel == '2'" class="fxdjspan blus">一般风险</span>
                        <span v-else-if="row.risklevel == '1'" class="fxdjspan gres">低风险</span>
                        <span v-else>待定</span>
                      </template>
                    </el-table-column>
                  </el-table>
                  <div class="fenye">
                    <MOSTY.Pages :pageConfiger="listQueryNo" @changeNo="handleCurrentChange"
                      @changeSize="handleSizeChange" />
                  </div>
                </div>
                <!-- <el-checkbox v-model="checkAll" :indeterminate="isIndeterminate"
                @change="handleCheckAllChange">全选</el-checkbox>
              <div style="height:calc(100vh - 360px)">
                <el-checkbox-group v-model="LeftcheckList" @change="handleCheckedCitiesChange">
                  <el-checkbox :label="item" v-for="(item, index) in leftList" :key="item">
                    <div class="check-text"  :style="`color:${item.isCheck ? 'red' : 'black'}`" > {{ index + 1 }} 、{{ item.objname }}</div>
                  </el-checkbox>
                </el-checkbox-group>
              </div>
              <div class="fenye">
          <MOSTY.Pages :pageConfiger="listQueryNo" @changeNo="handleCurrentChange" @changeSize="handleSizeChange" />
        </div> -->

              </div>
              <div class="right-check-box">
                <div class="header-box pb10">
                  <div>已选择({{ tableDataright.length }})</div>
                  <el-popconfirm confirm-button-text="是" cancel-button-text="否" icon-color="red" title="确定要删除?"
                    @confirm="overDelete">
                    <template #reference>
                      <el-button class="operdelbtn" size="small">
                        <el-icon>
                          <Delete />
                        </el-icon>
                        批量删除</el-button>
                    </template>
                  </el-popconfirm>
                </div>
                <div style='height:calc(100vh - 340px)'>
                  <el-table ref="multipleTableRef" stripe :data="tableDataright" height='100%' style="width: 100%"
                    @selection-change="handleSelectionChange" border>
                    <el-table-column type="selection" />
                    <el-table-column property="orgname" label="单位" show-overflow-tooltip sortable />
                    <el-table-column property="objname" label="风险单元" show-overflow-tooltip sortable />
                    <el-table-column label="风险等级" property="risklevel" sortable>
                      <template #default="{ row }">
                        <span v-if="row.risklevel == '4'" class="fxdjspan reds">重大风险</span>
                        <span v-else-if="row.risklevel == '3'" class="fxdjspan orgs">较大风险</span>
                        <span v-else-if="row.risklevel == '2'" class="fxdjspan blus">一般风险</span>
                        <span v-else-if="row.risklevel == '1'" class="fxdjspan gres">低风险</span>
                        <span v-else>待定</span>
                      </template>
                    </el-table-column>
                  </el-table>
                  <div class="fenye">
                    <MOSTY.Pages :pageConfiger="listQuery" @changeNo="handleCurrentChange2"
                      @changeSize="handleSizeChange2" />
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </template>
    </MOSTY.PageTree>




  </div>
</template>

<script setup>
// 引入
import { onMounted, ref, getCurrentInstance, defineProps } from "vue";
import * as MOSTY from "@/components/MyComponents/index";
import { getApi, postApi } from "@/api/tobAcco_api.js";
const { proxy } = getCurrentInstance();
const { D_BZ_FXLX } = proxy.$dict("D_BZ_FXLX");
const listQuery = ref({
  pageCurrent: 1,
  pageSize: 20,
  total: 0
})
const listQueryNo = ref({
  pageCurrent: 1,
  pageSize: 20,
  total: 0
})
const emit = defineEmits(["close"]);
const props = defineProps({
  formValue: {
    type: Object,
    default: {}
  },
});


const LeftcheckList = ref([]); //左边选中的数据
const leftList = ref([]);
const multipleSelection = ref([]);
const tableDataright = ref([]);
// 获取树节点的code
// 控制表格里管理弹出框可见与不可见
const checkAll = ref(false);
const isIndeterminate = ref(true);
onMounted(() => {
  getTabData()
  notItems()

});
// 返回上一级
const closeEvent = () => {
  emit("close");
};
// 全选
const handleCheckAllChange = (val) => {
  if (val) {
    LeftcheckList.value = leftList.value;
  } else {
    LeftcheckList.value = [];
  }
  isIndeterminate.value = false;
};
//选中
const handleCheckedCitiesChange = (val) => {

  LeftcheckList.value = val.map((item) => item.objid);
};

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



// 未选择选择项
const notItems = () => {
  listQueryNo.value.tid = props.formValue.id
  getApi(listQueryNo.value, '/mosty-jcgl/zhjcmb/getListW').then(res => {
    if (res && res.records) {
      leftList.value = res.records
      listQueryNo.value.total = res.total
    }
  });
};

// 保存选择项
const saveItems = () => {
  postApi(
    { tid: props.formValue.id, idList: LeftcheckList.value },
    "/mosty-jcgl/zhjcmb/addItemList"
  ).then((res) => {
    notItems();
    getTabData();
    setDefaultParmas()
    LeftcheckList.value = [];
  });
};


//设置默认参数
const setDefaultParmas = () => {
  listQuery.value = {
    pageCurrent: 1,
    pageSize: 20,
    total: 0
  }
  listQueryNo.value = {
    pageCurrent: 1,
    pageSize: 20,
    total: 0
  }
}
// 获取右侧表格数据
const getTabData = () => {
  listQuery.value.tid = props.formValue.id
  getApi(listQuery.value, `/mosty-jcgl/zhjcmb/getListY`).then(
    (res) => {
      if (res && res.records) {
        tableDataright.value = res.records
        listQuery.value.total = res.total
      }
    }
  );
};



// 批量删除
const overDelete = () => {
  postApi(
    { idList: multipleSelection.value, tid: props.formValue.id },
    "/mosty-jcgl/zhjcmb/delItemList"
  ).then((res) => {
    setDefaultParmas()
    getTabData();
    notItems();
  });
};
//页码发生变化
const handleCurrentChange = (val) => {
  listQueryNo.value.pageCurrent = val;
  notItems();
};
//查询条数发生变化
const handleSizeChange = (val) => {
  listQueryNo.value.pageSize = val;
  notItems();
};
//页码发生变化
const handleCurrentChange2 = (val) => {
  listQuery.value.pageCurrent = val;
  notItems();
};
//查询条数发生变化
const handleSizeChange2 = (val) => {
  listQuery.value.pageSize = val;
  notItems();
};
</script>

<style lang="scss" scoped>
.btnBox {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-bottom: 12px;
}

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

  >div {
    color: #000;
  }
}

.operdelbtn {
  color: #fff !important;
  padding: 5px;
}

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

.left-check-box {
  width: 48%;
}

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

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


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

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

.fxdjspan {
  display: inline-block !important;
  width: 100px;
  text-align: center;
  padding: 5px 0;
  border-radius: 5px;
  color: #fff !important;
}

.reds {
  background-color: #e80000;
}

.orgs {
  background-color: #ff8040;
}

.blus {
  background-color: #e2d101;
}

.gres {
  background-color: #0080ff;
}
</style>