<template>
  <div class="settlement">
    <Myheader></Myheader>
     <tabs></tabs>
 <div class="online"></div>
 
      <div class="rc-main"  v-for="(item,index) in goldmedal" :key="index" >
        <div class="rc-border"></div>
        <div
          class="mypersonal"
          v-for="(item, index) in useraddress"
          :key="index"
          :class="item.isDefault ? 'active' : ''"
          @click="selectAddress(item)"
        >
          <div class="edit" @click="editAddress(item)">
            <i class="el-icon-edit"></i>编辑
          </div>
          <div class="my-delivery">
            <span>{{ item.recipient }}</span>
            <i>{{ item.recipientPhone }}</i>
          </div>
          <div class="per-delivery">
            <span>{{ item.address }}</span>
          </div>
        </div>
        <div class="mypersonal">
          <div
            class="my-delivery"
            @click="addAddress"
            style="justify-content: center"
          >
            <i class="el-icon-plus"></i>
            <span>添加收货地址</span>
          </div>
        </div>
      </div>
    </div>
    <div class="rc-contline"></div>
    <div class="rc-main" v-for="(item, index) in goldmedal" :key="index">
      <div class="rc-usermain">
        <div class="rc-image">
          <img :src="item.productImg" alt="" />
        </div>
        <div class="rc-right">
          <div class="rc-usercenter">
            <h3>{{ item.productName }}</h3>
            <p>规格:{{ item.specifications }}</p>
          </div>
          <div class="rc-userbottom">
            <p>￥{{ item.productPrice }}</p>
            <p>X{{ item.buyCount }}</p>
            <p class="price">￥{{ item.productPrice }}</p>
          </div>
        </div>
      </div>
    </div>
    <div class="rc-contline"></div>
    <div class="rc-main">
      <div class="rc-merchandise">
        <ul>
          <li>
            <span>配送方式:</span>
            <i>{{ shopprice.price }}</i>
          </li>
          <li>
            <span> 活动促销:</span>
            <i>{{ shopprice.distribution }}</i>
          </li>
          <li>
            <span>商品总价:</span>
            <i class="red">{{ sumPrice }}</i>
          </li>
          <li>
            <span>配送费用:</span>
            <i class="red">{{ shopprice.payment }}</i>
          </li>
        </ul>
      </div>
    </div>

    <div class="rc-contline"></div>
    <div class="rc-main">
      <div class="rc-foot">
        <div class="rc-foo">
          <div>
            <i>合计金额:</i>
            <em>{{ sumPrice }}</em>
          </div>
          <div style="font-weight: bold">
            <span @click="jiesuan()">提交订单</span>
          </div>
        </div>
      </div>
    </div>
    <el-dialog :visible.sync="dialogAdd"  class="diallog_width" width="'100%">
      <div class="tc dl_cont" v-if="dialogAdd">
        <myAddress
          @isClose="dialogCtrl"
          :editAddressData="editAddressData"
        ></myAddress>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import Myheader from "~/components/header.vue";
  import {userin} from "../../ajax/getData";
  import tabs from "@/components/tabs.vue";
export default {
     middleware: 'metaTitle',
  meta: {title: '订单结算'},
  data() {
    return {
      goldmedal: [],
      addressstype: null,
      orderstatus: "",
      userisdelivery: "待收货",
      userdelivery: "派送中",
      isshow: true,
      leftico: require("../../assets/image/rc-left.png"),
      orderNumber: "",
      dialogAdd: false,
      editAddressData: {},
      curAddress: {},
      saveType: "",
      useraddress: [
        {
          state: "李某某",
          tel: "15124117917",
          address: "广东省 广州市 天河区 天河客运站118号",
        },
           {
          state: "李某某",
          tel: "15124117917",
          address: "广东省 广州市 天河区 天河客运站118号",
        },
           {
          state: "李某某",
          tel: "15124117917",
          address: "广东省 广州市 天河区 天河客运站118号",
        },
           {
          state: "李某某",
          tel: "15124117917",
          address: "广东省 广州市 天河区 天河客运站118号",
        },
      ],

      goldmedal: [
        {
          ordernumber: "1111111111111111111",
          orderstype: 1,
          index:0,
          usereat: "英国短毛猫成猫全价湿粮",
          num: "5kg",
          specification: "1",
          userprice: "167.00",
          catimage: require("../../assets/image/rc-win.png"),
        },
      ],
      shopprice: {
        price: "标准快递",
        distribution: "限时折扣全场商品8折",
        promotion: "￥167.00",
        payment: "￥0.00 ",
      },
    };
  },
  computed: {
    // 总价计算
    sumPrice() {
      return this.goldmedal
        .reduce((pre, cur) => {
          console.log(pre);
          return pre + cur.buyCount * cur.productPrice;
        }, 0);
    },
  },
  methods: {
    async getAddressList() {
      let memberId = JSON.parse(localStorage.getItem("userInfo")).data.id;
      let { data } = await memberAddress("getAll", { memberId: memberId });
      data.forEach((item) => {
        item.address =
          item.provinceName +
          item.cityName +
          item.districtName +
          item.detailAddress;
      });
      this.useraddress = data;
      console.log(data);
    },
    editAddress(item) {
      this.editAddressData = {
        memberId: item.memberId,
        name: item.recipient,
        tel: item.recipientPhone,
        detailAddress: item.detailAddress,
        id: item.id,
        city: item.cityName,
        districtId: item.districtName,
        saveType: "edit",
      };
      this.dialogAdd = true;
    },
    addAddress() {
      this.editAddressData = {};
      this.dialogAdd = true;
    },
    selectAddress(cur) {
      this.useraddress.forEach((item) => {
        if (item.id == cur.id) {
          item.isDefault = true;
        } else {
          item.isDefault = false;
        }
      });

    },
    dialogCtrl(parm) {
      this.dialogAdd = parm;
      this.getAddressList();
    },
    async jiesuan() {
      let orderAddress = this.useraddress.filter(item=>item.isDefault)
      let postData =[]
      this.goldmedal.forEach(item=>{
        let oneProduct={
          productName: item.productName,
          buyCount: item.buyCount,
          productId:item. productCode,
          payAmount: item.productPrice,
          memberId: item.memberId,
          phoneNumber: item.mobile,
          // couponId: "NGQ2022P12",
          // couponTypeId: "4",
          // couponName: "内购券",
          // couponAmount: "0.3175",
          // couponCode: "0007792402",
           orderAddress: {
            addressPhoneNumber:orderAddress[0].recipientPhone,
            addressUserName:orderAddress[0].recipient,
            addressProvinceName: orderAddress[0].provinceName,
            addressCityName:orderAddress[0].cityName,
            addressCountyName: orderAddress[0].districtName,
            addressDetailInfo: orderAddress[0].detailAddress,
          },
        }
        postData.push(oneProduct)
      })
      // let postData = [
      //   {
      //     productName: this.goldmedal.productName,
      //     buyCount: "2",
      //     productId: "20030200",
      //     payAmount: "147.00",
      //     memberId: "844350",
      //     phoneNumber: "18112621098",
      //     couponId: "NGQ2022P12",
      //     couponTypeId: "4",
      //     couponName: "内购券",
      //     couponAmount: "0.3175",
      //     couponCode: "0007792402",
      //     orderAddress: {
      //       addressPhoneNumber:orderAddress[0].recipientPhone,
      //       addressUserName:orderAddress[0].recipient,
      //       addressProvinceName: orderAddress[0].provinceName,
      //       addressCityName:orderAddress[0].cityName,
      //       addressCountyName: orderAddress[0].districtName,
      //       addressDetailInfo: orderAddress[0].detailAddress,
      //     },
      //   },
      //   // {
      //   //   productName: "幼猫全价粮",
      //   //   buyCount: "2",
      //   //   productId: "20030200",
      //   //   payAmount: "147.00",
      //   //   memberId: "844350",
      //   //   phoneNumber: "18112621098",
      //   //   couponId: "NGQ2022P12",
      //   //   couponTypeId: "4",
      //   //   couponName: "内购券",
      //   //   couponAmount: "0.3175",
      //   //   couponCode: "0007792402",
      //   //   orderAddress: {
      //   //     addressPhoneNumber: "13602898745",
      //   //     addressUserName: "张三",
      //   //     addressProvinceName: "江苏省",
      //   //     addressCityName: "无锡市",
      //   //     addressCountyName: "江阴市",
      //   //     addressDetailInfo: "东苑一村",
      //   //   },
      //   // },
      // ];
      // let res = await generateOrderWX(postData);
      // if (res.success) {
      //   let payData=res.data
      let userPayData={
          postData:postData,
          wxPay:'weixin://wxpay/bizpayurl?pr=4RJbokxzz'

      }
        this.$router.push({
          path: "/personal/userpay",
          query: {
            userPayData: userPayData,
          },
        });
      // }
    },
    async canceldanhao(orderNumber) {
      let data = await userin(orderNumber);
      console.log(data);
      //  this.goldmedal=data;
      console.log(this.goldmedal);
    },
  },
  mounted() {
    this.goldmedal = this.$route.query.list;
    console.log(this.$route.query.list);
    this.getAddressList();
    // this.addressstype = this.$route.query.stype;
    // this.orderNumber = this.$route.query.orderNumber;
    // this.canceldanhao(this.orderNumber);
    // console.log(this.$refs.rccolor);
    // this.$refs.rccolor.style.background = "gray";
  },
  components: {
    Myheader,
    tabs
  },
};
</script>

<style lang="less" scoped>
@import url("../../assets/css/global.less");
@import url("../../assets/css/settlement.less");
</style>