<!--
  @description:竞价大厅-我的报价/全部报价图表组件
  @Modifier:gmy
  @routerPath:
  @date:2020/5/9-15:48
-->
<template>
  <div class="proBiddingApxecharts">
    <div class="echarts">
      <apexchart :options="chartOptions" :series="series" width="100%" height="100%" />
    </div>
  </div>
</template>

<script>
/* api 接口 */
import { getMyOfferBidPriceRecords, getPriceTrend } from '@/api/procurement/procurementOffer'
export default {
  name: 'OfferApxechartsDetailVue',
  inject: ['getTenderBase'],
  props: {
    // 大厅类型 00采购 01供应商
    hallType: {
      type: String,
      default: ''
    },
    biddingStatus: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      tenderBase: this.getTenderBase(), // 获取项目信息
      series: [{
        name: '报价',
        data: []
      }],
      chartOptions: {
        chart: {
          height: 'auto',
          type: 'area', // 图表的类型
          // 工具条
          toolbar: {
            autoSelected: 'pan',
            show: false
          }
        },
        markers: {
          size: 5 // 折线图每个点的大小
        },
        colors: ['#fd805f', '#FFF0EC', '#FFF1ED', '#FFF1EE', '#FFF2EF', '#FFF3F0'], // 设置填充面积的颜色 渐变的形式
        dataLabels: {
          enabled: false
        },
        stroke: {
          curve: 'straight' // smooth表示曲线平滑
        },
        xaxis: {
          type: 'date',
          categories: []
        },
        tooltip: { // 工具
          x: {
            show: false,
            format: 'dd/MM/yy HH:mm'
          }
        }
      }
    }
  },
  watch: {
    // hallType(val) {
    //   this.initPage()
    // },
    biddingStatus: {
      handler(val) {
        if (this.hallType === '00') {
          if (val === '01') {
            this.initPage()
          }
        } else {
          this.initPage()
        }
      },
      immediate: true
    }
  },
  created() {
    // this.initPage()
  },
  methods: {
    initPage() {
      if (this.hallType === '00') {
        // 报价趋势
        this.getPriceTrend()
      } else if (this.hallType === '01') {
        // 我的报价记录
        this.getMyOfferData()
      }
    },
    // 报价趋势
    getPriceTrend() {
      const params = {
        // 项目标段id
        packId: this.tenderBase.packId
      }
      getPriceTrend(params).then(res => {
        const moneyArr = []
        const dateArr = []
        res.data.forEach(item => {
          moneyArr.push(item.offerTotal)
          dateArr.push(item.negRecordTime)
        })
        this.series = [{
          data: moneyArr
        }]
        this.chartOptions = {
          xaxis: {
            type: 'datetime',
            categories: dateArr
          }
        }
      }).catch(() => {
      })
    },
    // 我的报价记录
    getMyOfferData() {
      const params = {
        // 项目标段id
        packId: this.tenderBase.packId
      }
      getMyOfferBidPriceRecords(params).then(res => {
        const moneyArr = []
        const dateArr = []
        res.data.forEach(item => {
          moneyArr.push(item.offerTotal)
          dateArr.push(item.negRecordTime)
        })
        this.series = [{
          data: moneyArr
        }]
        this.chartOptions = {
          xaxis: {
            type: 'datetime',
            categories: dateArr
          }
        }
      }).catch(() => {
      })
    }
  }
}
</script>

<style lang="less" scoped>
.proBiddingApxecharts{
  height: calc(100% - 54px);
  .echarts{
    width:100%;
    height:100%;
    text-align: center;
  }
}

</style>
