<template>
  <div class="yhzl-container">
    <TitleTab title="隐患治理" subTitle="隐患趋势" @jump="jumpClick" />
    <div class="tab-content">
      <img class="tab-back-img" :src="getImgUrl('preview/tabBack.png')" alt="暂时无图">
      <!-- 内容展示 -->
      <div class="show-container">
        <div class="tab-title-container">
          <div class="tab-title-text-item" :class="currTabIndex == index ? 'active' : ''"
            v-for="(item, index) in typeList" :key="index" @click="tabClick(item, index)">
            <div class="tab-title-text">{{ item.label }}</div>
            <div class="bottom-line">
              <div class="line-1">
                <div class="yhzl-circle"></div>
                <div class="yhzl-line"></div>
              </div>
              <div class="line-2">
                <div class="yhzl-line"></div>
                <div class="yhzl-circle"></div>
              </div>
            </div>
          </div>
        </div>
        <div class="yh-total-txt">隐患总数：{{ total }}</div>
        <div class="yhzl-echart">
          <div style="width: 100%;height: 100%;" ref="echartRef"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, defineProps, onMounted } from 'vue';
import * as echarts from "echarts";
import TitleTab from '../TitleTab.vue';
import { WidgetRule } from '@toast-ui/editor/dist/toastui-editor-viewer';
import { getImgUrl } from "@/utils/tools.js"

const props = defineProps({
  /**标题 */
  title: {
    type: String,
    default: ''
  }
})
const total = ref(234);
const echartRef = ref(null);
const options = {
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    }
  },

  grid: {
    left: '3%',
    top: '8%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },

  xAxis: [
    {
      type: 'category',
      data: ['重大', '一般A类', '一般B类', '轻微'],
      axisTick: {
        alignWithLabel: true
      },
      axisLabel: {
        color: '#aaa'
      }
    }
  ],
  yAxis: [
    {
      type: 'value',
      splitLine: {
        lineStyle: {
          type: 'dashed',
          color: '#108f37'
        }
      }
    }
  ],
  series: [
    {
      name: 'Direct',
      type: 'bar',
      barWidth: '20%',
      data: [40, 78, 76, 46, 60],
      itemStyle: {
        color: '#108f37',
      },
      showBackground: true,
      backgroundStyle: {
        color: 'rgba(16, 146, 55, 0.2)'
      }
    }
  ]
};
const currTabIndex = ref(0);
const typeList = [
  { label: '隐患主要发生领域', value: '1' },
  { label: '隐患主要发生类别', value: '2' },
  { label: '隐患按期整改率', value: '3' },
]
const echartObj = ref(null);
//echarts容器
// const fxdyslEchartBox = ref(null);
// const fxslEchartBox = ref(null);
//初始化
const tabClick = (item, index) => {
  currTabIndex.value = index;
  upEchares();
}
function upEchares() {
  console.log('echartRef.value: ', echartRef.value);
  if (echartRef.value) {
    echartObj.value.setOption(options);
  }
}


const jumpClick = () => {
  console.log('跳转');
}
onMounted(() => {
  echartObj.value = echarts.init(echartRef.value)
  upEchares();
});
</script>

<style lang="scss" scoped>
.yhzl-container {
  height: 100%;
  width: 24.2vw;

  .tab-content {
    position: relative;
    padding: 0.52vh;
    width: 100%;
    height: 17.5vh;

    .tab-back-img {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      opacity: 0.8;
      z-index: -1;
    }

    .show-container {
      position: relative;
      width: 100%;
      height: 100%;

      .tab-title-container {
        display: flex;
        justify-content: space-between;
        width: 100%;
        // height: 100%;
        text-align: center;
      }

      .tab-title-text-item {
        width: 33.33%;
        cursor: pointer;

        /** 当前tab为黄色 */
        &.active {
          .tab-title-text {
            color: #FFAA02;
          }

          .bottom-line {

            .line-1,
            .line-2 {

              .yhzl-circle,
              .yhzl-line {
                background-color: #FFAA02;
              }
            }
          }
        }

        .tab-title-text {
          color: green;
        }

        .bottom-line {
          // display: flex;

          .line-1,
          .line-2 {
            display: flex;

            .yhzl-circle {
              width: 0.2vw;
              height: 0.2vw;
              border-radius: 50%;
              background: green;
            }

            .yhzl-line {
              width: 5.5vw;
              height: 0.04vh;
              margin-top: 0.1vh;
              background: green;
            }
          }

          .line-2 {
            margin-left: 2vw;
          }
        }
      }

      .yh-total-txt {
        color: green;
        padding-left: 2vw;
        margin-top: 0.5vh;
        font-size: 12px;
      }

      .yhzl-echart {
        width: 100%;
        height: calc(100% - 4.8vh);
        // height: 13vh;
      }

    }
  }
}
</style>
