<template>
  <a-modal
    title="齐套率月份统计图"
    v-model="monthChartModVis"
    :confirmLoading="confirmLoading"
    width="70%"
    @ok="onSubmit"
    @cancel="handleCancel"
  >
    <a-spin :spinning="confirmLoading">
      <div id="monthChart" :style="{ width: '100%', height: '600px' }"></div>
    </a-spin>
  </a-modal>
</template>

<script>
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import JEllipsis from '@/components/jeecg/JEllipsis'
import moment from 'moment'

import * as echarts from 'echarts' //必须有

export default {
  name: 'MonthChartModal', //齐套率月份统计图
  mixins: [JeecgListMixin],
  components: { JEllipsis, moment },

  data() {
    return {
      confirmLoading: false,
      monthChartModVis: false
    }
  },
  // 接收父组件 方法
  // props: {
  //   father: {
  //     type: Function,
  //     default: null
  //   }
  // },
  mounted() {
    this.initEcharts()
  },
  methods: {
    initEcharts() {
      //深色 ,'dark'
      const myChart = echarts.init(document.getElementById('#monthChart')) // 初始化echarts实例
      const option = {
        title: {
          text: '齐套率月份统计图'
        },
        tooltip: {},
        legend: {
          data: ['齐套率']
        },
        xAxis: {
          type: 'category',
          data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月']
        },
        yAxis: {
          type: 'value'
          // name: '(%)'
        },
        series: [
          {
            data: [5, 20, 36, 10, 10, 20],
            type: 'bar',
            showBackground: true,
            backgroundStyle: {
              color: 'rgba(180, 180, 180, 0.2)'
            }
          }
        ]
      }
      // 渲染页面
      myChart.setOption(option)

      //随着屏幕大小调节图表
      // window.addEventListener('resize', () => {
      //   myChart.resize()
      // })
    },
    // 弹框确定
    onSubmit() {
      console.log('弹框确定')
    },

    // 弹框取消
    handleCancel() {
      this.monthChartModal = false
    }
  }
}
</script>
<style lang="less" scoped>
@import '~@assets/less/common.less';
/deep/ .ant-table-thead > tr > th {
  text-align: center;
  // font-weight: 700;
}
/deep/ .ant-table-tbody {
  text-align: center;
}
// th.replacecolor {
// background-color:  #ccc;
// }
</style>
