<template>
  <div>
    <el-dialog title="隐患统计" width="60%" v-model="props.tjDiaShow" :before-close="handleClose">
      <!-- 折线统计 -->
      <div class="barBox">
        <div class="titleBox">
          <div class="title">{{ props.tjTitle }}汇总统计</div>
        </div>
        <div class="bar">
          <manyBars :loadingshow="barsShow" ids="tjjc" :barTitle="barTitle" :barNum="barNum">
          </manyBars>
        </div>
      </div>

      <!-- 表格统计 -->
      <div class="tableBox">
        <div class="titleBox">
          <div class="title">{{ props.tjTitle }}汇总统计</div>
        </div>
        <div style="height: 30vh;">
          <MOSTY.Table :table-columns="tableColumns" :tableData="tableData" :tableloading="tableloading"
            :isSelect="true" :isSort="false">
            <template #actions="{ row }">
              <span class="operesee" @click="handleSee(row)"> <el-icon>
                  <Compass />
                </el-icon>详情</span>
            </template>
          </MOSTY.Table>
        </div>


      </div>

      <template #footer>
        <span class="dialog-footer">
          <el-button @click="handleClose" type="primary">
            <el-icon>
              <DocumentDelete />
            </el-icon>
            <span>关闭</span>
          </el-button>

        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
// 引入
import { defineProps, watch, defineEmits, ref, reactive, onMounted } from "vue";
import manyBars from "../charts/manyBars.vue";
import { useStore } from "vuex";
import * as MOSTY from "@/components/MyComponents/index";
import { getApi, deleteApi, putApi } from "@/api/tobAcco_api.js";
import { useRouter } from "vue-router";
const store = useStore();
const router = useRouter();
const keys = ref(1)
// 数据
// const store = useStore()
const props = defineProps({
  tjDiaShow: {
    type: Boolean,
    default: false
  },
  tjId: String,
  tjTitle: String,
});
watch(
  () => props.tjId,
  (val) => {
    if (val) {
      getZhjclist(val);
    }
  }
);
const tableColumns = reactive([
  {
    title: "单位名称",
    prop: "cityname",
  },
  {
    title: "重大",
    prop: "count1",
  },
  {
    title: "较大",
    prop: "count2",
  },
  {
    title: "一般",
    prop: "count3",
  },
  {
    title: "轻微",
    prop: "count4",
  },
  {
    title: "已经整改",
    prop: "zgcount",
  },

  {
    title: "操作",
    prop: "actions",
    slot: true
  }
])
const emits = defineEmits(["changeTjVi"]);
const tableData = ref([]);
// 控制柱状图
const barsShow = ref(false);
// 柱状图名称
const barTitle = ref([]);
// 柱状图数量
const barNum = reactive([
  {
    name: "重大",
    data: [],
    color: "#e80000"
  },
  {
    name: "较大",
    data: [],
    color: "#ff8040"
  },
  {
    name: "一般",
    data: [],
    color: "#e2d101"
  },
  {
    name: "轻微",
    data: [],
    color: "#0080ff"
  }
  // {
  //   name: "已整改",
  //   data: [0,1,2],
  //   color: "#7BA87B"
  // },
]);

// 获取列表数据
function getZhjclist(id) {
  getApi({ id: id }, "/mosty-jcgl/zhjc/getPageCount").then((res) => {
    if (res) {
      res.forEach(el => {
        el.count1 ? el.count1 : 0;
        el.count2 ? el.count2 : 0;
        el.count3 ? el.count3 : 0;
        el.count4 ? el.count4 : 0;
      });
      tableData.value = res;
      barTitle.value = res.map(item => {
        return item.cityname ? item.cityname.slice(0, 2) : ''
      })

      barNum[0].data = res.map(item => {
        return item.count1 ? Number(item.count1) : 0
      })
      barNum[1].data = res.map(item => {
        return item.count2 ? Number(item.count2) : 0
      })
      barNum[2].data = res.map(item => {
        return item.count3 ? Number(item.count3) : 0
      })
      barNum[3].data = res.map(item => {
        return item.count4 ? Number(item.count4) : 0
      })
      barsShow.value = true;
      keys.value++
    }
  });
}
function handleSee(val) {
  let title = val.cityname;
  store.dispatch("user/setRouterName", title);
  localStorage.setItem("overallid", props.tjId);
  localStorage.setItem("cityId", val.cityId);
  router.push("/fxgk/jcss/yhtjxq");
}
// 关闭×
const closeDialog = () => {
  emits("changeTjVi", false);
};
// 关闭
const handleClose = () => {
  emits("changeTjVi", false);
};


onMounted(() => { });
</script>

<style lang="scss" scoped>
.titleBox {
  padding: 0 20px;
  border: 1px solid var(--el-color-primary);
  margin-bottom: 10px;
}

.barBox {
  margin-bottom: 50px;

  .bar {
    height: 200px;
  }
}
</style>