<!-- 检定详情 -->
<script lang="ts" setup name="Dashboard">
// import verificationDetail from './components/verificationDetail.vue'
const width = ref(document.body.clientWidth - 180)
const height = ref(document.body.clientHeight - 50 - 60 - 10)
window.addEventListener('resize', () => {
  const bodyWidth = document.body.clientWidth - 180
  width.value = bodyWidth
  const bodyHeight = document.body.clientHeight - 50 - 60
  height.value = bodyHeight
})
const list = ref([
  {
    name: '年度应检数量',
    value: '1221',
    img: '',
  },
  {
    name: '年度已检数量',
    value: '1209',
    img: '',
  },
  {
    name: '本月到期智能模型',
    value: '15',
    img: '',
  },
  {
    name: '已超期智能模型',
    value: '215',
    img: '',
  },
  {
    name: '智能模型总数',
    value: '1000',
    img: '',
  },
  {
    name: '在检智能模型',
    value: '800',
    img: '',
  },
  {
    name: '待检智能模型',
    value: '200',
    img: '',
  },
  {
    name: '在用智能模型',
    value: '800',
    img: '',
  },
])
const data = ref([

])
const xAxisData = ref([])
const legend = ref({
  show: true,
  // icon: 'circle',
  orient: 'horizontal', // 图例方向
  align: 'left', // 图例标记和文本的对齐，默认自动
  top: 10,
  right: 20,
  // itemWidth: 12,
  // itemHeight: 12,
  padding: [0, 0, 0, 120],
})
onMounted(() => {
  setTimeout(() => {
    data.value = [{
      name: '到期趋势',
      data: [15, 33, 51, 74, 21, 32],
    },
    {
      name: '检定趋势',
      data: [6, 31, 21, 34, 41, 22],
    },
    {
      name: '应检趋势',
      data: [22, 13, 15, 44, 25, 17],
    }]
    xAxisData.value = ['1月', '2月', '3月', '4月', '5月', '6月']
  }, 1000)
})
</script>

<template>
  <div class="detail-container" :style="`height:${height / 2}px;margin-top:5px;`">
    <div class="top">
      <div class="title">
        检定详情
      </div>
      <span />
    </div>
    <div class="content">
      <div v-for="item in list" :key="item.name" class="item">
        <div class="title1">
          {{ item.name }}
        </div>
        <div class="content1">
          <img class="img1" src="https://img.tukuppt.com/ad_preview/00/21/69/BZ8xm78jaS.jpg!/fw/260" width="30" height="30">
          <div class="value1">
            {{ item.value }}
          </div>
        </div>
      </div>
    </div>
    <div class="bottom">
      <line-chart unit="台" :data="data" x-axis-type="category" :x-axis-data="xAxisData" :style="`height:${height / 2 - 150}px`" :legend="legend" />
    </div>
  </div>
</template>

<style lang="scss" scoped>
.detail-container {
  background: #fff;
  width: 49%;
  border-radius: 8px;
  padding: 10px;
  box-sizing: border-box;

  .top {
    display: flex;

    .title {
      padding-left: 10px;
      font-size: 16px;
      font-weight: 700;
    }
  }

  .content {
    width: 100%;
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;

    .item {
      width: 25%;
      margin-top: 10px;

      .title1 {
        font-size: 14px;
      }

      .content1 {
        width: 80%;
        display: flex;
        font-size: 12px;
        justify-content: space-around;

        .img1 {
          border-radius: 50%;
        }

        .value1 {
          // line-height:30px;
          // text-aligin:center;
          margin-left: 10px;
          height: 30px;
          line-height: 30px;
        }
      }
    }
  }
}
</style>