<template>
  <div class="app-container special-app-container">
    <div v-loading.fullscreen.lock="loadingFull" />
    <template>
      <el-tabs
        v-model="tabStatus"
        @tab-click="handleTagToggle"
      >
        <el-tab-pane label="销量统计" name="1">
          <el-row>
            <p>商品总销量(件):</p>
            <el-col :span="24" class="flex_center">
              <pie-lengend
                id="pieLengd1"
                show-title="销售总量"
                :series-data="dealNum.total"
                width="1400px"
              />
            </el-col>
          </el-row>
          <el-row>
            <div class="flex_start">
              <p>商品年销量:</p>
              <el-date-picker
                v-model="dealParams.year"
                type="year"
                placeholder="选择年"
                size="mini"
                format="yyyy"
                value-format="yyyy"
                style="margin-left:20px;"
                @change="getDealNumShape"
              />
            </div>
            <el-col :span="24" class="flex_center">
              <bar-label-rotate
                v-if="dealNum.yaer.length > 0"
                id="BarLabelRotate1"
                :series-data="dealNum.yaer"
                width="1400px"
              />
              <p v-else class="dangerTip">没有此年度数据</p>
            </el-col>
          </el-row>
          <el-row>
            <div class="flex_start">
              <p>商品月销量:</p>
              <el-date-picker
                v-model="dealParams.month"
                type="month"
                placeholder="选择月"
                format="yyyy-MM"
                value-format="yyyy-MM"
                size="mini"
                style="margin-left:20px;"
                @change="getDealNumLine"
              />
            </div>
            <el-col :span="24">
              <line-stack
                v-if="dealNum.month.length > 0"
                id="LineStack"
                :x-axis-title="dealNum.xAxisMonth"
                :series-data="dealNum.month"
                width="1400px"
              />
              <p v-else class="dangerTip">没有此月份数据</p>
            </el-col>
          </el-row>
        </el-tab-pane>
        <el-tab-pane label="销售额统计" name="2">
          <el-row>
            <p>商品总销售额(元):</p>
            <el-col :span="24" class="flex_center">
              <pie-lengend
                id="pieLengdPrice1"
                show-title="销售总额"
                :series-data="dealPrice.total"
                width="1400px"
              />
            </el-col>
          </el-row>
          <el-row>
            <div class="flex_start">
              <p>商品年销售额(元):</p>
              <el-date-picker
                v-model="dealParams.year"
                type="year"
                placeholder="选择年"
                size="mini"
                format="yyyy"
                value-format="yyyy"
                style="margin-left:20px;"
                @change="getDealPriceShape"
              />
            </div>
            <el-col :span="24" class="flex_center">
              <bar-label-rotate
                v-if="dealPrice.yaer.length > 0"
                id="BarLabelRotatePrice1"
                :series-data="dealPrice.yaer"
                width="1400px"
              />
              <p v-else class="dangerTip">没有此年度数据</p>
            </el-col>
          </el-row>
          <el-row>
            <div class="flex_start">
              <p>商品月销售额(元)::</p>
              <el-date-picker
                v-model="dealParams.month"
                type="month"
                placeholder="选择月"
                format="yyyy-MM"
                value-format="yyyy-MM"
                size="mini"
                style="margin-left:20px;"
                @change="getDealPriceLine"
              />
            </div>
            <el-col :span="24">
              <line-stack
                v-if="dealPrice.month.length > 0"
                id="LineStackPrice"
                :x-axis-title="dealPrice.xAxisMonth"
                :series-data="dealPrice.month"
                width="1400px"
              />
              <p v-else class="dangerTip">没有此月份数据</p>
            </el-col>
          </el-row>
        </el-tab-pane>
        <el-tab-pane label="订单统计" name="4">
          <deal-order ref="order" />
        </el-tab-pane>
      </el-tabs>
    </template>
  </div>
</template>

<script>
// api
import {
  getDealNumSector,
  getDealNumShape,
  getDealNumLine,
  getDealPriceSector,
  getDealPriceShape,
  getDealPriceLine
} from '@/api/data/deal'

// 销量扇形
import PieLengend from '@/components/Charts/PieLegend'
// 销量柱形
import BarLabelRotate from '@/components/Charts/BarLabelRotate'
// 销量折线图
import LineStack from '@/components/Charts/LineStack'
// 订单统计
import DealOrder from './components/DealOrder'
export default {
  components: {
    PieLengend,
    BarLabelRotate,
    LineStack,
    DealOrder
  },
  data() {
    return {
      tabStatus: '2',
      dealNum: { // 销量
        total: [],
        yaer: [],
        month: [],
        xAxisMonth: []
      },
      dealParams: {
        year: `${new Date().getFullYear()}`,
        month: `${new Date().getFullYear()}-${new Date().getMonth() + 1}`
      },
      dealPrice: { // 销售额
        total: [],
        yaer: [],
        month: [],
        xAxisMonth: []
      },
      loadingFull: false
    }
  },
  watch: {
    tabStatus(newVal, oldVal) {
      this.init()
    }
  },
  created() {
    this.init()
  },
  methods: {
    // 选项卡切换
    handleTagToggle(tab) {
      this.tabStatus = tab.name
      this.dealParams.year = `${new Date().getFullYear()}`
      this.dealParams.month = `${new Date().getFullYear()}-${new Date().getMonth() + 1}`
    },
    // 初始化
    init() {
      const tab = this.tabStatus
      switch (tab) {
        case '0':
          break
        case '1':
          this.getDealNumSector()
          this.getDealNumShape()
          this.getDealNumLine()
          break
        case '2':
          this.getDealPriceSector()
          this.getDealPriceShape()
          this.getDealPriceLine()
          break
        case '4':
          this.$nextTick(() => {
            this.$refs.order.getOrder()
          })
          break
        default:
      }
    },
    // 获取销售量统计（扇形图）
    async getDealNumSector() {
      this.loadingFull = true
      try {
        const res = await getDealNumSector()
        const { message, code } = res
        if (code === 200) {
          const { data } = res
          this.dealNum.total = data.map((item, i) => {
            return {
              name: (item.goods && item.goods.name) ? item.goods.name : `未知数据${i}`,
              value: item.total ? item.total : 0
            }
          })
        } else {
          this.$message.error(message)
        }
      } catch (e) {
        console.log(e)
      }
      this.loadingFull = false
    },
    // 获取销售量统计（柱形图）年
    async getDealNumShape() {
      this.loadingFull = true
      try {
        const res = await getDealNumShape({
          year: this.dealParams.year
        })
        const { message, code } = res
        if (code === 200) {
          const { data } = res
          const valArr = Object.values(data)
          this.dealNum.yaer = valArr.map(item => {
            const year = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]
            return {
              name: item.name ? item.name : '未知数据',
              type: 'bar',
              barGap: 0,
              data: year.map(btem => {
                return item.total[btem] ? item.total[btem] : 0
              })
            }
          })
        } else {
          this.$message.error(message)
        }
      } catch (e) {
        console.log(e)
      }
      this.loadingFull = false
    },
    // 获取销售量统计（折线图）月
    async getDealNumLine() {
      this.loadingFull = true
      try {
        const res = await getDealNumLine({
          month: this.dealParams.month
        })
        const { message, code } = res
        if (code === 200) {
          const { data } = res
          const { list, total } = data
          const valArr = Object.values(list)
          this.dealNum.month = valArr.map(item => {
            const month = []
            for (let i = 0; i <= total; i++) {
              month.push(i)
            }
            this.dealNum.xAxisMonth = month
            return {
              name: item.name ? item.name : '未知数据',
              type: 'line',
              // stack: '总量',
              areaStyle: {},
              data: month.map(btem => {
                return item.total[btem] ? item.total[btem] : 0
              })
            }
          })
        } else {
          this.$message.error(message)
        }
      } catch (e) {
        console.log(e)
      }
      this.loadingFull = false
    },
    // 获取销售额统计(扇形图)
    async getDealPriceSector() {
      this.loadingFull = true
      try {
        const res = await getDealPriceSector()
        const { message, code } = res
        if (code === 200) {
          const { data } = res
          this.dealPrice.total = data.map((item, i) => {
            return {
              name: (item.goods && item.goods.name) ? item.goods.name : `未知数据${i}`,
              value: item.account ? item.account : 0
            }
          })
        } else {
          this.$message.error(message)
        }
      } catch (e) {
        console.log(e)
      }
      this.loadingFull = false
    },
    // 获取销售额年度统计(柱形图)
    async getDealPriceShape() {
      this.loadingFull = true
      try {
        const res = await getDealPriceShape({
          year: this.dealParams.year
        })
        const { message, code } = res
        if (code === 200) {
          const { data } = res
          const valArr = Object.values(data)
          this.dealPrice.yaer = valArr.map(item => {
            const year = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]
            return {
              name: item.name ? item.name : '未知数据',
              type: 'bar',
              barGap: 0,
              data: year.map(btem => {
                return item.account[btem] ? item.account[btem] : 0
              })
            }
          })
        } else {
          this.$message.error(message)
        }
      } catch (e) {
        console.log(e)
      }
      this.loadingFull = false
    },
    // 获取销售额月份统计(折线图)
    async getDealPriceLine() {
      this.loadingFull = true
      try {
        const res = await getDealPriceLine({
          month: this.dealParams.month
        })
        const { message, code } = res
        if (code === 200) {
          const { data } = res
          const { list, total } = data
          const valArr = Object.values(list)
          this.dealPrice.month = valArr.map(item => {
            const month = []
            for (let i = 0; i <= total; i++) {
              month.push(i)
            }
            this.dealPrice.xAxisMonth = month
            return {
              name: item.name ? item.name : '未知数据',
              type: 'line',
              // stack: '总量',
              areaStyle: {},
              data: month.map(btem => {
                return item.account[btem] ? item.account[btem] : 0
              })
            }
          })
        } else {
          this.$message.error(message)
        }
      } catch (e) {
        console.log(e)
      }
      this.loadingFull = false
    }
  }
}
</script>
