<template>
  <div>
    <navbar1
      :logopangzi="logopangzi"
      :gouwuchenum="gouwuchenum"
      :loginmsg="loginmsg"
    ></navbar1>
    <div class="gwccontent">
      <!-- <topjiesuan :sumprice=sumprice></topjiesuan> -->
      <div>
        <div class="top-jiesuan">
          <span>全部商品</span>
          <div>
            <span>已选商品价格：</span>
            <span>{{ sumprice.toFixed(2) }}</span>
            <button>结算</button>
          </div>
        </div>
        <div class="xian"></div>
        <div class="jsbiaotou">
          <div class="jsbtleft">
            <p>商品信息</p>
          </div>
          <div class="jsbtright">
            <p>单价</p>
            <p>数量</p>
            <p>金额</p>
            <p>操作</p>
          </div>
        </div>
      </div>
      <el-checkbox-group v-model="selected" @change="selectone">
        <gouwuchelist
          v-for="(shangpin, index) in shangpinlist"
          :shangpin="shangpin"
          :key="index"
          :index="index"
          @xz="xuanzhong"
          @add="addnum"
        ></gouwuchelist>
      </el-checkbox-group>

      <div class="bottom-jiesuan">
        <div class="js-right">
          <div class="js-right-right">
            <el-checkbox v-model="checkAll" @change="selectall"
              >全选</el-checkbox
            >
            <a href="">删除</a>
            <a href="">移入收藏夹</a>
            <a href="">分享</a>
          </div>
          <div class="js-right-left">
            <p>
              已选商品<span>{{ sumnum }}</span
              >件
            </p>
            <p>
              合计（不含运费）：<span>{{ sumprice.toFixed(2) }}</span>
            </p>
          </div>
        </div>
        <div class="js-left">
          <p>结算</p>
        </div>
      </div>
      <!-- <bottomjiesuan :sumnum=sumnum :sumprice=sumprice class="bottomjiesuan"></bottomjiesuan> -->
    </div>
  </div>
</template>

<script>
import navbar1 from "../components/navbar1";
// import topjiesuan from "../components/topjiesuan"
import gouwuchelist from "../components/gouwuchelist";
// import bottomjiesuan from "../components/bottomjiesuan"

export default {
  name: "gouwuche",
  data() {
    return {
      logopangzi: "购物车",
      gouwuchenum: 0,
      loginmsg: "返回首页",
      sumprice: 0.0,
      sumnum: 0,
      shangpinlist: [
        {
          dianpuname: "xxx店铺",
          shangpinname:
            "珊瑚绒睡衣女士春秋冬季长袖韩版法兰绒加厚可爱冬天家居服套装",
          yuanjia: 50.0,
          xianjia: 11.9,
          num4: 1,
          img: "1",
          ahrsf: "",
          canshulist: [
            {
              canshuname: "颜色分类",
              canshuvalue: "咖啡爱心",
            },
            {
              canshuname: "尺码",
              canshuvalue: "（170）xxl",
            },
          ],
        },
        {
          dianpuname: "xxx店铺",
          shangpinname:
            "珊瑚绒睡衣女士春秋冬季长袖韩版法兰绒加厚可爱冬天家居服套装",
          yuanjia: 50.0,
          xianjia: 13.9,
          num4: 1,
          img: "2",
          ahrsf: "",
          canshulist: [
            {
              canshuname: "颜色分类",
              canshuvalue: "咖啡爱心",
            },
            {
              canshuname: "尺码",
              canshuvalue: "（170）xxl",
            },
          ],
        },
        {
          dianpuname: "xxx店铺",
          shangpinname:
            "珊瑚绒睡衣女士春秋冬季长袖韩版法兰绒加厚可爱冬天家居服套装",
          yuanjia: 50.0,
          xianjia: 198.9,
          num4: 1,
          img: "",
          ahrsf: "",
          canshulist: [
            {
              canshuname: "颜色分类",
              canshuvalue: "咖啡爱心",
            },
            {
              canshuname: "尺码",
              canshuvalue: "（170）xxl",
            },
          ],
        },
      ],
      checkAll: false,
      selected: [],
      checkindex: 0,
      xzdata: [],
      shopnums:[]
    };
  }, 
  mounted(){
    for(let i in this.shangpinlist){
      this.shopnums.push(this.shangpinlist[i].num4)
    }
    console.log(this.shopnums)
  },
  components: {
    navbar1,
    // topjiesuan,
    gouwuchelist,
    // bottomjiesuan,
  },

  methods: {
    addnum(e) {
      console.log(e,this.shangpinlist[this.checkindex].num4)
      this.shopnums[e[1]]=e[0]
      // this.shangpinlist[this.checkindex].num4=e
      console.log(this.shopnums)
    },
    selectone(e) {
      console.log(e, "selectone");
      // for(let )
      // this.sumnum=this.s
    },
    xuanzhong(e) {
      console.log(e, "xuanzhong");
      this.xzdata = e;
      if (e[1]) {
        // console.log(this.shangpinlist[this.checkindex],"indexknnsk")
        this.sumprice = parseFloat(this.sumprice + e[0]);
        this.sumnum=this.sumnum+this.shopnums[this.checkindex]
      } else {
        this.sumprice = parseFloat(this.sumprice - e[0]);
        this.sumnum=this.sumnum-this.shopnums[this.checkindex]
      }

      //   this.selected.push(e)
    },
    selectall(e) {
      console.log(e);
      if (e) {
        for (let i in this.shangpinlist) {
          //   this.selected[i]=this.shangpinlist[i].xianjia;
          this.selected.push(this.shangpinlist[i].xianjia);
          this.sumprice = parseFloat(
            this.sumprice + this.shangpinlist[i].xianjia
          );
          //   this.zong = this.zong + this.shangpinlist[i].xianjia;
        }
        console.log(this.selected);
        // console.log(this.checkedlist);
      } else {
        this.selected = [];
        console.log(this.selected);
        this.sumprice = 0;
        // this.zong = 0;
      }
    },
  },
};
</script>

<style>
.bottom-jiesuan {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 10px 0px;
  margin: 0 auto;
  background-color: #e5e5e5;
  width: 98%;
  height: 40px;
}
.js-right {
  display: flex;
  justify-content: space-between;
  width: 90%;
  padding-left: 10px;
}

.js-right a {
  margin-left: 30px;
  color: black;
}
.js-right a:hover {
  color: #e2231a;
}
.js-right-left {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
}
.js-right-left p {
  margin-left: 20px;
}
.js-right-left span {
  font-size: 18px;
  font-weight: bold;
  color: #e2231a;
  margin: 0 5px;
}
.js-left p {
  /* margin-right: 20px; */
  line-height: 18px;
  font-size: 18px;
  color: white;
  margin: auto 0;
  margin-top: 12px;
  margin-left: 20px;
}
.js-left {
  background-color: #b0b0b0;
  width: 80px;
  height: 40px;
}

.top-jiesuan {
  display: flex;
  justify-content: space-between;
  padding: 10px 30px;
}
.top-jiesuan span:nth-child(1) {
  color: #e2231a;
  font-size: 20px;
  font-weight: bold;
}
.top-jiesuan div span:nth-child(1) {
  color: black;
  font-size: 15px;
  font-weight: normal;
}
.top-jiesuan div span:nth-child(2) {
  color: #e2231a;
  font-size: 20px;
  font-weight: 500;
  margin-right: 10px;
}
.top-jiesuan button {
  border-radius: 0;
  right: 0;
  width: 50px;
  height: 25px;
  line-height: 25px;
  border: none;
  background-color: #e1251b;
  font-size: 15px;
  font-weight: 500;
  color: #fff;
}
.top-jiesuan button:hover {
  background-color: #bd1108;
}
.xian {
  width: 95%;
  height: 1px;
  background-color: rgb(209, 208, 208);
  margin: 0 auto;
  margin-bottom: 5px;
}
.jsbiaotou {
  padding: 10px 30px;
  display: flex;
  justify-content: space-between;
  font-size: 13px;
}
.jsbiaotou .jsbtleft {
  display: flex;
  justify-content: start;
}
.jsbiaotou .jsbtright {
  display: flex;
  justify-content: start;
  margin-right: 50px;
}
.jsbiaotou .jsbtleft p:last-child {
  margin-left: 50px;
}
.jsbiaotou .jsbtright p {
  margin-left: 100px;
}
.el-checkbox:checked .el-checkbox__label {
  color: #e2231a !important;
}

.gwccontent {
  background-color: white;
  width: 80%;
  margin: 0 auto;
  margin-top: 20px;
  padding-bottom: 10px;
  margin-bottom: 20px;
}
.bottomjiesuan {
  margin: 0 auto;
  margin-top: 20px;
}
</style>