<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">
          <PcflTree width="100%" clearable filterable @getdeptData="getdeptData" />
          <!-- <riskUnitTypeTree width="100%" @change="getdeptData" /> -->
        </div>
      </div>
      <div class="right" :style="{ width: rgBoxWid }">
        <div class="headBox">
          <div class="title">危险源基础信息表</div>
        </div>
        <el-divider />
        <MOSTY.Search :searchArr="searchArr" @submit="onSearch" />
        <div v-if="isShowAddBtn">
          <el-divider />
          <div class="btnBox">
            <el-button type="primary" @click="handleAdd">
              <el-icon>
                <CirclePlus />
              </el-icon>
              <span>新增</span>
            </el-button>
          </div>
        </div>

        <!-- 表格 -->
        <section :class="isShowAddBtn ? 'eltab9' : 'eltab7'">
          <MOSTY.Table :table-columns="tableColumns" :tableData="tableData" :tableloading="tableloading"
            :tableHeight="'100%'" :isSelect="false" style="width: 100%;" :isSort="false">
            <template #type="{ row }">
              <dict-tag :options="D_BZ_FXLX" :value="row.type" :tag="false" />
            </template>
            <!-- <template #controls="{ row }">
              <span class="dix-cell">
                <span v-for="it in row.controls" :key="it" style="margin: 0 2px; display: flex">
                  <dict-tag :options="D_TB_WXYKZCS" :value="it" :tag="false" />
                  <span>,</span>
                </span>
              </span>
            </template> -->

            <template #consequense="{ row }">
              <span class="dix-cell">
                {{ row.consequense_cname }}
                <!-- <dict-tag :options="D_TB_KNCSDHG" :value="row.consequense" :tag="true" /> -->
                <!-- <span v-for="(it, index) in row.consequense" :key="it" style="margin: 0 2px; display: flex">
                  <dict-tag :options="D_TB_KNCSDHG" :value="it" :tag="false" />
                  <span v-if="index != row.consequense.length - 1">,</span>
                </span> -->
              </span>
            </template>
            <template #state="{ row }">
              <span v-if="row.state == '2'" style="color: green;">已入库</span>
              <span v-else style="color: red;">未入库</span>
            </template>
            <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="deldete(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>
      <!-- 新增 -->
      <div v-if="addDiaShow" class="dialog-box">
        <Fxbskinfo v-if="addDiaShow" @close="closeAdd" :editObj="formData" />
      </div>

    </div>
  </div>
</template>

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

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 searchArr = reactive([
  {
    showType: "input",
    prop: "description",
    width: '250px',
    placeholder: '请输入危险源描述进行查询',
  },
]);
/**显示新增按钮 */
const isShowAddBtn = computed(() => {
  return !leftData.value?.children?.length
})
const tableColumns = reactive([
  {
    title: "名称",
    prop: "activityfacility"
  },
  {
    title: "风险类型",
    prop: "type",
    slot: true
  },
  {
    title: "危险源描述",
    prop: "description"
  },
  // {
  //   title: "控制措施",
  //   prop: "controls",
  //   slot: true
  // },

  {
    title: "可能产生的后果",
    prop: "consequense",
    slot: true
  },
  {
    title: "状态",
    prop: "state",
    slot: true
  },

  {
    title: "操作",
    prop: "actions",
    slot: true
  }
])
const listQuery = ref({
  pageCurrent: 1,
  pageSize: 20,
  total: 0
});
const addDiaShow = ref(false);
const saveshow = ref(true);
// 树的展开与折叠
const iconChange = ref(true);
const lfBoxWid = ref("300px");
const rgBoxWid = ref("calc(100% - 300px)");

// 控制新增与检查配置修改的标题
const title = ref("");
// 左侧树形数据
const leftData = ref(null)
// 初始化
onMounted(() => {

});

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)";
  }
};
//获取部门数据
const getdeptData = (val) => {
  /** 是否灭火器 */
  const isFireExtinguisher = val.dm == "200201010000"
  if (val.itemList && val.itemList.length > 0 && !isFireExtinguisher) {
    return
  }
  leftData.value = val
  listQuery.value.parttype = val.dm;
  listQuery.value.type = val.type == "GYFX" ? "1" : "2";
  listQuery.value.pageCurrent = 1;
  getTableData();
};
// 获取表格数据
const getTableData = () => {
  tableloading.value = true;
  getApi(listQuery.value, "/mosty-jcgl/danger2Baseinfo/getPageList").then((res) => {
    if (res.records) {
      tableloading.value = false;
      tableData.value = res.records;
      tableData.value.forEach((item) => {
        // if (item.controls) {
        //   item.controls = item.controls.split(",");
        // }
        item.consequense = item.consequense ? item.consequense.split(",") : [];
        item.consequense_cname = getMultiDictVal(item.consequense, D_TB_KNCSDHG)
      });

      listQuery.value.total = res.total;
    }
  })
};

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

// 新增弹出框
const handleAdd = () => {
  formData.value.parttype = leftData.value.dm;
  formData.value.sitetype = leftData.value.dm.slice(0, 2)
  formData.value.activityfacility = leftData.value.zdmc;
  formData.value.checklibId = leftData.value.dm
  formData.value.checklibName = leftData.value.zdmc
  formData.value.title = "危险源基础库新增";
  formData.value.id = null;
  formData.value.saveshow = true;
  formData.value.showrkbtn = true;
  addDiaShow.value = true;
};
//详情
const handleSee = (row) => {
  formData.value.title = "危险源基础库详情";
  formData.value.checklibId = leftData.value.dm
  formData.value.checklibName = leftData.value.zdmc
  formData.value.id = row.id;
  formData.value.saveshow = false;
  formData.value.showrkbtn = false;
  addDiaShow.value = true;
};
// 修改
const handleChange = (row) => {
  formData.value.title = "危险源基础库修改";
  formData.value.checklibId = leftData.value.dm
  formData.value.checklibName = leftData.value.zdmc
  formData.value.id = row.id;
  formData.value.saveshow = true;
  formData.value.showrkbtn = row.state != '2' ? true : false
  addDiaShow.value = true;

};

function closeAdd() {
  addDiaShow.value = false;
  getTableData();
}
//删除
const deldete = (row) => {
  deleteApi({}, `/mosty-jcgl/danger2Baseinfo/del/${row.id}`).then(() => {
    ElMessage.success("删除成功");
    getTableData();
  });
};

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

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

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

.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%;
    }
  }

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

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

    .btnBox {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      margin-bottom: 12px;
    }
  }
}




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