<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="handleInit"
        >
          搜索
        </el-button>
      </el-form-item>
    </el-form>
    <el-row class="model">
      <el-col :span="24" class="modelCol">
        <pie-simple
          id="pieCrownAdd1"
          show-title="新增销售"
          :series-data="newNext"
          width="1400px"
        />
      </el-col>
      <el-col :span="24" class="modelCol">
        <line-aqi
          id="homeAllLine1"
          title="全部销售"
          show-title="新增销售"
          :series-data="memberArray.all"
          width="1400px"
        />
      </el-col>
      <el-col :span="24" class="modelCol">
        <line-aqi
          id="homeCrownLine1"
          title="代理公司"
          show-title="代理公司"
          :series-data="memberArray.crown"
          width="1400px"
        />
      </el-col>
      <el-col :span="24" class="modelCol">
        <line-aqi
          id="hometopLine1"
          title="销售经理"
          show-title="销售经理"
          :series-data="memberArray.top"
          width="1400px"
        />
      </el-col>
      <el-col :span="24" class="modelCol">
        <line-aqi
          id="homeSuperLine1"
          title="销售主管"
          show-title="销售主管"
          :series-data="memberArray.super"
          width="1400px"
        />
      </el-col>
    </el-row>
  </div>
</template>
<script>
// api
import {
  newNextList,
  newNextLine
} from '@/api/data/next'
// 新增销售扇形
import PieSimple from '@/components/Charts/PieSimple'
// 新增销售折线、
import LineAqi from '@/components/Charts/LineAqi'
// 格式化时间
import {
  formatter
} from '@/filters/index'
export default {
  components: {
    PieSimple,
    LineAqi
  },
  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()}`
      },
      newNext: [],
      memberArray: {
        all: [],
        crown: [],
        super: [],
        top: []
      },
      loadingFull: false
    }
  },
  methods: {
    // 新增代理统计
    async newNextList() {
      // 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 newNextList({
          type: type,
          time: date
        })
        const { message, code } = res
        if (code === 200) {
          this.newNext = []
          const { data } = res
          for (const i in data) {
            switch (i) {
              case 'crow':
                this.newNext.push({
                  name: `代理公司(${data[i]}人)`,
                  value: data[i]
                })
                break
              case 'super':
                this.newNext.push({
                  name: `销售经理(${data[i]}人)`,
                  value: data[i]
                })
                break
              case 'top':
                this.newNext.push({
                  name: `销售主管(${data[i]}人)`,
                  value: data[i]
                })
                break
              default:
            }
          }
        } else {
          this.$message.error(message)
        }
      } catch (e) {
        console.log(e)
      }
      // this.loadingFull = false
    },
    // 新增代理统计
    async newNextLine() {
      // 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 newNextLine({
          type: type,
          time: date
        })
        const { message, code } = res
        if (code === 200) {
          const { data } = res
          for (const i in data) {
            switch (i) {
              case 'crow':
                this.memberArray.crown = data[i]
                break
              case 'super':
                this.memberArray.super = data[i]
                break
              case 'top':
                this.memberArray.top = data[i]
                break
              default:
                this.memberArray.all = data[i]
            }
          }
        } else {
          this.$message.error(message)
        }
      } catch (e) {
        console.log(e)
      }
      this.loadingFull = false
    },
    handleInit() {
      this.newNextList()
      this.newNextLine()
    }
  }
}
</script>

<style lang="scss" scoped>
  .model{
  margin-bottom: 40px;
    .modelCol{
      padding: 20px 0;
      display: flex;
      justify-content: center;
      align-items: center;
      background: #fff !important;
    }
  }
</style>
