<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>

    <!-- 主体页面 -->
    <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" @getIndex="getindex" />
            <PayOrder v-if="index == 3" />
          </div>
        </el-form>
      </div>
    </div>

    <!-- 商品/服务项目不足10项 对话框 -->
    <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose"
    >
      <span
        >01类化学原料，商品/服务项目<i>不足10项</i>，已选{{
          this.confirmStepsParams.stepOneThreeParams.smallKinds.length
        }}项，还可选{{
          10 - this.confirmStepsParams.stepOneThreeParams.smallKinds.length
        }}个小项</span
      >
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">修改</el-button>
        <el-button
          type="primary"
          @click="
            dialogVisible = false;
            index++;
          "
          >确 定</el-button
        >
      </span>
    </el-dialog>

    <!-- 底部付款按钮 -->
    <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,

      abc: 1243,
      // 验证参数:步骤一二的必填项参数验证
      confirmStepsParams: {
        stepOneThreeParams: {
          // 商标选择
          type: 1,
          tname: "",
          icon: "",
          // 手动上传或是上传图片
          brandmanual: false,
          // 自动生成图片
          brandauto: false,
          // 分类选择
          bigKind: "",
          smallKinds: []
        },
        stepTwoNineParams: {
          // 申请人类别
          atype: 1,
          // 申请人类型：企业
          companyName: "",
          creditCode: "",
          licenseAddress: "",
          postalCode: "",
          // 申请人类型：个体户
          username: "",
          idCard: "",
          idAddress: "",
          ucreditCode: "",
          upostalCode: "",

          // 联系人类别
          customer: "",
          telNum: "",
          email: ""
        }
      },

      // 商品/服务项目不足10项 对话框
      dialogVisible: false
    };
  },
  created() {
    if (this.index == 0) {
      this.$router.push("/selftmreg");
    }
  },
  methods: {
    // 去编辑的对应步骤
    getindex(index) {
      console.log(index);
      this.index = index;
    },
    next() {
      // 获取a标签和i标签以给其加入高亮的样式
      let as = document.getElementsByTagName("a");
      let is = document.getElementsByTagName("i");
      // 有选择好的 自动上传图标 或 手动上传图标
      this.confirmStepsParams.stepOneThreeParams.icon =
        localStorage.getItem("autoImgToConfirm") ||
        localStorage.getItem("manualImgToConfirm");
      if (this.index == 2) {
        // 给 第三步确认订单信息对应的步骤进度条 添加高亮样式
        as[2].classList.add("active");
        is[4].classList.add("active");
      }
      if (this.index == 1) {
        // 给 第二步填写申请人信息对应的步骤进度条 添加高亮样式
        as[1].classList.add("active");
        is[3].classList.add("active");
        // 进入第三步之前的信息验证
        if (this.confirmStepsParams.stepTwoNineParams.atype == 1) {
          if (
            this.confirmStepsParams.stepTwoNineParams.companyName == "" ||
            this.confirmStepsParams.stepTwoNineParams.creditCode == "" ||
            this.confirmStepsParams.stepTwoNineParams.licenseAddress == "" ||
            this.confirmStepsParams.stepTwoNineParams.postalCode == "" ||
            this.confirmStepsParams.stepTwoNineParams.customer == "" ||
            this.confirmStepsParams.stepTwoNineParams.telNum == "" ||
            this.confirmStepsParams.stepTwoNineParams.email == ""
          ) {
            this.$message({
              type: "warning",
              message: "请完善信息"
            });
          } else {
            this.index++;
          }
        } else if (this.confirmStepsParams.stepTwoNineParams.atype == 2) {
          if (
            this.confirmStepsParams.stepTwoNineParams.username == "" ||
            this.confirmStepsParams.stepTwoNineParams.idCard == "" ||
            this.confirmStepsParams.stepTwoNineParams.idAddress == "" ||
            this.confirmStepsParams.stepTwoNineParams.ucreditCode == "" ||
            this.confirmStepsParams.stepTwoNineParams.upostalCode == "" ||
            this.confirmStepsParams.stepTwoNineParams.customer == "" ||
            this.confirmStepsParams.stepTwoNineParams.telNum == "" ||
            this.confirmStepsParams.stepTwoNineParams.email == ""
          ) {
            this.$message({
              type: "warning",
              message: "请完善信息"
            });
          } else {
            this.index++;
          }
        }
      }
      if (this.index == 0) {
        // 进入第二步之前的信息验证
        if (
          this.confirmStepsParams.stepOneThreeParams.type == 1 ||
          this.confirmStepsParams.stepOneThreeParams.type == 3
        ) {
          console.log(
            this.confirmStepsParams.stepOneThreeParams.tname,
            this.confirmStepsParams.stepOneThreeParams.icon,
            this.confirmStepsParams.stepOneThreeParams.bigKind
          );
          if (
            this.confirmStepsParams.stepOneThreeParams.tname == "" ||
            this.confirmStepsParams.stepOneThreeParams.icon == ""
          ) {
            this.$message({
              type: "warning",
              message: "请完善信息"
            });
            console.log("asdasdsadsa");
          } else if (this.confirmStepsParams.stepOneThreeParams.bigKind == "") {
            this.$message({
              type: "warning",
              message: "请完善信息"
            });
          } else {
            if (
              this.confirmStepsParams.stepOneThreeParams.smallKinds.length < 10
            ) {
              // 弹出提示框
              this.dialogVisible = true;
            }
            // this.index++;

            // 给 第二步填写申请人信息对应的步骤进度条 添加高亮样式
            as[1].classList.add("active");
            is[3].classList.add("active");
          }
        } else if (this.confirmStepsParams.stepOneThreeParams.type == 2) {
          if (
            this.confirmStepsParams.stepOneThreeParams.icon == "" ||
            this.confirmStepsParams.stepOneThreeParams.bigKind == ""
          ) {
            this.$message({
              type: "warning",
              message: "请完善信息"
            });
          } else {
            if (
              this.confirmStepsParams.stepOneThreeParams.smallKinds.length < 10
            ) {
              this.$message({
                type: "warning",
                message: "商品/服务项目不足10项"
              });
            }
          }
        }
      }
    },
    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--;
    },

    // 商品/服务项目不足10项 对话框
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then(_ => {
          done();
        })
        .catch(_ => {});
    }
  },
  mounted() {
    // 页面初始挂载成功之后先清除之前的缓存的图片信息
    localStorage.removeItem("manualImgToConfirm");
    localStorage.removeItem("autoImgToConfirm");

    // 手动上传或上传 参数更新
    this.$bus.on("on-click-brandmanual", msg => {
      this.confirmStepsParams.stepOneThreeParams.brandmanual = msg;
    });
    // 自动生成 参数更新
    this.$bus.on("on-click-brandauto", msg => {
      this.confirmStepsParams.stepOneThreeParams.brandauto = 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;
    bottom: 377px;
    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>
