<template>
  <div class="zl_Detail">
    <div class="details-head">
      <div class="head_top clr">
        <div class="head_top_left fl">
          <img :src="goodDetail.brand_logo||'https://www.ichunt.com/v3/dist/res/m/images/materiel_img_3.png'" @onerror="imgErr"    @click="showImagePreview">
        </div>
        <div class="head_top_right">
          <h4>
            <strong>{{goodDetail.sku_name}}</strong>
          </h4>
          <p class="icon-hint"></p>
        </div>
      </div>
      <ul class="head_bottom clr">
        <li class="fl">
          <b>型号</b>
          <span>{{goodDetail.goods_name}}</span>
        </li>
        <li class="fl">
          <b>供应商</b>
          <span>{{goodDetail.supplier_name}}</span>
        </li>
        <li class="fl">
          <b>制造商</b>
          <span>{{goodDetail.brand_name}}</span>
        </li>
        <li class="fl">
          <b>封装</b>
          <span>{{goodDetail.encap?goodDetail.encap:'--'}}</span>
        </li>
        <li class="fl">
          <b>类别</b>
          <span>{{goodDetail.class2_name}}</span>
        </li>
        <li class="fl">
          <b>起订量</b>
          <font class="f-orange" v-html="goodDetail.min_buy?goodDetail.min_buy:'1'"></font>
          {{goodDetail.goods_unit_name}}
        </li>
        <li class="fl">
          <b>倍数</b>
          <font class="f-orange" v-html="goodDetail.mpl?goodDetail.mpl:'1'"></font>
          {{goodDetail.goods_unit_name}}
        </li>
        <li class="fl">
          <b v-html="'一'+goodDetail.mpq_unit_name"></b>
          <span
            class="f-orange"
            v-html="(goodDetail.min_mpq?goodDetail.min_mpq:'0')+goodDetail.goods_unit_name"
          ></span>
        </li>
        <li class="fl">
          <b class>库存</b>
          <font class="f-orange" v-html="goodDetail.goods_number?goodDetail.goods_number:'0'"></font>
          {{goodDetail.goods_unit_name}}
        </li>
        <li class="fl">
          <b class="f-orange">国内现货，当天发货</b>
        </li>
        <li
          class="fl"
          style=" width: 100%; overflow:hidden;text-overflow:ellipsis;white-space: nowrap;color: #999;"
          v-if="goodDetail.sku_name"
        >描述：{{goodDetail.sku_name}}</li>
      </ul>
    </div>
    <div class="details-cont" style="top: 210px;">
      <div class="gradient">
        <table>
          <tbody>
            <tr>
              <template v-if="goodDetail.ac_type == 1">
                <th class="xs-3">数量</th>
                <th class="xs-3">原价(含税)</th>
                <th class="xs-3">抢购价(含税)</th>
              </template>
              <template v-if="goodDetail.ac_type == 2 || goodDetail.ac_type == 3">
                <th class="xs-3">数量</th>
                <th class="xs-3">原价(含税)</th>
                <th class="xs-3">优惠价(含税)</th>
              </template>
              <template v-else>
                <th class="xs-6">数量</th>
                <th class="xs-6">人民币</th>
              </template>
            </tr>
          </tbody>
          <tbody>
            <template v-if="goodDetail.tiered">
              <tr v-for="(v,k) in goodDetail.tiered" v-if="k<3||isShowMore">
                <template
                  v-if="goodDetail.ac_type == 1 || goodDetail.ac_type == 2 || goodDetail.ac_type == 3"
                >
                  <td class="xs-3">
                    <span v-html="v.purchases+'+'"></span>
                  </td>
                  <td class="xs-3">
                    <span v-html="'￥'+v.price_cn"></span>
                  </td>
                  <td class="xs-3">
                    <span v-html="'￥'+v.price_ac"></span>
                  </td>
                </template>
                <template v-else>
                  <td class="xs-6">
                    <span v-html="'￥'+v.purchases"></span>
                  </td>
                  <td class="xs-6">
                    <span v-html="'￥'+v.price_cn"></span>
                  </td>
                </template>
              </tr>
            </template>
          </tbody>
        </table>
        <template v-if="goodDetail.tiered">
          <div
            class="zkxk"
            v-if="goodDetail.tiered.length>3&&!isShowMore"
            @click="isShowMore=!isShowMore"
          >
            更多梯度价格
            <i class="icon-bot"></i>
          </div>
          <div class="zkxk" v-if="isShowMore" @click="isShowMore=!isShowMore">
            收起梯度价格
            <i class="icon-top"></i>
          </div>
        </template>
      </div>
      <div class="price">
        <dl class="clr">
          <dt>购买形式</dt>
          <dd class="tab">
            <span
              v-html="'按'+goodDetail.goods_unit_name+'购买'"
              :class="{'act':navInit==0}"
              @click="changeNav(0)"
            ></span>
            <span
              v-html="'按'+goodDetail.mpq_unit_name+'购买'"
              :class="{'act':navInit==1}"
              @click="changeNav(1)"
            ></span>
          </dd>
        </dl>
        <dl class="clr">
          <dt>
            数
            <span class="em1"></span>量
          </dt>
          <dd class="details-num">
            <div class="number">
              <template v-if="navInit==0">
                <i class="iconfont icon-jian" @click="reduceSingle"></i>
                <input type="text" v-model.trim="goodsNum" @blur="blurSingle">
                <i class="iconfont icon-jia" @click="addSingle"></i>
              </template>
              <template v-else>
                <i class="iconfont icon-jian" @click="reduceZu"></i>
                <input type="text" v-model.trim="ypNum" @blur="blurZu">
                <i class="iconfont icon-jia" @click="addZu"></i>
              </template>
              <div class="zyqhcbox" style="display: block;">
                <div class="zyqhc clr">
                  <div class="lfldiv fl">
                    <font class="icon iconfont icon-tishi fl"></font>
                  </div>
                  <div class="lfrdiv fr">{{tipText}}</div>
                </div>
                <b class="bbiu"></b>
                <b class="bbiu1"></b>
              </div>
            </div>
          </dd>
        </dl>
        <dl class="clr">
          <dt>
            单
            <span class="em1"></span>价
          </dt>
          <dd class="onePrice">¥{{singlePrice}}</dd>
        </dl>
        <dl class="clr">
          <dt>
            合
            <span class="em1"></span>计
          </dt>
          <dd class="totalPrice">¥{{total}}</dd>
        </dl>
      </div>
    </div>
    <div class="details-foot">
      <span class="but-blue" @click="xdOrAdd('1')">{{btnText}}</span>
      <span class="but-red" @click="xdOrAdd('2')">加入购物车</span>
    </div>
  </div>
</template>
<script>
import util from "../../util/index";
import Vue from 'vue'
import { ImagePreview } from 'vant';
Vue.use(ImagePreview);

export default {
  props: {
    goodDetail: {
      type: Object,
      default() {
        return {};
      }
    }
  },
  data() {
    return {
      images:[],
      isShowMore: false,
      ypNum: 0, //组
      singlePrice: 0, //单价
      tipText: "",
      btnText: "",
      navInit: 0,
      startNum: 0, //起订量
      multipleNum: 0, //倍数
      aggregateNum: 0, //一组的数量
      stockNum: 0, //库存，
      zyladderArr: [], //阶梯价
      zySingleInit: 0, //自营数量初始值
      goodsNum: 0 //商品数量
    };
  },
  computed: {
    total() {
      return (this.goodsNum * this.singlePrice).toFixed(4);
    }
  },
  watch: {
    ypNum(now) {
      if (String(now).indexOf(".") > 0) this.ypNum = "";
      this.ypNum = String(now).replace(/\D/g, "");
      this.goodsNum = now * this.aggregateNum;
    },
    "goodDetail.goods_id"() {
      let data = this.goodDetail;
      if (JSON.stringify(data) != "{}") {
        if (
          this.goodDetail.goods_type == 3 ||
          this.goodDetail.goods_type == 4
        ) {
          if (data.min_buy) {
            this.startNum = util.aggxde(data.min_buy);
          }
          if (data.mpl) {
            this.multipleNum = util.aggxde(data.mpl);
          }
          if (data.min_mpq) {
            this.aggregateNum = util.aggxde(data.min_mpq);
          }
          if (data.goods_number) {
            this.stockNum = util.aggxde(data.goods_number);
          }
          if (this.startNum == this.multipleNum) {
            //倍数和起订量相等
            this.zySingleInit = this.startNum;
          } else if (this.startNum > this.multipleNum) {
            //起订量大于倍数
            if (this.startNum % this.multipleNum) {
              //起订量跟倍数的比值为小数
              this.zySingleInit =
                Math.ceil(this.startNum / this.multipleNum) * this.multipleNum;
            } else {
              //起订量跟倍数的比值为整数时取起订量
              this.zySingleInit = this.startNum;
            }
          } else {
            //起订量小于倍数
            this.zySingleInit = this.multipleNum;
          }
          if (data.tiered) {
            for (let i = 0; i < data.tiered.length; i++) {
              let singleData = data.tiered[i];
              this.zyladderArr.push({
                price: Number(singleData.price_cn).toFixed(4),
                num: util.aggxde(singleData.purchases)
              });
            }
          }
        }
      }
    },
    goodsNum(now) {
      if (String(now).indexOf(".") > 0) this.goodsNum = "";
      this.goodsNum = String(now).replace(/\D/g, "");
      this.ladderComputer(now);
      if (Number(now) > this.stockNum) {
        this.tipText = "库存不足，下单后我们将帮您订货";
          if(this.goodDetail.ac_type == 6){
             this.$toast("想要购买更多，请联系客服");
            var maxNum;
            var inputVal;
            if(this.navInit==1){
              inputVal = this.ypNum||0
                if(inputVal!==0||inputVal!==1){
                    maxNum = inputVal-1;

                }else{
                    maxNum = inputVal
                }
                this.ypNum = maxNum; 
            }else{
              inputVal =this.goodsNum||0;
                if(inputVal!==0||inputVal!==(this.multipleNum||this.startNum)){
                    maxNum = Math.floor(this.stockNum/(this.multipleNum||this.startNum))*(this.multipleNum||this.startNum)
                    
                }else{
                    maxNum = inputVal
                }
                this.goodsNum = maxNum; 
            }      
        }else{
            this.btnText = "预售订货";
        }

      } else {
        this.tipText = "想要购买更多？直接下单，我们帮您订货";
        this.btnText = "立即购买";
      }
    },
    zySingleInit(now) {
      this.goodsNum = now;
    }
  },
  methods: {
    showImagePreview(position, timer) {
      let images = [this.goodDetail.brand_logo||'https://www.ichunt.com/v3/dist/res/m/images/materiel_img_3.png']
      const instance = ImagePreview({
        images,
        asyncClose: !!timer,
        showIndex:false
      });
      if (timer) {
        setTimeout(() => {
          instance.close();
        }, timer);
      }
    },
    imgErr() {
      this.goodDetail.brand_logo =
        "https://www.ichunt.com/v3/dist/res/m/images/materiel_img_3.png";
    },
    changeNav(i) {
      this.navInit = i;
      if (i == 1) {
        if (this.goodsNum % this.aggregateNum) {
          //如果商品数量除以组数不为整数
          this.ypNum = Math.ceil(this.goodsNum / this.aggregateNum);
        } else {
          //如果商品数量除以组数为整数
          this.ypNum = Number(this.goodsNum) / this.aggregateNum;
        }
      }
    },
    ladderComputer(v) {
      //阶梯价计算价格v
      let length = this.zyladderArr.length;
      if (!length) {
        //阶梯价的数据为空
        this.singlePrice = 0;
        return;
      } else {
        //阶梯价的数据不为空
        if (length == 1) {
          //阶梯价的数据为1
          this.singlePrice = this.zyladderArr[0].price;
          return;
        } else {
          //阶梯价的数据不为1
          if (v <= this.zyladderArr[0].num) {
            //输入数量小于等于最小值
            this.singlePrice = this.zyladderArr[0].price;
            return;
          } else if (v >= this.zyladderArr[length - 1].num) {
            //输入数量大于等于最大值
            this.singlePrice = this.zyladderArr[length - 1].price;
            return;
          } else {
            for (let i = 0; i < this.zyladderArr.length; i++) {
              if (
                v >= this.zyladderArr[i].num &&
                v < this.zyladderArr[i + 1].num
              ) {
                this.singlePrice = this.zyladderArr[i].price;
                break;
              }
            }
          }
        }
      }
    },
    blurSingle() {
      //购买数量为0
      if (!Number(this.goodsNum)) {
        this.$toast("购买数量不能少于起订量！");
        this.goodsNum = this.zySingleInit;
      } else {
        //购买数量不为0
        if (Number(this.goodsNum) % this.multipleNum) {
          //当购买数量不是倍数的整数倍
          let num =
            Math.ceil(Number(this.goodsNum) / this.multipleNum) *
            this.multipleNum;
          if (num < this.startNum) {
            //取倍数的整数后小于起订量
            this.$toast(
              `购买数量必须为${this.multipleNum}的整数倍且不能少于起订量！`
            );
            this.goodsNum = this.zySingleInit;
          } else {
            //取倍数的整数后不小于起订量
            this.$toast(
              `购买数量必须为${
                this.multipleNum
              }的整数倍，我们已为您调整购买数量。`
            );
            this.goodsNum = num;
          }
        } else {
          if (Number(this.goodsNum) < this.zySingleInit) {
            this.$toast(
              `购买数量必须为${this.multipleNum}的整数倍且不能少于起订量！`
            );
            this.goodsNum = this.zySingleInit;
          }
        }
      }
    },
    blurZu() {
      if (Number(this.goodsNum) * Number(this.aggregateNum) < this.startNum) {
        this.$toast("购买数量不能少于起订量！");
        this.ypNum = Math.ceil(this.startNum / this.aggregateNum);
      }
    },
    reduceSingle() {
      if (Number(this.goodsNum) <= this.startNum) {
        //购买数量小于等于起订量
        this.$toast("购买数量不能少于起订量！");
      } else {
        //购买数量大于起订量
        if (Number(this.goodsNum) - this.multipleNum < this.startNum) {
          //购买数量减倍数小于起订量
          this.$toast(
            `购买数量必须为${this.multipleNum}的整数倍且不能少于起订量！`
          );
        } else {
          this.goodsNum = Number(this.goodsNum) - this.multipleNum;
        }
      }
    },
    addSingle() {
      this.goodsNum = Number(this.goodsNum) + this.multipleNum;
    },
    reduceZu() {
      if (Number(this.goodsNum) <= this.startNum) {
        return;
      } else {
        this.ypNum = Number(this.ypNum) - 1;
      }
    },
    addZu() {
      this.ypNum = Number(this.ypNum) + 1;
    },
    xdOrAdd(type) {
      let datax = {
        id: this.goodDetail.goods_id,
        num: this.goodsNum,
        buy: type == 1 ? 1 : -1,
        searchModel: this.$route.query.k || "",
        module_name: this.goodDetail.module_name || "",
        click_adtag: this.$route.query.adtag || this.$route.query.ptag || "",
        click_ptag: util.getCookie("ptag") || ""
      };
        util.setCookie("ptag","pop-"+window.location.href,1)     
      if (type == 1) {
        //立即购买
        try {
          sensors.track("brandList", {
            click_ptag: this.goodDetail.module_name || "",
            click_adtag:
              this.$route.query.adtag || this.$route.query.ptag || "",
            element_name: "立即购买",
            click_account: this.goodDetail.account_name || "",
            brand_id: this.goodDetail.brand_id || "",
            class_id: this.goodDetail.class_id || "",
            supplier_id: this.goodDetail.supplier_id || ""
          });
        } catch (e) {}
      } else {
        //加入购物车
        try {
          sensors.track("brandList", {
            click_ptag: this.goodDetail.module_name || "",
            click_adtag:
              this.$route.query.adtag || this.$route.query.ptag || "",
            element_name: "加入购物车",
            click_account: this.goodDetail.account_name || "",
            brand_id: this.goodDetail.brand_id || "",
            class_id: this.goodDetail.class_id || "",
            supplier_id: this.goodDetail.supplier_id || ""
          });
        } catch (e) {}
      }
      this.$store.dispatch({
        type: "addGoods",
        data: { datax: datax, type: 1, k: this.$route.query.k || "" } //1表示自营 2表示联营
      });
    }
  }
};
</script>

<style lang="scss">
@import "../../assets/css/zyly/zyly.scss";
</style>