<template>
  <div>
    <Myheader></Myheader>
    <div class="rc-top"></div>
    <tabs :crumbs="crumbs"></tabs>
	
    <div class="rc-main rc-max-width--xl">
      <div class="cart-list">
        <div class="header">
          <div class="list-left">
            <label class="check-label" style="visibility: hidden;">
              <input type="checkbox" v-model="checkAll" />
            </label>
            <span class="name">商品</span>
          </div>
          <ul>
            <li>单价</li>
            <li>数量</li>
            <li>操作</li>
          </ul>
        </div>
        <div class="header_ph">
          <el-row>
            <el-col :span="12">
              <div class="list-left" style="visibility: hidden;">
                <label class="check-label">
                  <input type="checkbox" v-model="checkAll" />
                </label>
                <span class="name">全选</span>
              </div>
            </el-col>
            <el-col :span="12" class="tr">
              <span @click="editList()"
                ><i class="el-icon-edit"></i>{{ editState }}</span
              ></el-col
            >
          </el-row>
        </div>
        <div class="list" v-for="(item, index) in cartData" :key="index">
          <div class="list-left">
            <label class="check-label">
              <input type="checkbox" v-model="item.checked" />
            </label>
            <div class="product">
              <div class="product-img">
                <img :src="item.productImg" alt="" />
              </div>
              <div class="right">
                <p class="product-title" v-text="item.productName"></p>
                <p class="specifications">规格：{{ item.specifications }}</p>
              </div>
            </div>
          </div>
          <ul>
            <li class="product-price">￥{{ item.productPrice }}</li>
            <li>
              <div class="rc-jia">
                <img
                  src="../../assets/image/userjian.png"
                  alt=""
                  @click="sub(item.buyCount, index)"
                />
                <input type="text" v-model="item.buyCount" />
                <img
                  src="../../assets/image/userjia.png"
                  alt=""
                  @click="plus(item.buyCount, index)"
                />
              </div>
            </li>
            <li class="del"><em @click="userdele(item)">删除</em></li>
          </ul>
        </div>
      </div>

      <div class="rc-footera">
        <div class="rc-foote">
          <div class="rc-shop">
            <label style="visibility: hidden;">
              <input type="checkbox" v-model="checkAll" />
              全选
            </label>
          </div>
          <div class="rc-delete">
            <div class="rc-num">
              <div class="rc-usernum">
                <div class="rc-usea">
                  <i>总计:</i>
                  <span>{{ sumPrice }}</span>
                </div>
                <em>共选择{{ sumlength }}件商品</em>
              </div>

              <strong @click="usejiesuan()">{{ mustpay }}</strong>
            </div>
          </div>
        </div>
        <!-- <div class="rc-shop">
            <i>总计:</i>
            <span>{{ ordersum }}</span>
          </div>
          <div class="rc-delete">
            <span>
              {{ userdelete }}
            </span>
          </div> -->
      </div>
    </div>
      <MyFooter></MyFooter>
  </div>
</template>

<script>
import Myheader from "~/components/header.vue";
import MyFooter from '~/components/rc-footer.vue'
import tabs from "@/components/tabs.vue";
import { mapMutations } from "vuex";
import { isexistCart, generateOrderWX, deleteCart } from "../../ajax/getData";
export default {
  middleware: "metaTitle",
  meta: { title: "购物车" },
  data() {
    return {
		crumbs:[
			{
				path:'/productdetails/productlist/',
			},
			{
				path:'/myorder/userrecord/'
			}
		],
      ordersum: 1,
      usercheckbox: false,
      shopnum: 0,
      checkAllFlag: false, //是否全选
      checkone: false,
      ys1: true,
      ys2: true,
      userdelete: "结算",
      orderprice: "￥199.00",
      mustpay: "立即结算",
      editState: "编辑",
      dellist: [],
      totalMoney: "",
      allChecked: false,
      userid: null,
      cartData: [
        // {
        //   buyCount: 3,
        //   id: 1,
        //   memberId: "1",
        //   productCode: "432434",
        //   productImg: require("../../assets/image/rc-select.png"),
        //   productName: "测试商品",
        //   productPrice: 399.0,
        //   specifications: "5KG",
        //   checked: false,
        // },
        // {
        //   buyCount: 1,
        //   id: 2,
        //   memberId: "2",
        //   productCode: "432434",
        //   productImg: require("../../assets/image/rc-select.png"),
        //   productName: "测试商品222",
        //   productPrice: "199.00",
        //   specifications: "5KG",
        //   checked: true,
        // },
        // {
        //   buyCount: 4,
        //   id: 3,
        //   memberId: "3",
        //   productCode: "432434",
        //   productImg: require("../../assets/image/rc-select.png"),
        //   productName: "测试商品3333",
        //   productPrice: 69.01,
        //   specifications: "5KG",
        //   checked: true,
        // },
      ],
    };
  },
  mounted() {
    this.carmessage();
	this.checkIsLogin();
  },

  components: {
    Myheader,
    tabs,
    MyFooter
  },
  methods: {
    //请求猫
	...mapMutations(["checkIsLogin"]),
    async carmessage() {
      let user = this.$store.state.userInfo;
      this.userid = user.data.id;
      let data = await isexistCart(user.data.id);
      this.cartData = data;
      // this.goldmedal = data;
    },
    async userjie(list) {
      let user = this.$store.state.userInfo;
      this.userid = user.data.id;
      let data = await generateOrderWX(list);
      if (data) {
        this.$message({
          type: "warning",
          message: data.msg,
        });
        this.$router.push({
          path: "/personal/settlement",
          query: {
            wxdata: data.data,
          },
        });
      }
    },

    //删除购物车
    async deletsmessage(productCode) {
      let user = this.$store.state.userInfo;
      this.userid = user.data.id;
      let data = await deleteCart( productCode);
      if (data) {
        this.$message({
          type: "warning",
          message: data.msg,
        });
        this.carmessage();
      }
    },

    editList() {
      if (this.editState == "完成") {
        this.mustpay = "立即结算";
        this.editState = " 编辑";
      } else {
        this.mustpay = "删除";
        this.editState = "完成";
      }
    },
    //   checkBox(){

    // console.log(event.target.checked)
    // this.usercheckbox=event.target.checked;
    //     this.goldmedal.forEach(item => {
    //                         item.checked = this.usercheckbox
    //                     });
    // },

    userdele(item) {
      let delform = [];
      if (item.length > 0) {
        delform = item;
      } else {
        delform = [item.productCode];
      }
      this.$confirm("确定删除", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "success",
        callback: (action) => {
          if (action === "confirm") {
            this.deletsmessage(delform);
          }
        },
      });
      // this.$message({
      //     type: "warning",
      //     message: data.msg,
      //   });
    },
    plus(num, index) {
      this.cartData[index].buyCount =
        parseInt(this.cartData[index].buyCount) + 1;
    },
    // 数量减方法
    sub(num, index) {
      if (parseInt(num) <= 1) {
        this.cartData[index].buyCount = 1;
      } else {
        this.cartData[index].buyCount =
          parseInt(this.cartData[index].buyCount) - 1;
      }
    },

    // 求总价

    useredit(e) {
      this.ys1 = !this.ys1;
      if (this.ys1 == false) {
        this.$nextTick(() => {
          this.userdelete = "删除";
        });
      } else if (this.ys1 == true) {
        this.$nextTick(() => {
          this.userdelete = "结算";

          console.log(this.userdelete);
        });
      }

      if (this.userdelete == "删除") {
      }
    },
    usejiesuan() {
      // let procode = [];
      // let list = [];
      // let menulist = [];
      // this.cartData.filter((item) => {
      //   if (item.checked) {
      //     list.push(item);
      //     console.log(item);
      //     procode.push(item.productCode);
      //   } else {
      //     list.splice(index, 1);
      //   }
      // });
      // let list = [];
      // list = this.cartData.filter((item) => item.checked);

      // list.forEach((item) => {
      //   menulist.push({
      //     productName: item.productName,
      //     buyCount: item.buyCount,
      //     productId: item.productCode,
      //     payAmount: item.productPrice,
      //     memberId: item.memberId,
      //     phoneNumber: item.mobile,
      //   });
      // });
      let list = [];
      list = this.cartData.filter((item) => item.checked);
      if (list.length == 0) {
        this.$message({
          type: "warning",
          message: "你还未选择商品",
        });
        return;
      } else {
        if (this.editState == "完成") {
          let delList = [];
          list.forEach((item) => {
            delList.push(item.productCode);
          });
          this.userdele(delList);
        
        } else {
          this.$router.push({
            path: "/personal/settlement",
            query: {
              list: JSON.stringify(list),
            },
            // params: { test:'222'},
          });
        }
      }

      //         list=[
      //           {
      // "productName":"幼猫全价粮",
      // "buyCount":"2",
      // "productId":"210352",
      // "payAmount":"517",
      // "memberId":"844350",
      // "phoneNumber":"18112621098"
      // },
      //           {
      // "productName":"幼猫全价粮",
      // "buyCount":"2",
      // "productId":"210352",
      // "payAmount":"517",
      // "memberId":"844350",
      // "phoneNumber":"18112621098"
      // }
      //         ]

      // instance
      //   .post(`generateOrderWX`, list, configs)
      //   .then((res) => {
      //     console.log(res);
      //   });
    },

    //              async userdelete(item) {

    //       let data = await isexistCart( this.userid,);

    // },
  },
  computed: {
    checkAll: {
      // 设置值,当点击全选按钮的时候触发
      set(v) {
        this.cartData.forEach((item) => {
          item.checked = v;
        });
      },
      // 取值,当列表中的选择改变之后触发
      get() {
        return (
          this.cartData.length ===
          this.cartData.filter((item) => item.checked == true).length
        );
      },
    },
    // 总价计算
    sumPrice() {
      return this.cartData
        .filter((item) => item.checked)
        .reduce((pre, cur) => {
          console.log(pre);
          return pre + cur.buyCount * cur.productPrice;
        }, 0);
    },

    sumlength() {
      return this.cartData.filter((item) => item.checked == true).length;
    },
  },
};
</script>

<style lang="less" scoped>
.rc-footer {
  display: none;
}
.rc-footera {
  background: #f6f6f6;
  border: 1px solid #d7d7d7;
  margin-bottom:40px;
  .rc-foote {
    margin: 0 auto;
    box-shadow: 0px -3px 6px rgba(0, 0, 0, 0.1);
    height: 102px;
    display: flex;
    justify-content: space-between;
  }
  .rc-shop {
    display: flex;
    align-items: center;
    margin-left: 24px;
    img {
      width: 24px;
      height: 24px;
      display: block;
    }

    span {
      font-style: normal;
      font-size: 18px;
      color: #333333;
      margin-left: 16px;
      display: block;
    }
  }
  .rc-delete {
    display: flex;
    align-items: center;
    margin-right: 32px;
    .rc-num {
      display: flex;
      align-items: center;
      .rc-usernum {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-right: 25px;
        .rc-usea {
          display: flex;
          align-items: center;
        }
      }
    }
    i {
      font-size: 18px;
      font-style: normal;
      color: #333333;
      margin-right: 8px;
      display: block;
    }
    span {
      font-size: 20px;
      color: #e1001a;
    }
    em {
      font-style: normal;
      margin-top: 8px;

      color: #333333;

      font-size: 16px;
    }
    strong {
      cursor: pointer;
      width: 164px;
      height: 48px;
      background: #e2001a;
      border-radius: 30px;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 16px;
      margin-right: 40px;
      color: #ffffff;
    }
  }
}
.rc-main {
  .cart-list {
    width: 100%;
    border: 1px solid #d7d7d7;
    font-size: 16px;
    color: #666666;
    p {
      margin: 0;
    }
    .header {
      background: #f6f6f6;
      border-radius: 3px 3px 0px 0px;
      border-bottom: 1px solid #d7d7d7;
      height: 64px;
      display: flex;
      justify-content: space-between;
    }
    .header_ph {
      display: none;
    }
    .check-label {
      display: block;
      margin-left: 24px;
    }
    .name {
      display: block;
      margin-left: 56px;
    }
    .list-left {
      display: flex;
      align-items: center;
      width: 50%;
    }
    ul {
      display: flex;
      width: 50%;
      justify-content: space-around;
      align-items: center;
    }
    .list {
      display: flex;
      justify-content: space-between;
      border-bottom: 1px solid #d7d7d7;
      padding: 15px 0;
      .del{
        em{ font-style: normal;}
      }
      .product-price {
        color: #e1001a;
        font-weight: bold;
        font-size: 20px;
        width: 60px;
      }
      
        .del{
          em{
             color: #e1001a;
            border-bottom: 1px solid #e1001a;
            cursor:pointer ;
          }
        }
      .product {
        display: flex;
        justify-content: space-between;
        margin-left: 56px;
        .product-title {
          color: #e1001a;
          font-weight: bold;
          font-size: 18px;
        }
        .product-img {
          margin-right: 15px;
          width: 96px;
          height: 96px;
          img {
            width: 100%;
            height: 100%;
          }
        }
      }
      .rc-jia {
        display: flex;
        align-items: center;
        img,
        input {
          width: 30px;
          height: 30px;
          text-align: center;
          margin: 0 5px;
        }
        input {
          border: 1px solid #d7d7d7;
        }
      }
    }
  }
  .rc-select {
    border-bottom: 1px solid #d8d8d8;
    height: 56px;
    width: 100%;

    display: flex;
    display: none;
    justify-content: space-between;
    .select-left {
      display: flex;
      align-items: center;
      img {
        width: 24px;
        height: 24px;
        display: block;
      }
      span {
        font-size: 14px;
        color: #333333;
        display: block;
        margin-left: 8px;
      }
    }
    .select-right {
      display: flex;
      align-items: center;
      img {
        width: 16px;
        height: 16px;
        display: block;
        margin-right: 8px;
      }
      span {
        font-size: 14px;
        color: #333333;
      }
    }
  }

  .rc-userdemand {
    width: 100%;
    height: 180px;
    border-bottom: 1px solid #d8d8d8;
    display: flex;
    .rc-userdeman {
      display: flex;
      align-items: center;

      img {
        width: 24px;
        height: 24px;
        display: block;
        margin-left: 24px;
      }
      .re-message {
        width: 96px;
        height: 96px;
        display: block;
        border: 1px solid #d8d8d8;
        margin-left: 56px;
      }
    }
    .rc-userdem {
      display: flex;
      width: 100%;
      margin-left: 8px;
      span {
        font-size: 18px;
        color: #e1001a;
        display: block;
        font-weight: bold;
      }
      em {
        font-style: normal;
        font-size: 16px;
        display: block;
        margin-top: 8px;

        color: #666666;
      }
      .rc-userdema {
        display: flex;
        flex-direction: column;
        justify-content: center;
        width: 10%;
      }
      .rc-userd {
        display: flex;
        align-items: center;
        width: 87%;
        justify-content: space-around;
        .rc-jia {
          display: flex;
          align-items: center;
        }
        i {
          font-size: 20px;
          font-style: normal;
          color: #e1001a;
        }
        img {
          width: 23px;
          height: 23px;
          display: block;
          margin-right: 5px;
        }
        img:last-child {
          width: 23px;
          height: 23px;
          display: block;
          margin-left: 10px;
        }
        em {
          font-style: normal;
          font-size: 20px;
          cursor: pointer;
          border-bottom: 1px solid #e2001a;
          display: block;
          margin-left: 40px;
          color: #e1001a;
        }
        strong {
          font-style: normal;
          display: flex;
          justify-content: center;
          list-style: none;
          align-items: center;
          width: 24px;

          color: #666666;
          height: 24px;
          border: 1px solid #d7d7d7;
          font-size: 12px;
          border-radius: 3px;
        }
      }
    }
  }
}

//手机端
@media screen and (max-width: 768px) {
  .rc-main {
    padding: 0;
    width: 100%;
    .cart-list {
      border: none;
      margin-bottom: 130px;
      .header {
        display: none;
      }
      .header_ph {
        display: block;
        border-bottom: 2px solid #d8d8d8;
        padding: 20px 10px 20px 0;
        border-top: 5px solid #f6f6f6;
      }
      .check-label {
        margin-left: 10px;
      }
      .name {
        margin-left: 16px;
      }
      .list {
        display: block;
        .product {
          margin-left: 16px;
        }
        .list-left{
          width: 100%;
        }
        ul {
          margin-top: -2rem;
          margin-left: 9.75rem;
          width: 50%;
          .del {
            display: none;
          }
        }
        .product-title{
          width: 225px;
          text-overflow: ellipsis;
          white-space:nowrap; 
          overflow: hidden;
        }
      }
    }
  }
  .rc-footera {
    position: fixed;
    bottom: 0;
    width: 100%;
    z-index: 10;
	margin-bottom:0;
    .rc-shop {
      display: none;
    }
    .rc-delete {
      margin-right: 0;
      width: 100%;
      .rc-num {
        width: 100%;
        justify-content: space-between;
        padding: 10px;
      }
      strong {
        margin-right: 0;
      }
    }
  }
  .el-message-box {
    width: 300px;
  }
}
</style>