<template>
  <div class="payment">
    <Header></Header>
    <section class="section">
      <div class="container">
        <div class="section__header">
          <div class="icon">
            <i class="img el-icon-bank-card"></i>
          </div>
          <div class="title">支付中心</div>
        </div>
        <div class="section__body">
          <div class="order-msg">
            <div class="order-msg__header">
              <div class="icon">✔</div>
              <div class="title">订单提交成功！订单编号：20220305100636</div>
              <div class="desc">订单详情▼</div>
            </div>

            <div class="order-msg__body">
              <div
                class="goods_item"
                v-for="(goodsItem, goodsIndex) in checkGoodsList"
                :key="goodsIndex"
              >
                商品名称：{{ goodsItem.goodsName }}
                <span>应付金额：{{ goodsItem.standPrice | toFixed }}元</span>
              </div>
            </div>
          </div>

          <div class="payment-way">
            <ul>
              <li :class="{ active: radio == 1 }">
                <el-radio v-model="radio" label="1">
                  <img src="@/assets/wep.png" alt="" />
                </el-radio>
              </li>
              <li :class="{ active: radio == 2 }">
                <el-radio v-model="radio" label="2">
                  <img src="@/assets/unp.png" alt="" />
                </el-radio>
              </li>
            </ul>
          </div>

          <div class="payment-btn">
            应付金额：
            <div class="price">{{ total | toFixed }}</div>
            <div class="btn" @click="pay">立即支付</div>
          </div>
        </div>
      </div>
    </section>

    <el-dialog
      title="请使用微信扫码支付"
      :visible.sync="qrCodeShow"
      width="348px"
      center
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      class="qrcode"
    >
      <div class="qrcode__body">
        <div class="img">
          <img src="@/assets/qrcode.png" alt="" />
        </div>
        <p>距离二维码过期还剩<span>60</span>秒</p>
        <p>过期后请刷新重新获取二维码</p>
        <p>客服电话：020-12345678</p>
      </div>
    </el-dialog>

    <ToolBar></ToolBar>
    <Footer></Footer>
  </div>
</template>

<script>
import Footer from "@/components/footer/index";
import Header from "@/components/header/index";
import ToolBar from "@/components/toolbar/index";
import { mapGetters } from "vuex";
export default {
  name: "Payment",
  components: {
    Footer,
    Header,
    ToolBar,
  },
  data() {
    return {
      radio: "1",
      qrCodeShow: false,
      total: 0,
    };
  },
  computed: {
    ...mapGetters(["checkGoodsList"]),
  },
  mounted() {
    if (this.checkGoodsList.length <= 0) {
      this.$router.replace("/cart");
    }

    this.caculate();
  },
  methods: {
    caculate() {
      this.total = 0;
      this.checkGoodsList.forEach((item) => {
        this.total += item.standPrice;
      });
    },
    pay() {
      if (this.radio == 1) {
        this.qrCodeShow = true;

        setTimeout(() => {
          this.qrCodeShow = false;
          this.$router.push({
            path: "payment-success",
          });
        }, 2000);
      }
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.payment {
  .section {
    &__header {
      height: 80px;
      background: #ebf3ff;
      display: flex;
      align-items: center;
      padding: 0 20px;

      .icon {
        width: 40px;
        height: 40px;
        background: #3f8dfd;
        box-shadow: 0px 0px 9px 1px rgba(63, 141, 253, 0.3);
        border-radius: 50%;
        text-align: center;
        line-height: 40px;

        .img {
          vertical-align: middle;
          display: inline-block;
          color: #fff;
          font-size: 24px;
        }
      }

      .title {
        margin-left: 20px;
        flex: 1;
        font-size: 30px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #333333;
      }
    }

    &__body {
      .order-msg {
        border-bottom: 2px solid #eee;
        &__header {
          display: flex;
          align-items: center;
          padding: 0 20px;
          height: 40px;
          .icon {
            color: #fff;
            width: 24px;
            height: 24px;
            line-height: 24px;
            border-radius: 50%;
            text-align: center;
            background: rgba(52, 199, 89, 1);
          }

          .title {
            flex: 1;
            margin-left: 10px;
          }
        }

        &__body {
          padding-left: 50px;
          .goods_item {
            margin: 16px 0;
            span {
              margin-left: 20px;
            }
          }
        }
      }
      .payment-way {
        border-bottom: 2px solid #eee;
        ul {
          li {
            margin: 24px 0;
            width: 100%;
            background: #fafbfc;
            box-shadow: 0px 0px 7px 1px rgba(0, 0, 0, 0.04);
            border-radius: 16px;
            height: 80px;
            border-radius: 16px;
            display: flex;
            align-items: center;
            padding: 0 20px;

            &.active {
              background: #f2f7fc;
              border: 1px solid #3f8dfd;
              box-shadow: 0px 0px 7px 1px rgba(0, 0, 0, 0.04);
            }

            /deep/ .el-radio__label {
              vertical-align: middle;
            }
          }
        }
      }

      .payment-btn {
        margin: 24px 0;
        display: flex;
        align-items: center;
        .price {
          font-size: 24px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          color: #ff3b30;
        }

        .btn {
          cursor: pointer;
          margin-left: 40px;
          width: 120px;
          height: 40px;
          background: #ff3b30;
          border-radius: 20px;
          text-align: center;
          line-height: 40px;
          color: #fff;
          font-size: 16px;
        }
      }
    }
  }

  .qrcode {
    &__body {
      .img {
        margin: 0 auto;
        width: 180px;
        height: 180px;
      }

      p {
        margin: 5px 0;
        text-align: center;
        font-size: 14px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #333333;
        line-height: 24px;
        span {
          color: #ff3b30;
        }
      }
    }
  }
}
</style>
