<template>
  <div>
    <p class="sale_title">开通品牌销售排行服务</p>
    <div style="padding: 20px">
      <el-form ref="form" label-width="200px">
        <el-form-item>
          <div @click="selectType(item)" v-for="item in payList" class="card_body"
               :class="[actionIndex==item.title?'card_select':'card_select_none']">
            <p style="margin-top: 3px">{{item.title}}</p>
            <p :style="{color:item.canBuy==1?'#ff743f':'#919191'}">
              <span style="font-size: 12px">￥</span>
              <span style="font-size: 20px">{{item.canBuy==1?item.price:"???"}}</span>
            </p>
            <p style="font-size: 12px"
               :style="{background:item.canBuy==1?'#ffeee2':'#ebebeb',color:item.canBuy==1?'#ff743f':'#919191'}">
              {{item.canBuy==1?"限时体验":"敬请期待"}}</p>
          </div>
        </el-form-item>
        <el-form-item label="订购服务:">
          <div>{{form.desc}}</div>
        </el-form-item>
        <el-form-item label="当前品牌:">
          <div>{{form.brandName}}</div>
        </el-form-item>
        <el-form-item label="公司名称:">
          <div>{{form.company}}</div>
        </el-form-item>
        <el-form-item label="联系电话:">
          <div>{{form.mobile}}</div>
        </el-form-item>
        <!--<el-form-item label="支付方式:">-->
        <!--<img style="border-radius: 3px;border: 1px solid #ffffff" src="../../../assets/img/alipay_sale.jpg" alt="">-->
        <!--</el-form-item>-->
        <el-form-item label="到期时间:">
          <div>{{form.endDate}}</div>
        </el-form-item>
        <div class="pay_details">
          <div class="pay_body">
            <p><span class="pay_money_name">支付金额</span> <span class="pay_money">￥{{form.price}}</span></p>
            <p style="color: #999999;font-size: 12px;margin-bottom: 10px;font-weight: bold">注：付款成功后，则成功生效服务，不予退款</p>
            <el-button type="primary" @click="addOrder" :loading="payLoading">提交订单</el-button>
          </div>
        </div>
      </el-form>
      <el-dialog
        title="支付"
        :close-on-click-modal="false"
        :visible.sync="isShowPay"
        width="40%"
      >
        <el-form label-width="120px">
          <el-form-item label="支付方式:">
            <el-radio v-model="payType" label="1" border>
              <div style="padding: 4px 0">
                <div style="font-size: 18px">余额支付</div>
                <div
                  style="font-size: 16px; color: #ff6600; padding-top: 3px"
                >
                  当前余额：{{infoData.balance?infoData.balance:0}}
                </div>
              </div>
            </el-radio>
          </el-form-item>
          <el-form-item label="支付密码:">
            <pay-box v-if="isShowPay" ref="payBox"></pay-box>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
    <el-button type="primary" :loading="loading" @click="pay">确认支付</el-button>
  </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
  import payBox from "@/pages/checking/paybox";
  import md5 from "md5";
  import { _getStorage } from "@/utils/utils";

  export default {
    name: "salesRankingService",
    components: {
      payBox,
    },
    data() {
      return {
        payLoading: false,
        loading: false,
        infoData: { balance: "" },
        payType: "1",
        isShowPay: false,
        actionIndex: "体验月卡",
        payList: [],
        form: {},
        orderId: "",
      };
    },
    mounted() {
      this.getInfo();
      this.getPayItem();
      this.getSaleRankInfo()
    },
    methods: {
      getSaleRankInfo() {
        let { brandId } = _getStorage("info");
        this.$axios.get("/extra/saleRankInfo", {
          params: {
            brandId,
          },
        }).then((res) => {
          if (res.data.code == 200) {
            var data = res.data.data;
            if (data.status == 1) {
              this.$router.push({
                path: "/home",
              });
            }
          }
        });
      },
      addPay() {
        this.loading = true;
        const loading = this.$loading({
          lock: true,
          text: "Loading",
          spinner: "el-icon-loading",
          background: "rgba(0, 0, 0, 0.7)",
        });
        let _this = this;
        this.$axios
          .post("/extra/pay", {
            orderId: _this.orderId,
            payPsw: _this.form.payPwd,
          })
          .then(function (res) {
            if (res.data.code == 200) {
              setTimeout(() => {
                _this.$router.push({
                  path: "/marketing/salerank",
                });
                loading.close();
              }, 1000);
            } else {
              _this.$router.push({
                path: "/home",
              });
              _this.$message.warning(res.data.message);
            }
            setTimeout(()=>{
              _this.loading = false;
            },1000)
          })
          .catch(function (res) {
            _this.$message.error("已成功购买，请勿重复支付购买!");
            _this.$router.push({
              path: "/marketing/salerank",
            });
            _this.loading = false;
            loading.close();
          });

        loading.close();
      },
      addOrder() {
        this.payLoading = true;
        const loading = this.$loading({
          lock: true,
          text: "Loading",
          spinner: "el-icon-loading",
          background: "rgba(0, 0, 0, 0.7)",
        });
        let _this = this;
        let { brandId } = _getStorage("info");
        this.$axios
          .post("/extra/addOrder", {
            itemId: _this.form.itemId,
            brandId,
          })
          .then(function (res) {
            if (res.data.code == 200) {
              _this.orderId = res.data.data.orderId;
              _this.isShowPay = true;
              loading.close();
            } else {
              _this.$message.warning(res.data.message);
            }
            setTimeout(()=>{
              _this.payLoading = false;
            },1000)
          })
          .catch(err => {
            _this.$message.error("已成功购买，请勿重复支付购买!");
            _this.$router.push({
              path: "/marketing/salerank",
            });
            _this.payLoading = false;
            loading.close();
          });
        loading.close();
      },
      getInfo() {
        let _this = this;
        this.$axios
          .get("/mypay/balance/info")
          .then(function (res) {
            if (res.data.code == 200) {
              _this.infoData.balance = res.data.data.balance;
            } else {
              _this.$message.warning(res.data.message);
            }
          })
          .catch(function (res) {
            console.log(res);
          });
      },
      getPayItem() {
        let _this = this;
        let { brandId } = _getStorage("info");
        this.$axios
          .get("/extra/payItem?brandId=" + brandId)
          .then(function (res) {
            if (res.data.code == 200) {
              _this.payList = res.data.data;
              for (let i = 0; i < _this.payList.length; i++) {
                if (_this.payList[i].canBuy == 1) {
                  _this.form = _this.payList[i];
                  _this.actionIndex = _this.payList[i].title;
                  break;
                }
              }
            } else {
              _this.$message.warning(res.data.message);
            }
          })
          .catch(function (res) {
            console.log(res);
          });
      },
      selectType(e) {
        if (e.canBuy == 0) {
          this.$message("暂未开放，敬请期待！");
        } else {
          this.form = e;
          this.actionIndex = e.title;
        }
      },
      pay() {
        if (this.form.price > this.infoData.balance) {
          this.$message("余额不足！");
          return;
        }
        let salt = "1cGciJNLA0IvAXzWw2Lw6CKnkndFTKYs";
        let patrn = /^[0-9]{1,10}$/;
        let pass = this.$refs.payBox.inputPass;
        if (patrn.exec(pass)) {
          if (pass && pass.length != 6) {
            this.$message.error("请输入六位数的密码");
            return;
          } else {
            let p1 = md5(md5(pass) + salt);
            this.form.payPwd = p1;
          }
        } else {
          this.$message.error("密码只支持纯数字0~9");
          return;
        }
        this.addPay();
      },
    },
  };
</script>

<style lang="scss" scoped>
  /deep/ .el-radio__label {
    display: inline-block;
    vertical-align: middle;
  }

  .el-radio__input {
    vertical-align: middle;
  }

  .el-radio.is-bordered {
    height: initial !important;
    padding: 12px 20px 12px 10px !important;
    background: #fff;
  }

  .el-radio.is-bordered.is-checked {
    border-color: #ff6600 !important;
  }

  /deep/ .el-radio__input.is-checked + .el-radio__label {
    color: #3f3a39 !important;
  }

  .card_body:first-child {
    margin-left: -70px;
  }

  .card_select {
    border: 2px solid #ff6a2f;
  }

  .card_select_none {
    box-shadow: 0 0 6px 0 #ccc;
  }

  .card_body {
    display: inline-block;
    font-weight: bold;
    overflow: auto;
    margin-right: 12px;
    border-radius: 10px;
    line-height: 28px;
    width: 140px;
    text-align: center;
  }

  .sale_title {
    padding: 15px;
    text-align: center;
    color: #ff7b00;
    background: #ffebcc;
    font-weight: bold;
  }

  .pay_details {
    border-top: 1px dashed #eeeeee;
    width: 88%;
    margin: 0 auto;
    .pay_body {
      text-align: right;
      margin-top: 20px;
      line-height: 2rem;
      .pay_money_name {
        font-size: 12px
      }
      .pay_money {
        color: #ff0000;
        font-size: 18px;
        font-weight: bold
      }
    }
  }
</style>
