<template>
  <div class="lurking-peril-container ccw">
    <div class="lurking-peril-top">
      <public-chart ref="publicChart" :option="yhzlOptions" theme="vab-echarts-theme" />
      <div class="legend-content ccw">
        <span style="color: #8c8c8c; margin-bottom: 5px">隐患总数</span>
        <span style="margin-bottom: 5px">
          <span class="fs-22 ccw ff-AvenirMedium">2400</span>
          <span>&nbsp;处</span>
        </span>
        <div v-for="(item, index) in yhzlList" :key="index" style="">
          <span>
            <span class="circle" :style="{ background: item.itemStyle.color }"></span>
            {{ item.name }}
          </span>
          <span class="ff-AvenirMedium" style="margin: 0 8px">{{ item.value }}</span>
          处
        </div>
      </div>
    </div>
    <div class="lurking-peril-bottom">
      <div class="lurking-peril-bottom-item radius-base" v-for="(item, index) in yxcyhList" :key="index">
        <span class="fs-18 ff-AvenirMedium">{{ item.value }}</span>
        <span>{{ item.name }}</span>
      </div>
    </div>
  </div>
</template>
<script setup>
  import { onMounted, ref, reactive, toRefs } from 'vue'

  import yhzl from './json/yhzl.json'

  const state = reactive({
    yhzlList: [
      { name: '企业自查', value: 12, itemStyle: { color: '#057AFF' } },
      { name: '监督检查', value: 12, itemStyle: { color: '#499EFE' } },
      { name: '公共检查', value: 12, itemStyle: { color: '#A5CFFF' } },
      { name: '风险检查', value: 12, itemStyle: { color: '#D8EAFF' } },
    ],
    yxcyhList: [
      { name: '隐患已消除', value: 136 },
      { name: '整改中', value: 136 },
      { name: '逾期未处置', value: 136 },
      { name: '往期隐患', value: 136 },
    ],
    yhzlOptions: yhzl,
  })

  const { yhzlList, yhzlOptions, yxcyhList } = toRefs(state)
  onMounted(() => {
    yhzlOptions.value.series.data = yhzlList.value
  })
</script>

<style lang="scss" scoped>
  .lurking-peril-container {
    height: calc(359px - 51px);

    .lurking-peril-top {
      display: flex;
      height: 70%;

      .echarts {
        width: 50%;
        height: 100%;
      }

      .legend-content {
        display: flex;
        flex-direction: column;
        justify-content: center;
        width: 50%;
        padding-left: 15px;
        box-sizing: border-box;

        div {
          display: flex;
          align-items: center;
          width: 80%;
          margin-bottom: 8px;
        }

        .circle {
          display: inline-block;
          width: 8px;
          height: 8px;
          margin-right: 2px;
        }
      }
    }

    .lurking-peril-bottom {
      display: flex;
      height: 25%;
      padding: 0 12px;

      .lurking-peril-bottom-item {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: calc(25% - 8px);
        margin: 0 4px;
        background: #f8f8fa;
      }
    }
  }
</style>
