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

            <!-- 缓存第一步 填写基本信息 组件的内容 -->
            <keep-alive>
              <ModifyTrademark v-if="index == 0" />
            </keep-alive>

            <!-- 缓存第二步 填写申请人信息 组件的内容 -->
            <keep-alive>
              <ApplicationInfo v-if="index == 1" />
            </keep-alive>

            <!-- 第三步 确认订单 -->
            <ConfirmOrder v-if="index == 2" @geteditindex="getindex" />
          </div>
        </el-form>
      </div>
    </div>

    <!-- 商品/服务项目不足10项 对话框 -->
    <el-dialog title="提示" :visible.sync="dialogVisible" width="30%">
      <span
        >{{
          this.confirmStepsParams.stepOneThreeParams.bigKind
        }}，商品/服务项目<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="intoStepTwo">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 底部付款按钮 -->
    <div class="footer-wrap">
      <div class="tabButtomPrcie">
        <span v-if="index == 0">
          应付总额：
          <i
            >￥{{
              this.confirmStepsParams.stepOneThreeParams.smallKinds.length == 0
                ? "0.00"
                : "300.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="goCashier"
          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";

export default {
  components: {
    SelftmregPageSteps,
    ModifyTrademark,
    ApplicationInfo,
    ConfirmOrder
  },
  data() {
    return {
      //初始为0，对应第一步填写基本信息
      index: 0,
      // 商品/服务项目不足10项时 对话框 的显示和隐藏
      dialogVisible: false,
      // 是否已经勾选同意协议 勾选过才能去支付
      checked: false,

      // 验证参数:步骤一二的必填项参数验证
      confirmStepsParams: {
        stepOneThreeParams: {
          // 商标选择
          type: 1, // 商标类型
          tname: "", // 商标名称
          icon: "", // 商标图样
          // 分类选择
          bigKind: "", // 选中的类别 xx xxxxx 对应 大类编号 大类名称
          smallKinds: [] // 已经选中的商品/服务项
        },
        stepTwoNineParams: {
          // 申请人类别
          atype: 1,
          // 申请人类型：企业
          companyName: "",
          creditCode: "",
          licenseAddress: "",
          postalCode: "",
          // 申请人类型：个体户
          username: "",
          idCard: "",
          idAddress: "",
          ucreditCode: "",
          upostalCode: "",

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

          // 材料信息
          company: [
            { Icon: "", Text: "营业执照" },
            { Icon: "", Text: "代理委托书" },
            { Icon: "", Text: "优先权证明" }
          ],
          user: [
            { Icon: "", Text: "营业执照" },
            { Icon: "", Text: "身份证明" },
            { Icon: "", Text: "代理委托书" },
            { Icon: "", Text: "优先权证明" }
          ]
        }
      }
    };
  },
  created() {
    // 页面数据初始加载成功之后先清除之前的缓存的图片信息
    localStorage.removeItem("icon");
  },
  methods: {
    // 去支付页面
    goCashier() {
      console.log("go cashier !!!!");
      this.$router.push("/cashier");
    },
    // 商品/服务项目不足10项 对话框 点击确定按钮 进入第二步 填写申请人信息
    intoStepTwo() {
      this.dialogVisible = false;
      this.index++;
      let as = document.getElementsByTagName("a");
      let is = document.getElementsByTagName("i");
      // 给 第二步填写申请人信息对应的步骤进度条 添加高亮样式
      as[1].classList.add("active");
      is[3].classList.add("active");
    },

    // 接收第三步确认订单 子组件里面传来的index参数 去编辑的对应步骤组件
    getindex(index) {
      // 商标信息的去编辑 对应 第一步 填写基本信息 index =0
      //  申请人及联系人信息 对应 第二步 填写申请人信息 index =1
      this.index = index;
      let as = document.getElementsByTagName("a");
      let is = document.getElementsByTagName("i");
      if (index == 0) {
        // 去掉该 第三步确认订单 步骤条的样式
        as[2].classList.remove("active");
        is[4].classList.remove("active");
      }
      // 去掉该 第三步确认订单 步骤条的样式 index=1时
      as[this.index + 1].classList.remove("active");
      is[this.index + 3].classList.remove("active");
    },

    // 点击下一步按钮
    next() {
      // 获取a标签和i标签以给其加入高亮的样式
      let as = document.getElementsByTagName("a");
      let is = document.getElementsByTagName("i");

      // 图标 的localStorage缓存数据是否为非空
      this.confirmStepsParams.stepOneThreeParams.icon = localStorage.getItem(
        "icon"
      );

      // 第二步 填写申请人信息
      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++;
            // 给 第三步确认订单信息对应的步骤进度条 添加高亮样式
            as[2].classList.add("active");
            is[4].classList.add("active");
          }
        }
        // 如果申请人类型是个体户
        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++;
            // 给 第三步确认订单信息对应的步骤进度条 添加高亮样式
            as[2].classList.add("active");
            is[4].classList.add("active");
          }
        }
      }

      // 第一步 填写基本信息
      if (this.index == 0) {
        // 进入第二步之前的信息验证
        // 商标类型是 文字 和 文字及图形 则含有 商标名字 这一项
        if (
          this.confirmStepsParams.stepOneThreeParams.type == 1 ||
          this.confirmStepsParams.stepOneThreeParams.type == 3
        ) {
          // 如果商标名字 或 商标图样 为空
          if (
            this.confirmStepsParams.stepOneThreeParams.tname == "" ||
            this.confirmStepsParams.stepOneThreeParams.icon == ""
          ) {
            //  提示完善信息
            this.$message({
              type: "warning",
              message: "请完善信息"
            });
          }

          // 如果商标名字 或 商标图样 非空 商标分类并未选择
          else if (
            this.confirmStepsParams.stepOneThreeParams.bigKind == "" ||
            this.confirmStepsParams.stepOneThreeParams.smallKinds.length == 0
          ) {
            this.$message({
              type: "warning",
              message: "请选择商品分类"
            });
          }
          // 如果商标名字 或 商标图样 非空 商标分类已经选择
          else {
            // 如果选的数量少于十个
            if (
              this.confirmStepsParams.stepOneThreeParams.smallKinds.length <= 10
            ) {
              // 弹出提示框   在提示框的 确定 按钮里进入下一个组件 第二步填写申请人信息 组件并给其对应进度条高亮
              this.dialogVisible = true;
            }
          }
        }
        // 如果商标类型是 图形
        else if (this.confirmStepsParams.stepOneThreeParams.type == 2) {
          // 如果商标图样为空 null
          if (this.confirmStepsParams.stepOneThreeParams.icon == "") {
            // 提示完善信息
            this.$message({
              type: "warning",
              message: "请完善信息"
            });
          }
          // 商标图样非空
          else {
            // 如果大类为空
            if (this.confirmStepsParams.stepOneThreeParams.bigKind == "") {
              // 提示选择商标分类
              this.$message({
                type: "warning",
                message: "请选择商标分类"
              });
            }
            // 如果大类非空， 选的数量少于十个
            else if (
              this.confirmStepsParams.stepOneThreeParams.smallKinds.length <= 10
            ) {
              // 弹出提示框  在提示框的 确定 按钮里进入下一个组件 第二步填写申请人信息 组件并给其对应进度条高亮
              this.dialogVisible = true;
            }
          }
        }
      }
    },

    // 第二步 填写申请人信息 组件时， 有一个上一步按钮
    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() {}
};
</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>
