<template>
  <div class="dec-goodList" v-if="goods.length > 0">
    <!-- 商品为:字下图img -->
    <template v-if="arg.listStyle === 'img'">
      <div class="img-wrap" v-for="(product, index) in goodsList" :key="index">
        <good-img :good="product" :show="show" :simple="false" imgArg="big" />
      </div>
    </template>
    <!-- 商品为: 拼图join-左右-->
    <template v-else-if="arg.listStyle === 'join'">
      <div class="join-wrap" v-for="(item, index) in goodsList" :key="index">
        <div class="big-wrap">
          <good-img :good="item.big" :imgH="imgH2" :show="show" />
        </div>
        <div class="small-wrap">
          <div class="item">
            <good-img
              :good="item.small[0]"
              imgArg="small"
              :imgH="imgH4"
              :show="show"
            />
          </div>
          <div class="item">
            <good-img
              :good="item.small[1]"
              imgArg="small"
              :imgH="imgH4"
              :show="show"
            />
          </div>
        </div>
      </div>
    </template>
    <!-- 商品为: 组图concat-上下-->
    <template v-else-if="arg.listStyle === 'concat'">
      <div class="concat-wrap" v-for="(item, index) in goodsList" :key="index">
        <div class="big-wrap">
          <good-short :good="item.big" :show="show" imgArg="big" />
        </div>
        <div class="small-wrap">
          <div class="item">
            <good-img :good="item.small[0]" :imgH="imgH2" :show="show" />
          </div>
          <div class="item">
            <good-img :good="item.small[1]" :imgH="imgH2" :show="show" />
          </div>
        </div>
      </div>
    </template>
    <!-- 商品为:列表list-x -->
    <template v-else-if="'list,list-x'.indexOf(arg.listStyle) > -1">
      <div class="list-wrap" v-for="(product, index) in goodsList" :key="index">
        <good-long :good="product" :show="show" imgArg="" :imgW="imgW" />
      </div>
    </template>
    <!-- 商品为:滚两图scroll-two -->
    <div class="two-scroll" v-else-if="arg.listStyle == 'scroll-two'">
      <div v-for="(product, index) in goodsList" :key="index" class="item">
        <good-img :good="product" :imgH="imgH2" :show="show" />
      </div>
    </div>
    <!-- 商品为:滚三图scroll-three -->
    <div class="three-scroll" v-else-if="arg.listStyle == 'scroll-three'">
      <div v-for="(product, index) in goodsList" :key="index" class="item">
        <good-short
          :good="product"
          :show="show"
          :imgH="imgH3"
          :listStyle="arg.listStyle"
        />
        <!-- <good-img :good="product" :show="show" :simple="false" imgArg="small" :imgH="imgH3" /> -->
      </div>
    </div>
    <!-- 商品为:双图double -->
    <div class="two-wrap" v-else-if="'double,two'.indexOf(arg.listStyle) > -1">
      <div class="wrap">
        <div
          v-for="(product, index) in goodsList.left"
          :key="index"
          class="item"
        >
          <good-short :good="product" :show="show" :imgH="imgH2" />
        </div>
      </div>
      <div class="wrap">
        <div
          v-for="(product, index) in goodsList.right"
          :key="index"
          class="item"
        >
          <good-short :good="product" :show="show" :imgH="imgH2" />
        </div>
      </div>
    </div>
    <!-- 商品为:三图three 滚三图scroll-three -->
    <div class="three-wrap" v-else-if="arg.listStyle == 'three'">
      <div class="wrap">
        <div
          v-for="(product, index) in goodsList.left"
          :key="index"
          class="item"
        >
          <good-short
            :good="product"
            :show="show"
            imgArg="small"
            :imgH="imgH3"
          />
        </div>
      </div>
      <div class="wrap">
        <div
          v-for="(product, index) in goodsList.middle"
          :key="index"
          class="item"
        >
          <good-short
            :good="product"
            :show="show"
            imgArg="small"
            :imgH="imgH3"
          />
        </div>
      </div>
      <div class="wrap">
        <div
          v-for="(product, index) in goodsList.right"
          :key="index"
          class="item"
        >
          <good-short
            :good="product"
            :show="show"
            imgArg="small"
            :imgH="imgH3"
          />
        </div>
      </div>
    </div>
    <!-- 商品为:大图big -->
    <template v-else>
      <div class="big-wrap" v-for="(product, index) in goodsList" :key="index">
        <good-short :good="product" :show="show" imgArg="big" />
      </div>
    </template>
  </div>
</template>
<script>
// 设置列表
import goodShort from "./goodShort.vue";
import goodLong from "./goodLong.vue";
import goodImg from "./goodImg.vue";
import variable from "../../style/variable.js";
export default {
  components: {
    goodShort,
    goodLong,
    goodImg,
  },
  inject: ["decAxios", "decImgDomain"],
  props: {
    tab: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  data() {
    return {
      arg: {},
      show: null,
      goods: [],
      goodsList: [],
      firstImg: "",
      imgH1: "",
      imgH2: "",
      imgH3: "",
      imgH4: "",
      imgW: "",
    };
  },
  created() {
    this.arg = this.tab.arg;
    this.show = this.arg.show;
    this.initData();
  },
  watch: {
    "tab.refresh": function () {
      this.initData();
    },
    "arg.listStyle": function () {
      this.goodsList = this.listStyleChange(this.arg.listStyle, this.goods);
    },
    "arg.layout": function () {
      this.initImageSize(this.firstImg, false);
    },
  },
  methods: {
    // 初始化数据
    initData() {
      const that = this,
        addFun = this.arg.styleArg,
        api = this.decAxios.getGoodListData,
        ids = this.arg.ids || [],
        isStatic = addFun == "fix" && (ids.length == 0 || this.arg.static),
        params = (function (addFun, ids, num) {
          const idStr = ids
            .map((item) => item._id || item.id || item)
            .join(",");
          return addFun === "fix"
            ? { getType: "0", ids: idStr }
            : { getType: "1", getCount: num || 10 };
        })(addFun, ids, this.arg.dataNum);
      const promiseArr = !isStatic
        ? api(params)
        : new Promise((resolve) => resolve({ code: 201 }));
      promiseArr.then(({ code, result }) => {
        let firstImg = "";
        const records = (result && result.records) || result || [];
        if (code == 200 && records.length > 0) {
          firstImg = that.decImgDomain(records[0] && records[0].productImg);
          that.goods = records;
        } else {
          const ids = that.arg.ids || [];
          const showIds = ids.length > 0 && typeof ids[0] == "object";
          that.goods = showIds
            ? [...ids]
            : ["1", "2", "3", "4", "5", "6"].map((item) => {
                return {
                  id: "id-" + item,
                  productImg: "",
                  productName: "商品名称-" + item,
                  productDesc: "商品描述-12345",
                  productPrice: "19.9",
                  salePrice: "9.9",
                  shopName: "店铺名-ouyan",
                };
              });
        }
        if (!that.tab.inited) {
          that.tab.inited = true;
          that.tab.selected = that.goods;
        }
        that.initImageSize(firstImg, firstImg === that.firstImg);
        that.firstImg = firstImg;
        this.goodsList = this.listStyleChange(this.arg.listStyle, this.goods);
      });
    },
    initImageSize(url, callback, same) {
      if (same) return callback();
      //计算图片实际宽高-默认1:1的图片
      const img = { height: 200, width: 200 };
      let h1 = variable["@phoneWidth"] - variable["@space"] * 2,
        h2 =
          variable["@phoneWidth"] -
          variable["@space2"] * 2 -
          variable["@lacuna2"] * 4,
        h3 =
          variable["@phoneWidth"] -
          variable["@space2"] * 2 -
          variable["@lacuna2"] * 6,
        h40 = parseInt(h1 * 0.4);

      h2 = parseInt((50 * h2 * img.height) / img.width) / 100;
      h3 = parseInt((33.33 * h3 * img.height) / img.width) / 100;
      const h4 = parseInt(h2 * 5 - variable["@lacuna"] * 5) / 10;
      //确定图片变量值[等高或者是流式布局]
      const imgH1 = h1 + "px",
        imgH2 = h2 + "px",
        imgH3 = h3 + "px",
        imgH4 = h4 + "px",
        imgW = h40 + "px";
      const map2 = ["two", "three", "double"];
      const isFluid = this.arg.layout == "fluid";
      if (map2.includes(this.arg.listStyle) && isFluid) {
        this.imgH1 = "";
        this.imgH2 = "";
        this.imgH3 = "";
        this.imgH4 = "";
        this.imgW = "";
      } else {
        this.imgH1 = imgH1 || this.imgH1;
        this.imgH2 = imgH2 || this.imgH2;
        this.imgH3 = imgH3 || this.imgH3;
        this.imgH4 = imgH4 || this.imgH4;
        this.imgW = imgW || this.imgW;
      }
      // let img = new Image()
      // img.onload = () => {
      //   handler(img, callback)
      // }
      // img.onerror = () => {
      //   handler({ height: 200, width: 200 }, callback)
      // }
      // img.src = url
    },
    listStyleChange(val, res) {
      if (val == "scroll-two") {
        return res.slice(0, 2);
      } else if (val == "scroll-three") {
        return res.slice(0, 3);
      } else if ("join,concat".indexOf(val) > -1) {
        let newRes = [];
        res.forEach((item, i) => {
          if ((i + 1) % 3 == 0) {
            newRes.push({
              big: res[i - 2],
              small: [res[i - 1], item],
            });
          }
        });
        return newRes;
      } else if (["double", "two"].includes(val)) {
        let newRes = { right: [], left: [] };
        res.forEach((item, i) => {
          if ((i + 1) % 2 == 1) {
            newRes.left.push(item);
          } else {
            newRes.right.push(item);
          }
        });
        return newRes;
      } else if (val == "three") {
        let newRes = { right: [], middle: [], left: [] };
        res.forEach((item, i) => {
          if ((i + 1) % 3 == 1) {
            newRes.left.push(item);
          } else if ((i + 1) % 3 == 2) {
            newRes.middle.push(item);
          } else {
            newRes.right.push(item);
          }
        });
        return newRes;
      } else {
        return res;
      }
    },
  },
};
</script>
