<template>
  <div class="selftmreg">
    <!-- 导航面包屑 -->
    <div class="jdindentdetail-nav">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item class="isActive" :to="{ path: '/jdtrademark' }"
          >商标注册服务</el-breadcrumb-item
        >
        <el-breadcrumb-item>自助商标注册</el-breadcrumb-item>
      </el-breadcrumb>
    </div>

    <!-- 主体页面 -->

    <!-- <SelftmregPage /> -->
    <div class="jdindentdetail-page">
      <div class="jdindentdetail-wrap">
        <!-- 主体内容步骤条 -->
        <SelftmregPageSteps ref="steps" />

        <!-- 主页内容 -->
        <el-form class="demo-ruleForm" label-width="120px">
          <div class="selftmreg_main">
            <div class="selftmreg_shu"></div>

            <ModifyTrademark v-if="index == 0" />
            <ApplicationInfo v-if="index == 1" />
            <ConfirmOrder v-if="index == 2" :msgFromParent="shareParams" />
            <PayOrder v-if="index == 3" />
          </div>

          <div style="clear:both;"></div>
        </el-form>
      </div>
    </div>

    <!-- 底部付款按钮 -->
    <div class="footer-wrap">
      <div class="tabButtomPrcie">
        <span v-if="index == 0">
          应付总额：
          <i>￥0.00</i>
        </span>
        <el-button plain @click="prev" v-if="index == 1">上一步</el-button>
        <el-button type="primary" @click="next" v-if="index == 0 || index == 1"
          >下一步</el-button
        >
        <label v-if="index == 2">
          <input type="checkbox" v-model="checked" />
          我已阅读<span>《商标服务合同》</span>且同意该合同内容
        </label>
        <el-button
          type="primary"
          @click="next"
          v-if="index == 2"
          :disabled="!checked"
          :class="{ disabled: !checked }"
          >提交订单</el-button
        >
      </div>
    </div>
  </div>
</template>

<script>
// 主体页面里面的组件
import SelftmregPageSteps from "./SelftmregPageSteps";
import ModifyTrademark from "./ModifyTrademark";
import ApplicationInfo from "./ApplicationInfo";
import ConfirmOrder from "./ConfirmOrder";
import PayOrder from "./PayOrder";
export default {
  components: {
    SelftmregPageSteps,
    ModifyTrademark,
    ApplicationInfo,
    ConfirmOrder,
    PayOrder
  },
  data() {
    return {
      //初始为0，对应第一步填写基本信息
      index: 0,
      // 是否已经勾选同意协议
      checked: false,

      shareParams: {
        steponeChoose: {
          type: 1,
          tname: "",
          icon: ""
        },
        steponeClassify: {
          cname: "",
          types: []
        },
        steptwoApplication: {
          atype: 1,
          // 申请人类型：企业
          companyName: "",
          creditCode: "",
          licenseAddress: "",
          postalCode: "",
          // 申请人类型：个体户
          username: "",
          idCard: "",
          idAddress: "",
          ucreditCode: "",
          upostalCode: ""
        },
        steptwoContact: {
          customer: "",
          telNum: "",
          email: ""
        }
      }
    };
  },
  created() {
    if (this.index == 0) {
      this.$router.push("/selftmreg");
    }
  },
  methods: {
    next() {
      // console.log(this.$refs.steps.$refs.uls.children);

      this.index++;
      // 获取a标签和i标签以给其加入高亮的样式
      let as = document.getElementsByTagName("a");
      let is = document.getElementsByTagName("i");
      if (this.index == 1) {
        // 给 第二步填写申请人信息对应的步骤进度条 添加高亮样式
        as[1].classList.add("active");
        is[3].classList.add("active");
      }
      if (this.index == 2) {
        // 给 第三步确认订单信息对应的步骤进度条 添加高亮样式
        as[2].classList.add("active");
        is[4].classList.add("active");
      }
      if (this.index == 3) {
        // 给 第四步支付订单对应的步骤进度条 添加高亮样式
        as[3].classList.add("active");
        is[5].classList.add("active");
      } else {
      }
    },
    prev() {
      // 获取a标签和i标签以给其加入高亮的样式
      let as = document.getElementsByTagName("a");
      let is = document.getElementsByTagName("i");
      // 去掉该步骤条的样式
      as[this.index].classList.remove("active");
      is[this.index + 2].classList.remove("active");
      // 加载上一步的组件
      this.index--;
    }
  },
  mounted() {
    // 类型选择 参数更新
    this.$bus.on("on-radioschoose-click", msg => {
      this.shareParams.steponeChoose.type = msg;
    });
    // 输入名字 参数更新
    this.$bus.on("on-input-brandname-blur", msg => {
      this.shareParams.steponeChoose.tname = msg;
    });

    // 申请人类型 参数更新
    this.$bus.on("on-userschoose-click", msg => {
      this.shareParams.steptwoApplication.atype = msg;
    });
    // 企业申请人 参数更新
    this.$bus.on("on-input-companyname-blur", msg => {
      this.shareParams.steptwoApplication.companyName = msg;
    });
    this.$bus.on("on-input-creditcode-blur", msg => {
      this.shareParams.steptwoApplication.creditCode = msg;
    });
    this.$bus.on("on-input-licenseaddress-blur", msg => {
      this.shareParams.steptwoApplication.licenseAddress = msg;
    });
    this.$bus.on("on-input-postalcode-blur", msg => {
      this.shareParams.steptwoApplication.postalCode = msg;
    });
    // 个体户申请人 参数更新
    this.$bus.on("on-input-username-blur", msg => {
      this.shareParams.steptwoApplication.username = msg;
    });
    this.$bus.on("on-input-idcard-blur", msg => {
      this.shareParams.steptwoApplication.idCard = msg;
    });
    this.$bus.on("on-input-idaddress-blur", msg => {
      this.shareParams.steptwoApplication.idAddress = msg;
    });
    this.$bus.on("on-input-ucreditcode-blur", msg => {
      this.shareParams.steptwoApplication.ucreditCode = msg;
    });
    this.$bus.on("on-input-upostalcode-blur", msg => {
      this.shareParams.steptwoApplication.upostalCode = msg;
    });

    // 客户联系人 参数更新
    this.$bus.on("on-input-customer-blur", msg => {
      this.shareParams.steptwoContact.customer = msg;
    });
    // 联系电话 参数更新
    this.$bus.on("on-input-telnum-blur", msg => {
      this.shareParams.steptwoContact.telNum = msg;
    });
    // 电子邮箱 参数更新
    this.$bus.on("on-input-email-blur", msg => {
      this.shareParams.steptwoContact.email = msg;
    });
  }
};
</script>

<style lang="scss" scoped>
.selftmreg {
  background-color: white;
}

/* 导航面包屑 */
.jdindentdetail-nav {
  box-sizing: border-box;
  padding-top: 17px;
  width: 1200px;
  margin: 12px auto;
  padding: 0;
  height: 24px;
  line-height: 24px;

  .el-breadcrumb {
    display: inline-block;

    .isActive {
      font-weight: 700;
      text-decoration: none;
      -webkit-transition: color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
      transition: color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
      color: #303133;
    }
    .isActive :hover {
      color: #007aff;
      cursor: pointer;
    }
  }
}

// 主体页面
.jdindentdetail-page {
  background-color: white;
  width: 1200px;
  margin: 0 auto;
  padding-bottom: 90px;
}
.jdindentdetail-wrap {
  text-align: left;
  border: 1px solid rgba(220, 223, 230, 1);
  position: relative;
}
.selftmreg_main {
  width: 100%;
  padding: 0px 20px;
  box-sizing: border-box;
  overflow: hidden;
  margin-bottom: 50px;
}
.selftmreg_shu {
  width: 1143px;
  height: 1px;
  background-color: #eeeeee;
  margin: 20px 0;
}

/* 底部付款按钮 */
.footer-wrap {
  width: 100%;
  margin-top: 20px;
  box-sizing: border-box;
  .tabButtomPrcie {
    width: 100%;
    height: 60px;
    line-height: 60px;
    font-size: 16px;
    color: #828282;
    text-align: right;
    box-sizing: border-box;
    background: #eff0f7;
    z-index: 2999;
    position: fixed;
    bottom: 0;
    left: 0;
    padding-right: 159px;
    > span {
      margin-right: 30px;
      text-align: center;
      color: #03004c;
      font-weight: 700;
      > i {
        color: #e50778;
        font-style: normal;
        font-size: 24px;
      }
    }

    label {
      font-size: 14px;
      font-family: PingFangSC;
      font-weight: 400;
      color: rgb(102, 102, 102);
      margin-right: 20px;
      span {
        color: rgb(15, 142, 233);
      }
    }

    button.el-button--primary {
      padding: 8px 20px;
      width: 170px;
      background: rgb(81, 210, 183);
      border-radius: 0px;
      color: rgb(255, 255, 255);
      border: 0px;
    }

    button {
      padding: 8px 20px;
      width: 170px;
      background: none;
      border-radius: 0px;
      color: rgb(81, 210, 183);
      border: 1px solid;
    }

    .disabled {
      opacity: 0.5;
    }
  }
}

// 底部按钮样式重写
</style>
