<template>
  <view class="container commonPageBox commonDetailPage" style=" padding: 0;">
    <z-nav-bar title="确认订单" bgColor="#5188e5" fontColor="#fff"></z-nav-bar>
    <common-order-submit
      v-if="showOrder"
      :options="options"
     
      :urlList="urlList"
      :initData="initData"
      :priceKey="priceKey"
      :pageType="pageType"
      :goodsDataList="goodsDataList"
      :showNumber="showNumber"
      :isHideAddress="isHideAddress"
    >
      <template
        slot="goodsLableInfoSlot"
        slot-scope="slotProps"
        v-if="pageType == 'goods'"
      >
        <span
          class="goodsvipLabel"
          v-if="
            slotProps.row.isVipPrice == 1 &&
            slotProps.row.vipPrice != 0 &&
            slotProps.row.vipPrice != null
          "
          style=""
          >VIP优惠</span
        >
      </template>
      <template slot="goodsInfoImgSlot" slot-scope="slotProps">
        <image
          v-if="pageType == 'vip'"
          src="/static/icon/vip.png"
          class="goods_item_img"
          mode="widthFix"
          @click="goDetail(slotProps.row.productId)"
        ></image>
        <image
          v-else-if="
            (pageType == 'goods' || pageType == 'fudu') &&
            slotProps.row.productImages &&
            slotProps.row.productImages != ''
          "
          class="goods_item_img"
          :src="slotProps.row.productImages"
          mode="aspectFit"
        >
        </image>

        <image
          v-else
          src="/static/nobg1.jpg"
          class="goods_item_img"
          mode="widthFix"
          @click="goDetail(slotProps.row.productId)"
        ></image>
      </template>
      <template slot="goodsInfoNameSlot" slot-scope="slotProps">
        <span v-if="pageType == 'vip'"
          >{{ slotProps.row.title
          }}<span style="margin-left: 4rpx"
            >{{ slotProps.row.year }}年</span
          ></span
        >
        <span v-else>{{ slotProps.row.productName }}</span>
      </template>
      <template slot="goodsInfoPriceSlot" slot-scope="slotProps">
        <text
          v-if="
            slotProps.row.isVipPrice == 1 &&
            slotProps.row.vipPrice != 0 &&
            slotProps.row.vipPrice != null
          "
        >
          <text style="color: #e97512; font-size: 28rpx; font-weight: bold"
            >￥{{ slotProps.row.vipPrice.toFixed(2) }}</text
          >
          <text style="color: #fa2d12; font-size: 24rpx; margin-left: 4px"
            >VIP到手价</text
          >
          <text
            style="
              color: #8a8a8a;
              font-size: 24rpx;
              margin-left: 4px;
              font-weight: bold;
              text-decoration: line-through;
            "
            >￥{{ Number(slotProps.row.price).toFixed(2) }}</text
          >
        </text>

        <text
          v-else-if="
            slotProps.row.activityPrice && slotProps.row.activityPrice > 0
          "
        >
          <text style="color: #e97512; font-size: 28rpx; font-weight: bold"
            >￥{{ slotProps.row.activityPrice.toFixed(2) }}</text
          >
          <text style="color: #613804; font-size: 24rpx; margin-left: 4px"
            >活动价</text
          >
          <text
            style="
              color: #8a8a8a;
              font-size: 24rpx;
              margin-left: 4px;
              font-weight: bold;
              text-decoration: line-through;
            "
            >￥{{ Number(slotProps.row.price).toFixed(2) }}</text
          >
        </text>

        <text v-else style="font-size: 28rpx"
          >￥{{ Number(slotProps.row.price).toFixed(2) }}</text
        >
      </template>
    </common-order-submit>
  </view>
</template>

<script>
import { mapState } from "vuex";
export default {
  components: {},
  watch: {},
  data() {
    return {
      priceKey: "price",
      showNumber: true,
      isHideAddress: false,
      options: {},
      initData: {},
      goodsDataList: [],
      pageType: "",
      showOrder: "",
      urlList: {
        list: "app/phone.do?getCourseDetail_new",
        initPrepareOrder: "common/buyOrder/initPrepareOrder",
        buyOrder: "book/buyOrder/placeOrder",
        curriculumInfo: "app/phone.do?getCourseInfo",
        detailInfo: "app/phoneDoctor.do?getTaiHuClassInfo_new",
        userInfo: "common/user/getUserInfo",
        addressList: "common/userAddress/getUserAddress",
        freightNum: "book/buyOrder/calculateTransportPrice", //运费
        renewPayment: "common/courseRelearn/relearnSave", // 复读下单地址
        vipPayment: "common/userVip/placeVipOrder", // 复读下单地址
      },
    };
  },
  async onLoad(options) {
    this.options = JSON.parse(options.data);
    this.priceKey = "price";
    this.showNumber = true;
    this.isHideAddress = false;

    await this.init();
    if (this.options.isFudu) {
      //复读订单
      this.pageType = "fudu";
      this.showNumber = true;

      await this.getFuduDataInfo();
    } else {
      //普通

      this.pageType = "goods";

      await this.getGoodsDataInfo();
    }

    this.$nextTick(async () => {
      this.showOrder = true;
    });
  },

  computed: { ...mapState(["userInfo"]) },
  methods: {
    async init() {
      if (this.options.isVip) {
        await this.$http
          .request({
            url: `${this.urlList.userInfo}`,
            method: "POST",
            data:{},
            header: {
              "Content-Type": "application/json",
            },
          })

          .then(async (res) => {
            console.log("res at line 1168:", res);
            if (res.code == 0) {
              this.initData = {user:res.result};

              this.isHideAddress = true;
            }

            this.$forceUpdate();
          });
      } else {
        var data = {
          uid: this.userInfo.id,
          productList: this.options.goods.map((e) => {
            return {
              productId: e.productId || e.id,
              quantity: 1,
            };
          }),
        };

        var that = this;

        await this.$http
          .request({
            url: `${this.urlList.initPrepareOrder}`,
            method: "POST",
            data,
            header: {
              "Content-Type": "application/json",
            },
          })

          .then(async (res) => {
            console.log("res at line 1168:", res);
            if (res.code == 0) {
              this.initData = res.data;

              console.log(
                "this.initData at line 初始化课程订单信息:",
                this.initData
              );
              if (res.data.is_course) {
                this.isHideAddress = true;
              }
            }

            this.$forceUpdate();
          });
      }
    },
    findById(id, data) {
      // Loop through the data array
      for (const item of data) {
        // Check if vcbList exists and loop through each item in vcbList
        if (item.vcbList) {
          this.isHideJf=true
          const vcbItem = item.vcbList.find((vcb) => vcb.id === id);
          if (vcbItem) {
            return {...vcbItem,}; // Return the matching item
          }
        }
        if (item.yanqiList) {
          this.isHideJf=false
          const vcbItem = item.yanqiList.find((vcb) => vcb.id === id);
          if (vcbItem) {
            
            return {...vcbItem,}; // Return the matching item
          }
        }
      }
      return null; // Return null if no item with the given ID is found
    },

    async getFuduDataInfo() {
      await this.$http
        .request({
          url: "/common/courseRelearn/relearnShopProductList",
          method: "POST",
          data: {
            catalogueId: this.options.fuduId,
          },
          header: {
            "Content-Type": "application/json",
          },
        })
        .then(async (res) => {
          this.goodsDataList = res.productList.filter(
            (e) => this.options.goods[0].productName == e.productName
          );
         
        });
    },

    async getVipDataInfo() {
      await this.$http
        .request({
          url: "/common/userVip/getVipBuyConfigList",
          method: "POST",
          data: {},
          header: {
            "Content-Type": "application/json",
          },
        })
        .then(async (res) => {
          console.log("res at line 846:", res);
          var data = await this.findById(this.options.goods[0].id, res.res);
          if(this.isHideJf){
            this.initData.user.jf=0;
          }
          console.log("data at line 200:", data);
          this.goodsDataList = [
            {
              ...data,
              productId: data.id,

              price: data.rebateFee,
            },
          ];
          console.log("this.goodsDataList at line 861:", this.goodsDataList);
        });
    },
    async getGoodsDataInfo(fn) {
      await this.$http
        .request({
          url: "/book/buyOrder/getShopProductListByIds",
          method: "POST",
          data: {
            productIds: this.options.goods.map((e) => e.productId).toString(),
          },
          header: {
            "Content-Type": "application/json",
          },
        })
        .then(async (res) => {
          this.goodsDataList = res.shopProductList;
        });
    },
  },
  onBackPress() {
    // #ifdef APP-PLUS
    plus.key.hideSoftKeybord();
    // #endif
  },
};
</script>

<style lang="scss" scoped>
.commonPage, .commonPageBox {
    height: calc(100vh - 50px);
}
.goodsvipLabel {
  position: absolute;
  z-index: 10;
  top: 4px;
  left: 0px;
  margin-right: 10px;
  text-align: center;
  font-size: 18rpx;
  background-color: #f94f04;
  color: #fff;
  font-weight: bold;
  border-radius: 4px;
  width: 80rpx;
  padding: 2px 4px;
  box-sizing: border-box;
}
.goods_item_img {
  width: 140rpx;
  height: 140rpx;
  float: left;
  background-color: #f5f5f5;
  border-radius: 10rpx;
}
</style>
