<template>
  <div class="page-header-index-wide">
    <a-card :loading="loading" :bordered="false" :body-style="{padding: '0'}">
      <div class="salesCard">
        <a-tabs default-active-key="1" size="large" :tab-bar-style="{marginBottom: '24px', paddingLeft: '16px'}">
          <a-tab-pane loading="true" tab="三率分析数量统计" key="1">
            <a-row>
              <a-col :xl="24" :lg="24" :md="24" :sm="24" :xs="24">
                <!--<bar :data="barData" :scale="scale" title="变化曲线" />-->
                <div :style="{ padding: '0 10px 32px 32px' }">
                  <h4 :style="{ marginBottom: '20px' }">三率分析数量统计</h4>
                  <v-chart :forceFit="true" :height="height" :data="barData" :scale="scale" :padding="['auto', '100', '80', '100']">
                    <v-tooltip />
                    <v-legend />
                    <v-axis />
                    <v-bar position="targetName*num" color="name" :adjust="adjust"/>
                  </v-chart>
                </div>
              </a-col>
            </a-row>
          </a-tab-pane>
        </a-tabs>
      </div>
    </a-card>

  </div>
</template>

<script>
import { ChartCard, MiniArea, MiniBar, MiniProgress, RankList, Bar, Trend, NumberInfo, MiniSmoothArea } from '@/components'
import { mixinDevice } from '@/utils/mixin'
import { queryMonthlySbThreeRate } from '@/api/monthly/sb-three-rate'

export default {
  name: 'Analysis',
  mixins: [mixinDevice],
  components: {
    ChartCard,
    MiniArea,
    MiniBar,
    MiniProgress,
    RankList,
    Bar,
    Trend,
    NumberInfo,
    MiniSmoothArea
  },
  data () {
    return {
      weekSearchFlag: false,
      monthSearchFlag: false,
      dateRange: [],
      loading: true,
      height: 400,
      legendCustom: true,
      legendAllowAllCanceled: true,
      axisGrid: null,
      axisLabel: {
        textStyle: {
          fill: '#fdae6b'
        }
      },
      adjust: [{
        type: 'dodge',
        marginRatio: 1 / 32
      }],
      gemoSize: 3,
      scale: [{
        dataKey: 'num',
        min: 0,
        formatter: function formatter (text) {
          return text
        }
      }],
      // 搜索用户数

      barData: [],

      pieStyle: {
        stroke: '#fff',
        lineWidth: 1
      },
      year: parseInt(this.BaseTool.Moment().format(this.BaseTool.Date.PICKER_NORM_YEAR)),
      month: parseInt(this.BaseTool.Moment().format(this.BaseTool.Date.PICKER_NORM_MONTH)),
      startYear: parseInt(this.BaseTool.Moment().format(this.BaseTool.Date.PICKER_NORM_YEAR)),
      endYear: parseInt(this.BaseTool.Moment().format(this.BaseTool.Date.PICKER_NORM_YEAR))
    }
  },
  computed: {
  },
  created () {
    setTimeout(() => {
      this.loading = !this.loading
    }, 1000)

    this.init()
  },
  methods: {
    searchData (type, e) {
      this.weekSearchFlag = false
      this.monthSearchFlag = false
      if (type === 1) {
        this.dateRange = []
        this.weekSearchFlag = true
      }
      if (type === 2) {
        this.dateRange = []
        this.monthSearchFlag = true
      }
      if (type === 3) {
        if (this.BaseTool.Object.isBlank(this.dateRange) || this.dateRange.length < 2) {
          this.$message.error('请输入筛选时间')
          return
        }
        const startDate = this.dateRange[0]
        const endDate = this.dateRange[1]
        if (this.BaseTool.Object.isBlank(startDate) || this.BaseTool.Object.isBlank(endDate)) {
          this.$message.error('请输入筛选时间')
          return
        }
        const diffDays = endDate.diff(startDate, 'days') + 1
        if (diffDays > 31) {
          this.$message.error('搜索时间最大不能超过31天')
        }
      }
      // e.toElement.innerHTML = '<span>11</span>'
    },
    init () {
      queryMonthlySbThreeRate({ year: this.year }).then(res => {
        console.log(33, res)
        const barData = []
        const dataMap = {}
        res.data.forEach(item => {
          dataMap[item.month] = item
        })
        for (let i = 0; i < 12; i++) {
          const item = dataMap[i + 1]
          if (this.BaseTool.Object.isBlank(item)) {
            barData.push({
              name: '完好数',
              targetName: this.year + '年' + (i + 1) + '月',
              num: 0
            })
            barData.push({
              name: '待修数',
              targetName: this.year + '年' + (i + 1) + '月',
              num: 0
            })
            barData.push({
              name: '事故数',
              targetName: this.year + '年' + (i + 1) + '月',
              num: 0
            })
            barData.push({
              name: '总数',
              targetName: this.year + '年' + (i + 1) + '月',
              num: 0
            })
          } else {
            barData.push({
              name: '总数',
              targetName: this.year + '年' + item.month + '月',
              num: item.sumNum
            })
            barData.push({
              name: '完好数',
              targetName: this.year + '年' + item.month + '月',
              num: item.intactNum
            })
            barData.push({
              name: '待修数',
              targetName: this.year + '年' + item.month + '月',
              num: item.repairNum
            })
            barData.push({
              name: '事故数',
              targetName: this.year + '年' + item.month + '月',
              num: item.accidentNum
            })
          }
        }
        this.barData = barData
      })
    }
  }

}
</script>

<style lang="less" scoped>
  .extra-wrapper {
    line-height: 55px;
    padding-right: 24px;

    .extra-item {
      display: inline-block;
      margin-right: 24px;

      a {
        margin-left: 24px;
      }
    }
  }

  .antd-pro-pages-dashboard-analysis-twoColLayout {
    position: relative;
    display: flex;
    display: block;
    flex-flow: row wrap;
  }

  .antd-pro-pages-dashboard-analysis-salesCard {
    height: calc(100% - 24px);
    /deep/ .ant-card-head {
      position: relative;
    }
  }

  .dashboard-analysis-iconGroup {
    i {
      margin-left: 16px;
      color: rgba(0,0,0,.45);
      cursor: pointer;
      transition: color .32s;
      color: black;
    }
  }
  .analysis-salesTypeRadio {
    position: absolute;
    right: 54px;
    bottom: 12px;
  }
</style>
