<template>
  <div class="app-container home">
    <el-card>
      <div slot="header" class="card-header-wrap">
        <span class="card-title">实时概况</span>
      </div>
      <el-row :gutter="14">
        <el-col :span="6" v-for="item in situationList" :key="item.title">
          <div class="situation-card" :style="{background: item.bgColor}">
            <div class="situation-title">{{ item.title }}</div>
            <div class="situation-count">{{ item.count }}</div>
          </div>
        </el-col>
      </el-row>
    </el-card>
    <el-row :gutter="45" style="margin-top: 20px">
      <el-col :span="8">
        <el-card>
          <div slot="header" class="card-header-wrap">
            <span class="card-title">待处理</span>
          </div>
          <div class="card-body">
            <div class="list-item" v-for="item in pendingList">
              <div class="item-name">{{ item.name }}</div>
              <div class="item-count">{{ item.count }}个</div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card>
          <div slot="header" class="card-header-wrap">
            <span class="card-title">会员统计</span>
          </div>
          <div class="card-body">
            <div class="list-item" v-for="item in memberList">
              <div class="item-name">{{ item.name }}</div>
              <div class="item-count">{{ item.count }}</div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card>
          <div slot="header" class="card-header-wrap">
            <span class="card-title">订单统计</span>
          </div>
          <div class="card-body">
            <div class="list-item" v-for="item in orderList">
              <div class="item-name">{{ item.name }}</div>
              <div class="item-count">{{ item.count }}笔</div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <el-row class="chart-row" :gutter="40" style="margin-top: 20px">
      <el-col :span="12">
        <el-card body-style="height:calc(100% - 50px)">
          <div slot="header" class="card-header-wrap">
            <span class="card-title">会员趋势</span>
            <el-date-picker
              v-model="selectYearMonth"
              value-format="yyyy-MM"
              type="month"
              placeholder="选择年月"
              @change="changeYearOrMonth('memberChoice')"
              clearable>
            </el-date-picker>
            <el-button
              style="margin-left: 10px"
              v-for="item in memberChoiceList"
              :key="item.value"
              round
              :type="item.value === memberChoice ? 'primary' : ''"
              @click="handleChoiceChange(item.value,'memberChoice')"
            >
              {{ item.label }}
            </el-button>
          </div>
          <div class="card-body-chart">
            <div class="chart-description">
              <template v-if="memberChoice!=='yesterday'">
                {{memberChoice=='month'?(selectYearMonth?(selectYearMonth+'新增会员数'):'本月新增会员数'):'本周新增会员数'}}
                <p>{{ memberChoiceList[memberChoice].amount }}</p>
              </template>
              {{ memberChoiceList[memberChoice].text }}{{ memberChoiceList[memberChoice].trend }}
            </div>
            <div class="chart-dom" ref="memberChart"></div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card body-style="height:calc(100% - 50px)">
          <div slot="header" class="card-header-wrap">
            <span class="card-title">销售趋势</span>
            <el-date-picker
              v-model="selectYearMonth"
              value-format="yyyy-MM"
              type="month"
              placeholder="选择年月"
              @change="changeYearOrMonth('salesChoice')"
              clearable>
            </el-date-picker>
            <el-button
              style="margin-left: 10px"
              v-for="item in salesChoiceList"
              :key="item.value"
              round
              :type="item.value === salesChoice ? 'primary' : ''"
              @click="handleChoiceChange(item.value,'salesChoice')"
            >
              {{ item.label }}
            </el-button>
          </div>
          <div class="card-body-chart">
            <div class="chart-description">
              <template v-if="salesChoice!=='yesterday'">
                {{salesChoice=='month'?(selectYearMonth?(selectYearMonth+'销售额'):'本月销售额'):'本周销售额'}}
                <p>{{ salesChoiceList[salesChoice].amount }}</p>
              </template>
              {{ salesChoiceList[salesChoice].text }}{{ salesChoiceList[salesChoice].trend }}
            </div>
            <div class="chart-dom" ref="salesChart"></div>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import echarts from 'echarts'
import { company, companyTrend, order, pending, saleTrend, situation } from '@/api/buyer/workbench'

export default {
  name: 'Index',
  data() {
    return {
      situationList: {
        saleTotal: {
          title: '销售额(￥)',
          count: 0,
          bgColor: 'rgba(254, 105, 96, 1)'
        },
        orderTotal: {
          title: '订单数',
          count: 0,
          bgColor: 'rgba(245, 154, 35, 1)'
        },
        visitTotal: {
          title: '访客数',
          count: 0,
          bgColor: 'rgba(28, 217, 185, 1)'
        },
        consumeTotal: {
          title: '消费人数',
          count: 0,
          bgColor: 'rgba(2, 167, 240, 1)'
        }
      },
      pendingList: {
        total: {
          name: '全部',
          count: 20
        },
        companyCheckTotal: {
          name: '审核认证',
          count: 10
        },
        billApplyTotal: {
          name: '发票申请',
          count: 10
        }
      },
      memberList: {
        registerTotal: {
          name: '注册用户总数',
          count: 20
        },
        noCompanyTotal: {
          name: '非会员人数',
          count: 10
        },
        companyTotal: {
          name: '会员人数',
          count: 10
        },
        authenticTotal: {
          name: '完成认证企业',
          count: 10
        }
      },
      orderList: {
        Total: {
          name: '全部订单',
          count: 20
        },
        payTotal: {
          name: '待付款订单',
          count: 10
        },
        finishTotal: {
          name: '已完成订单',
          count: 10
        },
        closeTotal: {
          name: '已关闭订单',
          count: 10
        }
      },
      memberChart: null,
      salesChart: null,
      memberChoice: 'week',
      salesChoice: 'week',
      selectYearMonth: '',
      memberChoiceList: {
        yesterday: {
          label: '昨日',
          value: 'yesterday',
          trend: '',
          text: ''
        },
        week: {
          label: '本周',
          value: 'week',
          trend: '',
          text: '同比上周: '
        },
        month: {
          label: '本月',
          value: 'month',
          trend: '',
          text: '同比上月: '
        }
      },
      salesChoiceList: {
        yesterday: {
          label: '昨日',
          value: 'yesterday',
          trend: '',
          text: ''
        },
        week: {
          label: '本周',
          value: 'week',
          trend: '',
          text: '同比上周: '
        },
        month: {
          label: '本月',
          value: 'month',
          trend: '',
          text: '同比上月: '
        }
      },
      memberChartData: {
        xAxis: [],
        yAxis: []
      },
      salesChartData: {
        xAxis: [],
        yAxis: []
      }
    }
  },
  mounted() {
    this.init()
    this.companyTrend()
    this.saleTrend()
  },
  methods: {
    doSituation(){
      situation().then(res => {
        this.handleData(this.situationList, res)
      })
    },
    init() {
      this.doSituation();
      setInterval(this.doSituation, 3000);
      pending().then(res => {
        this.handleData(this.pendingList, res)
      })
      order().then(res => {
        this.handleData(this.orderList, res)
      })
      company().then(res => {
        this.handleData(this.memberList, res)
      })
    },
    handleData(target, res) {
      const keys = Object.keys(target)
      keys.forEach(key => {
        target[key].count = res[key]
      })
    },
    handleChoiceChange(choice, type) {
      this.selectYearMonth = '';
      this[type] = choice
      if (type === 'memberChoice') {
        this.companyTrend()
      } else {
        this.saleTrend()
      }
    },
    changeYearOrMonth(type) {
      this[type] = this.selectYearMonth;
      if (type === 'memberChoice') {
        this.companyTrend()
      } else {
        this.saleTrend()
      }
    },
    companyTrend() {
      companyTrend({ choice: this.memberChoice }).then((res) => {
        if(this.memberChoice.includes("-")){
          this.memberChoice = 'month'
        }
        const { info, list } = res
        this.memberChoiceList[this.memberChoice].trend = info?.trend || ''
        this.memberChoiceList[this.memberChoice].amount = info?.amount || ''
        this.memberChartData = {
          xAxis: [],
          yAxis: []
        }
        const keys = Object.keys(list)
        keys.forEach(item => {
          this.memberChartData.xAxis.push(item)
          this.memberChartData.yAxis.push(list[item])
        })
        this.initMemberChart()
      })
    },
    saleTrend() {
      saleTrend({ choice: this.salesChoice }).then((res) => {
        if(this.salesChoice.includes("-")){
          this.salesChoice = 'month'
        }
        const { info, list } = res
        this.salesChoiceList[this.salesChoice].trend = info?.trend || ''
        this.salesChoiceList[this.salesChoice].amount = info?.amount || ''
        this.salesChartData = {
          xAxis: [],
          yAxis: []
        }
        const keys = Object.keys(list)
        keys.forEach(item => {
          this.salesChartData.xAxis.push(item)
          this.salesChartData.yAxis.push(list[item])
        })
        this.initSalesChart()
      })

    },
    initMemberChart() {
      this.memberChart = echarts.init(this.$refs.memberChart)
      this.memberChart.setOption({
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#6a7985'
            }
          }
        },
        /* legend: {
         data: ['Email', 'Union Ads']
         }, */
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            boundaryGap: false,
            data: this.memberChartData.xAxis
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: [
          {
            type: 'line',
            stack: 'Total',
            areaStyle: {},
            emphasis: {
              focus: 'series'
            },
            data: this.memberChartData.yAxis
          }
        ]
      })
    },
    initSalesChart() {
      this.salesChart = echarts.init(this.$refs.salesChart)
      this.salesChart.setOption({
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#6a7985'
            }
          }
        },
        /*  legend: {
         data: ['Email', 'Union Ads']
         }, */
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            boundaryGap: false,
            data: this.salesChartData.xAxis
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: [
          {
            type: 'line',
            stack: 'Total',
            areaStyle: {},
            emphasis: {
              focus: 'series'
            },
            data: this.salesChartData.yAxis
          }
        ]
      })
    }
  }
}
</script>

<style scoped lang="scss">
.home {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 84px);

  .chart-row {
    flex: 1;

    .el-col {
      height: 100%;

      .el-card {
        height: 100%;
      }
    }
  }

  .card-header-wrap {
    display: flex;

    .el-button--medium.is-round {
      padding: 6px 20px;
    }

    .card-title {
      color: #333;
      font-size: 14px;
      font-weight: bold;
      display: inline-block;
      flex: 1;
    }
  }

  .situation-card {
    height: 140px;
    background-color: rgba(254, 105, 96, 1);
    border-radius: 5px;
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    .situation-title {
      font-size: 14px;
    }

    .situation-count {
      font-size: 28px;
      font-family: 'Arial Negreta', 'Arial Normal', 'Arial', sans-serif;
      font-weight: 700;
      margin-top: 20px;
    }
  }

  .card-body {
    height: 180px;
    overflow: auto;
    font-size: 14px;
    color: #333;
    font-family: 'Arial Normal', 'Arial', sans-serif;
    font-weight: 400;

    .list-item {
      display: flex;
      align-items: center;
      height: 40px;

      .item-name {
        flex: 1;
      }

      .item-count {
        color: #999;
      }
    }
  }

  .card-body-chart {
    display: flex;
    height: 100%;

    .chart-description {
      height: 100%;
      width: 140px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      font-size: 14px;
      color: #333;
      text-align: left;
    }

    .chart-dom {
      flex: 1;
      height: 100%;
    }
  }
}
</style>

