<template>
  <div class="pubDataBox">
    <div class="title">
      <span class="text">{{ obj.title }}</span>
    </div>
    <div v-if="JSON.stringify(obj) != '{}'">
      <ul class="statistics">
        <li v-for="item in obj.list" :key="item.title" @click="changeShow(item.title)">
          <div>
            <div class="title">{{ item.title }}</div>
            <div class="cont-item">
              <div :class="!item.item[1] ? 'items item' : 'item'">
                <span class="numb">
                  {{ item.item[0].val }}
                </span>
                <br />{{ item.item[0].name }}
              </div>
              <div class="item" v-if="item.item[1]">
                <span class="numb">
                  {{ item.item[1].val }}
                </span>
                <br />{{ item.item[1].name }}
              </div>
            </div>
          </div>

        </li>
      </ul>
    </div>
    <enterprise v-if="dataTitle == '企业数量'" :title="dataTitle" :visible="visible" @changeVi="changeVi" />
    <logistics v-if="dataTitle == '物流配送中心'" :title="dataTitle" :visible="visible" @changeVi="changeVi" />
    <Rebaking v-if="dataTitle == '复烤公司数量'" :title="dataTitle" :visible="visible" @changeVi="changeVi" />
    <yysgtable v-if="dataTitle == '烟叶收购站（点）'" :title="dataTitle" :visible="visible" @changeVi="changeVi" />
  </div>
</template>
<script setup>
// import { TableColumnCtx } from "element-plus";
import enterprise from "../components/tables/enterprise.vue";
import logistics from "../components/tables/logistics.vue";
import Rebaking from "../components/tables/Rebaking.vue";
import yysgtable from "../components/tables/yysgtable.vue";
import { ref, defineProps, reactive, onMounted } from "vue";

const props = defineProps({
  obj: {
    title: String,
    list: Array,
    default() {
      return {};
    }
  }
});

const visible = ref(false);
const key = ref("");
const currentPage = ref("20");
// const num=ref(0)    //0为总数，1为使用，作为标记
const params = ref({});
const msg = ref("");
const dataTitle = ref("");
// const pagers=ref(0)
const vmId = ref("0");
const tableData = reactive([]);
const tableColumn = ref([]);
const detailTable = ref();
const listQuery = ref({
  num: 1,
  pagers: 1
});

//控制图表是否显示
function changeShow(e) {
  if (!['危险作业', '重要相关方', '车辆', '职业危害场所'].includes(e)) {
    dataTitle.value = e; //这里存储的dataTitle主要是用来excel表格导出的时候进行区分
    visible.value = true;
  }

}

onMounted(() => {


});
//接受子组件传过来的值
const changeVi = (val) => {
  visible.value = val;
  dataTitle.value = "";
};
</script>
<style lang="scss" scoped>
@import "~@/assets/css/system/newsystem.scss";
// @import "~@/assets/css/element-plus.scss";

.itemTrading .el-table {
  overflow: auto;
}

.itemTrading .el-table__body-wrapper,
.itemTrading .el-table__header-wrapper,
.itemTrading .el-table__footer-wrapper {
  overflow: visible;
}

.itemTrading .el-table::after {
  position: relative !important;
}

//这里根据自己的项目详情是否需要添加。
//我的页面样式需要将此处的滚动条也进行隐藏。
.body-theme-grenn .el-table--scrollable-x .el-table__body-wrapper {
  overflow: visible;
}
</style>
