<template>
  <div>
    <div class="bigBox">
      <!-- 组织机构信息 -->
      <div class="left" :style="{ width: lfBoxWid }">
        <div class="title">
          <div style="display: flex; align-items: center">
            <div style="padding-top: 5px; margin-right: 5px">
              <el-icon style="color: var(--el-color-primary) !important">
                <List />
              </el-icon>
            </div>
            <span class="zzjgxx" v-if="iconChange">风险单元绑定</span>
          </div>
          <el-icon @click="handleCollapse" v-show="iconChange">
            <DArrowLeft />
          </el-icon>
          <el-icon @click="handleCollapse" v-show="!iconChange">
            <DArrowRight />
          </el-icon>
        </div>
        <div class="treeBox">
          <!-- <fxdyTree width="100%" @change="fxdyChange" /> -->
          <PcflTree width="100%" clearable filterable @getdeptData="getdeptData" />

        </div>
      </div>

      <div class="right" :style="{ width: rgBoxWid }">
        <!-- <MOSTY.Search :searchArr="searchArr" @submit="onSearch" /> -->
        <div>
          <!-- <el-divider /> -->
          <div class="operate-btn-box">
            <el-button type="primary" @click="handleAdd"
              :disabled="(currFxdy.children && currFxdy.children.length) || !currFxdy.dm">
              <el-icon>
                <CirclePlus />
              </el-icon>
              <span>绑定</span>
            </el-button>
          </div>
        </div>

        <!-- 表格 -->
        <section class="table-height-1">
          <MOSTY.Table :table-columns="tableColumns" :tableData="tableData" :tableloading="tableloading"
            :tableHeight="'100%'" :isSelect="false" style="width: 100%;" :isSort="false" actionsW="280">
            <template #actions="{ row }">
              <!-- <span class="operedit" @click="handleChange(row)"><el-icon>
                  <EditPen />
                </el-icon>编辑
              </span> -->
              <el-popconfirm confirm-button-text="是" cancel-button-text="否" icon-color="red" title="确定要删除?"
                @confirm="unbind(row)">
                <template #reference>
                  <span class="operdel" size="small"><el-icon>
                      <Delete />
                    </el-icon>解除绑定</span>
                </template>
              </el-popconfirm>
              <!-- <span class="operesee" @click="handleSee(row)">
                <el-icon>
                  <View />
                </el-icon>详情
              </span> -->

            </template>
          </MOSTY.Table>
        </section>
        <div class="fenye">
          <MOSTY.Pages :pageConfiger="listQuery" @changeNo="handleCurrentChange" @changeSize="handleSizeChange" />
        </div>
      </div>

      <!-- 绑定弹框 -->
      <bindTc ref="bindTcRef" @ok="bindTcOk" />
      <!-- 现状风险-新增 -->
      <!-- <div v-if="addDiaShow" class="dialog-box">
      </div> -->

      <!-- 管控措施 详情 -->
      <div v-if="isShowMeasureDetail" class="dialog-box">
      </div>

      <!-- 固有风险-编辑 -->
    </div>
  </div>
</template>

<script setup>
// 引入
import { reactive, onMounted, ref, getCurrentInstance } from "vue";
import { getApi, postApi } from "@/api/tobAcco_api.js";
import { ElMessage } from "element-plus";
import PcflTree from "../component/pcflTree.vue";
import bindTc from "./bindTc.vue";
const { proxy } = getCurrentInstance();
import * as MOSTY from "@/components/MyComponents/index";



// const { D_TB_KNCSDHG, D_BZ_FXLX, } = proxy.$dict("D_TB_KNCSDHG", "D_BZ_FXLX",);
const tableloading = ref(false);
const tableData = ref([]);
const formData = ref({});
/** 风险等级 */
const fxLev = ref('1');
/** 固有信息 */
const solidObj = ref({})
/** 固有信息数组 */
const solidArr = ref([]);
const activeTab = ref(0);
const bindTcRef = ref(null);
/** 显示管控详情 */
const isShowMeasureDetail = ref(false)
const searchArr = reactive([
  {
    showType: "input",
    prop: "description",
    width: '250px',
    placeholder: '请输入危险源描述进行查询',
  },
]);
const tableColumns = reactive([
  {
    title: "名称",
    prop: "name"
  },

  {
    title: "操作",
    prop: "actions",
    slot: true
  }
])
const listQuery = ref({
  pageCurrent: 1,
  pageSize: 20,
  total: 0
});
const addDiaShow = ref(false);
const saveshow = ref(true);
const measureObj = ref({});
/** 风险描述 */
const riskDescription = ref('布局缺陷')
let riskLevObj = ref({
  1: {
    value: 1,
    title: "低度风险",
    color: "blue",
  },
  2: {
    value: 2,
    title: "中度风险",
    color: "yellow"
  },
  3: {
    value: 3,
    title: "高度风险",
    color: "orange"
  },
  4: {
    value: 4,
    title: "严重风险",
    color: "red"
  }
})
// 树的展开与折叠
const iconChange = ref(true);
const lfBoxWid = ref("300px");
const rgBoxWid = ref("calc(100% - 310px)");
/** 获取子组件实例 */
const headerEditRef = ref(null);
/** 选择的排查分类 */
const checkName = ref('')

// 左侧树形数据
const leftData = ref(null);
/**做成选中的风险单元 */
const currFxdy = ref({ itemList: [] });
// 初始化
onMounted(() => {

});

const handleCollapse = () => {
  iconChange.value = !iconChange.value;
  if (iconChange.value) {
    lfBoxWid.value = "300px";
    rgBoxWid.value = "calc(100% - 300px - 310px)";
  } else {
    lfBoxWid.value = "40px";
    rgBoxWid.value = "calc(100% - 40px)";
  }
};


const handleDel = (index) => {
  const row = solidArr.value[index]
  deleteApi({}, `/mosty-jcgl/danger2Baseinfo/del/${row.id}`).then(() => {
    ElMessage.success("删除成功");
    // getTableData();
    // getriskPlaceInfo(true, 0)
  });
}


//获取部门数据
const getdeptData = (val) => {
  currFxdy.value = {
    ...val,
    children: Array.isArray(val.itemList) ? val.itemList : [],
    value: val.dm,
    label: val.zdmc,
  }
  listQuery.value.pageCurrent = 1;
  getTableData();
};
// 获取表格数据
const getTableData = () => {
  tableData.value = []
  tableloading.value = true;
  const params = {
    pageNum: listQuery.value.pageCurrent,
    pageSize: listQuery.value.pageSize,
    dictCode: currFxdy.value.dm
  }
  getApi(params, "/mosty-jcgl/fxdy/getBingPage").then((res) => {
    tableData.value = Array.isArray(res?.records) ? res.records : [];
    listQuery.value.total = res.total;
  }).finally(() => {
    tableloading.value = false;
  });
};

//查询
function onSearch(obj) {
  listQuery.value.description = obj.description;
  listQuery.value.pageCurrent = 1;
  getTableData();
}

// 新增弹出框
const handleAdd = () => {
  bindTcRef.value?.open({ id: currFxdy.value.dm, label: currFxdy.value.label })
};
//详情
const handleSee = (row) => {
  addDiaShow.value = true;
};


// 修改
const handleChange = (row) => {
  addDiaShow.value = true;

};

function closeAdd() {
  addDiaShow.value = false;
  getTableData();
}
//删除
const unbind = (row) => {
  postApi({ids:[row.id]}, `/mosty-jcgl/fxdy/removeBind`).then(() => {
    ElMessage.success("解绑成功");
    getTableData();
  });
};

//页码发生变化
const handleCurrentChange = (val) => {
  listQuery.value.pageCurrent = val;
  getTableData();
};
//查询条数发生变化
const handleSizeChange = (val) => {
  listQuery.value.pageSize = val;
  getTableData();
};
const bindTcOk = (val) => {
  getTableData();
}
</script>

<style lang="scss" scoped>
.operate {
  color: yellowgreen !important;
}

.disab {
  margin: 0 5px;
  cursor: pointer;
  color: #807e7e66 !important;
}

.table-height-1,
.table-height-2 {
  height: calc(100vh - 255px);
}

.bigBox {
  display: flex;

  .title {
    height: 39px;
    line-height: 39px;
    font-size: 18px;
    color: #0f3916;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .el-icon {
      cursor: pointer;
    }


  }

  .left {
    width: 300px;
    background: #ffffff;
    box-shadow: 0px 2px 10px 0px rgba(107, 107, 107, 0.1);
    border-radius: 0px 0px 0px 0px;
    opacity: 1;

    .treeBox {
      overflow: auto;
      height: 90%;
    }
  }

  .center {
    width: 290px;
    background-color: #fff;
    color: #000;
    margin-left: 8px;
  }

  .right {
    padding: 0 10px;
    margin: 0px 0 0 10px;
    background: #fff;

    .headBox {
      display: flex;
      align-items: center;
    }

    .operate-btn-box {
      color: #000;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      margin-bottom: 12px;
      margin-top: 10px;
    }

  }
}

.gyfx-container-box {
  // padding-top: 10px;

  .gyfx-item {
    display: flex;
    justify-content: space-between;
    width: 290px;
    height: 40px;
    // line-height: 40px;
    padding: 8px 15px;

    border: 1px solid #e8e8e8;
    background-color: #f9f9f9;
    color: #000;
    margin-bottom: 3px;
    z-index: 1;

    .gyfx-item-title {
      display: inline-block;
      width: 215px;

      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    &:hover {
      // background-color: #268ae8;
      transform: scale(1.05);
      transition: 0.1s;
    }

    &.active {
      color: #f1f1f1;
      background-color: var(--el-color-primary);
    }
  }
}

.tab-box {
  font-size: 15px;
}

.tab-box-blue {
  --el-tag-bg-color: #7f99e7;
  --el-tag-border-color: #268ae8;
  --el-tag-text-color: #1f6eb4;
  --el-tag-hover-color: #1551b2;
}

.tab-box-yellow {
  --el-tag-bg-color: #e7e57f;
  --el-tag-border-color: #e8e526;
  --el-tag-text-color: #dec90d;
  --el-tag-hover-color: #e7d10e;
}

.tab-box-orange {
  --el-tag-bg-color: #e7a97f;
  --el-tag-border-color: #e87726;
  --el-tag-text-color: #c54404;
  --el-tag-hover-color: #cd580a;
}

.tab-box-red {
  --el-tag-bg-color: #e78b7f;
  --el-tag-border-color: #e84026;
  --el-tag-text-color: #cf220f;
  --el-tag-hover-color: #d21f0b;
}


.dix-cell {
  display: flex;
}
</style>
