<template>
  <div class="app-container">
    <div v-loading.fullscreen.lock="loadingFull" />
    <el-form label-width="80px">
      <el-form-item label="搜索方式:">
        <el-radio-group v-model="searchParams.type">
          <el-radio :label="0">按开始时间到结束时间搜索</el-radio>
          <el-radio :label="1">按月搜索</el-radio>
          <el-radio :label="2">按年搜索</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="搜索时间:">
        <el-date-picker
          v-if="searchParams.type === 0"
          v-model="searchParams.time"
          type="daterange"
          :picker-options="pickerOptions"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          align="left"
          value-format="yyyy-MM-dd"
        />
        <el-date-picker
          v-if="searchParams.type === 1"
          v-model="searchParams.month"
          type="month"
          placeholder="选择月"
          align="left"
        />
        <el-date-picker
          v-if="searchParams.type === 2"
          v-model="searchParams.year"
          type="year"
          placeholder="选择年"
          align="left"
        />
        <el-button
          type="primary"
          size="small"
          @click="getOrder"
        >
          搜索
        </el-button>
      </el-form-item>
    </el-form>
    <el-row>
      <p>订单统计:</p>
      <el-col :span="24">
        <bar-simple
          v-if="orderList.length > 0"
          id="orderList1"
          :series-data="orderList"
          width="1400px"
        />
      </el-col>
    </el-row>
  </div>
</template>
<script>
// api
import {
  getOrder
} from '@/api/data/deal'
// 订单柱状图
import BarSimple from '@/components/Charts/BarSimple'
// 格式化时间
import {
  formatter
} from '@/filters/index'
export default {
  components: {
    BarSimple
  },
  data() {
    return {
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 6)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
            picker.$emit('pick', [start, end])
          }
        }]
      },
      searchParams: {
        type: 0,
        time: [formatter(Date.now() - 6 * 24 * 60 * 60 * 1000, 'yyyy-MM-dd'), formatter(Date.now(), 'yyyy-MM-dd')],
        month: `${new Date().getFullYear()}-${new Date().getMonth() + 1}`,
        year: `${new Date().getFullYear()}`
      },
      orderList: [],
      loadingFull: false
    }
  },
  methods: {
    // 获取订单统计
    async getOrder() {
      this.loadingFull = true
      try {
        const { time, type, month, year } = this.searchParams
        let date
        if (type === 0) {
          date = time
        } else if (type === 1) {
          date = month
        } else {
          date = year
        }
        const res = await getOrder({
          type: type,
          time: date
        })
        const { message, code } = res
        if (code === 200) {
          const { data } = res
          this.orderList = data.map((item, i) => {
            return {
              name: item.name ? item.name : '未知数据',
              value: item.account
            }
          })
        } else {
          this.$message.error(message)
        }
      } catch (e) {
        console.log(`获取订单统计失败:${e}`)
      }
      this.loadingFull = false
    }
  }
}
</script>
