<template>
  <view class="box" v-if="ifchoose" @click="close">
    <view class="choosesize" @click.stop="a">
      <scroll-view :scroll-y="true" class="scroll-Y" @scroll="scroll" @click.stop="a">
        <view class="top">
          <!-- <view> -->
          <img :src="shoppic" alt class="shoppic" />
          <view class="btn1" v-if="renshu!=0">{{renshu}}人团</view>
          <view class="price">
            <view class="money">￥{{price}}</view>
            <view class="huaxian">￥{{huaxian}}</view>
          </view>
        </view>

        <!-- </view> -->
        <view class="line"></view>
        <view v-for="(i,j) in tags" :key="j">
          <view class="title">{{i.guige_name}}</view>
          <view class="tags">
            <view
              v-for="(item,key) in i.guige_val_list"
              :key="key"
              :class="tag[j][key]"
              @click="xztag(j,key)"
            >{{item}}</view>
            <!-- <view :class="tag[1]" @click="xztag" data-no="1">儒雅黑</view>
        <view :class="tag[2]" @click="xztag" data-no="2">儒雅黑</view>
        <view :class="tag[3]" @click="xztag" data-no="3">儒雅黑</view>
        <view :class="tag[4]" @click="xztag" data-no="4">儒雅黑</view>
            <view :class="tag[5]" @click="xztag" data-no="5">儒雅黑</view>-->
          </view>
        </view>

        <view class="number">
          <view class="title">
            <text class="zi">数量</text>
          </view>
          <view class="numbox">
            <view class="num">
              <view class="reverse" @click="reverse">
                <img src="../../static/img/reverse.png" alt class="icon" />
              </view>
              <view class="shuliang">{{num}}</view>
              <view class="reverse" @click="add">
                <img src="../../static/img/add1.png" alt class="icon1" />
              </view>
            </view>
          </view>
        </view>
        
      </scroll-view>
      <view class="btns" v-if="shoptype==0">
          <view class="btn1" @click="gwc">加入购物车</view>
          <view class="btn2" @click="buy">立即购买</view>
        </view>
          <view class="btns" v-else-if="shoptype==2">
          <view class="btn3" @click="buy1">立即购买</view>
        </view>
          <view class="btns" v-else-if="shoptype==4">
          <view class="btn3" @click="buy1">立即购买</view>
        </view>
        <view class="btns" v-else>
          <view class="btn3" @click="buy">立即购买</view>
        </view>
    </view>
  </view>
</template>

<script>
import { requestP } from "../../static/js/request";
export default {
  name: "choosesize",
  data() {
    return {
      tag: [],
      num: 1,
      typestr: []
    };
  },
  props: {
    ifchoose: {
      type: Boolean,
      default: false
    },
    renshu: {
      type: Number
    },
    shoppic: {
      type: String
    },
    price: {
      type: Number
    },
    huaxian: {
      type: Number
    },
    tags: {
      // type:Array
    },
    shopid: {
      type: Number
    },
    shoptype: {
      type: Number
    },
    msid: {
      type: Number
    },
    max: {
      type: Number
    },
    kucun: {
      type: Number
    },
    ptid:{
      type:Number
    },
    ptorderid:{
      type:Number
    }
  },
  methods: {
    a() {},
    xztag(e, f) {
      for (let i in this.tags) {
        if (e == i) {
          for (let j in this.tags[i].guige_val_list) {
            // this.tag[i][j] = j == f ? "tag1" : "tag"
            this.$set(this.tag[i], j, j == f ? "tag1" : "tag");
            //    this.$set(this.typestr[i],j-1,this.tags[e].guige_name)
            // this.$set(this.typestr[i],j,this.tags[e].guige_val_list[f])
          }
          for (let m = 0; m < this.typestr.length; m++) {
            if (e == m) {
              // console.log("qwer")
              // console.log(e,i,m)
              this.$set(this.typestr[i], 0, this.tags[i].guige_name + ":");
              this.$set(this.typestr[i], 1, this.tags[e].guige_val_list[f]);
            }
          }
        }
      }

      // console.log(this.typestr.join(','),2000)
      this.$emit("tagchange", this.typestr.join(","));
    },
    reverse() {
      if (this.num <= 1) {
        this.num = 1;
      } else {
        this.num = this.num - 1;
      }
    },
    add() {
      if (this.shoptype == 0) {
        console.log(this.kucun, "kucun");
        if (this.num >= this.kucun) {
          this.num = this.kucun;
        } else {
          this.num = this.num + 1;
        }
      } else if (this.shoptype == 1) {
        console.log(this.max, "max");
        if (this.num >= this.max) {
          this.num = this.max;
        } else {
          this.num = this.num + 1;
        }
      }else if (this.shoptype == 2) {
        console.log(this.kucun, "kucun");
        if (this.num >= this.kucun) {
          this.num = this.kucun;
        } else {
          this.num = this.num + 1;
        }
      }
      // this.num = this.num + 1;
    },
    close() {
      this.$emit("close", false);
    },
    scroll() {},
    gwc() {
      if (this.shoptype == 0) {
        requestP({
          url: "shop_cart/add_cart",
          data: {
            goods_id: this.shopid,
            goods_guige: this.typestr.join(","),
            num: this.num
          }
        }).then(res => {
          console.log(res);
          if (res.data.code == 1) {
            uni.showToast({
              title: "添加成功",
              icon: "success",
              duration: 2000
            });
            uni.navigateTo({
              url: "/pages/shopping/shopping"
            });
          }
        });
        console.log(this.shopid);
      }
    },
    buy(){

      // console.log(this.typestr.join(","),"jiesuan");
      if (this.shoptype == 0) {
        requestP({
          url: "pay/pay_goods",
          data: {
            goods_id: this.shopid,
            num: this.num
          }
        }).then(res => {
          console.log(res);
          if (res.data.code) {
            uni.setStorageSync("ordersubinfo", res.data);
            uni.navigateTo({
              url:
                "/pages/order-sub/order-sub?guige=" +
                this.typestr.join(",") +
                "&shopid=" +
                this.shopid +
                "&num=" +
                this.num+"&shoptype=0"
            });
          }
          console.log(res.data.code, "code");
        });
      } else if (this.shoptype == 1) {
        requestP({
          url: "pay/pay_goods",
          data: {
            goods_ms_id: this.msid,
            num: this.num
          }
        }).then(res => {
          console.log(res);
          if (res.data.code) {
            uni.setStorageSync("ordersubinfo", res.data);
            uni.navigateTo({
              url:
                "/pages/order-sub/order-sub?guige=" +
                this.typestr.join(",") +
                "&msid=" +
                this.msid +
                "&num=" +
                this.num+"&shoptype=1"
            });
          }
          console.log(res.data.code, "code");
        });
      }

      console.log(this.shopid, this.num);
    },

    buy1(){
      console.log("qqweqd")
      if(this.shoptype==2){
          requestP({
          url: "pay/pay_goods_pintuan",
          data: {
            goods_pt_id: this.ptid,
            num: this.num
          }
        }).then(res => {
          console.log(res);
          if (res.data.code) {
            uni.setStorageSync("ordersubinfo", res.data);
            uni.navigateTo({
              url:
                "/pages/order-sub/order-sub?guige=" +
                this.typestr.join(",") +
                "&ptid=" +
                this.ptid +
                "&num=" +
                this.num+"&shoptype=4"
            });
          }
          console.log(res.data.code, "code");
        });
      }else if(this.shoptype==4){
        console.log(this.ptorderid,"ptorderid")
         requestP({
          url: "pay/pay_goods_pintuan",
          data: {
            goods_pt_id: this.ptid,
            num: this.num
          }
        }).then(res => {
          console.log(res);
          if (res.data.code) {
            uni.setStorageSync("ordersubinfo", res.data);
            uni.navigateTo({
              url:
                "/pages/order-sub/order-sub?guige=" +
                this.typestr.join(",") +
                "&ptid=" +
                this.ptid +
                "&num=" +
                this.num+"&shoptype=5&ptorderid="+this.ptorderid
            });
          }
          console.log(res.data.code, "code");
        });
      }
     
    },
  },
  mounted() {
    // conosle.log(this.tags)
    // this.$set(this.typestr[i], 0, this.tags[i].guige_name + ":");
    // this.$set(this.typestr[i], 1, this.tags[e].guige_val_list[f]);
  },
  watch: {
    tags() {
      for (let i in this.tags) {
        this.tag.push([]);
        this.typestr.push([]);
        for (let j in this.tags[i].guige_val_list) {
          console.log("初始");
          this.tag[i].push(j == 0 ? "tag1" : "tag");
        }
      }
      console.log(this.tags, 1112);
      for (let i in this.tags) {
        this.$set(this.typestr[i], 0, this.tags[i].guige_name + ":");
        this.$set(this.typestr[i], 1, this.tags[i].guige_val_list[0]);
        // console.log(this.tags[i].guige_name,this.tags[i].guige_val_list[0])
      }
      console.log(this.typestr, "typestr");
    },
    tag() {}
  }
};
</script>

<style lang="scss">
.box {
  width: 100%;
  height: 100vh;
  position: absolute;
  top: 0;
  z-index: 999;
  background-color: rgba(126, 126, 126, 0.8);
}
.scroll-Y {
  height: 100%;
}
.choosesize {
  width: 100%;
  // height:60%;
  background-color: white;
  position: fixed;
  bottom: 0upx;
  z-index: 999;
  overflow: hidden;
  height: 936rpx;
  .top {
    width: 100%;
    background-color: white;
    display: flex;
    position: relative;
    // justify-content:;
    .shoppic {
      width: 203upx;
      height: 205upx;
      margin-top: 39upx;
      margin: 10upx;
    }
    .btn1 {
      width: 71upx;
      height: 33upx;
      border-radius: 17upx;
      line-height: 33upx;
      text-align: center;
      color: white;
      background-color: #de3449;
      font-size: 16upx;
      margin-left: 6upx;
      margin-right: 14upx;
      position: absolute;
      top: 190rpx;
      left: 262rpx;
    }
    .price {
      display: flex;
      position: relative;
      top: 190upx;
      left: 120upx;
      width: 500upx;
      height: 20rpx;
      .money {
        color: #e32e10;
        font-size: 26upx;
        // position: absolute  ;
        // z-index: 9999;
      }
      .huaxian {
        color: #635b5b;
        font-size: 22upx;
        text-decoration: line-through;
      }
    }
  }
  .line {
    height: 11upx;
    width: 100%;
    margin-top: 19upx;
    background-color: #fbffde;
  }
  .title {
    color: #6a6a6a;
    font-size: 28upx;
    margin-top: 29upx;
    margin-left: 59upx;
    margin-bottom: 45upx;
    .zi {
      position: relative;
      top: 8upx;
    }
  }
  .tags {
    width: 700upx;
    display: flex;
    // justify-content: space-between;
    margin-left: 53upx;
    flex-wrap: wrap;
    .tag {
      // width: 119upx;
      height: 53upx;
      border: 2upx solid #d2d2d2;
      color: #999999;
      font-size: 26upx;
      line-height: 53upx;
      text-align: center;
      margin-right: 53upx;
      border-radius: 27upx;
      margin-bottom: 20upx;
      padding-left: 23upx;
      padding-right: 23upx;
    }
    .tag1 {
      // width: 119upx;
      padding-left: 23upx;
      padding-right: 23upx;
      height: 53upx;
      border: 2upx solid #de3449;
      color: #b3304e;
      background-color: #fae7ea;
      font-size: 26upx;
      line-height: 53upx;
      text-align: center;
      margin-right: 53upx;
      border-radius: 27upx;
      margin-bottom: 20upx;
    }
  }
  .numbox {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .number {
    display: flex;
    justify-content: space-between;
    margin-top: 24rpx;
    margin-bottom: 145upx;
    .num {
      width: 240upx;
      height: 68upx;
      margin-right: 33upx;
      display: flex;
      .reverse {
        width: 68upx;
        height: 68upx;
        display: flex;
        flex-direction: column;
        justify-content: center;
        border: 2upx solid #dcdcdc;
        .icon {
          width: 25upx;
          height: 3upx;
          margin-left: 22upx;
        }
        .icon1 {
          width: 25upx;
          height: 25upx;
          margin-left: 22upx;
        }
      }
      .shuliang {
        width: 108upx;
        height: 68upx;
        border: 2upx solid #dcdcdc;
        line-height: 68upx;
        text-align: center;
        color: #333333;
        font-size: 34upx;
      }
    }
  }
  .btns {
    height: 107upx;
    width: 100%;
    border-top: 1upx solid #eeeeee;
    background-color: #fff;
    display: flex;
    justify-content: space-around;
    // margin-top: -123rpx;
    position: absolute;
    z-index: 99999;
    bottom: 0;
    // top: 1053upx;
    .btn1 {
      width: 325upx;
      height: 72upx;
      border: 1upx solid #de3449;
      margin: auto 0;
      font-size: 28upx;
      color: #de3449;
      line-height: 72upx;
      text-align: center;
    }
    .btn2 {
      width: 325upx;
      height: 72upx;
      background-color: #de3449;
      // border:1upx solid #DE3449;
      margin: auto 0;
      font-size: 28upx;
      color: white;
      line-height: 72upx;
      text-align: center;
    }
    .btn3 {
      width: 600upx;
      height: 72upx;
      background-color: #de3449;
      // border:1upx solid #DE3449;
      margin: auto 0;
      font-size: 28upx;
      color: white;
      line-height: 72upx;
      text-align: center;
    }
  }
}
</style>