<!-- 第三步：确认订单 -->

<template>
  <div class="confirm">
    <div class="info-title">
      <i class="selftmreg_shuxian"></i>
      <h4>
        商标信息
        <span class="edit">
          <i class="el-icon-edit"></i>
          <b>编辑</b>
        </span>
      </h4>
    </div>
    <div class="brand-info">
      <p>
        <strong>商标类型：</strong>
        <span>{{ msgFromParent.steponeChoose.type }}</span>
      </p>
      <p v-if="msgFromParent.steponeChoose.type !== 2">
        <strong>商标名称：</strong>
        <span>{{ msgFromParent.steponeChoose.tname }}</span>
      </p>
      <p>
        <strong>商标图样：</strong>
        <img :src="brandIcon" alt />
      </p>
      <p>
        <strong>商标类别：</strong>
        <span class="detail-type">
          <i>15 类 乐器</i>
          <br />
          <b v-for="item in checkedKinds" :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>{{ msgFromParent.steptwoApplication.atype }}</span>
        </li>
        <li v-if="msgFromParent.steptwoApplication.atype == 1">
          <strong>公司名称：</strong>
          <span>{{ msgFromParent.steptwoApplication.companyName }}</span>
        </li>
        <li v-if="msgFromParent.steptwoApplication.atype == 1">
          <strong>邮政编码：</strong>
          <span>{{ msgFromParent.steptwoApplication.postalCode }}</span>
        </li>
        <li v-if="msgFromParent.steptwoApplication.atype == 1">
          <strong>公司地址：</strong>
          <span>{{ msgFromParent.steptwoApplication.licenseAddress }}</span>
        </li>

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

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

        <li v-if="msgFromParent.steptwoApplication.atype == 2">
          <strong>身份证号：</strong>
          <span>{{ msgFromParent.steptwoApplication.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: [],
      // 商标展示
      brandIcon: "",
      brandIcon1: "",
      brandIcon2: ""
    };
  },
  methods: {
    // click未生效
    goSteptwo() {
      console.log(222);
      // 去第二步骤的页面
    }
  },
  created() {
    let checkedKinds = JSON.parse(localStorage.getItem("classDataList"));
    this.checkedKinds = checkedKinds;

    let brandIcon1 = localStorage.getItem("manualImgToConfirm");
    this.brandIcon1 = brandIcon1;
    let brandIcon2 = localStorage.getItem("autoImgToConfirm");
    this.brandIcon2 = brandIcon2;

    this.brandIcon = this.brandIcon1;
    console.log(this.brandIcon);
  }
};
</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>
