<template>
  <div class="integral_goods_detail wrapper_1200">
    <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/integral' }">全部商品</el-breadcrumb-item>
        <el-breadcrumb-item>其他</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="top">
      <div class="top_left_img">
        <img :src="imgUrl + goodsList.image" alt />
      </div>
      <div class="top_right">
        <div class="top_right_title">{{ goodsList.name }}</div>
        <p class="top_right_txt">
          {{ goodsList.content }}
        </p>
        <div class="l">
          <img src="../../assets/images/integral_exchange.png" alt />
          <p v-if="goodsList.type == 1">
            {{ goodsList.point }}积分+{{ goodsList.price }}元
          </p>
          <p v-if="goodsList.type == 2">{{ goodsList.point }}积分</p>
        </div>

        <div class="r">库存：{{ goodsList.stock }}</div>
        <div class="r">限定兑换：{{ goodsList.limit_num }}件</div>
        <div class="r">已兑换：{{ goodsList.ready_num }}件</div>
        <p class="r">兑换规则：{{ goodsList.rule }}</p>
        <div class="top_right_btn">
          <el-button
            v-if="goodsList.ready_num < goodsList.limit_num"
            size="small"
            type="primary"
            icon="el-icon-goods"
            @click="exchange"
            >立即兑换</el-button
          >
          <el-button v-else size="small" type="info" icon="el-icon-goods" disabled
            >已兑换</el-button
          >
        </div>
      </div>
    </div>
    <!-- <div class="bottom">
      <div class="bottom_title">商品详情</div>

      <p class="goods_detail_option_text">
        <span>商品型号：28g/袋</span>
        <span>产地：山东</span>
        <span>规格：28g/袋</span>
        <span>执行标准：《中国药典》2022年版一部</span>
        <span>生产企业：安国市远光药业有限公司</span>
      </p>

      <div class="goods_detail_option_banner">
        <img :src="imgUrl+goodsList.image" alt />
      </div>
    </div> -->

    <!-- 立即兑换 -->
    <DialogSlot
      :dialogSlotShow.sync="exchangeDialog"
      @done="reload"
      :titleShow="false"
      :cancelText="'返回'"
      :confirmText="'确认兑换'"
      @clickConfirm="exchangeSubmit"
    >
      <template v-slot:contentSlot>
        <div class="integraldialog">
          <div class="nav">
            <div class="nav_img">
              <img :src="imgUrl + goodsList.image" alt />
            </div>
            <div class="nav_txt">
              <div class="nav_title">{{ goodsList.name }}</div>
              <div class="nav_num">
                <img src="../../assets/images/integral_exchange.png" alt />
                <p v-if="goodsList.type == 1">
                  {{ goodsList.point }}积分
                  <span v-if="Number(goodsList.price)">+{{ goodsList.price }}元</span>
                </p>
                <p v-if="goodsList.type == 2">{{ goodsList.point }}积分</p>
              </div>
            </div>
          </div>
          <div class="content">
            <!-- <div class="content_Service">
              <div class="content_title">服务</div>
              <div style="color: #999999">不支持退换</div>
            </div> -->
            <div class="content_num">
              <div class="content_title">购买数量</div>
              <div style="color: #999999">商品限购{{ goodsList.limit_num }}件</div>
              <div>
                <el-input-number
                  size="mini"
                  :max="goodsList.limit_num"
                  :min="0"
                  v-model="integralNum"
                ></el-input-number>
              </div>
            </div>
            <div class="content_address" v-if="goodsList.type == 1">
              <div class="content_title">收货地址</div>
              <div class="content_address_user">
                <div>{{ addressList.name }} {{ addressList.mobile }}</div>
                <div>
                  <span style="color: #999999"
                    >{{ addressList.full_address }}{{ addressList.address }}</span
                  >
                  <span style="color: var(--themeColor)">
                    <i class="el-icon-edit" @click="changeAddress"></i>
                  </span>
                </div>
              </div>
            </div>

            <div class="content_num" v-if="Number(goodsList.price)">
              账户余额:{{ balance }}元
            </div>
            <div style="color: #ff7d02">
              <p>
                <span>需支付:{{ integralNum * Number(goodsList.point) }}积分 </span>
                <span v-if="Number(goodsList.price)">
                  +{{ integralNum * Number(goodsList.price) }}元</span
                >
              </p>
            </div>
          </div>
        </div>
      </template>
    </DialogSlot>

    <!-- 更换地址 -->
    <DialogSlot
      :dialogSlotShow.sync="exchangeAddress"
      @done="reload"
      :tipsText="'选择地址'"
      :cancelText="'返回'"
      @clickConfirm="changeAddressBtn"
    >
      <template v-slot:contentSlot>
        <div class="select_address">
          <el-radio-group v-model="defaultAddress">
            <el-radio
              class="select_address_list"
              :label="item.id"
              v-for="(item, index) in allAddressList"
              :key="index"
              @change="changeAddressRadio(item)"
            >
              <div class="select_address_txt">
                <div style="color: #222">
                  <span>{{ item.name }}</span>
                  <span>{{ item.mobile }}</span>
                </div>
                <div style="color: #999">{{ item.full_address }}{{ item.address }}</div>
              </div>
            </el-radio>
          </el-radio-group>
        </div>
      </template>
    </DialogSlot>

    <!-- 兑换成功 -->
    <DialogSlot
      :dialogSlotShow.sync="exchangeSuccess"
      @done="reload"
      :titleShow="false"
      :cancelText="'返回首页'"
      :confirmText="'查看订单'"
      @clickCancel="successCancel"
    >
      <template v-slot:contentSlot>
        <div class="changeSuccess">
          <img src="../../assets/images/paySuccess.png" alt />
          <p>兑换成功</p>
        </div>
      </template>
    </DialogSlot>
  </div>
</template>

<script>
import Setting from "~/setting";
export default {
  auth: false,
  data() {
    return {
      imgUrl: Setting.uplodBaseURL,
      userInfo: JSON.parse(localStorage.getItem("userInfo")),
      // 是否为虚拟商品
      isFictitious: false,

      phoneNumber: "",
      goodsList: {},
      //   立即兑换弹框
      exchangeDialog: false,
      integralNum: 0,
      //   更改地址弹框
      exchangeAddress: false,
      defaultAddress: 0,
      allAddressList: [],
      addressList: {},
      //   兑换成功
      exchangeSuccess: false,
      balance: 0,
    };
  },
  created() {
    // this.goodsList = this.$route.query;
    this.init();
  },
  methods: {
    init() {
      this.getData();
      this.getAddressList({ isALL: false });
      this.getBalance();
    },
    getData() {
      let obj = {
        id: this.$route.query.id,
      };
      this.$axios
        .post(`/goodsexchange/detail`, obj)
        .then((res) => {
          console.log(res.data, `goodsList`);
          this.goodsList = res.data;
        })
        .catch((err) => {
          this.$message.error(err);
        });
    },
    // api/memberaccount/info
    getBalance() {
      let obj = {
        account_type: "balance",
      };
      this.$axios
        .post(`/memberaccount/info`, obj)
        .then((res) => {
          console.log(res.data, `getBalance`);
          this.balance = res.data.balance;
        })
        .catch((err) => {
          this.$message.error(err);
        });
    },
    // 获取默认地址
    getAddressList(OBJ) {
      let obj = {
        member_id: this.userInfo.member_id,
      };
      this.$axios
        .post(`/memberaddress/page`, obj)
        .then((res) => {
          if (!OBJ.isALL) {
            this.addressList = [];
            res.data.list.forEach((item) => {
              if (item.is_default) {
                this.addressList = item;
              }
            });
          } else {
            res.data.list.forEach((item) => {
              if (item.is_default) {
                this.defaultAddress = item.id;
              }
            });
            this.allAddressList = [];
            this.allAddressList = res.data.list;
          }
          console.log(this.addressList);
          console.log(this.allAddressList);
        })
        .catch((err) => {
          this.$message.error(err);
        });
    },
    // 修改默认地址
    changeAddressRadio(val) {
      this.addressList = val;
    },
    // 修改默认地址确认按钮
    changeAddressBtn() {
      this.exchangeAddress = false;
      this.$axios
        .post("/memberaddress/setdefault", {
          id: this.addressList.id,
        })
        .then((res) => {
          this.init();
        })
        .catch((err) => {
          this.$message.error(err);
        });
    },
    reload(e) {
      console.log(e, "0000");
    },
    //   立即兑换弹框
    exchange() {
      this.exchangeDialog = true;
    },
    //   更改地址弹框
    changeAddress() {
      this.exchangeAddress = true;
      this.getAddressList({ isALL: true });
    },
    //   兑换成功
    exchangeSubmit() {
      let obj = {
        goods_id: this.goodsList.id,
        num: this.integralNum,
        store_id: JSON.parse(localStorage.getItem("drugstoreObj")).id,
        member_address: JSON.stringify(this.addressList),
      };
      if (this.goodsList.type == 2) {
        obj.member_address = null;
      }
      console.log(obj);
      this.$axios
        .post("/goodsexchange/doExchange", obj)
        .then((res) => {
          this.exchangeDialog = false;
          // this.exchangeSuccess = true;
          this.$message({
            message: "兑换成功",
            type: "success",
          });
          this.init();
          console.log(res, `兑换成功`);
        })
        .catch((err) => {
          this.$message({
            message: err,
            type: "error",
          });
        });
    },
    successCancel() {
      this.$router.push({ path: "/" });
    },
  },
};
</script>
<style lang="scss" scoped>
.integral_goods_detail {
  .crumbs {
    margin: 20px 0;
  }
  .top {
    width: 1200px;
    height: 380px;
    background: #ffffff;
    border-radius: 4px;
    margin-bottom: 20px;
    padding: 30px;
    display: flex;
    justify-content: space-between;
    .top_left_img {
      width: 510px;
      height: 320px;
      background: #ffffff;
      border-radius: 1px;
    }
    .top_right {
      width: 670px;
      height: 320px;
      margin-left: 20px;

      .top_right_title {
        height: 28px;
        font-size: 20px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #222222;
        line-height: 28px;
      }
      .top_right_txt {
        height: 50px;
        font-size: 16px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #585858;
        line-height: 22px;
        margin: 20px 0;
      }
      .l {
        height: 40px;
        font-size: 18px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        line-height: 40px;
        display: flex;
        color: #ff7d02;
        margin-top: 20px;
        img {
          width: 16px;
          height: 16px;
          margin-top: 12px;
        }
      }
      .r {
        height: 20px;
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #999999;
        line-height: 20px;
      }
      .top_right_btn {
        margin-top: 30px;
        /deep/ .el-button {
          width: 142px;
        }
      }
    }
  }
  .bottom {
    width: 1200px;
    height: 655px;
    background: #ffffff;
    border-radius: 4px;
    margin-bottom: 20px;
    padding: 30px;
    .bottom_title {
      height: 22px;
      font-size: 16px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #222222;
      line-height: 22px;
      padding-bottom: 40px;
      margin-bottom: 20px;
      border-bottom: #eaeaea solid 1px;
    }
    .goods_detail_option_text {
      margin-bottom: 15px;
      span {
        margin-right: 20px;
        height: 22px;
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #666666;
        line-height: 22px;
      }
    }
    .goods_detail_option_banner {
      width: 1140px;
      height: 488px;
      img {
        width: 100%;
        height: 100%;
      }
    }
  }
  /deep/ .el-dialog__wrapper {
    .integraldialog {
      .nav {
        display: flex;
        .nav_img {
          img {
            width: 140px;
            height: 100px;
          }
        }
        .nav_txt {
          width: 300px;

          .nav_title {
            height: 25px;
            font-size: 18px;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            color: #222222;
            line-height: 25px;
          }
          .nav_num {
            height: 20px;
            font-size: 14px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #ff7d02;
            line-height: 20px;
            display: flex;
            margin: 20px 0;
            img {
              width: 18px;
              height: 18px;
            }
          }
          .nav_remarks {
            height: 20px;
            font-size: 14px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #666666;
            line-height: 20px;
          }
        }
      }
      .content {
        width: 100%;
        height: 150px;
        .content_Service,
        .content_num,
        .content_address {
          display: flex;
          margin: 15px 0;
          div {
            margin-right: 40px;
          }
          .content_title {
            width: 56px;
            height: 20px;
            font-size: 14px;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            color: #222222;
            line-height: 20px;
          }
          .content_address_user {
            div {
              margin-bottom: 15px;
            }
          }
        }
      }
    }
  }

  .select_address {
    display: flex;

    padding: 30px;
    /deep/.el-radio-group {
      .select_address_list {
        width: 280px;
        height: 60px;
        line-height: 60px;
        margin-bottom: 20px;
        display: flex;
        .el-radio__input {
          .el-radio__inner {
            margin-top: 23px;
          }
        }
        .select_address_txt {
          width: 320px;
          div {
            line-height: 30px;
            overflow: hidden;
            text-overflow: ellipsis;
          }
        }
      }
    }
  }
  .changeSuccess {
    img {
      width: 127px;
      height: 127px;
      margin: 10px auto;
    }
    p {
      text-align: center;
      font-size: 16px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 600;
      color: #222222;
      line-height: 50px;
    }
  }
}
</style>
