<!-- 第三步：确认订单 -->
<template>
  <div class="confirm">
    <div class="info-title">
      <i class="selftmreg_shuxian"></i>
      <h4>
        商标信息
        <span class="edit" @click="goStepOne">
          <i class="el-icon-edit"></i>
          <b>编辑</b>
        </span>
      </h4>
    </div>
    <!-- 商标信息 -->
    <div class="brand-info">
      <p>
        <strong>商标类型：</strong>
        <span>{{
          this.$parent.$parent.confirmStepsParams.stepOneThreeParams.type == 1
            ? "文字"
            : this.$parent.$parent.confirmStepsParams.stepOneThreeParams.type ==
              2
            ? "图形"
            : "文字及图形"
        }}</span>
      </p>
      <p
        v-if="
          this.$parent.$parent.confirmStepsParams.stepOneThreeParams.type !== 2
        "
      >
        <strong>商标名称：</strong>
        <span>{{
          this.$parent.$parent.confirmStepsParams.stepOneThreeParams.tname
        }}</span>
      </p>
      <p>
        <strong>商标图样：</strong>

        <img :src="brandIcon" alt />
      </p>
      <p>
        <strong>商标类别：</strong>
        <span class="detail-type">
          <i>{{
            this.$parent.$parent.confirmStepsParams.stepOneThreeParams.bigKind
          }}</i>
          <br />
          <b
            v-for="item in this.$parent.$parent.confirmStepsParams
              .stepOneThreeParams.smallKinds"
            :key="item.fullname"
            >{{ item.fullname }}</b
          >
        </span>
      </p>
    </div>

    <div class="info-title">
      <i class="selftmreg_shuxian"></i>
      <h4>
        申请人及联系人信息
        <span class="edit" @click="goStepTwo">
          <i class="el-icon-edit"></i>
          <b>编辑</b>
        </span>
      </h4>
    </div>
    <!-- 申请人及联系人信息 -->
    <div class="user-info">
      <ul>
        <li>
          <strong>申请人类型：</strong>
          <span>{{
            this.$parent.$parent.confirmStepsParams.stepTwoNineParams.atype == 1
              ? "企业"
              : "个体户"
          }}</span>
        </li>
        <li
          v-if="
            this.$parent.$parent.confirmStepsParams.stepTwoNineParams.atype == 1
          "
        >
          <strong>公司名称：</strong>
          <span>{{
            this.$parent.$parent.confirmStepsParams.stepTwoNineParams
              .companyName
          }}</span>
        </li>
        <li
          v-if="
            this.$parent.$parent.confirmStepsParams.stepTwoNineParams.atype == 1
          "
        >
          <strong>邮政编码：</strong>
          <span>{{
            this.$parent.$parent.confirmStepsParams.stepTwoNineParams.postalCode
          }}</span>
        </li>
        <li
          v-if="
            this.$parent.$parent.confirmStepsParams.stepTwoNineParams.atype == 1
          "
        >
          <strong>公司地址：</strong>
          <span>{{
            this.$parent.$parent.confirmStepsParams.stepTwoNineParams
              .licenseAddress
          }}</span>
        </li>

        <li
          v-if="
            this.$parent.$parent.confirmStepsParams.stepTwoNineParams.atype == 2
          "
        >
          <strong>申请人姓名：</strong>
          <span>{{
            this.$parent.$parent.confirmStepsParams.stepTwoNineParams.username
          }}</span>
        </li>
        <li
          v-if="
            this.$parent.$parent.confirmStepsParams.stepTwoNineParams.atype == 2
          "
        >
          <strong>邮政编码：</strong>
          <span>{{
            this.$parent.$parent.confirmStepsParams.stepTwoNineParams
              .upostalCode
          }}</span>
        </li>
        <li
          v-if="
            this.$parent.$parent.confirmStepsParams.stepTwoNineParams.atype == 2
          "
        >
          <strong>申请人地址：</strong>
          <span>{{
            this.$parent.$parent.confirmStepsParams.stepTwoNineParams.idAddress
          }}</span>
        </li>

        <li>
          <strong>联系人：</strong>
          <span>{{
            this.$parent.$parent.confirmStepsParams.stepTwoNineParams.customer
          }}</span>
        </li>
        <li>
          <strong>联系电话：</strong>
          <span>{{
            this.$parent.$parent.confirmStepsParams.stepTwoNineParams.telNum
          }}</span>
        </li>
        <li>
          <strong>电子邮箱：</strong>
          <span>{{
            this.$parent.$parent.confirmStepsParams.stepTwoNineParams.email
          }}</span>
        </li>
        <li
          v-if="
            this.$parent.$parent.confirmStepsParams.stepTwoNineParams.atype == 1
          "
        >
          <strong>信用编码：</strong>
          <span>{{
            this.$parent.$parent.confirmStepsParams.stepTwoNineParams.creditCode
          }}</span>
        </li>
        <li
          v-if="
            this.$parent.$parent.confirmStepsParams.stepTwoNineParams.atype == 2
          "
        >
          <strong>信用编码：</strong>
          <span>{{
            this.$parent.$parent.confirmStepsParams.stepTwoNineParams
              .ucreditCode
          }}</span>
        </li>

        <li
          v-if="
            this.$parent.$parent.confirmStepsParams.stepTwoNineParams.atype == 2
          "
        >
          <strong>身份证号：</strong>
          <span>{{
            this.$parent.$parent.confirmStepsParams.stepTwoNineParams.idCard
          }}</span>
        </li>
      </ul>
    </div>

    <!-- 材料信息 -->
    <div>
      <div class="info-title">
        <i class="selftmreg_shuxian"></i>
        <h4>
          材料信息&nbsp;&nbsp;&nbsp;<strong
            >(可跳过进行下一步，支付完成后，在订单中上传即可)</strong
          >
        </h4>
      </div>
      <div class="show-imgs">
        <ul
          v-if="
            this.$parent.$parent.confirmStepsParams.stepTwoNineParams.atype == 1
          "
        >
          <li
            v-for="(item, index) in this.$parent.$parent.confirmStepsParams
              .stepTwoNineParams.company"
            :key="index"
            v-show="item.Icon != ''"
          >
            <img :src="item.Icon" alt="" /><span>{{ item.Text }}</span>
          </li>
        </ul>
        <ul
          v-if="
            this.$parent.$parent.confirmStepsParams.stepTwoNineParams.atype == 2
          "
        >
          <li
            v-for="(obj, index) in this.$parent.$parent.confirmStepsParams
              .stepTwoNineParams.user"
            :key="index + obj.Text"
            v-show="obj.Icon != ''"
          >
            <img :src="obj.Icon" alt="" /><span>{{ obj.Text }}</span>
          </li>
        </ul>
      </div>
    </div>

    <div class="info-title">
      <i class="selftmreg_shuxian"></i>
      <h4>订单备注</h4>
    </div>
    <!-- 文本域 -->
    <el-input
      type="textarea"
      :rows="2"
      placeholder="如有特殊需要，请填写订单备注"
      v-model="textarea"
    ></el-input>
  </div>
</template>

<script>
import { submitSelfregTmOrder } from "@/api/tmOrder.js";
export default {
  data() {
    return {
      textarea: "",

      // 商标展示
      brandIcon: ""
    };
  },
  methods: {
    // 子向父传参 this.$emit(eventName,params)
    // 编辑 商标信息
    goStepOne() {
      // 去第一步骤的页面
      this.$emit("geteditindex", 0);
    },
    // 编辑 申请人及联系人信息
    goStepTwo() {
      // 去第二步骤的页面
      this.$emit("geteditindex", 1);
    }
  },
  created() {
    // 获取缓存里面的商标图片地址
    let brandIcon = localStorage.getItem("icon");
    this.brandIcon = brandIcon;

    // 确认订单编号的请求
    submitSelfregTmOrder().then(res => {
      console.log(res);
    });
  }
};
</script>

<style lang="scss" scoped>
.info-title {
  .selftmreg_shuxian {
    width: 3px;
    height: 15px;
    background-color: #0989c5;
    display: inherit;
    float: left;
    margin-top: 4px;
    margin-right: 10px;
  }
  h4 {
    font-size: 16px;
    font-family: PingFangSC;
    font-weight: 400;
    color: rgba(83, 83, 83, 1);
    margin-bottom: 15px;
    strong {
      margin-left: 35px;
      font-size: 14px;
      font-family: PingFangSC;
      font-weight: 400;
      color: rgba(99, 101, 105, 1);
    }
  }
}
// 编辑图文
.edit {
  color: #409efe;
}

// 商标信息
.brand-info {
  p {
    margin-bottom: 23px;
    strong {
      width: 120px;
      display: inline-block;
      text-align: right;
      color: rgb(99, 101, 105);
    }
    span {
      font-size: 14px;
      font-weight: 400;
      color: #333;
    }
    span.detail-type {
      display: inline-block;
      width: 900px;
      vertical-align: top;
      i {
        font-size: 14px;
        font-weight: 600;
        display: inline-block;
        padding-bottom: 10px;
      }
      b {
        font-size: 14px;
        font-weight: 400;
        margin-right: 20px;
        text-align: left;
        color: #333;
      }
    }
    img {
      display: inline-block;
      width: 140px;
      height: 140px;
      border: 2px dashed rgb(233, 233, 233);
      vertical-align: top;
    }
  }
}

// 申请人及联系人信息
.user-info {
  ul {
    li {
      display: inline-block;
      width: 50%;
      padding-bottom: 23px;
      strong {
        width: 120px;
        display: inline-block;
        text-align: right;
        color: rgb(99, 101, 105);
      }
      span {
        font-size: 14px;
        font-weight: 400;
        color: #333;
      }
    }
  }
}

// 材料信息
.show-imgs {
  padding-left: 44px;
  ul {
    display: flex;
    li {
      display: inline-block;
      margin-left: 15px;
      width: 100px;
      height: 140px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      img {
        display: block;
        height: 118px;
        width: 98px;
        border: 2px dashed rgb(233, 233, 233);
      }
      span {
        color: #636569;
        font-size: 14px;
        line-height: 20px;
      }
    }
  }
}
// 订单备注  样式没加上！！
.confirm div.el-textarea textarea.el-textarea__inner {
  border-radius: 0;
  min-width: 980px;
  height: 82px;
  resize: none;
  border: 1px solid #d6daeb;
}
</style>
