<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="savechos">
            <el-icon>
              <Plus />
            </el-icon>
            <span>保存</span>
          </el-button>
          <el-button type="primary" @click="CloseEvent">
            <el-icon>
              <Back />
            </el-icon>
            <span>返回</span>
          </el-button>
        </div>
      </div>
      <div class="tabBox">
        <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="sgsjcbzlist" v-loading="tableloading"
              element-loading-text="数据加载中..." height="70vh" style="width: 100%"
              @selection-change="handleSelectionChange" border>
              <el-table-column type="selection" width="55" />
              <el-table-column label="排查内容项" property="itemName" show-overflow-tooltip>
              </el-table-column>
              <el-table-column label="隐患等级" property="yhLv">
                <template #default="{ row }">
                  <dict-tag :options="D_DBZ_YHDJ" :value="row.yhLv" :tag="false"></dict-tag>
                </template>
              </el-table-column>
              <el-table-column label="隐患说明" property="yhNote" show-overflow-tooltip>
              </el-table-column>
            </el-table>

          </div>
        </div>
        <div class="box_count">
          <div class="count_top">
            <span class="tit">已选择</span>
            <el-button @click="zdyjcx">自定义检查项</el-button>
          </div>
          <div>
            <!-- if(type=='D'展示部门和特列标准)if（type=='O'只展示特例标准） -->
            <div style='color:blue;'>备注：如果本部门没有自定义检查标准，则默认使用公司检查标准</div>
            <div v-if='oldtype'>
              <el-radio-group v-model="type">
                <el-radio :label="'D'" v-if='oldtype != "O"'> 部门中["{{ props.Row.zdmc }}"]<span
                    style='color:red;'>类型通用标准</span></el-radio>
                <el-radio :label="'O'">仅对[{{ props.Row.objname }}]设置<span style='color:red;'>特例标准</span></el-radio>
              </el-radio-group>
            </div>
          </div>
          <div class="table_bo">
            <el-table ref="multipleTableRef2" :data="bbmjclist" v-loading="tableloading2"
              element-loading-text="数据加载中..." style="width: 100%" height="64vh" border>
              <el-table-column type="index" width="55" />
              <el-table-column label="排查内容项" property="itemName" show-overflow-tooltip>
              </el-table-column>
              <el-table-column label="隐患等级" property="yhLv">
                <template #default="{ row }">
                  <dict-tag :options="D_DBZ_YHDJ" :value="row.yhLv" :tag="false"></dict-tag>
                </template>
              </el-table-column>
              <el-table-column label="隐患说明" property="yhNote" show-overflow-tooltip>
              </el-table-column>
              <el-table-column label="操作">
                <template #default="scope">
                  <span class="operesee" @click="changexg(scope.row, scope.$index)">
                    <el-icon>
                      <EditPen />
                    </el-icon>
                    修改
                  </span>
                  <el-popconfirm confirm-button-text="是" cancel-button-text="否" icon-color="red" title="确定要删除?"
                    @confirm="handledelete(scope.row, scope.$index)">
                    <template #reference>
                      <span class="operdel" size="small"><el-icon>
                          <Delete />
                        </el-icon>删除</span>
                    </template>
                  </el-popconfirm>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
      </div>
    </div>
    <innerDialog :innerShow="innerShow" :innerStatus="innerStatus" :title="title" :formValue="Row" @changeVi="changeVi"
      @addfrom="addfrom"></innerDialog>
  </div>
</template>

<script setup>
import { onMounted, ref, defineEmits, defineProps, getCurrentInstance } from "vue";
import { ElTable } from "element-plus";
import innerDialog from "./innerDialog.vue";
import { getApi, postApi } from "@/api/tobAcco_api.js";
import { ElMessage } from "element-plus";
const { proxy } = getCurrentInstance();
const { D_DBZ_YHDJ, D_TB_BMJCLX } = proxy.$dict("D_DBZ_YHDJ", "D_TB_BMJCLX");
const innerShow = ref(false);
const innerStatus = ref(false);
const props = defineProps({
  Row: Object,
  orgcode: String
});
const Row = ref(null)
const emits = defineEmits(["close"]);
const title = ref("");
const tableloading = ref(false);
const tableloading2 = ref(false);
const sgsjcbzlist = ref([]);
const bbmjclist = ref([]);
const multipleTableRef = ref();
const multipleTableRef2 = ref();
const multipleSelection = ref([]);
const chooesJcx = ref([]);//选择的检查项
const editIndex = ref(null);
const type = ref('D')
const oldtype = ref('D')
const bmobj = ref({})
onMounted(() => {

  // 查询待选择项
  getwglList();
  // 部门检查标准-本部门已配置
  getYglList();
});
// 查询待选择项
function getwglList() {
  tableloading.value = true;
  getApi({ checklibId: props.Row.checktypid }, "/mosty-jcgl/deptCheck/getOrgChickItem").then((res) => {
    if (res) {
      sgsjcbzlist.value = res;
      tableloading.value = false;
    }
  }).catch(() => {
    sgsjcbzlist.value = [];
    tableloading.value = false;
  })
}
// 部门检查标准-本部门已配置
function getYglList() {
  tableloading2.value = true;
  getApi({ checklibId: props.Row.checktypid, objid: props.Row.objid, orgcode: props.Row.leafcode }, "/mosty-jcgl/deptCheck/getDeptChickItem").then((res) => {
    if (res) {
      bbmjclist.value = res.list;
      tableloading2.value = false;
      oldtype.value = res.type
      type.value = res.type
    }
  }).catch(() => {
    bbmjclist.value = [];
    tableloading2.value = false;
  })
}

//获取选中项
const handleSelectionChange = (val) => {
  chooesJcx.value = val
  chooesJcx.value.addtype = '0'
  multipleSelection.value = val.map((item) => {
    return item.id;
  });
};

//添加选择项
function addGl() {
  chooesJcx.value = chooesJcx.value.map(item => {
    return {
      ...item,
      id: null
    }
  })
  bbmjclist.value.push(...chooesJcx.value)
  let arr2 = chooesJcx.value
  for (let i = 0; i < arr2.length; i++) {
    const el = arr2[i];
    sgsjcbzlist.value = sgsjcbzlist.value.filter((item) => {
      return item.id != el.id;
    });
  }
  multipleTableRef.value.clearSelection();
}
//自定义检查项
function zdyjcx() {
  editIndex.value = null;
  Row.value = null
  title.value = "自定义检查项";
  innerShow.value = true;
}
//修改
function changexg(row, index) {
  editIndex.value = index;
  Row.value = JSON.parse(JSON.stringify(row))
  title.value = "修改检查项";
  innerShow.value = true;
}

//接收值
function addfrom(val) {
  let obj = val
  obj.addtype = '1'
  if (editIndex.value != null) {
    for (let i = 0; i < bbmjclist.value.length; i++) {
      if (editIndex.value == i) {
        bbmjclist.value[i] = obj
      }
    }

  } else {
    bbmjclist.value.push(obj)
  }
}
//删除
const handledelete = (row, inds) => {
  bbmjclist.value.forEach((item, index) => {
    if (row == item) {
      bbmjclist.value.splice(index, 1);
    }
  });
  if (row.id) {
    sgsjcbzlist.value.unshift(row)
  }
};
//保存
function savechos() {
  if (type.value == 'D' && bbmjclist.value) {
    bbmjclist.value.forEach(item => {
      item.orgtype = 'D'
    })
  } else if (type.value == 'O' && bbmjclist.value) {
    bbmjclist.value.forEach(item => {
      item.orgtype = 'O'
    })
  }
  let obj = {
    checklibId: props.Row.checktypid,
    objid: props.Row.objid,
    orgcode: props.Row.leafcode,
    libItemList: bbmjclist.value,
    type: type.value
  }
  postApi(obj, '/mosty-jcgl/deptCheck/save').then((res) => {
    ElMessage.success("保存成功");
    emits("close");
  })
}
const CloseEvent = () => {
  emits("close");
};
const changeVi = (val) => {
  innerShow.value = val;
  Row.value = null
};

</script>

<style lang="scss" scoped>
::v-deep .el-radio__label {
  color: #000 !important;
}

.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: 50%;
    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>
