<template>
  <ele-modal
    custom-class="ele-dialog-form long-dialog-form"
    :centered="true"
    :append-to-body="true"
    :visible.sync="visible"
    :close-on-click-modal="false"
    width="40%"
    @close="cancel"
    :title="title"
    v-if="visible"
    :maxable="true"
    :resizable="true"
  >
    <headerTitle title="历史价格趋势图"></headerTitle>
    <v-chart
      ref="lineRef"
      style="width: 100%; min-height: 350px; margin-bottom: 40px"
      :option="lineOption"
    />
    <headerTitle title="历史价格列表"></headerTitle>
    <!-- <PriceSearch @search="reload" /> -->
    <!-- <ele-pro-table
      ref="table"
      :columns="columns"
      :datasource="datasource"
      tool-class="ele-toolbar-form"
      :page-size="20"
    >
    </ele-pro-table> -->
    <el-container>
      <el-table :data="data" style="width: 100%">
        <el-table-column prop="date" label="日期"> </el-table-column>
        <el-table-column prop="price" label="价格"> </el-table-column>
      </el-table>
    </el-container>
  </ele-modal>
</template>

<script>
  import PriceSearch from './priceSearch.vue';
  import VChart from 'vue-echarts';
  import { use } from 'echarts/core';
  import { CanvasRenderer } from 'echarts/renderers';
  import { BarChart, PieChart, LineChart } from 'echarts/charts';
  import { getHistoryList } from '@/api/goodsManage/index';
  import {
    GridComponent,
    TooltipComponent,
    LegendComponent
  } from 'echarts/components';
  use([
    CanvasRenderer,
    BarChart,
    PieChart,
    GridComponent,
    TooltipComponent,
    LegendComponent,
    LineChart
  ]);
  const dayjs = require('dayjs');

  export default {
    components: { PriceSearch, VChart },
    data() {
      return {
        title: '价格历史趋势',
        lineOption: {},
        title: '',
        visible: false,
        columns: [
          {
            columnKey: 'index',
            type: 'index',
            width: 50,
            align: 'center',
            showOverflowTooltip: true,
            label: '序号'
          },
          {
            prop: 'name',
            label: '商品编码',
            align: 'center',
            showOverflowTooltip: true,
            sortable: true
          },
          {
            prop: 'code',
            label: '商品图片',
            align: 'center',
            showOverflowTooltip: true
          },
          {
            prop: 'name',
            label: '商品名称',
            align: 'center',
            showOverflowTooltip: true
          },
          {
            prop: 'categoryLevelPath',
            label: '商品分类',
            align: 'center',
            showOverflowTooltip: true
          },
          {
            prop: '产品名称',
            align: 'center',
            label: '产品名称',
            showOverflowTooltip: true
          },
          {
            prop: '产品编码',
            label: '产品编码',
            align: 'center',
            showOverflowTooltip: true
          },
          {
            prop: '产品类型',
            label: '产品类型',
            align: 'center',
            showOverflowTooltip: true
          },
          {
            prop: 'priceType',
            label: '价格类型',
            slot: 'priceType',
            align: 'center'
          },
          {
            prop: 'singlePrice',
            headerSlot: 'headerSinglePrice',
            label: '含税单价',
            slot: 'singlePrice',
            align: 'center'
          },
          {
            prop: 'taxRate',
            headerSlot: 'headerTaxRate',
            slot: 'taxRate',
            label: '税率',
            align: 'center'
          },
          {
            prop: 'notaxSinglePrice',
            // headerSlot: 'headerNotaxSinglePrice',
            label: '不含税单价',
            slot: 'notaxSinglePrice',
            align: 'center'
          }
        ],
        data: {}
      };
    },
    mounted() {},
    methods: {
      async open(row) {
        this.visible = true;
        let res = await getHistoryList(row.id);
        // const list = res.map((item) => {
        //   const date = Object.keys(item)[0];
        //   const price = item[key];
        //   return { date, price };
        // })
        // debugger;
        let date = Object.keys(res);

        // console.log(,'res')
        this.lineOption = {
          tooltip: {
            trigger: 'item'
          },
          legend: {
            itemGap: window.innerHeight * 0.014
          },
          grid: {
            left: '5%',
            right: '5%',
            bottom: '8%'
          },
          xAxis: {
            type: 'category',
            data: date
          },
          yAxis: {
            type: 'value',
            name: '',
            alignTicks: true,
            axisLine: {
              show: false
            },
            axisLabel: {
              formatter: '{value}元'
            }
          },
          series: [
            {
              name: '价格趋势',
              type: 'line',
              itemStyle: {
                color: '#FF9669'
              },
              data: date.map((item) => res[item])
            }
          ]
        };
        this.data = date.map((item, index) => {
          let newDate = null;
          if (date[index + 1]) {
            newDate =
              new Date(date[index + 1]).getDate() - new Date(item).getDate() > 1
                ? new Date(date[index + 1])
                : null;
          }

          return {
            date:
              item +
              (newDate
                ? ' 至 ' + dayjs(newDate).add(-1, 'day').format('YYYY-MM-DD')
                : ''),
            price: res[item]
          };
        });
      },

      cancel() {
        this.visible = false;
      }
    }
  };
</script>
<style lang="scss" scoped></style>
