<template>
  <div class="app-container">
    <div v-loading.fullscreen.lock="loadingFull" />
    <div style="margin-bottom:15px">
      <el-date-picker
        v-model="listQuery.time"
        type="datetimerange"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        value-format="yyyy-MM-dd HH:mm"
        format="yyyy-MM-dd HH:mm"
      />
      <el-select v-model="listQuery.order_status">
        <el-option label="全部" value="-1" />
        <el-option label="待订单审核" value="0" />
        <el-option label="待财务审核" value="1" />
        <el-option label="待发货审核" value="2" />
        <el-option label="待收货" value="3" />
        <el-option label="已完成" value="4" />
        <el-option label="已作废" value="5" />
      </el-select>
      <el-select v-model="showType">
        <el-option label="种类" value="attr" />
        <el-option label="款式" value="type" />
        <el-option label="尺码" value="single" />
      </el-select>
      <el-button type="primary" @click="getList">搜索</el-button>
    </div>
    <div class="echart-container">
      <report-chart id="report-chart" :seriesdata="seriesdata" />
      <div class="report-list">
        <div v-for="(item, index) in seriesdata" :key="index" class="echart_list">
          <span class="color" :style="'background-color:'+colorList[index % colorList.length]" />
          <span class="title">{{ item.name }}</span>
          <span class="num">销量: {{ item.value }}</span>
          <span class="price">销售金额: {{ item.price }}</span>
        </div>
      </div>
    </div>
    <el-table
      :data="limitTable"
      :header-cell-style="{ background: '#f8fbfc' }"
      border
      stripe
    >
      <el-table-column
        prop="name"
        label="商品名"
      />
      <el-table-column
        prop="value"
        label="销量"
      />
      <el-table-column
        prop="price"
        label="销售金额"
      />
    </el-table>
    <!-- 分页 -->
    <pagination :total="seriesdata.length" :limit="listQuery.page_size" :page="listQuery.page_index" @pagination="changePagination" @update:limit="changePagination" />
  </div>
</template>
<script>
// api
import { getList } from '@/api/data/report'
import ReportChart from './components/ReportChart'
import { parseMoney } from '@/utils/index'
export default {
  components: {
    ReportChart
  },
  data() {
    return {
      loadingFull: false,
      listQuery: {
        time: [],
        order_status: '-1',
        page_index: 1,
        page_size: 10
      },
      showType: 'attr',
      dataList: {},
      seriesdata: [],
      colorList: [
        '#FF9966', '#99CC99', '#99CCFF', '#66CC00', '#FF99CC',
        '#66CCFF', '#CCCCFF', '#FF9966', '#FF6666', '#CC99CC',
        '#FF9999', '#FFCCCC', '#66CC66', '#66CCCC', '#FFCCCC',
        '#FF7373', '#33CCCC', '#FFB273', '#FF9640', '#39E639',
        '#717DD7', '#35D4A4', '#FF9000', '#408DD2', '#679FD2'
      ]
    }
  },
  computed: {
    limitTable() {
      const { page_index, page_size } = this.listQuery
      return this.seriesdata.slice((Number(page_index) - 1) * Number(page_size), (Number(page_index) - 1) * Number(page_size) + page_size)
    }
  },
  watch: {
    dataList(a, b) {
      this.seriesdata = a[this.showType] ? this.changeEchartData(a[this.showType]) : []
    },
    showType(a, b) {
      this.seriesdata = this.dataList[a] ? this.changeEchartData(this.dataList[a]) : []
    }
  },
  created() {
    this.getList()
  },
  methods: {
    async getList() {
      this.loadingFull = true
      const { time, order_status } = this.listQuery
      await getList({
        start_time: time && time.length > 0 ? time[0] : '',
        end_time: time && time.length > 0 ? time[1] : '',
        order_status
      }).then(res => {
        this.loadingFull = false
        if (res.code === 200) {
          this.dataList = res.data
        } else {
          this.$message.error(res.message)
        }
      }).catch(e => {
        this.loadingFull = false
      })
    },
    changeEchartData(obj) {
      const outs = []
      const keys = Object.keys(obj)
      keys.map(item => {
        const a = {
          name: item,
          value: obj[item][0],
          price: parseMoney(obj[item][1])
        }
        outs.push(a)
      })
      return outs
    },
    // 分页页码变化
    changePagination(data) {
      const { page, limit } = data
      this.listQuery.page_size = limit
      this.listQuery.page_index = page
    }
  }
}
</script>

<style lang="scss" scoped>
  .echart-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;

    .report-list {
      flex: 1;
      max-height: 350px;
      overflow-y: scroll;
      padding: 10px 0;
    }

    .echart_list {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 15px;

      span {
        display: block;
        text-align: left;
        cursor: pointer;
      }

      .title {
        width: 40%;
      }

      .num {
        width: 30%;
      }

      .price {
        width: 30%;
      }

      .color {
        width: 10px !important;
        height: 10px !important;
        margin-right: 10px;
      }
    }
  }
</style>
