<!-- 第三步：确认订单 -->
<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="
            this.$parent.$parent.confirmStepsParams.stepOneThreeParams.type ==
              1 &&
            this.$parent.$parent.confirmStepsParams.stepOneThreeParams
              .brandauto == true
              ? brandIconAuto
              : brandIconManual
          "
          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 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>
export default {
  props: ["msgFromParent"],

  data() {
    return {
      textarea: "",
      // 选中的商标种类
      checkedKinds: [],
      // 商标展示

      brandIconManual: "",
      brandIconAuto: ""
    };
  },
  methods: {
    // 编辑 商标信息
    goStepOne() {
      console.log(111);
      // 去第一步骤的页面
      this.$emit("getIndex", 0);
    },

    // 编辑 申请人及联系人信息
    goStepTwo() {
      console.log(222);
      // 去第二步骤的页面
      this.$emit("getIndex", 1);
    }
  },
  created() {
    let checkedKinds = JSON.parse(localStorage.getItem("classDataList"));
    this.checkedKinds = checkedKinds;

    let brandIconManual = localStorage.getItem("manualImgToConfirm");
    this.brandIconManual = brandIconManual;
    let brandIconAuto = localStorage.getItem("autoImgToConfirm");
    this.brandIconAuto = brandIconAuto;
  }
};
</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;
  }
}
// 编辑图文
.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;
      }
    }
  }
}

// 订单备注  样式没加上！！
.confirm div.el-textarea textarea.el-textarea__inner {
  border-radius: 0;
  min-width: 980px;
  height: 82px;
  resize: none;
  border: 1px solid #d6daeb;
}
</style>
