<template>
  <div class="app-container">
    <el-tabs v-model="paramsInfo.redeemType" class="headerTab" :stretch="true">
      <el-tab-pane
        v-for="item in rewardDetailsInfo.pickMethodList"
        :key="item.value"
        :name="item.value"
      >
        <span slot="label">{{ isChinese ? item.labelZh : item.labelEn }}</span>
        <div class="card">
          <div class="adressBox" @click="goAddressManagerPage">
            <div>
              <img
                v-if="paramsInfo.redeemType == 1"
                src="@/assets/integral/house.png"
                alt=""
                srcset=""
              />
              <i
                v-else
                class="el-icon-location-information adress-icon iconColor"
              />
            </div>

            <div
              v-if="addressInfo.phone && paramsInfo.redeemType != 1"
              class="addressInfo"
            >
              <div class="adress_detail">{{ addressInfo.address }}</div>
              <div class="adress_personal">
                <span>{{ addressInfo.name }}</span>
                <span>+{{ addressInfo.areaCode }} {{ addressInfo.phone }}</span>
              </div>
            </div>
            <i
              v-if="paramsInfo.redeemType != 1"
              class="el-icon-arrow-right adress-icon"
            />
            <div v-if="paramsInfo.redeemType == 1" class="node-detail">
              {{
                isChinese ? rewardDetailsInfo.nodeZh : rewardDetailsInfo.nodeEn
              }}
            </div>
          </div>
          <el-divider />
          <div class="giftBox">
            <div class="item-image">
              <img
                class="imgs"
                :src="
                  isChinese ? rewardDetailsInfo.imgZh : rewardDetailsInfo.imgEn
                "
                alt=""
              />
              <div class="gift-tag">
                <div class="tags">
                  <img class="tag-image" src="@/assets/integral/score.png" />
                  <div class="tag-text">
                    {{ rewardDetailsInfo.pointsRequire }}
                  </div>
                </div>
              </div>
              <div class="foot-tag">
                {{
                  $t("integral.remainder", {
                    value: rewardDetailsInfo.quantityRemain,
                  })
                }}
              </div>
            </div>
            <div class="giftText">
              <div class="title">
                {{
                  isChinese
                    ? rewardDetailsInfo.titleZh
                    : rewardDetailsInfo.titleEn
                }}
              </div>
              <div class="exchangeMethod">
                <span class="pad-20">{{ $t("exchange.exchangeMethod") }}</span>
                <span class="textLabel">{{
                  isChinese ? getPickList("Zh") : getPickList("En")
                }}</span>
              </div>
              <div class="activityTime">
                <span class="pad-20">{{ $t("exchange.activityTime") }}</span>
                <span class="textLabel"
                  >{{ parseTime(rewardDetailsInfo.startTime, "{y}-{m}-{d}") }}
                  {{ $t("exchange.to") }}
                  {{
                    parseTime(rewardDetailsInfo.endTime, "{y}-{m}-{d}")
                  }}</span
                >
              </div>
            </div>
          </div>
          <div class="exchangeNumber">
            <el-input-number
              v-model="paramsInfo.rewardCount"
              size="mini"
              :min="1"
              @change="handleChange"
            />
          </div>
          <el-divider />
          <div class="verificationCode">
            <el-input
              v-model="paramsInfo.code"
              :placeholder="$t('exchange.inputVerificationCode')"
            />
            <el-button
              type="text"
              :disabled="count < 60"
              @click.native.prevent="getValidaCode"
              >{{ getCode }}</el-button
            >
            <span class="codeMobile">({{ info.mobile }})</span>
          </div>
        </div>
        <div class="textDesc">
          <el-input
            v-model="paramsInfo.remark"
            type="textarea"
            :rows="2"
            maxlength="100"
            :placeholder="$t('exchange.inputPlaceholder')"
          />
          <div class="maxLabel">{{ $t("exchange.maxInput") }}</div>
        </div>
        <div class="confirmBox">
          <div class="showText">
            {{
              $t("exchange.confirmNumberLabel", {
                value: paramsInfo.rewardCount,
              })
            }}
            <span class="total">{{ totalIntegral }}</span>
          </div>
          <el-button
            size="medium"
            type="primary"
            round
            @click="handleSubmitRedeem"
            >{{ $t("exchange.submitOrder") }}</el-button
          >
        </div>
      </el-tab-pane>
    </el-tabs>
    <el-dialog
      :title="$t('addressManager.prompt')"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose"
    >
      <div class="title number">
        {{ $t("exchange.branch") }}：
        {{ isChinese ? rewardDetailsInfo.nodeZh : rewardDetailsInfo.nodeEn }}
      </div>
      <div class="title number">
        {{ $t("exchange.title") }}：
        {{ isChinese ? rewardDetailsInfo.titleZh : rewardDetailsInfo.titleEn }}
      </div>

      <div class="number">
        {{ $t("delivery.quantity") }}：{{ paramsInfo.rewardCount }}
      </div>
      <div class="number">
        {{ $t("integral.totalSumIntegral") }}：{{ totalIntegral }}
      </div>
      <div class="number">
        {{ $t("exchange.exchangeMethod") }}：{{ getExcahngeType() }}
      </div>
      <div v-if="addressInfo.id && paramsInfo.redeemType != 1" class="number">
        {{ $t("exchange.deliveryAddress") }}：{{ addressInfo.address }}
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">{{
          $t("customer.cancel")
        }}</el-button>
        <el-button type="primary" @click="confirmSubmit">{{
          $t("customer.submit")
        }}</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { getDictData, getDictDatas } from "@/utils/dict";
import { addresslist, addressinfo } from "@/api/address";
import {
  rewardDetails,
  exchangeSMSCode,
  redeemSingleReward,
} from "@/api/integral";
import { getInfo } from "@/api/user";
import { parseTime } from "@/utils/ruoyi";
export default {
  name: "ExchangeOperate",
  data() {
    return {
      dialogVisible: false,
      addressInfo: {},
      getCode: this.$t("login.getCode"),
      rewardDetailsInfo: {},
      count: 60,
      totalIntegral: 0,
      pickMethodList: "",
      info: {},
      paramsInfo: {
        memberId: this.$store.getters.id,
        rewardId: this.$route.query.id,
        redeemType: "1",
        rewardCount: 1,
        entrance: "3",
        remark: "",
        code: "",
      },
    };
  },
  computed: {
    isChinese() {
      this.getCode = this.$t("login.getCode");
      return this.$i18n.locale === "zh_CN";
    },
  },
  created() {
    this.getAddressList();
    this.getRewardsDetailsAPI();
    this.getInfo();
  },
  beforeRouteEnter(to, from, next) {
    next((vm) => {
      if (Object.prototype.hasOwnProperty.call(from.params, "addressId")) {
        vm.handleSelectAddress(from.params.addressId);
      }
    });
  },
  methods: {
    parseTime,
    // 兑换
    handleSubmitRedeem() {
      if (!this.paramsInfo.code) {
        this.$message.error(this.$t("exchange.messageVerificationCode"));
        return;
      }
      this.dialogVisible = true;
    },
    confirmSubmit() {
      const params = { ...this.paramsInfo };
      if (params.redeemType != "1") {
        params.recipientAddress = this.addressInfo.address;
        params.recipientName = this.addressInfo.name;
        params.recipientPhoneNum = this.addressInfo.phone;
      }
      redeemSingleReward(params).then((res) => {
        this.$message({
          message: this.$t("exchange.success"),
          type: "success",
        });
        this.dialogVisible = false;
        this.$router.push({ path: "/jiedao/jd-integral" });
      });
    },
    getExcahngeType() {
      return this.isChinese
        ? this.rewardDetailsInfo.pickMethodList.filter(
            (res) => this.paramsInfo.redeemType === res.value
          )[0].labelZh
        : this.rewardDetailsInfo.pickMethodList.filter(
            (res) => this.paramsInfo.redeemType === res.value
          )[0].labelEn;
    },
    handleClose() {
      this.dialogVisible = false;
    },
    getInfo() {
      getInfo().then((r) => {
        this.info = r.data;
      });
    },
    getValidaCode() {
      exchangeSMSCode({ memberId: this.$store.getters.id }).then(() => {
        var countDown = window.setInterval(() => {
          if (this.count < 1) {
            this.count = 60;
            this.getCode = this.$t("login.getCode");
            window.clearInterval(countDown);
          } else {
            this.count--;
            this.getCode = this.count + "s";
          }
        }, 1000);
      });
    },
    handleChange() {
      this.totalIntegral =
        this.rewardDetailsInfo.pointsRequire * this.paramsInfo.rewardCount;
    },
    getAddressList() {
      const id = this.$store.getters.id;
      addresslist({ id }).then((r) => {
        r.data.forEach((element) => {
          element.isDefault === 0 ? (this.addressInfo = element) : "";
        });
        if (this.addressInfo.isDefault != 0 && r.data.length > 0) {
          this.addressInfo = r.data[0];
        }
      });
    },
    getRewardsDetailsAPI() {
      rewardDetails({ id: this.$route.query.id }).then((res) => {
        this.rewardDetailsInfo = res.data;
        this.paramsInfo.redeemType =
          this.rewardDetailsInfo.pickMethodList[0].value;
        this.handleChange();
      });
    },
    getPickList(label) {
      return this.rewardDetailsInfo.pickMethodList
        .map((item) => item[`label${label}`])
        .join("/");
    },
    handleSelectAddress(id) {
      addressinfo({ id }).then((res) => {
        this.addressInfo = res.data;
      });
    },
    goAddressManagerPage() {
      if (this.paramsInfo.redeemType == "1") {
        return;
      }
      this.$router.push("/jiedao/jd-address-manager");
    },
  },
};
</script>
<style lang="scss" scoped>
.number {
  padding-bottom: 8px;
}
::v-deep .headerTab .el-tabs__nav-scroll {
  height: 100px;
  background: #d3e6ff;
  .el-tabs__item {
    height: 100px;
    line-height: 100px;
    text-align: center;
  }
}
.maxLabel {
  line-height: 20px;
  text-align: right;
  background: #fff;
  font-size: 14px;
  color: #d2d2d2;
  padding-right: 20px;
}
.confirmBox {
  padding-top: 80px;
  text-align: center;
  .showText {
    padding-bottom: 10px;
    .total {
      color: red;
      font-size: 26px;
    }
  }
}
.card {
  background: #fff;
  padding: 0 20px;
}
::v-deep .textDesc {
  border-top: 10px solid rgba(242, 242, 242, 1);
  height: 100px;
  .el-textarea__inner {
    padding: 20px 35px;
    border: none;
    height: 80px;
  }
}
.app-container {
  min-height: calc(100vh - 84px);
  width: 100%;
  background: rgba(242, 242, 242, 1);
}
.codeMobile {
  line-height: 40px;
  padding: 0 10px;
  font-size: 14px;
  color: #aaaaaa;
}
::v-deep .verificationCode {
  height: 40px;
  display: flex;
  padding-bottom: 20px;
  box-sizing: content-box;
  .el-input {
    width: 300px;
  }
  .el-input__inner {
    width: 300px;
    border: none;
    height: 40px;
  }
}
.giftBox {
  display: flex;
  .giftText {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 0 20px;
  }
}
.addressInfo {
  flex: 1;
  display: flex;
  justify-content: center;
  flex-direction: column;
}
.adressBox {
  padding-top: 20px;
  display: flex;
  flex: 1;
  justify-content: space-between;
  .addressInfo {
    padding-left: 20px;
  }
  .adress_personal {
    font-size: 14px;
    padding-top: 6px;
    color: rgb(170, 170, 170);
  }
}
.item-image {
  width: 160px;
  height: 120px;
  position: relative;
  .imgs {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}
::v-deep.exchangeNumber {
  padding-top: 10px;
  display: flex;
  flex-direction: row-reverse;
  .el-input-number__decrease,
  .el-input-number__increase {
    color: white;
    background: #1f8ceb;
  }
}
.gift-tag {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 9;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  min-width: 40px;
  height: 16px;
  box-sizing: border-box;
  background: linear-gradient(#ef7e1a, #f1b009);
  transform: skewX(15deg);
  border-top-right-radius: 5px;
  border-bottom-left-radius: 5px;
}
.tag-image {
  width: 12px;
  height: 12px;
}
.tags {
  display: flex;
  align-items: center;
  justify-content: center;
  transform: skewX(-15deg);
}
.tag-text {
  margin-left: 2px;
  font-weight: 500;
  color: #fff;
  font-size: 12px;
}
.foot-tag {
  position: absolute;
  padding: 0 5px;
  bottom: 0;
  right: 0;
  z-index: 9;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 55px;
  height: 16px;
  color: #fff;
  font-size: 12px;
  box-sizing: border-box;
  background: linear-gradient(#ef7e1a, #f1b009);
  border-top-right-radius: 5px;
  border-bottom-left-radius: 5px;
}
.node-detail {
  display: flex;
  flex: 1;
  padding-left: 20px;
  align-items: center;
}
.iconColor {
  color: #409eff;
}
.adress-icon {
  height: 60px;
  font-size: 40px;
  line-height: 60px;
}
.pad-20 {
  padding-right: 20px;
}
.textLabel {
  color: rgb(170, 170, 170);
}
</style>
