<template>
  <div class="bigBox">
    <section v-show='props.isShowTotal' ref="getHeight">
      <section class="box-sjtj">
        <MOSTY.Assort :title="'安全标识分类'" style="padding: 0;" />
        <section class="flex">
          <section class="left-tj">
            <Sjtj :info="pageData.countlist" :isShowTip="false" :isShowBottom="false" :width="56" mb="6px" />
          </section>
        </section>
      </section>
    </section>
    <!-- 查询 -->
    <el-divider />
    <div class='tabox'>
      <section class="query-flex" ref="queryHeight">
        <section class="query-section">
          <el-input placeholder="请输入安全标识名称进行查询" v-model="pageData.listQuery.logoname" clearable
            style='width:250px'></el-input>
          <MOSTY.DictTree class="ml12" v-model="pageData.listQuery.aqbslb" :zdlist="aqbslist" :placeholder='"安全标识类型"'
            :type='"array"' style="width: 250px;" />
          <MOSTY.DictRidioAndSelect class="ml12" style="width: 250px;" :dictData="D_TB_AQBS_LX"
            v-model="pageData.listQuery.logotypecode" selectType="select" :placeholder='"业务分类"' :disabled="false" />
          <template v-if="isOpensearch">
            <MOSTY.DictRidioAndSelect class="mt10" style="width: 250px;" :dictData="D_BZ_SYZT"
              v-model="pageData.listQuery.state" selectType="select" :placeholder='"状态"' :disabled="false" />
          </template>
        </section>
        <div class="query-btn">
          <div class="toggle" :class="{ active: isOpensearch }" @click="handleClickOpen">
            <span>{{ isOpensearch ? "收起" : "展开" }}筛选</span>
            <el-icon>
              <DArrowLeft />
            </el-icon>
          </div>
          <el-button @click="gettablist" class="ml6">
            <el-icon>
              <Search />
            </el-icon>
            <span>查询</span></el-button>
          <el-button @click="handleRest">
            <el-icon>
              <Refresh />
            </el-icon><span>重置</span></el-button>
        </div>
      </section>
      <el-divider />
      <section class="button">
        <el-button type="primary" v-if="isAuth" @click="addUserHander">
          <el-icon>
            <CirclePlus />
          </el-icon>
          <span>新增</span>
        </el-button>
        <el-button type="primary" @click="export2Excel" v-loading="dcloading"
          :disabled="pageData.tableData.length == 0">
          <el-icon>
            <Download />
          </el-icon>
          <span>导出</span>
        </el-button>
      </section>
      <section :style="{ 'height': totalHeights }">
        <MOSTY.Table :table-columns="pageData.tableColumns" :isSelect="true" :isSort="true"
          :tableData="pageData.tableData" :tableloading="tableloading" @handleSelecTable="handleSelecTable"
          element-loading-text="数据加载中...">
          <template #aqbslb="{ row }">
            <dict-tag v-if="row.aqbslb" :options="D_TB_JCYWLX" :value="row.aqbslb" :tag="false" />
            <span v-else>无</span>
          </template>
          <template #logotypecode="{ row }">
            <dict-tag v-if="row.logotypecode" :options="D_TB_AQBS_LX" :value="row.logotypecode" :tag="false" />
            <span v-else>无</span>
          </template>
          <template #sitename="{ row }">
            <span>{{ row.sitename ? row.sitename : '' }}{{ row.buildingname ? '-' + row.buildingname : '' }}{{
              row.floorname ? '-' + row.floorname : '' }}{{ row.partname ? '-' + row.partname : '' }}</span>
          </template>
          <template #responsibleusername="{ row }">
            <span>{{ row.responsibleusername ? row.responsibleusername.replace(/（null）/g, '') : '' }}</span>
          </template>
          <template #state="{ row }">
            <dict-tag v-if="row.state" :options="D_BZ_SYZT" :value="row.state" :tag="false" />
            <span v-else>无</span>
          </template>
          <template #actions="{ row }">
            <span class="operedit" v-if="isAuth" @click="handlexg(row)">
              <el-icon>
                <EditPen />
              </el-icon>编辑</span>
            <el-popconfirm v-if="isAuth" confirm-button-text="是" cancel-button-text="否" icon-color="red" title="确定要注销?"
              @confirm="handledelete(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">
        <Pages :pageConfiger="pageData.pageConfiger" @changeNo="handleCurrentChange" @changeSize="handleSizeChange" />
      </div>
    </div>
  </div>
  <!-- 安全标识 -->
  <div v-if="showaqbsdia" class="dialog-box">
    <Addaqbsindex :formData="formData" @changePage="changePage" />
  </div>

</template>
<script setup>
import * as MOSTY from "@/components/MyComponents/index";
import Addaqbsindex from "@/components/dialog/Addaqbsindex.vue";
import { reactive, ref, onMounted, getCurrentInstance, watch, computed, nextTick } from "vue"
import { getApi, postApi } from "@/api/tobAcco_api.js";
import { ElMessage, ElLoading } from "element-plus";
import { exportXlsx } from "@/excel/Export2Excel.js";
import Sjtj from '@/views/dataReportWork/aqjypx/components/sjtj.vue'
import { getItem } from "@/utils/storage";
import Pages from '@/components/aboutTable/Pages/index.vue'
import { getAuth } from "@/utils/tools.js";
const { proxy } = getCurrentInstance();
const { D_TB_AQBS_LX, D_BZ_SYZT, D_TB_JCYWLX } = proxy.$dict("D_TB_AQBS_LX", "D_BZ_SYZT", 'D_TB_JCYWLX');
const emits = defineEmits(["handleChange", 'searchChange']);
const props = defineProps({
  obj: {
    default: null,
    type: Object
  },
  type: {
    default: '',
    type: String
  },
  tableHeight: {
    default: '40vh',
    type: String
  },
  isShowTotal: {
    type: Boolean,
    default: false
  }
});
const formData = ref({
  title: ""
});
const tableloading = ref(false);
const showaqbsdia = ref(false);
const dcloading = ref(false);
const isOpensearch = ref(false);
const aqbslist = ref([])
const getHeight = ref(null)
const queryHeight = ref(null)
const isAuth = ref(false)
const pageData = reactive({
  countlist: [
    { title: '总数', num: 0, dm: '', icon: 'ccss/icon_01.png' },
    { title: '警告类标识', num: 0, dm: '200301000000', icon: 'ccss/icon_02.png' },
    { title: '禁止类标识', num: 0, dm: '200302000000', icon: 'ccss/icon_03.png' },
    { title: '指令类标识', num: 0, dm: '200303000000', icon: 'ccss/icon_04.png' },
    { title: '提示类标识', num: 0, dm: '200304000000', icon: 'ccss/icon_05.png' },
  ],
  listQuery: {
    type: '0',
    pageCurrent: 1,
    pageSize: 20,
    orgcode: '',
    logoname: '',
    aqbslb: ''
  },
  tableColumns: [
    {
      title: "单位",
      prop: "orgname",
    },
    {
      title: "安全标识名称",
      prop: "logoname",
    },
    {
      title: "安全标识类型",
      prop: "aqbslb",
      slot: true
    },
    {
      title: "业务分类",
      prop: "logotypecode",
      slot: true
    },
    {
      title: "所属现场部位",
      prop: "sitename",
      slot: true
    },
    {
      title: "悬挂位置",
      prop: "location"
    },
    {
      title: "责任部门",
      prop: "deptname",
    },
    {
      title: "责任人",
      prop: "responsibleusername",
      slot: true
    },
    {
      title: "状态",//正常、异常，平铺
      prop: "state",
      slot: true
    },
    {
      title: "操作",
      prop: "actions",
      slot: true
    }
  ],
  tableData: [],
  pageConfiger: {
    pageSize: 5,
    pageCurrent: 1,
    total: 0
  },
})
const fromObj = ref({ type: '1' })
const totalHeights = ref(null)
watch(() => props.isShowTotal, (val) => {
  nextTick(() => {
    if (val) {
      totalHeights.value = `calc(100vh - ${337 + queryHeight.value.offsetHeight + getHeight.value.offsetHeight}px)`
    } else {
      totalHeights.value = `calc(100vh - 373px)`
    }

  })
}, {
  deep: true,
  immediate: true
})
const handleClickOpen = () => {
  isOpensearch.value = !isOpensearch.value
  nextTick(() => {
    if (isOpensearch.value) {
      totalHeights.value = `calc(100vh - ${337 + getHeight.value.offsetHeight + queryHeight.value.offsetHeight}px)`

    } else {
      totalHeights.value = `calc(100vh - 373px)`
    }

  })
}
onMounted(() => {
  nextTick(() => {
    totalHeights.value = `calc(100vh - ${337 + getHeight.value.offsetHeight + queryHeight.value.offsetHeight}px)`
  })
  getaqbslb()
  watch(
    () => props.obj.orgcode,
    (newValue) => {
      if (newValue) {
        pageData.listQuery.orgid = newValue
        fromObj.value.orgcode = newValue
        gettablist()
        getaqbscount()
      }

    },
    { deep: true, immediate: true }
  );
  isAuthorize()


})
// 是否选择多选
const handleSelecTable = row => {
}
// 是否可以操作
const isAuthorize = async () => {
  isAuth.value = await getAuth()
}
// （新）统计各类（场、建、楼、部）下或单位,安全标识
function getaqbscount() {
  postApi(fromObj.value, '/mosty-jcgl/sitelogo/countSitelogo').then((res) => {
    if (res.length > 0) {
      for (let i = 0; i < pageData.countlist.length; i++) {
        const el = pageData.countlist[i];
        el.num = 0
        for (let j = 0; j < res.length; j++) {
          const li = res[j];
          if (li.dm == el.dm) {
            el.num = li.count
          }
        }
      }
      pageData.countlist[0].num = pageData.countlist[1].num + pageData.countlist[2].num + pageData.countlist[3].num
        + pageData.countlist[4].num
    }
  })
}
//安全标识分页查询
function gettablist() {
  tableloading.value = true
  postApi(pageData.listQuery, "/mosty-jcgl/sitelogo/queryTbSitelogo").then((res) => {
    if (res) {
      tableloading.value = false
      pageData.tableData = res.records
      pageData.tableData.forEach(async (item) => {
        if (item.file) {
          item.file = item.file.split(',')
          getApi({}, `/mosty-base/minio/file/download/${item.file[0]}`).then(
            (res) => {
              if (res) {
                item.img = res.url;
              }
            }
          );
        }
      })
      pageData.pageConfiger.total = res.total
    }
  })
}

//获取安全标识类型
function getaqbslb() {
  getApi({ zdbh: 'D_TB_JCYWLX', dm: '2003', level: 2 }, '/mosty-base/sysDict/getJcyelxDictTree').then(res => {
    aqbslist.value = res[0].itemList
  })
}


//删除
function handledelete(row) {
  postApi({}, `/mosty-jcgl/sitelogo/deleteTbSitelogoOne/${row.id}`).then(res => {
    ElMessage.success("删除成功");
    getaqbscount()
    gettablist()
  })
}
//新增
function addUserHander() {
  formData.value.type = 'aqbs'
  formData.value.title = '安全标识新增';
  formData.value.saveBtnShow = true;
  showaqbsdia.value = true
  tableloading.value = false
}
//修改
function handlexg(row) {
  formData.value.type = 'aqbs'
  formData.value.title = '安全标识修改';
  formData.value.saveBtnShow = true;
  formData.value.id = row.id
  showaqbsdia.value = true
}
//查看
function handleSee(row) {
  formData.value.type = 'aqbs'
  formData.value.title = '安全标识详情';
  formData.value.saveBtnShow = false;
  formData.value.id = row.id
  showaqbsdia.value = true
}
//关闭
const changePage = async (obj) => {
  formData.value = {}
  showaqbsdia.value = false
  pageData.listQuery.aqbslb = null
  getaqbscount()
  if (obj) {
    //新增成功不刷新表格直接追加
    pageData.tableData.unshift(obj);
    total.value + 1
  } else {
    //修改不追加，直接刷新
    gettablist()
  }
}
//查询
const handleRest = () => {
  pageData.listQuery.pageCurrent = 1;
  pageData.pageConfiger.pageCurrent = 1;
  pageData.listQuery.aqbslb = ''
  pageData.listQuery.logoname = ''
  pageData.listQuery.logotypecode = ''
  pageData.listQuery.state = ''
  gettablist()
}
//页码发生变化
const handleCurrentChange = (val) => {
  pageData.listQuery.pageCurrent = val;
  pageData.pageConfiger.pageCurrent = val;
  gettablist()
};
//查询条数发生变化
const handleSizeChange = (val) => {
  pageData.listQuery.pageSize = val;
  pageData.pageConfiger.pageSize = val;
  gettablist()
};
//导出表格
const export2Excel = () => {

  let title = {
    index: "序号",
    orgname: "单位",
    aqbslb: "安全标识类型",
    logoname: "安全标识名称",
    logotypecode: "业务分类",
    sitename: "所属现场部位",
    location: "悬挂位置",
    installationdate: "安装日期",
    deptname: "责任部门",
    responsibleusername: "责任人",
    state: "状态",
  };
  const param = {
    pageCurrent: 1,
    pageSize: 10000,
    type: '0',
    orgid: fromObj.value.orgcode
  }
  dcloading.value = true
  postApi(param, "/mosty-jcgl/sitelogo/queryTbSitelogo").then(async (res) => {
    if (res.records) {
      let data = res.records;
      if (data.length > 0) {
        for (let i = 0; i < data.length; i++) {
          data[i].index = i + 1
          data[i].responsibleusername = data[i].responsibleusername ? data[i].responsibleusername.replace(/（null）/g, '') : '';
          data[i].logotypecode = data[i].logotypecode ? proxy.$getDictVal(data[i].logotypecode, D_TB_AQBS_LX) : '无';
          data[i].state = data[i].state ? proxy.$getDictVal(data[i].state, D_BZ_SYZT) : '无';
          data[i].aqbslb = data[i].aqbslb ? proxy.$getDictVal(data[i].aqbslb, D_TB_JCYWLX) : '无';
          data[i].sitename = `${data[i].sitename ? data[i].sitename : ''}${data[i].buildingname ? '-' + data[i].buildingname : ''}${data[i].floorname ? '-' + data[i].floorname : ''}${data[i].partname ? '-' + data[i].partname : ''}`;
        }
        let tablename = "安全标识.xlsx";
        exportXlsx(title, data, '安全标识', tablename, '安全标识');
        dcloading.value = false
      } else {
        ElMessage.warning('暂无数据');
        dcloading.value = false
      }
    }
  }).catch(err => {
    dcloading.value = false
  });
};


</script>

<style lang="scss" scoped>
::v-deep .el-divider--horizontal {
  margin: 14px 0 !important;
}

.top_ul {
  display: flex;
  justify-content: start;
  flex-wrap: wrap;

  >li {
    width: 15%;
    height: 83px;
    margin: 6px 32px;
  }
}

.tubiao {
  text-align: right;

  >img {
    margin: 0 10px;
  }

  .fonycolol {
    color: val(--el-color-primary);
  }

  .showcolor {
    background-color: #bbb;
  }
}

.headBox {
  display: flex;
  justify-content: end;
  width: 100%;
  margin-bottom: 10px;
}

.con_ul {
  overflow-y: scroll;
  text-align: left;
}

.con_li {
  vertical-align: middle;
  display: inline-block;
  width: 14%;
  height: 166px;
  margin-bottom: 20px;
  margin-left: 25px;
  border-radius: 4px;
  border: 1px solid #ccc;
  background-color: #e7e8e7;
  text-align: center;
  overflow: hidden;

  .imgbox {
    width: 100%;
    height: 120px;
    margin: 0;
    padding: 0;
  }

  .ralebox {
    position: relative;
  }

  .ralebox span {
    display: inline-block;
    width: 57px;
    color: white;
    font-size: 12px;
    padding: 0 4px;
    height: 30px;
    line-height: 34px;
    position: absolute;
    right: -26px;
    border-radius: 41%;
    top: -9px;
    text-align: left;
  }
}

.cont_bot {
  background-color: #e7e8e7;
  border-radius: 0 0 4px 4px;
  height: 50px;
  margin: 0;
  padding: 0;

  div {
    display: block;
    text-align: left;
    margin-left: 10px;
  }

  .title_con {
    color: #44a48c;
    text-align: left;
    font-weight: bold;
    overflow: hidden;
  }

  .dz_con {
    color: #666;
    font-size: 14px;
  }
}

.box-sjtj {
  background-color: #fff;
  width: 100%;
  padding: 0 16px 7px 16px;
  box-sizing: border-box;

  .flex {
    display: flex;
    align-items: center;
    justify-content: space-between;

    .left-tj {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
  }
}

.query-flex {
  display: flex;
  justify-content: space-between;

  .query-section {
    display: flex;
    flex-wrap: wrap;
    width: 68%;
  }

  .query-btn {
    width: 240px;
    display: flex;
    justify-content: end;

    .toggle {
      height: 32px;
      cursor: pointer;
      display: flex;
      align-items: center;
      color: #0f3916;

      .el-icon {
        transform: rotate(90deg);
        transition: all 0.25s ease;
      }

      &.active {
        .el-icon {
          transform: rotate(-90deg);
        }
      }
    }
  }
}

.button {
  display: flex;
  align-items: center;
  justify-content: end;
  margin-bottom: 12px;
}
</style>
