<template>
  <ai-detail class="audit">
    <template slot="content">
      <ai-card title="基本信息">
        <ai-product-drop-down v-if="info" :params="info" slot="right"></ai-product-drop-down>
        <template #content>
          <div class="flex">
            <ai-avatar v-model="info.imgUrl" :editable="false" :preview="true"/>
            <ai-wrapper
              label-width="120px" class="fill">
              <ai-info-item label="价格："   :value="'$' + info.price"></ai-info-item>
              <ai-info-item label="销量："   :value="info.saleTotal"></ai-info-item>
            </ai-wrapper>
          </div>
        </template>
      </ai-card>
      <ai-card title="趋势信息">
        <template #content>
          <div id="chart"></div>
        </template>
      </ai-card>
    </template>
  </ai-detail>
</template>
<script>
import AiProductDropDown from './AiProductDropDown.vue'
import { DualAxes } from '@antv/g2plot'

export default {
  name: "AiProductDetail",
  props: ['params'],
  components: {
    AiProductDropDown
  },
  data() {
    return {
      info: {}
    }
  },
  computed: {
  },
  created() {
    this.getInfo()
  },
  methods: {
    getInfo() {
      this.$http.post('/api/monitorDetail/queryDetail',null,{
        params: {
          goodsId: this.params.goodsId
        }
      }).then(res => {
        this.info = res.data

        const dualAxes = new DualAxes('chart', {
          data: [this.info.priceAndSale, this.info.priceAndSale],
          xField: '日期',
          yField: ['价格', '销量'],
          geometryOptions: [
            {
              geometry: 'line',
              color: '#5B8FF9',
            },
            {
              geometry: 'line',
              color: '#5AD8A6',
            }
          ],
          smooth: true,
          // @TODO 后续会换一种动画方式
          animation: {
            appear: {
              animation: 'path-in',
              duration: 5000,
            },
          },
        });

        dualAxes.render();
      })
    }
  }
}
</script>
<style scoped lang="scss">
</style>
