<template>
  <el-row>
    <el-col :span="10" :offset="6">
      <el-form :rules="rules" :model="formData" ref="dataForm">
        <el-form-item prop="productId">
          <el-input placeholder="输入商品ID或商品链接" clearable v-model="formData.productId"></el-input>
          <el-button type="primary" @click="onSubmit">立即查询</el-button>
        </el-form-item>
      </el-form>
    </el-col>
    <el-col class="TT-goods-info" v-show="Object.keys(priceList).length">
      <p>商品ID：{{ itemId }}</p>
      <p>最高价：{{ maxPrice }}</p>
      <p>最低价：{{ minPrice }}</p>
    </el-col>
    <!--折线图-->
    <el-col :span="24">
      <div class="chart-box" ref="myChartLineBox"></div>
    </el-col>
  </el-row>
</template>

<script>
import echarts from 'echarts'

export default {
  name: 'tools-pricetrend',
  data () {
    return {
      formData: {
        productId: '' // 测试ID：602950702411
      },
      isDisabled: false,
      rules: {
        productId: [{ required: true, message: '输入商品ID或商品链接', trigger: 'blur' }]
      },
      itemId: '',
      maxPrice: '',
      minPrice: '',
      lastDate: '',
      total: 0,
      priceList: []
    }
  },
  activated () {
    if (this.chartLine) {
      this.chartLine.resize()
    }
  },
  methods: {
    // 折线图
    initChartLine () {
      const option = {
        'title': {
          'text': '价格趋势',
          show: false
        },
        'tooltip': {
          'trigger': 'axis'
        },
        'legend': {
          'data': ['价格'],
          'selectedMode': 'single'
        },
        'grid': {
          'left': '3%',
          'right': '4%',
          'bottom': '3%',
          'containLabel': true
        },
        'toolbox': {
          'feature': {
            'saveAsImage': {}
          }
        },
        'xAxis': {
          'type': 'category',
          'boundaryGap': false,
          'data': Object.keys(this.priceList)
        },
        'yAxis': {
          'type': 'value'
        },
        'series': [
          {
            'name': '价格',
            'type': 'line',
            'stack': '总量',
            'data': Object.values(this.priceList)
          }
        ]
      }
      if (!this.chartLine) {
        this.chartLine = echarts.init(this.$refs.myChartLineBox)
      }
      this.chartLine.setOption(option)
      window.addEventListener('resize', () => {
        this.chartLine.resize()
      })
    },
    onSubmit () {
      this.$refs['dataForm'].validate((valid) => {
        if (!valid) {
          return
        }
        if (this.isDisabled) {
          return
        }
        this.isDisabled = true
        this.$http({
          url: this.$http.adornUrl('/tb/getHistorical'),
          method: 'post',
          data: this.$http.adornData({
            productId: this.formData.productId
          })
        }).then(({ data }) => {
          this.isDisabled = false
          if (data.status) {
            const { itemId, maxPrice, minPrice, lastDate, total, priceList } = data.data
            this.itemId = itemId
            this.maxPrice = maxPrice
            this.minPrice = minPrice
            this.lastDate = lastDate
            this.total = total * 1
            this.priceList = priceList
            this.$nextTick(() => {
              this.initChartLine()
            })
            return
          }
          this.$message.error(data.msg)
        }).catch(() => {
          this.isDisabled = false
        })
      })
    }
  },
  beforeDestroy () {
    if (this.chartLine) {
      this.chartLine.dispose()
    }
  }
}
</script>

<style lang="scss" scoped>
$--color-primary: #3E8EF7;
/deep/ .el-form-item {
  .el-form-item__content {
    display: flex;
    align-items: center;

    input {
      border-top-right-radius: 0;
      border-bottom-right-radius: 0;
      border: 1px solid $--color-primary;
    }

    button {
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
    }
  }
}

.TT-goods-info {
  p {
    margin-top: 10px;
    text-indent: 4em;
    font-size: 16px;
  }
}

.chart-box {
  min-height: 400px;
}
</style>
