<template>
  <!-- 销售分析 -->
  <div class="sales-analysis fullcontainer">
    <div class="inner-box">
      <div class="title">
        <span class="txt">销售分析</span>
      </div>
      <!-- 参数 -->
      <div class="sales-params">
        日期：
        <el-date-picker
          @change="changeDate"
          v-model="date"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          style="height: 36px">
        </el-date-picker>

        <div class="choose-store">
          选择门店：
          <div class="all-group choose-box" @click="showGroup">
            {{groupName}}
            <i class="el-icon-caret-bottom el-icon"></i>
          </div>
          <div class="all-store choose-box" @click="showStore">
            {{storeName}}
            <i class="el-icon-caret-bottom el-icon"></i>
          </div>
        </div>
      </div>

      <!-- 销售分析数据 -->
      <div class="sales-list-data">
        <div class="sale-total">
          <div class="saleTotal">
            <p class="text-value">{{Number(saledata.totalSale).toFixed(2)}}</p>
            <p>销售额</p>
            <div class="salesbox">
              <div class="chart" ref="salesBox">
                <month-chart :width="totalSaleWidth" :id="'saleboxa'" :height="460" :charData="totalSaleData" v-if="totalSaleData.length"></month-chart>
              </div>
            </div>
          </div>
        </div>
        
        <!-- 其他销售数据 -->
        <div class="sale-items">
          <div class="item">
            <!-- 成交人数 -->
            <div class="person text-desc">
              {{Number(saledata.memberCount).toFixed(2)}} 成交人数
            </div>
            <div class="char" ref="commonBox">
              <common-chart :width="commonWidth" :id="'salePerson'" :value="'成交人数'" :height="200" :charData="personData" v-if="personData.length"></common-chart>
            </div>
          </div>
          <div class="item">
            <!-- 连带率 -->
            <div class="person text-desc">
              {{Number(saledata.joint).toFixed(2)}} 连带率
            </div>
            <div class="char">
              <common-chart :width="commonWidth" :id="'salejoint'" :value="'连带率'" :height="200" :charData="jointData" v-if="jointData.length"></common-chart>
            </div>
          </div>
          <div class="item">
            <!-- 老客率 -->
            <div class="person text-desc">
              {{Number(saledata.oldPercent).toFixed(2)}} 老客率
            </div>
            <div class="char">
              <common-chart :width="commonWidth" :id="'oldPercent'" :value="'老客率'" :height="200" :charData="oldPercentData" v-if="oldPercentData.length"></common-chart>
            </div>
          </div>
          <div class="item">
            <!-- 平均商品单价 -->
            <div class="person text-desc">
              {{Number(saledata.avgGoodsSale).toFixed(2)}} 平均商品单价
            </div>
            <div class="char">
              <common-chart :width="commonWidth" :id="'oldPercent'" :value="'平均商品单价'" :height="200" :charData="avgGoodsSaleData" v-if="avgGoodsSaleData.length"></common-chart>
            </div>
          </div>
          <div class="item">
            <!-- 平均折扣率 -->
            <div class="person text-desc">
              {{Number(saledata.avgDiscount).toFixed(2)}} 平均折扣率
            </div>
            <div class="char">
              <common-chart :width="commonWidth" :id="'avgDiscount'" :value="'平均折扣率'" :height="200" :charData="avgDiscountData" v-if="avgDiscountData.length"></common-chart>
            </div>
          </div>
          <div class="item">
            <!-- 客单价 -->
            <div class="person text-desc">
              {{Number(saledata.avgCost).toFixed(2)}} 客单价
            </div>
            <div class="char">
              <common-chart :width="commonWidth" :id="'avgCost'" :value="'客单价'" :height="200" :charData="avgCostData" v-if="avgCostData.length"></common-chart>
            </div>
          </div>
        </div>
      </div>

      <!-- 会员占比分析图 -->
      <div class="sales-chart">
        <div class="switch-btn">
          <span
            v-for="(item, index) in switchValue"
            :key="index"
            :class="{'active': index === currentIndex, 'btn': true}"
            @click="changeBtn(index)"
          >
            {{item}}
          </span>
        </div>
        <div class="chart-box">
          <div class="list-title">{{chartName}}</div>
          <div class="chart-data" ref="saleBox">
            <sale-chart :charData="saleData" :type="type" :id="sale" :width="saleWidth" v-if="saleData.length"></sale-chart>
          </div>
        </div>
      </div>

      <vue-gic-store :projectName="projectName" :showStoreDialog="showStoreDialog" @selectStore="selectStore"></vue-gic-store>
      <vue-gic-group :groupVisible="groupVisible" @closeGroup="closeGroup" @passGroupName="passName"></vue-gic-group>
    </div>
  </div>
</template>

<script>
import VueGicGroup from '@/common/vueGicGroup';
import { memberSalesAnalysis, memeberSalesMemberRation, salesAsChart } from '@/request/api';
import { dateformat } from "@/utils/formatTime";
import SaleChart from '@/components/chart/SaleChart';
import MonthChart from '@/components/chart/MonthChart';
import CommonChart from '@/components/chart/CommonChart';

export default {
  name: 'sales-analysis',
  components: {
    VueGicGroup,
    SaleChart,
    MonthChart,
    CommonChart
  },
  data() {
    return {
      projectName: 'member',
      groupName: '所有分组',
      storeName: '所有门店',
      showStoreDialog: false,
      currentIndex: 0,
      groupVisible: false,
      groupId: '',
      storeId: '',
      type: '',
      date: [
        dateformat(new Date(+new Date() - 30 * 3600 * 24 * 1000), "yyyy-MM-dd"),
        dateformat(new Date(), "yyyy-MM-dd")
      ],
      saledata: {},
      switchValue: ['销售占比', '成交人数占比'],
      // 销售占比
      sale: 'salebox',
      saleWidth: null,
      saleData: [],
      saleData1: [
        {
            date: "2018-07-30",
            cmemberRatio: 2.95,
            dmemberRatio: 38.34,
            amemberValue: 0,
            nmemberRatio: 38.34,
            dmemberValue: 13304.96,
            bmemberRatio: 10.37,
            bmemberValue: 3599,
            cmemberValue: 4495.85,
            nmemberValue: 13304.96,
            amemberRatio: 0.0
        },
        {
            date: "2018-07-31",
            cmemberRatio: 8.95,
            dmemberRatio: 38.34,
            amemberValue: 0,
            nmemberRatio: 38.34,
            dmemberValue: 13304.96,
            bmemberRatio: 10.37,
            bmemberValue: 3599,
            cmemberValue: 4495.85,
            nmemberValue: 13304.96,
            amemberRatio: 0.0
        },
        {
            date: "2018-08-01",
            cmemberRatio: 5.95,
            dmemberRatio: 8.34,
            amemberValue: 0,
            nmemberRatio: 38.34,
            dmemberValue: 13304.96,
            bmemberRatio: 10.37,
            bmemberValue: 3599,
            cmemberValue: 4495.85,
            nmemberValue: 13304.96,
            amemberRatio: 0.0
        },
        {
            date: "2018-08-02",
            cmemberRatio: 9.95,
            dmemberRatio: 38.34,
            amemberValue: 0,
            nmemberRatio: 38.34,
            dmemberValue: 13304.96,
            bmemberRatio: 10.37,
            bmemberValue: 3599,
            cmemberValue: 4495.85,
            nmemberValue: 13304.96,
            amemberRatio: 0.0
        },
        {
            date: "2018-08-03",
            cmemberRatio: 2.95,
            dmemberRatio: 38.34,
            amemberValue: 0,
            nmemberRatio: 38.34,
            dmemberValue: 13304.96,
            bmemberRatio: 10.37,
            bmemberValue: 3599,
            cmemberValue: 4495.85,
            nmemberValue: 13304.96,
            amemberRatio: 0.0
        },
        {
            date: "2018-08-04",
            cmemberRatio: 8.95,
            dmemberRatio: 38.34,
            amemberValue: 0,
            nmemberRatio: 38.34,
            dmemberValue: 13304.96,
            bmemberRatio: 10.37,
            bmemberValue: 3599,
            cmemberValue: 4495.85,
            nmemberValue: 13304.96,
            amemberRatio: 0.0
        },
        {
            date: "2018-08-05",
            cmemberRatio: 5.95,
            dmemberRatio: 8.34,
            amemberValue: 0,
            nmemberRatio: 38.34,
            dmemberValue: 13304.96,
            bmemberRatio: 10.37,
            bmemberValue: 3599,
            cmemberValue: 4495.85,
            nmemberValue: 13304.96,
            amemberRatio: 0.0
        },
        {
            date: "2018-08-06",
            cmemberRatio: 9.95,
            dmemberRatio: 38.34,
            amemberValue: 0,
            nmemberRatio: 38.34,
            dmemberValue: 13304.96,
            bmemberRatio: 10.37,
            bmemberValue: 3599,
            cmemberValue: 4495.85,
            nmemberValue: 13304.96,
            amemberRatio: 0.0
        }
      ],
      totalSaleWidth: null,
      totalSaleData: [
        {
            "keyword":"2018-06-01",
            "销售额":3279089.05
        },
        {
            "keyword":"2018-06-02",
            "销售额":3743936.82
        },
        {
            "keyword":"2018-06-03",
            "销售额":3620559.7
        },
        {
            "name":"统计数据",
            "keyword":"2018-06-04",
            "销售额":1538665.21
        },
        {
            "name":"统计数据",
            "keyword":"2018-06-05",
            "销售额":1892197.8
        },
        {
            "name":"统计数据",
            "keyword":"2018-06-06",
            "销售额":1949967.91
        },
        {
            "name":"统计数据",
            "keyword":"2018-06-07",
            "销售额":1812846.58
        },
        {
            "name":"统计数据",
            "keyword":"2018-06-08",
            "销售额":2251949.98
        },
        {
            "name":"统计数据",
            "keyword":"2018-06-09",
            "销售额":3952657.75
        }
      ],
      commonWidth: null,
      personData: [
        {
            "keyword":"2018-06-01",
            "成交人数":3279089.05
        },
        {
            "keyword":"2018-06-02",
            "成交人数":3743936.82
        },
        {
            "keyword":"2018-06-03",
            "成交人数":3620559.7
        },
        {
            "name":"统计数据",
            "keyword":"2018-06-04",
            "成交人数":1538665.21
        },
        {
            "name":"统计数据",
            "keyword":"2018-06-05",
            "成交人数":1892197.8
        },
        {
            "name":"统计数据",
            "keyword":"2018-06-06",
            "成交人数":1949967.91
        },
        {
            "name":"统计数据",
            "keyword":"2018-06-07",
            "成交人数":1812846.58
        },
        {
            "name":"统计数据",
            "keyword":"2018-06-08",
            "成交人数":2251949.98
        },
        {
            "name":"统计数据",
            "keyword":"2018-06-09",
            "成交人数":3952657.75
        },
        {
            "name":"统计数据",
            "keyword":"2018-06-10",
            "成交人数":4035443.55
        }
      ],
      jointData: [
        {
            "keyword":"2018-06-01",
            "连带率":3279089.05
        },
        {
            "keyword":"2018-06-02",
            "连带率":3743936.82
        },
        {
            "keyword":"2018-06-03",
            "连带率":3620559.7
        },
        {
            "name":"统计数据",
            "keyword":"2018-06-04",
            "连带率":1538665.21
        },
        {
            "name":"统计数据",
            "keyword":"2018-06-05",
            "连带率":1892197.8
        },
        {
            "name":"统计数据",
            "keyword":"2018-06-06",
            "连带率":1949967.91
        },
        {
            "name":"统计数据",
            "keyword":"2018-06-07",
            "连带率":1812846.58
        },
        {
            "name":"统计数据",
            "keyword":"2018-06-08",
            "连带率":2251949.98
        },
        {
            "name":"统计数据",
            "keyword":"2018-06-09",
            "连带率":3952657.75
        },
        {
            "name":"统计数据",
            "keyword":"2018-06-10",
            "连带率":4035443.55
        }
      ],
      // 老客率
      oldPercentData: [],
      // 平均商品单价
      avgGoodsSaleData: [],
      // 平均折扣率
      avgDiscountData: [],
      // 客单价
      avgCostData: [],
    };
  },
  created() {
    this.salesAnalysis();
    this.salesMemberRation('0');
    this.salesAsData();
  },
  computed: {
    chartName() {
      return this.currentIndex === 0 ? '销售占比分析图' : '成交人数占比分析图';
    }
  },
  mounted() {
    this.saleWidth = this.$refs.saleBox.clientWidth;
    this.totalSaleWidth = this.$refs.salesBox.clientWidth;
    this.commonWidth = this.$refs.commonBox.clientWidth;
  },
  methods: {
    // 
    changeDate(val) {
      this.salesAnalysis();
    },
    async salesAnalysis() {
      const data = {
        beginTime: !!this.date && !!this.date[0] ? this.date[0] : '', // 开始时间
        endTime: !!this.date && !!this.date[1] ? this.date[1] : '', // 结束时间
        groupId: this.groupId,
        storeId: this.storeId
      };
      // 销售数据
      let sales = await memberSalesAnalysis(data);
      if (sales.errorCode === 0) {
        this.saledata = sales.result;
      }
    },
    // 分组选择
    showGroup() {
      this.groupVisible = !this.groupVisible;
    },
    passName(val) {
      this.groupVisible = false;
      this.groupName = val.storeGroupName; // 名字 
      this.groupId = val.storeGroupId; // Id
    },
    closeGroup(val) {
      // 关闭弹框
      this.groupVisible = val;
    },
    // 门店选择
    showStore() {
      this.showStoreDialog = true;
    },
    // 子组件触发方法
    selectStore(val) {
      // 模拟检查数据
      this.showStoreDialog = false;
    },
    changeBtn(i) {
      this.currentIndex = i;
      // 0 销售占比 1 成交人数占比
      this.salesMemberRation(i + '');
    },
    // 销售占比 成交人数占比
    async salesMemberRation(type) {
      this.type = type;
      this.saleData = [];
      const data = {
        type: type || '0', // 0 销售占比 1 成交人数占比
        beginTime: !!this.date && !!this.date[0] ? this.date[0] : '', // 开始时间
        endTime: !!this.date && !!this.date[1] ? this.date[1] : '', // 结束时间
        groupId: this.groupId,
        storeId: this.storeId
      };
      let salePrecent = await memeberSalesMemberRation(data);
      if (salePrecent.errorCode === 0) {
        if (!salePrecent.result.length) {
          // this.saleData1 = salePrecent.result;
          if (type === '0') {
            this.saleData1.map(ele => {
              this.saleData.push({ date: ele['date'], name: 'A类会员占比', value: ele['amemberRatio'] });
              this.saleData.push({ date: ele['date'], name: 'B类会员占比', value: ele['bmemberRatio'] });
              this.saleData.push({ date: ele['date'], name: 'C类会员占比', value: ele['cmemberRatio'] });
              this.saleData.push({ date: ele['date'], name: 'D类会员占比', value: ele['dmemberRatio'] });
              this.saleData.push({ date: ele['date'], name: '非会员占比', value: ele['nmemberRatio'] });
            });
          } else {
            this.saleData1.map(ele => {
              this.saleData.push({ date: ele['date'], name: 'A类会员销售额', value: ele['amemberValue'] });
              this.saleData.push({ date: ele['date'], name: 'B类会员销售额', value: ele['bmemberValue'] });
              this.saleData.push({ date: ele['date'], name: 'C类会员销售额', value: ele['cmemberValue'] });
              this.saleData.push({ date: ele['date'], name: 'D类会员销售额', value: ele['dmemberValue'] });
              this.saleData.push({ date: ele['date'], name: '非会员销售额', value: ele['nmemberValue'] });
            });
          }
        } else {
          if (type === '0') {
            this.saleData1.map(ele => {
              this.saleData.push({ date: ele['date'], name: 'A类会员占比', value: ele['amemberRatio'] });
              this.saleData.push({ date: ele['date'], name: 'B类会员占比', value: ele['bmemberRatio'] });
              this.saleData.push({ date: ele['date'], name: 'C类会员占比', value: ele['cmemberRatio'] });
              this.saleData.push({ date: ele['date'], name: 'D类会员占比', value: ele['dmemberRatio'] });
              this.saleData.push({ date: ele['date'], name: '非会员占比', value: ele['nmemberRatio'] });
            });
          } else {
            this.saleData1.map(ele => {
              this.saleData.push({ date: ele['date'], name: 'A类会员销售额', value: ele['amemberValue'] });
              this.saleData.push({ date: ele['date'], name: 'B类会员销售额', value: ele['bmemberValue'] });
              this.saleData.push({ date: ele['date'], name: 'C类会员销售额', value: ele['cmemberValue'] });
              this.saleData.push({ date: ele['date'], name: 'D类会员销售额', value: ele['dmemberValue'] });
              this.saleData.push({ date: ele['date'], name: '非会员销售额', value: ele['nmemberValue'] });
            });
          }
        }
      }
    },
    // 销售分析图表
    async salesAsData() {
      // 销售额
      const data = {
        startTime: this.date[0],
        endTime: this.date[1],
        storeId: this.storeId,
        groupId: this.groupId
      };
      // 销售额
      let total = await salesAsChart({...data, kpiName: 'statistics-total-sale-all'});
      if (total.errorCode === 0) {
       // this.totalSaleData = total.result;
      }

      // 成交人数
      let person = await salesAsChart({...data, kpiName: 'statistics-mc-all'});
      if (person.errorCode === 0) {
        // this.personData = person.result;
      }
      // 连带率
      let joint = await salesAsChart({...data, kpiName: 'statistics-joint-all'});
      if (joint.errorCode === 0) {
        this.jointData = joint.result;
      }
      // 老客率
      let old = await salesAsChart({...data, kpiName: 'statistics-old-all'});
      if (old.errorCode === 0) {
        // 老客率
        this.oldPercentData = old.result;
      }
      // 平均商品单价
      let avgGoods = await salesAsChart({...data, kpiName: 'statistics-avg-goods-all'});
      if (avgGoods.errorCode === 0) {
        this.avgGoodsSaleData = avgGoods.result;
      }
      // 评价折扣率
      let discount = await salesAsChart({...data, kpiName: 'statistics-avg-discount-all'});
      if (discount.errorCode === 0) {
        // 平均折扣率
        this.avgDiscountData = discount.result;
      }
      // 客单价
      let avgcost = await salesAsChart({...data, kpiName: ' statistics-avg-cost-all'});
      if (avgcost.errorCode === 0) {
        this.avgCostData = avgcost.result;
      }
    }
  }
};
</script>

<style lang="stylus" scoped>
.sales-analysis
  background-color #fff
  .inner-box
    overflow hidden
    margin 0 30px
    .title
      height 40px
      margin-top 10px
      border-bottom 1px solid #ddd
      .txt
        display inline-block
        font-size 14px
        line-height 15px
        height 15px
        padding-left 10px
        border-left 2px solid #04143a
  .sales-list-data
    display flex
    margin-top 20px
    min-height 300px
    height 600px
    font-size 14px
    background-color #f6f6f6
    .sale-total
      flex 0 0 40%
      text-align center
      .saleTotal
        margin-top 30px
        .text-value
          font-size 30px
          margin 0
    .sale-items
      flex 0 0 60%
      .item
        display inline-block
        vertical-align top
        height 200px
        width 48%
        .text-desc
          margin-top 10px

.sales-params
  margin-top 20px
  .choose-store
    display inline-block
    margin-left 20px
    font-size 14px
    .choose-box
      display inline-block
      margin 0 10px
      padding-left 10px
      width 120px
      height 32px 
      line-height 32px
      border: 1px solid #dcdfe6
      border-raduis 3px
      box-sizing border-box
      cursor pointer
      .el-icon
        float right
        line-height 32px
        margin-right 5px 
.sales-chart
  margin-top 30px
  .btn
    display inline-block
    height 24px
    line-height 24px
    font-size 14px
    color #606266
    padding 5px 20px
    cursor pointer
    border 1px solid #ddd
  .active
    background-color #409eff
    border-color #409eff
    color #fff

.chart-box
  margin-top 20px
  border 1px solid #e1e6eb
  .list-title
    height 26px
    line-height 26px
    padding 8px
    font-size 14px
    background-color #f5f6fa
    border-bottom 1px solid #e1e6eb
  .chart-data
    min-height 300px
</style>
