<template>
  <view class="module">
    <view class="head">
      <view class="exchange">
        <input
          v-model="couponId"
          class="exchangeField"
          type="text"
          placeholder="请输入优惠券券码"
          placeholder-style="font-size: 28rpx; color: #c8c9cc"
        />
        <div class="input-right">
          <div class="clear">
            <icon v-if="couponId" type="clear" size="16" @click="clearInput" />
          </div>
          <text class="iconfont icon-saoyisao right" @click="scanCode" />
        </div>
      </view>
    </view>
    <button class="btn" type="primary" @click="exchangeCoupon">兑换</button>
    <view class="desc">
      <view v-for="(item, index) in descList" :key="index">
        <div>{{ item }}</div>
      </view>
    </view>
    <uni-popup ref="scanFail" type="dialog" :mask-click="true">
      <uni-popup-dialog
        content="您扫描的二维码不正确，请重新扫描"
        :show-title="false"
        confirm-txt="重新扫码"
        :mkclick="true"
        hide-cancel-btn
        @confirm="reScan"
      />
    </uni-popup>
    <uni-popup ref="receiveSuccess" type="dialog" :mask-click="true">
      <uni-popup-dialog
        content="兑换成功，可在“我的优惠券”中查看"
        :show-title="false"
        :before-close="true"
        cancel-txt="继续兑换"
        confirm-txt="查看优惠券"
        @close="close"
        @confirm="confirm"
      />
    </uni-popup>
  </view>
</template>
<script>
import uniPopup from "@/components/uni-popup/uni-popup";
import uniPopupDialog from "@/components/uni-popup/uni-popup-dialog";
import { exchange, getCouponDesc } from "@/api/coupon.api";
export default {
  components: {
    uniPopup,
    uniPopupDialog
  },
  data() {
    return {
      couponId: "",
      desc: "",
      descList: []
    };
  },
  watch: {
    desc: {
      deep: true,
      immediate: true,
      handler: function(val) {
        if (val && val.desc) {
          this.descList = val.desc.split("\n") || [];
        }
      }
    }
  },
  onLoad() {
    this.getCouponDesc();
  },
  methods: {
    clearInput() {
      this.couponId = "";
    },
    scanCode() {
      uni.scanCode({
        scanType: "qrCode",
        success: res => {
          const reg = new RegExp(/^[a-zA-Z0-9]/g);
          if (res.result.length > 20 || !reg.test(res.result)) {
            this.$refs.scanFail.open();
          } else {
            this.couponId = res.result || "";
          }
        },
        fail: () => {
          this.$refs.scanFail.open();
        }
      });
    },
    reScan() {
      this.scanCode();
    },
    async getCouponDesc() {
      const [res] = await getCouponDesc();
      this.desc = res || "";
    },
    async exchangeCoupon() {
      const params = {
        couponCode: this.couponId
      };
      const [res] = await exchange(params);
      if (res) {
        this.couponId = "";
        this.$refs.receiveSuccess.open();
      }
    },
    close() {
      this.$refs.receiveSuccess.close();
    },
    confirm() {
      this.$refs.receiveSuccess.close();
      uni.navigateTo({
        url: "/pages/coupon/index"
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.module {
  background-color: #fff;
  height: 100%;
  width: 100%;
}
.btn {
  width: 670rpx;
  display: block;
  height: 80rpx;
  border-radius: 40rpx;
  font-size: 28rpx;
  line-height: 80rpx;
  padding: 0 !important;
  background: $background-primary;
  margin: 0 auto 48rpx auto;
  border: 0;
}
.desc {
  width: 658rpx;
  margin: 0 auto;
  font-size: 24rpx;
  color: #999;
}
.exchange {
  width: 670rpx;
  height: 80rpx;
  border: 1px solid #dcdcdc;
  border-radius: 40rpx;
  background-color: #f7f8fa;
  margin: 0 auto;
  margin-bottom: 24rpx;
  padding-left: 40rpx;
  display: flex;
  align-items: center;
}
.exchangeField {
  background-color: rgba(255, 255, 255, 0);
}
.head {
  padding-top: 56rpx;
}
.input-right {
  position: absolute;
  width: 116rpx;
  right: 84rpx;
  display: flex;
  align-items: baseline;
}
.clear {
  position: relative;
  left: 0;
  width: 32rpx;
}
.right {
  position: relative;
  left: 40rpx;
  font-size: 40rpx;
}
.title {
  margin-bottom: 10px;
}
</style>
