<template>
  <div class="app-container">
    <div v-loading.fullscreen.lock="loadingFull" />
    <div class="search-container">
      <el-select v-model="listQuery.search_name" filterable placeholder="请输入代理姓名" size="big" style="width: 400px" class="mr15">
        <el-option v-for="item in crownList" :key="item.id" :label="item.name" :value="item.name.match(/\d{11}/)[0]" />
      </el-select>
      <!-- <el-input v-model="listQuery.search_name" type="text" size="big" placeholder="下单人昵称/姓名/手机号" style="width: 300px" class="mr15" @keyup.enter.native="getList" /> -->
      <el-input v-model="listQuery.name" type="text" size="big" placeholder="收货人姓名/手机号" style="width: 250px" class="mr15" @keyup.enter.native="getList" />
      <div style="display:inline" class="mr15">
        <VDistpicker :province="listQuery.provice" :city="listQuery.city" :area="listQuery.area" @province="province => listQuery.provice = province.value" @city="city => listQuery.city = city.value" @area="area => listQuery.area = area.value" />
      </div>
      <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"
        size="big"
        class="mr15"
      />
      <el-select v-model="listQuery.activity_id" size="big" class="mr15" style="width: 230px">
        <el-option label="全部" value="" />
        <el-option v-for="item in statusList" :key="item.id" :label="item.title" :value="item.id" />
      </el-select>
      <el-select v-model="listQuery.type" size="big" class="mr15">
        <el-option label="种类" value="3" />
        <el-option label="款式" value="2" />
        <el-option label="尺码" value="1" />
      </el-select>
      <el-button type="primary" size="big" class="mr15" @click="getList">搜索</el-button>
      <el-button type="primary" size="big" class="mr15" @click="toExport">导出</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 | parseMoney }}</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="销售金额"
      >
        <template slot="header" slot-scope="{ column }">
          {{ column.label }}({{ limitTable.reduce((t, cur) => t + Number(cur.price), 0) | parseMoney }}元)
        </template>
      </el-table-column>
    </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'
import VDistpicker from 'v-distpicker'
import { getCrown } from '@/api/order/common'
import { activityList } from '@/api/giftB'
export default {
  components: {
    ReportChart,
    VDistpicker
  },
  filters: {
    parseMoney
  },
  data() {
    return {
      loadingFull: false,
      listQuery: {
        time: [],
        order_status: '',
        page_index: 1,
        page_size: 10,
        search_name: '',
        name: '',
        provice: '',
        city: '',
        area: '',
        type: '3',
        activity_id: ''
      },
      statusList: [
        // {
        //   value: '',
        //   label: '全部'
        // }, {
        //   value: '0',
        //   label: '待订单审核'
        // }, {
        //   value: '1',
        //   label: '待财务审核'
        // }, {
        //   value: '2',
        //   label: '待发货审核'
        // }, {
        //   value: '3',
        //   label: '待收货'
        // }, {
        //   value: '4',
        //   label: '已完成'
        // }, {
        //   value: '5',
        //   label: '已作废'
        // }
      ],
      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'
      ],
      crownList: []
    }
  },
  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 = this.changeEchartData()
    }
  },
  async created() {
    /** */
    this.activityList(() => {
      this.getList()
    })
    /** */
    const { data: { list }} = await getCrown()
    this.crownList = list
  },
  methods: {
    /** */
    async activityList(cb) { // 获取筛选项
      this.loadingFull = true
      await activityList().then(res => {
        this.loadingFull = false
        if (res.code === 200) {
          this.statusList = res.data
          res.data.map(item => {
            if (item.is_ing === 1) {
              this.listQuery.activity_id = item.id
            }
          })
        }
        cb && cb()
      }).catch(e => {
        this.loadingFull = false
        cb && cb()
      })
    },
    /** */
    async getList() {
      this.loadingFull = true
      const { time, search_name, name, provice, city, area, type, activity_id } = this.listQuery
      await getList({
        start_time: time && time.length > 0 ? time[0] : '',
        end_time: time && time.length > 0 ? time[1] : '',
        order_status: '',
        search_name, name, provice, city, area, activity_id,
        type
      }).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() {
      const outs = []
      this.dataList.map(item => {
        const a = {
          name: `${item.main_attr}${item.sec_attr ? '(' + item.sec_attr + ')' : ''}${item.size ? '(' + item.size + ')' : ''}`,
          value: item.total ? item.total : 0,
          price: item.account
        }
        outs.push(a)
      })
      return outs
    },
    // 分页页码变化
    changePagination(data) {
      const { page, limit } = data
      this.listQuery.page_size = limit
      this.listQuery.page_index = page
    },
    toExport() {
      console.log(this.statusList)
      if (this.dataList.length === 0) {
        this.$message.error('没有可导出数据')
      }

      const { time, search_name, name, provice, city, area, type, activity_id } = this.listQuery
      const list = this.dataList.map(item => ({
        '下单人信息': search_name,
        '收件人信息': name,
        '地址': `${provice}${city}${area}`,
        '开始时间': `${time[0] || ''}`,
        '结束时间': `${time[1] || ''}`,
        '分类': `${+type === 3 ? '种类' : (+type === 2 ? '款式' : '尺码')}`,
        '活动名称': activity_id === '' ? '' : this.statusList.find(item => item.id === activity_id).title,
        '商品名': `${item.main_attr}${item.sec_attr ? '(' + item.sec_attr + ')' : ''}${item.size ? '(' + item.size + ')' : ''}` || 0,
        '销量': item.total || 0,
        '销售金额': item.account || 0
      }))
      import('@/vendor/Export2Excel').then(excel => {
        excel.export_json_to_excel({
          header: Object.keys(list[0]),
          data: list.map(listItem => Object.keys(list[0]).map(j => listItem[j])),
          filename: `${new Date().toLocaleDateString()}订单报表`,
          bookType: 'xlsx'
        })
      })
    }
  }
}
</script>

<style lang="scss" scoped>
  .search-container {
    margin-bottom:15px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;

    .mr15 {
      margin-right: 10px;
      margin-bottom: 10px;
    }
  }

  .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>
