<template>
  <div class="invoice-add">
    <div class="invoice-add__header">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item
          v-for="(item, index) in $route.matched"
          :key="index"
          :to="{ path: item.path }"
          >{{ item.name }}</el-breadcrumb-item
        >
      </el-breadcrumb>
    </div>
    <div class="invoice-add__body">
      <el-form
        class="invoice-content"
        ref="form"
        :model="form"
        label-width="100px"
      >
        <div class="invoice-content__header">
          <el-descriptions :title="listData.applyName" :column="1">
            <el-descriptions-item label="报名时间"
              >{{ $tools.timestampToTime(listData.applyStartTime) || "" }} ~
              {{
                $tools.timestampToTime(listData.applyEndTime) || ""
              }}</el-descriptions-item
            >
            <el-descriptions-item label="温馨提示">{{
              listData.applyIntroduce || ""
            }}</el-descriptions-item>
            <el-descriptions-item label="报考专业" :span="2">{{
              listData.major
            }}</el-descriptions-item>
            <el-descriptions-item label="姓名">
              {{ listData.realname }}
            </el-descriptions-item>
            <el-descriptions-item label="身份证">{{
              listData.idCard
            }}</el-descriptions-item>
          </el-descriptions>
        </div>

        <div class="invoice-content__body">
          <el-form-item label="学员类型：">
            <el-radio
              v-for="(item, index) in radiolist"
              :key="index"
              v-model="radio"
              :label="item.name"
              v-if="
                listData.applyStatus &&
                listData.applyStatus.indexOf(item.name) !== -1
              "
              >{{ item.label }}</el-radio
            >
          </el-form-item>
        </div>

        <div class="invoice-content__footer">
          <div class="btns">
            <div class="cancel" @click="cancel">返回</div>
            <div class="ok" @click="next">下一步</div>
          </div>
        </div>
      </el-form>
    </div>
  </div>
</template>

<script>
import { mapMutations } from "vuex";
export default {
  name: "appointment",
  data() {
    return {
      radiolist: [
        { name: "1", label: "非补考学员" },
        { name: "2", label: "补考学员" },
      ],
      form: {},
      radio: "",
      goodsId: 0,
      gradeId: 0,
      orderGoodsId: 0,
      listData: [],
      goodsIdBK: null,
      applyId: "",
    };
  },
  mounted() {
    this.applyId = this.$route.query.applyId;
    this.goodsId = this.$route.query.goodsId;
    this.gradeId = this.$route.query.gradeId;
    this.orderGoodsId = this.$route.query.orderGoodsId;
    this.getApplysubscribe();
  },
  methods: {
    getApplysubscribe() {
      var data = {
        goodsId: this.goodsId,
        gradeId: this.gradeId,
        orderGoodsId: this.orderGoodsId,
        applyId: this.applyId,
      };
      this.$request.getApplysubscribe(data).then((res) => {
        if (res.data.applyStatus) {
          res.data.applyStatus = res.data.applyStatus.split(",");
        }
        this.listData = res.data;
      });
    },
    cancel() {
      this.$router.go(-1);
    },
    next() {
      if (!this.radio) {
        this.$message({
          type: "warning",
          message: "请选择您的考试身份",
        });
        return;
      }
      let data = {
        applyId: this.listData.applyId,
        applyStatus: this.radio,
        orderGoodsId: this.orderGoodsId,
        goodsId: this.goodsId,
        gradeId: this.gradeId,
      };
      this.$request
        .getApplysubscribeNext(data)
        .then((res) => {
          if (res.data === 1 || res.data === 2) {
            this.$router.push({
              path: "/person-center/my-classhour/appointment-add",
              query: {
                applyId: this.listData.applyId,
                applyStatus: this.radio,
                goodsId: this.goodsId,
                dataId: res.data,
                orderGoodsId: this.orderGoodsId,
              },
            });
          }
          if (res.data === 3) {
            this.$request
              .goodsList({
                makeGoodsId: this.goodsId,
                goodsType: 3,
                orderGoodsId: this.orderGoodsId,
              })
              .then((res) => {
                if (res.rows.length) {
                  this.goodsIdBK = res.rows[0].goodsId;
                }

                this.$confirm(
                  "您所报考的" +
                    (this.listData.major || "") +
                    "专业，考试次数已经用完。需要预约考试的" +
                    (this.radio == 1 ? "考试" : "补考") +
                    "学员，请先购买" +
                    (this.radio == 1 ? "考试" : "补考") +
                    "机会。",
                  "提示",
                  {
                    confirmButtonText: "缴费",
                    cancelButtonText: "知道了",
                  }
                )
                  .then((_) => {
                    console.log(this.goodsIdBK, "this.goodsIdBK");
                    if (!this.goodsIdBK) {
                      this.$message.warning("请联系管理员配置补考商品");
                    } else {
                      this.$request
                        .commonGoodsDetail(this.goodsIdBK)
                        .then((res) => {
                          let detail = res.data;
                          detail.learnOrderGoodsId = this.orderGoodsId;
                          detail.learnGradeId = this.gradeId;
                          detail.learnGoodsId = this.goodsId;
                          let selectGoodsList = JSON.parse(
                            JSON.stringify([detail])
                          );

                          localStorage.setItem(
                            "checkGoodsList",
                            JSON.stringify(selectGoodsList)
                          );
                          this.$router.push({
                            path: "/payment",
                            query: {
                              isBK: "1",
                            },
                          });
                        });
                    }
                    // this.$router.push({
                    //   path: "/payment-success",
                    // });
                  })
                  .catch((_) => {});
              });
          }
        })
        .catch((err) => {
          this.$message({
            type: "warning",
            message: err.msg,
          });
        });
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.invoice-add {
  overflow: hidden;
  &__header {
    border-bottom: 1px solid #eee;
    margin-top: 24px;
    padding-bottom: 20px;
  }
  &__body {
    .invoice-content {
      &__header {
        margin-top: 20px;
        width: 1110px;
        padding: 10px 12px;
        background: #fafbfc;
        border: 1px solid #eeeeee;
        box-shadow: 0px 0px 7px 1px rgba(0, 0, 0, 0.04);
        border-radius: 8px;

        .select {
          width: 1000px;
        }

        .total {
          margin-top: 10px;
          margin-left: 80px;
          font-size: 14px;

          .note {
            color: #ff3b30;
          }
        }
      }

      &__body {
        margin-top: 20px;
        width: 1110px;
        background: #fafbfc;
        border: 1px solid #eeeeee;
        box-shadow: 0px 0px 7px 1px rgba(0, 0, 0, 0.04);
        border-radius: 8px;

        .el-form-item {
          margin-bottom: 0;
        }
      }

      &__footer {
        margin-top: 20px;
        padding-bottom: 40px;

        .btns {
          margin-top: 20px;
          .cancel {
            display: inline-block;
            margin: 0 10px;
            cursor: pointer;
            width: 122px;
            height: 32px;
            background: #ffffff;
            border: 1px solid #3f8dfd;
            border-radius: 16px;
            text-align: center;
            font-size: 16px;
            line-height: 30px;
            color: #3f8dfd;
          }

          .ok {
            display: inline-block;
            margin: 0 10px;
            cursor: pointer;
            width: 122px;
            height: 32px;
            background: #3f8dfd;
            border-radius: 16px;
            color: #fff;
            text-align: center;
            line-height: 32px;
            font-size: 16px;
          }
        }
      }
    }
  }
}
</style>
