<template>
  <div class="help-purchase">
    <div class="time">
      <div class="tittle">日期:</div>
      <div class="uni-list">
        <div class="picker">
          <picker
            mode="date"
            :value="date"
            :start="startDate"
            :end="endDate"
            @change="fromDateChange"
          >
            <div class="day1">{{fromDate}}</div>
          </picker>
          <span>至</span>
          <picker
            mode="date"
            :value="date"
            :start="startDate"
            :end="endDate"
            @change="toDateChange"
          >
            <div class="day2">{{toDate}}</div>
          </picker>
        </div>
      </div>
    </div>
    <div class="day">
      <div class="tittle">时间:</div>
      <div class="uni-list">
        <div class="picker">
          <picker mode="time" :value="startTime" start="00:00" end="23:59" @change="fromTimeChange">
            <div class="time1">{{startTime}}</div>
          </picker>
          <span>至</span>
          <picker mode="time" :value="endTime" start="00:00" end="23:59" @change="toTimeChange">
            <div class="time2">{{endTime}}</div>
          </picker>
        </div>
      </div>
    </div>
    <div class="percent">
      <div class="tittle">进货量:</div>
      <div class="countP">
        <div class="btn-minus" @click="reduceNum"></div>
        <i class="num">{{num}}%</i>
        <div class="btn-plus" @click="addNum"></div>
      </div>
    </div>
    <div class="totalPrice">
      总金额:
      <span class="totalPrice-item">{{(totalPrice*num/100).toFixed(2)}}￥</span>
    </div>
    <div class="btn-group">
      <button @click="getSale" type="default">查询</button>
      <button @click="addCar" type="primary">加入购物车</button>
    </div>
    <div class="tab">
      <div class="head">
        <div class="head-itme spa">日期</div>
        <div class="head-itme">销量</div>
      </div>
      <div class="tab-item" v-for="(item,index) in weekArr" :key="index">
        <div class="title2">
          <div>{{item.day}}</div>
          <div>{{item.week}}</div>
        </div>
        <div class="sale-item">{{item.count}}</div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import cartPage from '@/apis/cartPage';
export default {
  data() {
    const currentDate = this.getDate({
      format: true,
    });
    return {
      num: 100,
      index: 0,
      totalPrice: 0,
      fromDate: "2020-7-01",
      toDate: "2020-7-01",
      startTime: "07:00",
      endTime: "20:00",
      saleArr: [],
      weekArr: [
        // { day: "2020-07-1", count: 0 },
        // { day: "2020-07-2", count: 0 },
        // { day: "2020-07-3", count: 0 },
        // { day: "2020-07-4", count: 0 },
        // { day: "2020-07-5", count: 0 },
        // { day: "2020-08-11", count: 0 },
      ],
    };
  },
  computed: {
    startDate() {
      return this.getDate("start");
    },
    endDate() {
      return this.getDate("end");
    },
    ...mapGetters({
      fromStoreID: "indexPage/fromStoreID",
      storeID: "indexPage/storeID"
    }),
  },
  async created() {
    this.showLoad();
    this.getStoreSkus();
    //列表信息
    for (let item of this.weekArr) {
      let json = {
        fromDate: item.day + " " + "07:00:00",
        toDate: item.day + " " + "20:00:00",
        fromStoreID: this.fromStoreID,
        storeID: this.storeID,
        percentage: (this.num / 100).toFixed(2),
      };
      let res = await cartPage.getHelpStoreSkus(json);
      // console.log(res);
      let num = 0;
      if (res && res.length > 0) {
        for (let item of res) {
          num += item.count;
        }
        num = num.toString();
        item.count = num;
        console.log(item.count);
      }
    }
    console.log(this.weekArr);
    //整合时间数据
    let t = 0;
    let t2 = 0;
    for (let i = 0; i < 8; i++) {
      this.weekArr.push({
        day: this.getDay(t),
        week: this.xingqi(t2),
        count: 0,
      });
      t -= 1;
      t2 += 1;
    }
    console.log(this.weekArr);
    this.hideLoad();
  },
  methods: {
    getSale() {
      this.getStoreSkus();
    },
    async setHelpShopCar(list) {
      let storeIDs = this.storeID
      for (let i = 0; i < storeIDs.length; i++) {
        let storeID = storeIDs[i]
        let payload = list.filter(item => item.storeID === storeIDs[i]).map(item => ({
          skuID: item.id,
          count: item.count,
          price: item.curPrice,
          storeID: item.storeID,
          isChecked: item.checked ? 1 : 0
        }))
        await cartPage.setMyCart(storeID, payload)
      }
    },
    addCar() {
      this.getStoreSkus();
      this.setHelpShopCar(this.saleArr);
    },
    //获取商品方法
    async getStoreSkus() {
      
      let json = {
        fromDate: this.fromDate + " " + this.startTime + ":00",
        toDate: this.toDate + " " + this.endTime + ":00",
        fromStoreID: this.fromStoreID,
        storeID: this.storeID[0],
        percentage: (this.num / 100).toFixed(2),
      };

      let res = await cartPage.getSupplySupportStoreSkus(json)
      // console.log(res);
      this.saleArr = res && res.length>0 ? res : [];
      let num = 0;
      if (res) {
        for (let item of res) {
          num += item.count * item.salePrice;
        }
      }
      
      this.totalPrice = Math.ceil(num / 100);
      console.log("总价", this.totalPrice);
    },
    async saleCout(timer, count) {
      let json = {
        fromDate: timer + " " + "07:00:00",
        toDate: timer + " " + "20:00:00",
        fromStoreID: this.fromStoreID,
        storeID: this.storeID,
        percentage: (this.num / 100).toFixed(2),
      };
      let res = await cartPage.getHelpStoreSkus(json);
      // console.log(res);
      let num = 0;
      if (res && res.length > 0) {
        for (let item of res) {
          num += item.count;
        }
        num = num.toString();
        count = num;
        console.log(count);
      }
    },
    cao(tiem) {
      //return tiem;
    },
    reduceNum() {
      if (this.num > 0) {
        this.num -= 5;
      }
    },
    addNum() {
      this.num += 5;
    },
    fromDateChange: function (e) {
      this.fromDate = e.target.value;
    },
    toDateChange: function (e) {
      this.toDate = e.target.value;
    },
    toTimeChange: function (e) {
      this.endTime = e.target.value;
    },
    fromTimeChange: function (e) {
      this.startTime = e.target.value;
    },
    getDate(type) {
      const date = new Date();
      let year = date.getFullYear();
      let month = date.getMonth() + 1;
      let day = date.getDate();

      if (type === "start") {
        year = year - 60;
      } else if (type === "end") {
        year = year + 2;
      }
      month = month > 9 ? month : "0" + month;
      day = day > 9 ? day : "0" + day;
      return `${year}-${month}-${day}`;
    },
    xingqi(i) {
      var aa;
      if (i > new Date().getDay()) {
        aa = "周" + "日一二三四五六".charAt(new Date().getDay() - i + 7);
      } else {
        aa = "周" + "日一二三四五六".charAt(new Date().getDay() - i);
      }
      return aa;
    },
    getDay(day) {
      var today = new Date();
      var targetday_milliseconds = today.getTime() + 1000 * 60 * 60 * 24 * day;
      today.setTime(targetday_milliseconds); //注意，这行是关键代码
      var tYear = today.getFullYear();
      var tMonth = today.getMonth();
      var tDate = today.getDate();
      tMonth = this.doHandleMonth(tMonth + 1);
      tDate = this.doHandleMonth(tDate);
      //console.log(tYear+"-"+tMonth+"-"+tDate)
      //bbb7.push(tYear+"-"+tMonth+"-"+tDate);
      return tYear + "-" + tMonth + "-" + tDate;
    },
    doHandleMonth(month) {
      var m = month;
      if (month.toString().length == 1) {
        m = "0" + month;
      }
      return m;
    },
  },
};
</script>

<style lang="scss" scoped>
@import "@/assets/bundle.scss";
.btn-group {
  display: flex;
}
.totalPrice {
  text-indent: 28px;
}
.totalPrice-item {
  color: #fe6263;
  margin-left: 10px;
}
.picker {
  display: flex;
  justify-content: space-evenly;
}
.time1,
.time2,
.day1,
.day2 {
  width: 100px;
  text-align: center;
  border-radius: 8rpx;
  background: rgba(0, 0, 0, 0.08);
  padding: 0 10rpx;
}
.tab {
  padding: 5rpx 10rpx;
}
.head-itme {
  flex: 1;
  text-align: center;
}
.head {
  display: flex;
}
.tittle {
  flex: 0 0 80px;
  text-align: right;
  margin-right: 10rpx;
}
.day {
  display: flex;
  line-height: 40px;
  border-bottom: 1rpx solid #e4e7ed;
  margin-bottom: 5px;
}
.time {
  display: flex;
  line-height: 40px;
  border-bottom: 1rpx solid #e4e7ed;
  margin-bottom: 5px;
}
.uni-list {
  display: flex;
}
.num {
  margin: 0 5px;
}
.percent {
  display: flex;
  line-height: 40px;
  border-bottom: 1rpx solid #e4e7ed;
  margin-bottom: 5px;
}
.countP {
  display: flex;
  margin-left: 56px;
  justify-content: center;
  align-items: center;
}
.tab-item {
  display: flex;
}
.sale-item {
  flex: 1;
  text-align: center;
  line-height: 42px;
  font-size: 48rpx;
  font-weight: bold;
}
.title2 {
  flex: 1;
  text-align: left;
  color: #666;
  font-size: 32rpx;
}
.spa {
  text-align: left;
}
.btn-minus,
.btn-plus {
  flex: none;
  @extend %bg-no-repeat-center;
  @extend %bgwhite;
  background-size: 24rpx;
  width: 60rpx;
  height: 60rpx;
  border-radius: 50%;
  border: 1rpx solid $border1;
  position: relative;
  z-index: 1;
  padding: 0;
  box-sizing: content-box;
}
.btn-minus {
  @extend %icon-minus;
}
.btn-plus {
  @extend %icon-plus;
}
</style>