<template>
  <view class="chart-prediction-bar">
    <f2 v-if="rendered" :init="onInitChart" :bindvalue="value"></f2>
  </view>
</template>

<script>
export default {
  name: 'chart-prediction-bar',
  props: {
    value: Object,
  },
  data() {
    return {
      rendered: true,
    };
  },
  watch: {},
  methods: {
    onInitChart: (F2, config, ref) => {
      const self = ref.$parent;
      let predictResponseObj = self.value || {};
      let predictResponse = predictResponseObj.predictResponse || {};
      let systemConfirmPrice = predictResponseObj.systemConfirmPrice || '';
      let marketPriceList = [
        { type: '预测价', value: predictResponse.predictPrice, name: 'market', per: predictResponse.paidMeanAcc },
        { type: '前1日\n\n市场价', value: predictResponse.paidMean1, name: 'market', per: predictResponse.paidMean1Acc },
        { type: '前3日\n\n市场价', value: predictResponse.paidMean3, name: 'market', per: predictResponse.paidMean3Acc },
        { type: '前7日\n\n市场价', value: predictResponse.paidMean7, name: 'market', per: predictResponse.paidMean7Acc },
        { type: '前14日\n\n市场价', value: predictResponse.paidMean14, name: 'market', per: predictResponse.paidMean14Acc },
        { type: '前30日\n\n市场价', value: predictResponse.paidMean30, name: 'market', per: predictResponse.paidMean30Acc },
        { type: '同行价', value: predictResponse.paidMeanN, name: 'market', per: predictResponse.paidMeanNAcc },
      ];
      let otherConfig = {
        autoFit: true,
        padding: [20, 10, 60, 10],
      };

      const chart = new F2.Chart({ ...config, ...otherConfig });
      chart.source(marketPriceList);
      chart.legend(false);
      chart.axis('value', {
        label: null,
      });
      // 添加辅助文本
      marketPriceList.forEach((item) => {
        if (item.per && item.per.length >= 5) {
          let list = item.per.split('');
          let str1 = list[0] + list[1];
          let str2 = list.slice(2).join('');
          item.per = str1 + '\n' + str2;
        }
        chart.guide().text({
          content: item.value,
          position: [item.type, item.value],
          style: {
            textAlign: 'center',
          },
          offsetY: -15,
        });
        chart.guide().text({
          content: item.per,
          position: [item.type, item.value],
          style: {
            textAlign: 'center',
            fill: '#fff',
          },
          offsetY: 15,
        });
      });

      if (systemConfirmPrice) {
        chart.guide().line({
          start: ['min', systemConfirmPrice],
          end: ['max', systemConfirmPrice],
          style: {
            stroke: '#FF2F17',
            lineWidth: 2,
            lineCap: 'round',
            lineDash: [3, 3, 3],
          },
        });
        chart.guide().text({
          content: `${systemConfirmPrice} \n 定标价`,
          position: [marketPriceList[marketPriceList.length - 1].type, systemConfirmPrice],
          style: {
            textAlign: 'center',
            fill: '#FF2F17',
          },
          offsetY: 3,
        });
      }

      chart
        .interval()
        .adjust('dodge', { marginRatio: 0.05 })
        .position('type*value')
        .color('name', function () {
          return '#5088EB';
        });
      chart
        .line()
        .adjust('dodge', { marginRatio: 0.05 })
        .position('type*value')
        .color('name', function () {
          return '#FFC260';
        });
      chart
        .point()
        .adjust('dodge', { marginRatio: 0.05 })
        .position('type*value')
        .color('name', function () {
          return '#FFC260';
        });

      chart.render();

      return chart;
    },
  },
};
</script>

<style lang="scss" scoped>
.chart-prediction-bar {
  width: 100%;
  height: 570rpx;
  display: inline-block;
}
</style>
