<template>
  <Module class="flex-grow h-2/3" :info="bsMeta && bsMeta['emplRate']" :loading="loading" :error="error">
    <template #title class="vehicleNumber"> 机电专项工程</template>

    <template v-if="!loading">
      <div class="zuanbox">
        <div class="flex items-center flex-row justify-center">
          <div class="topboxitem dflex">
            <img src="../assets/zhuan1.png" alt="" />
            <div class="itemright">
              <div class="bluefont fonts">计划数量</div>
              <div class="num">{{ dataNum.majorPlanNum || 0 }}</div>
            </div>
          </div>
          <div class="topboxitem dflex">
            <img src="../assets/zhuan2.png" alt="" />
            <div class="itemright">
              <div class="orangefont fonts">合同数量</div>
              <div class="num">{{ dataNum.majorNum }}</div>
            </div>
          </div>
          <div class="topboxitem dflex">
            <img src="../assets/zhuan3.png" alt="" />
            <div class="itemright">
              <div class="greenfont fonts">完成数量</div>
              <div class="num">{{ dataNum.majorSSNum }}</div>
            </div>
          </div>
        </div>
        <bar :chartOption="chartOption" class="barHeight" />
      </div>
    </template>
  </Module>
</template>

<script lang="ts" setup>
import { defineProps, ref, computed, watch, nextTick, reactive } from "vue";
import { useStore } from "vuex";
import { key } from "@/store";
import bar from './bar.vue'
import * as echarts from 'echarts'

const props = defineProps({
  dataNum: {
    type: Object,
    default: () => { },
  },
  dataArr: {
    type: Array,
    default: () => [0, 0, 0],
  }
});
const chartOption = reactive({})
console.log(props);
watch(
  () => props.dataNum,
  async () => {
    await nextTick();
    const xdata = ['预算金额', '合同金额', '计量金额']
    const chart = {
      backgroundColor: 'transparent', //背景色
      grid: {
        left: '10',
        right: '10',
        bottom: '10',
        top: '30',
        containLabel: true
      },
      xAxis: {
        data: xdata,
        triggerEvent: false,
        axisTick: {
          show: true
        },
        axisLine: {
          show: true
        },
        axisLabel: {
          show: true,
          fontSize: 13,
          textStyle: {
            color: '#778FA4'
          }
        }
      },
      yAxis: {
        name: '金额（万）',
        triggerEvent: true,
        nameTextStyle: {
          padding: [0, 0, 0, 5],
          color: '#778FA4 ',
          fontSize: 12
        },
        splitLine: {
          show: true,
          lineStyle: {
            type: 'dashed',
            color: 'rgba(119, 143, 164,.4)'
          }
        },
        axisTick: {
          show: false
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: 'rgba(255,255,255,.1)'
          }
        },
        axisLabel: {
          fontSize: 12,
          show: true,
          textStyle: {
            color: 'rgb(148,159,167)'
          }
        }
      },
      series: [
        {
          name: 'hill',
          barMinHeight: 0,
          type: 'pictorialBar',
          barCategoryGap: '80%',
          symbol: 'path://M0,10 L10,10 C5.5,10 5.5,5 5,0 C4.5,5 4.5,10 0,10 z',
          itemStyle: {
            normal: {
              // borderColor: 'rgb(6,211,252)',
              // borderType: 'solid',
              //barBorderRadius: 5,
              //渐变色
              color: new echarts.graphic.LinearGradient(0, 1, 1, 0, [
                {
                  offset: 0,
                  color: 'rgba(0,93,248,0.9)'
                },
                {
                  offset: 0.5,
                  color: 'rgba(0,204,255,0.9)'
                },
                {
                  offset: 1,
                  color: 'rgba(0,93,248,0.9)'
                }
              ])
            }
          },
          label: {
            normal: {
              show: true,
              position: 'top',
              textStyle: {
                color: '#FF9C04',
                fontSize: 12
              }
            }
          },
          data: props.dataArr,
          z: 10
        }

      ]
    }
    Object.assign(chartOption, chart)
  },
  { immediate: true, deep: true }
);
</script>
<style lang="postcss" scoped>
.module-box {
  overflow: hidden;
}

.barHeight {
  height: calc(100% - 77px);
}

.zuanbox {
  margin: 20px 20px 0;
  width: 100%;
}

.topboxitem img {
  height: 38px;
  margin-right: 4px;
}

.bluefont {
  font-family: Microsoft YaHei;
  font-size: 12px;
  font-weight: 1000;
  color: transparent;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-image: linear-gradient(0deg, #fff 0%, #3092ff 100%);
}

.orangefont {
  font-family: Microsoft YaHei;
  font-size: 12px;
  font-weight: 1000;
  color: transparent;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-image: linear-gradient(0deg, #fff 0%, #fe9900 99.31641%);
}

.greenfont {
  font-family: Microsoft YaHei;
  font-size: 12px;
  font-weight: 1000;
  color: transparent;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-image: linear-gradient(0deg, #fff 0%, #5effd6 99.31641%);
}
</style>
<style lang="scss" >
.topboxitem {
  margin: 0 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  .num {
    text-align: center;
  }
}
</style>
