<template>
  <view class="dec-discount" v-if="goodsList.length > 0">
    <!-- 商品为:列表list-x -->
    <template v-if="arg.listStyle == 'list'">
      <view
        class="list-wrap"
        v-for="(product, i) in goodsList"
        :key="i"
        :style="pdStyleStr"
      >
        <good-long
          :time="endTime"
          :state="endName"
          :good="product"
          :show="show"
          imgArg="big"
          :imgW="imgStyle.height"
        />
      </view>
    </template>
    <!-- 商品为: 组图concat-上下-->
    <template v-else-if="arg.listStyle == 'concat'">
      <view class="concat-wrap" v-for="(item, j) in goodsList" :key="j">
        <view class="big-wrap">
          <good-short :good="item.big" :show="show" imgArg="big" />
        </view>
        <view class="small-wrap">
          <view class="item">
            <good-short :good="item.small" :show="show" imgArg="middle" />
          </view>
          <view class="item">
            <good-short :good="item.small" :show="show" imgArg="middle" />
          </view>
        </view>
      </view>
    </template>
    <!-- 商品为: 滚图 -->
    <template v-else-if="arg.listStyle == 'scroll'">
      <view class="limit-time">
        限时抢购&nbsp;
        <template v-if="endTime.hour">
          <template v-if="endTime.day">
            <span class="box">{{ endTime.day }}天</span>
            <span class="box2">:</span>
          </template>
          <span class="box">{{ endTime.hour }}</span>
          <span class="box2">:</span>
          <span class="box">{{ endTime.minutes }}</span>
          <span class="box2">:</span>
          <span class="box">{{ endTime.seconds }}</span>
        </template>
        <span class="box3" v-else>{{ endName }}</span>
      </view>
      <scroll-view
        class="scroll-X"
        scroll-x="true"
        :scroll-left="0"
        :style="pdStyleStr"
      >
        <view
          v-for="(product, k) in goodsList"
          :key="k"
          :style="scrollStyleStr"
          class="item"
        >
          <good-short
            :good="product"
            :show="show"
            imgArg="small"
            :imgH="imgStyle.height"
          />
        </view>
      </scroll-view>
    </template>
    <!-- 商品为:三图three -->
    <template v-else-if="arg.listStyle == 'three'">
      <view class="limit-time">
        限时抢购&nbsp;
        <template v-if="endTime.hour">
          <template v-if="endTime.day">
            <span class="box">{{ endTime.day }}天</span>
            <span class="box2">:</span>
          </template>
          <span class="box">{{ endTime.hour }}</span>
          <span class="box2">:</span>
          <span class="box">{{ endTime.minutes }}</span>
          <span class="box2">:</span>
          <span class="box">{{ endTime.seconds }}</span>
        </template>
        <span class="box3" v-else>{{ endName }}</span>
      </view>
      <view class="three-wrap" :style="pdStyleStr">
        <view
          v-for="(product, l) in goodsList"
          :key="l"
          class="item"
          :style="mgStyleStr"
        >
          <good-short
            :good="product"
            :show="show"
            imgArg="small"
            :imgH="imgStyle.height"
          />
        </view>
      </view>
    </template>
    <!-- 商品为:双图double -->
    <view
      class="two-wrap"
      v-else-if="arg.listStyle == 'two'"
      :style="pdStyleStr"
    >
      <view
        v-for="(product, m) in goodsList"
        :key="m"
        :style="mgStyleStr"
        class="item"
      >
        <good-short
          :time="endTime"
          :state="endName"
          :good="product"
          :show="show"
          :imgH="imgStyle.height"
        />
      </view>
    </view>
    <!-- 商品为:大图big -->
    <view class="big-wrap" v-else>
      <view
        v-for="(product, n) in goodsList"
        :key="n"
        class="item"
        :style="pdStyleStr"
      >
        <good-short
          :time="endTime"
          :state="endName"
          :good="product"
          :show="show"
          imgArg="big"
          :imgH="imgStyle.height"
        />
      </view>
    </view>
  </view>
</template>

<script>
// 设置拼团
import goodShort from "./goodBox";
import goodLong from "./goodLong";
import variable from "../style/variable.js";
export default {
  inject: ["decAxios", "decImgDomain"],
  components: {
    goodShort,
    goodLong,
  },
  props: {
    tab: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  data() {
    return {
      arg: null,
      windowWidth: 375,
      show: null,
      goodsList: [],
      pdStyleStr: "",
      mgStyleStr: "",
      scrollStyleStr: {},
      imgStyle: {},
      endName: "",
      endTime: {},
      timer: null, // 定时器
    };
  },
  created() {
    this.arg = this.tab.arg;
    this.show = this.arg.show;
    this.initData();
  },
  beforeDestroy() {
    clearInterval(this.timer);
    this.timer = null;
  },
  methods: {
    initTime(endTime, startTime) {
      if (this.timer) clearInterval(this.timer);
      const end = new Date(endTime),
        start = new Date(startTime),
        current = new Date();
      if (current - start > 0) {
        if (end - current > 0) {
          const time = end - current;
          // 小时Hours
          let hour = Math.floor(time / 1000 / 3600),
            day = 0;
          if (hour > 23) {
            day = parseInt(hour / 24);
            hour = hour - day * 24;
          }
          if (hour < 10) hour = "0" + hour;
          // 分minutes
          let minutes = Math.floor((time / (1000 * 60)) % 60);
          if (minutes < 10) minutes = "0" + minutes;
          // 秒-seconds
          let seconds = Math.floor((time / 1000) % 60);
          if (seconds < 10) seconds = "0" + seconds;
          this.endTime = {
            day,
            hour,
            minutes,
            seconds,
          };
          this.timer = setTimeout(() => {
            this.initTime(endTime, startTime);
          }, 1000);
          this.endName = "进行中";
        } else {
          this.endName = "已结束";
          this.endTime = {};
        }
      } else {
        this.endName = "未开始";
        this.endTime = {};
      }
      return this.endName;
    },
    initImg(val) {
      const ratio = (this.arg.show.ratio || "1-1").split("-"),
        ratioW = parseInt(ratio[0]) || 1,
        ratioH = parseInt(ratio[1]) || 1;

      const cw = variable["@phoneWidth"];
      let space = (this.arg.space || 0) * variable["@base"],
        lacuna = (this.arg.lacuna || 0) * variable["@base"],
        lacuna2 = parseInt(lacuna * 5) / 10;

      let w1 = cw - 2 * space,
        w2 = cw - 2 * space - lacuna,
        w3 = cw - 2 * space - 2 * lacuna,
        w35 = cw - space - 3 * lacuna;
      //X100
      let imgH1 = parseInt((100 * w1 * ratioH) / ratioW),
        imgH2 = parseInt((50 * w2 * ratioH) / ratioW),
        imgH3 = parseInt((33.33 * w3 * ratioH) / ratioW),
        imgH35 = parseInt((30 * w35 * ratioH) / ratioW);
      //upx2px
      imgH1 = uni.upx2px(imgH1) / 100;
      imgH2 = uni.upx2px(imgH2) / 100;
      imgH3 = uni.upx2px(imgH3) / 100;
      imgH35 = uni.upx2px(imgH35) / 100;

      w1 = uni.upx2px(w1 * 100) / 100;
      w2 = uni.upx2px(w2 * 50) / 100;
      w3 = uni.upx2px(w3 * 33.33) / 100;
      w35 = uni.upx2px(w35 * 30) / 100;

      space = uni.upx2px(space * 100) / 100;
      lacuna = uni.upx2px(lacuna * 100) / 100;
      lacuna2 = uni.upx2px(lacuna2 * 100) / 100;
      const map = {
        one: { width: w1 + "px", height: imgH1 + "px" },
        two: { width: w2 + "px", height: imgH2 + "px" },
        three: { width: w3 + "px", height: imgH3 + "px" },
        scroll: { width: w35 + "px", height: imgH35 + "px" },
        list: { width: w1 * 0.36 + "px", height: w1 * 0.36 + "px" },
      };
      const padding = {
        one: { padding: `0 ${space}px ${lacuna}px` },
        two: { padding: `0 ${space - lacuna2}px` },
        three: { padding: `0 ${space - lacuna2}px` },
        scroll: { "padding-left": `${space}px`, "padding-top": "5px" },
        list: { padding: `0 ${space}px ${lacuna}px` },
      };
      const margin = {
        one: {},
        two: { padding: `${lacuna2}px` },
        three: { padding: `${lacuna2}px` },
        scroll: { "margin-right": `${lacuna}px` },
        list: {},
      };

      this.pdStyleStr = (function (obj) {
        let arr = [];
        Object.keys(obj).forEach((key) => {
          obj[key] && arr.push(`${key}:${obj[key]}`);
        });
        return arr.join(";");
      })(padding[val] || {});

      this.mgStyleStr = (function (obj) {
        let arr = [];
        Object.keys(obj).forEach((key) => {
          obj[key] && arr.push(`${key}:${obj[key]}`);
        });
        return arr.join(";");
      })(margin[val] || {});

      this.scrollStyleStr = (function (obj) {
        let arr = [];
        Object.keys(obj).forEach((key) => {
          obj[key] && arr.push(`${key}:${obj[key]}`);
        });
        return arr.join(";");
      })({ ...map[val], height: "", ...margin[val] });

      this.imgStyle = map[val];
    },
    initData() {
      const api = this.decAxios.getGoodDiscountData;
      const that = this,
        option = this.arg.id || {};
      const listStyle = that.arg.listStyle;
      const promiseArr = option.id
        ? api({ ...option })
        : new Promise((resolve) => {
            resolve({ code: 201 });
          });
      promiseArr.then((ress) => {
        const res = ress || {};
        let records = [],
          activity = {},
          result = (res && res.result) || {};
        if (res.code == "200") {
          records = result.records || [];
          activity = result.activity || {};
          const endTime = (activity.activityEndTime || "").replace(/-/g, "/");
          const startTime = (activity.activityStartTime || "").replace(
            /-/g,
            "/"
          );
          if (
            that.initTime(endTime, startTime) != "已结束" &&
            records.length > 0
          ) {
            that.goodsList = that.listStyleChange(listStyle, records);
            that.initImg(listStyle);
            return;
          }
        }
        that.goodsList = [];
      });
    },
    listStyleChange(val, res) {
      if (val == "scroll") {
        return res;
      } else if (val == "concat") {
        let newRes = [];
        res.forEach((item, i) => {
          if ((i + 1) % 3 == 0) {
            newRes.push({
              big: res[i - 2],
              small: [item, res[i - 1]],
            });
          }
        });
        return newRes;
      } else {
        return res;
      }
    },
  },
};
</script>
