<template>
  <div class="jdindentdetail">
    <div class="jdindentdetail-wrapper">
      <div class="jdindentdetail-top">
        <div class="quan"></div>
        <div class="dangqian">
          当前位置：
        </div>
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item>交付中心</el-breadcrumb-item>
          <el-breadcrumb-item>订单详情</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <div class="jdindentdetail-main">
        <div class="jdindentdetail-main-item">
          <div class="main-item-title">
            交付流程
            <span> </span>
          </div>
          <div class="main-item-container">
            <div class="items-container">
              <el-steps :active="2" align-center>
                <el-step title="待上传材料"></el-step>
                <el-step title="待审核"></el-step>
                <el-step title="待递交"></el-step>
                <el-step title="已递交"></el-step>
                <el-step title="已完成"></el-step>
              </el-steps>
              <div class="hr"></div>
              <div class="step-row">
                <el-steps direction="vertical" :active="1" space="17px">
                  <el-step title="步骤 1"></el-step>
                  <el-step title="步骤 2"></el-step>
                  <el-step title="步骤 3"></el-step>
                  <el-step title="步骤 2"></el-step>
                  <el-step title="步骤 3"></el-step>
                  <el-step title="步骤 2"></el-step>
                  <el-step title="步骤 3"></el-step>
                </el-steps>
              </div>
            </div>
          </div>
        </div>
        <!--  -->
        <div class="jdindentdetail-main-item">
          <div class="main-item-title">
            商标信息
            <span>
              <i class="el-icon-edit" @click="showDrawer('修改商标信息', 1)"
                >修改</i
              >
            </span>
          </div>
          <div class="main-item-container">
            <div class="messageShang">
              <div class="message-left">
                <div><img src="" alt="" /></div>
                <p>商标图样</p>
              </div>
              <div class="message-right">
                <p>商标名称：<span>公司宝及图</span></p>
                <p>商标类型：<span>公司宝及图</span></p>
                <p>商标说明：<span>公司宝及图</span></p>
              </div>
            </div>
          </div>
        </div>
        <!--  -->
        <div class="jdindentdetail-main-item">
          <div class="main-item-title">
            商标类别
            <span></span>
          </div>
          <div class="main-item-container">
            <div class="classShang">
              <div class="classShang-top">
                第02类
                <span>待上传材料</span>
                <span
                  ><i
                    class="el-icon-edit"
                    @click="showDrawer('修改商标类别', 2)"
                    >修改</i
                  ></span
                >
              </div>
              <div class="classShang-main">
                <p>商品服务项目：</p>
                <ul>
                  <li>0201木材染色剂</li>
                  <li>0201着色剂</li>
                  <li>0201着色剂</li>
                  <li>0201着色剂</li>
                  <li>0201木材染色剂</li>
                  <li>0201着色剂</li>
                  <li>0201着色剂</li>
                  <li>0201着色剂</li>
                  <li>0201木材染色剂</li>
                  <li>0201着色剂</li>
                  <li>0201着色剂</li>
                  <li>0201着色剂</li>
                  <li>0201木材染色剂</li>
                  <li>0201着色剂</li>
                  <li>0201着色剂</li>
                  <li>0201着色剂</li>
                  <li>0201木材染色剂</li>
                  <li>0201着色剂</li>
                  <li>0201着色剂</li>
                  <li>0201着色剂</li>
                  <li>0201木材染色剂</li>
                  <li>0201着色剂</li>
                  <li>0201着色剂</li>
                  <li>0201着色剂</li>
                </ul>
              </div>
              <div class="classShang-main">
                <p>官方回执文件:</p>
                <ul>
                  <li>
                    <span>0201木材染色剂0201着色剂</span>
                  </li>
                  <li>
                    <span>0201木材染色剂0201着色剂</span>
                  </li>
                  <li>
                    <span>0201木材染色剂0201着色剂</span>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>
        <!--  -->
        <div class="jdindentdetail-main-item">
          <div class="main-item-title">
            交官文件
            <span
              ><i class="el-icon-edit" @click="showDrawer('修改交官文件', 3)"
                >修改</i
              ></span
            >
          </div>
          <div class="main-item-container">
            <div class="jiaoFile">
              <div class="jiaoFile-item">
                <div>
                  <img src="@/assets/imgs/indent/materialNull.png" alt="" />
                </div>
                <p>营业执照</p>
              </div>
              <div class="jiaoFile-item">
                <div>
                  <img src="@/assets/imgs/indent/materialNull.png" alt="" />
                </div>
                <p>委托书</p>
              </div>
              <div class="jiaoFile-item">
                <div>
                  <img src="@/assets/imgs/indent/materialNull.png" alt="" />
                </div>
                <p>优先权证明</p>
              </div>
            </div>
          </div>
        </div>
        <!--  -->
        <div class="jdindentdetail-main-item">
          <div class="main-item-title">
            申请人信息 -（中国大陆 - 企业）
            <span
              ><i class="el-icon-edit" @click="showDrawer('修改申请人信息', 4)"
                >修改</i
              ></span
            >
          </div>
          <div class="main-item-container">
            <div class="messageSheng">
              <div class="row-item">
                <p>公司名称：</p>
                <span>公司联大共享科技有限公司</span>
              </div>
              <div class="row-item">
                <p>社会统一信用代码：</p>
                <span>1309475938BVLAKJ</span>
              </div>
              <div class="row-item">
                <p>公司地址：</p>
                <span>北京市房山区良乡凯旋大街建设路18号-D740</span>
              </div>
              <div class="row-item">
                <p>邮政编码：</p>
                <span>100000</span>
              </div>
            </div>
          </div>
        </div>
        <!--  -->
        <div class="jdindentdetail-main-item">
          <div class="main-item-title">
            订单联系人
            <span
              ><i class="el-icon-edit" @click="showDrawer('修改订单联系人', 5)"
                >修改</i
              ></span
            >
          </div>
          <div class="main-item-container">
            <div class="peopleTel">
              <div class="row-item">
                <p>联系人：</p>
                <span>蔡辉</span>
              </div>
              <div class="row-item">
                <p>电话：</p>
                <span>13947593838</span>
              </div>
              <div class="row-item">
                <p>邮箱：</p>
                <span>234345234@qq.com</span>
              </div>
              <div class="row-item">
                <p>座机：</p>
                <span>010-6145168393</span>
              </div>
            </div>
          </div>
        </div>
        <!--  -->
        <div class="jdindentdetail-main-item" ref="qwe">
          <div class="main-item-title">
            付款信息
            <span></span>
          </div>
          <div class="main-item-container">
            <div class="messageFu">
              <div class="row-item">
                <p>实付金额：</p>
                <span>300.00</span>
              </div>
            </div>
          </div>
        </div>
        <!--  -->
      </div>
    </div>
    <el-drawer ref="apps"
      :title="drawerTitle"
      custom-class="jdindentdetail-drawer"
      size="750px"
      :visible.sync="showUploadStuff"
    >
      <!-- 修改商标信息 -->
      <ModifyTrademark v-if="drawerIndex == 1" />
      <!-- 修改商标类别 -->
      <ClassTrademark v-if="drawerIndex == 2" />
      <!-- 修改交管文件 -->
      <JiaoFile v-if="drawerIndex == 3" />
      <!-- 修改申请人信息 -->
      <ApplicantInfo v-if="drawerIndex == 4" />
      <!-- 修改订单联系人 -->
      <OrderContact v-if="drawerIndex == 5" />
    </el-drawer>
  </div>
</template>

<script>
import JiaoFile from "@/components/drawer";
import ClassTrademark from "./classTrademark";
import ModifyTrademark from "./modifyTrademark";
import ApplicantInfo from "./applicantInfo";
import OrderContact from "./orderContact";

export default {
  components: {
    JiaoFile,
    ClassTrademark,
    ModifyTrademark,
    ApplicantInfo,
    OrderContact
  },
  data() {
    return {
      drawerIndex: null,
      drawerTitle: "",
      showUploadStuff: false
    };
  },
  methods: {
    showDrawer(title, index) {
      this.drawerTitle = title;
      this.drawerIndex = index;
      this.showUploadStuff = true;
    }
  },
  mounted() {
  }
};
</script>

<style lang="scss">
.jdindentdetail {
  width: 100%;
  height: 100%;
  background: #eceef3;
  overflow: auto;
  .jdindentdetail-wrapper {
    width: 1020px;
    background: #fff;
    padding: 0 20px 20px;
    margin: 0 auto;
  }
  .el-drawer__header {
    width: 100%;
    margin: 0;
    padding: 8px 21px;
    background: #f6f9ff;
    span {
      font-family: PingFangSC-Regular;
      font-size: 14px;
      color: #333333;
      text-align: left;
    }
  }
  .el-drawer__body {
    padding: 23px 20px;
  }
}
.jdindentdetail-top {
  width: 100%;
  height: 60px;
  display: flex;
  align-items: center;
  .quan {
    display: inline-block;
    width: 12px;
    height: 12px;
    background: rgb(255, 255, 255);
    border: 3px solid rgb(48, 113, 254);
    border-radius: 100%;
  }
  .dangqian {
    margin-left: 10px;
  }
  .jdindentdetail-main {
    width: 100%;
    .jdindentdetail-main-item {
      width: 100%;
    }
  }
}
.main-item-title {
  background: #eef2fb;
  width: 100%;
  height: 32px;
  line-height: 32px;
  padding: 0 12px;
  font-family: PingFangSC-Regular;
  font-size: 12px;
  color: #333;
  span {
    float: right;
    font-family: PingFangSC-Regular;
    font-size: 12px;
    color: #3071fe;
    cursor: pointer;
  }
}
.main-item-container {
  width: 100%;
  padding: 20px 0;
}
//交付流程
.items-container {
  border: 1px solid #e3e3e3;
  padding: 20px 10px;
  .is-finish > .el-step__line {
    border-color: #3071fe;
  }
  .el-step__line {
    background-color: #eef2fb;
  }
  .is-finish .el-step__icon-inner {
    color: #fff;
    font-family: PingFangSC-Medium;
    font-weight: 500;
    font-size: 14px;
  }
  .is-process .el-step__icon-inner {
    color: #bbb;
    font-family: PingFangSC-Medium;
    font-weight: 500;
    font-size: 14px;
  }
  .is-wait .el-step__icon-inner {
    color: #bbb;
    font-family: PingFangSC-Medium;
    font-weight: 500;
    font-size: 14px;
  }
  .is-finish .el-step__icon,
  .is-finish .is-text {
    border-color: #3071fe;
    background: #3071fe;
  }
  .is-process .el-step__icon,
  .is-process .is-text {
    border-color: #eef2fb;
    background: #eef2fb;
  }
  .is-wait .el-step__icon,
  .is-wait .is-text {
    border-color: #eef2fb;
    background: #eef2fb;
  }
  .is-wait,
  .is-process {
    color: #bbb !important;
    font-weight: 500 !important;
  }
  .is-finish,
  .is-wait,
  .is-process {
    font-family: PingFangSC-Regular;
    font-size: 12px;
    color: #333333;
  }
}
.hr {
  width: 100%;
  height: 1px;
  background: #e3e3e3;
  margin: 20px 0;
}
.step-row {
  min-height: 72px;
  max-height: 120px;
  padding-left: 25px;
  overflow-y: auto;
  .el-step,
  .is-vertical,
  .el-step__head {
    line-height: 26px;
    text-align: center;
  }
  .is-finish .el-step__icon {
    background: #3071fe;
    width: 12px;
    height: 12px;
  }
  .is-finish .el-step__icon-inner {
    color: #3071fe;
  }
  .is-finish > .el-step__line {
    background-color: #fff;
    border-color: #fff;
    color: #eef2fb;
  }
  .is-process > .el-step__line {
    background-color: #fff;
    color: #eef2fb;
  }
  .is-process > .el-step__icon,
  .is-process > .el-step__icon > .el-step__icon-inner {
    width: 12px;
    height: 12px;
    border-radius: 100px;
    background-color: #eef2fb;
    color: #eef2fb;
  }
  .is-wait > .el-step__line {
    background-color: #fff;
    color: #eef2fb;
  }
  .is-wait > .el-step__icon,
  .is-wait > .el-step__icon > .el-step__icon-inner {
    width: 12px;
    height: 12px;
    border-radius: 100px;
    background-color: #eef2fb;
    color: #eef2fb;
  }
  .is-finish {
    color: #3071fe;
  }
  .is-wait,
  .is-process {
    font-family: PingFangSC-Regular;
    font-size: 12px;
    color: #666;
  }
}
.step-row::-webkit-scrollbar {
  width: 10px;
  height: 1px;
}
.step-row::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background: #eef2fb;
}
.step-row::-webkit-scrollbar-track {
  border-radius: 10px;
  background: #fff;
}
//商标信息
.messageShang {
  padding: 0 20px;
  display: flex;
  .message-left {
    width: 91px;
    height: 100%;
    margin-right: 10px;
    div {
      width: 91px;
      height: 91px;
      background: #ccc;
      background: #ffffff;
      border: 1px solid #dee0eb;
      img {
        width: 100%;
        height: 100%;
      }
    }
    p {
      width: 91px;
      text-align: center;
      font-family: PingFangSC-Regular;
      font-size: 12px;
      color: #333333;
      margin-top: 5px;
    }
  }
  .message-right {
    flex: 1;
    p {
      margin-bottom: 13px;
      font-family: PingFangSC-Regular;
      font-size: 12px;
      color: #777777;
      span {
        font-family: PingFangSC-Regular;
        font-size: 12px;
        color: #333333;
      }
    }
  }
}
//商标类别
.classShang:first-child {
  border: none;
  padding-top: 0px;
}
.classShang:last-child {
  padding-bottom: 0px;
}
.classShang {
  width: 100%;
  padding: 20px;
  border-top: 1px solid #e3e3e3;
  .classShang-top {
    border-left: 1px solid rgba(47, 47, 47, 1);
    height: 16px;
    padding-left: 8px;
    box-sizing: border-box;
    font-size: 14px;
    color: rgba(47, 47, 47, 1);
    line-height: 16px;
    span {
      color: #3071fe;
      margin-left: 24px;
    }
  }
  .classShang-main {
    display: flex;
    margin-top: 20px;
    p {
      width: 84px;
      font-family: PingFangSC-Regular;
      font-size: 12px;
      color: #777777;
    }
    ul {
      flex: 1;
      li {
        float: left;
        font-family: PingFangSC-Regular;
        font-size: 12px;
        color: #333333;
        margin-right: 20px;
        margin-bottom: 5px;
        span {
          color: #3071fe;
        }
      }
    }
  }
}
//交官文件
.jiaoFile {
  width: 100%;
  padding: 0 20px;
  display: flex;
  .jiaoFile-item {
    width: 81px;
    height: 100%;
    margin-right: 20px;
    div {
      width: 81px;
      height: 100px;
      border: 1px solid #dee0eb;
      text-align: center;
      line-height: 81px;
      img {
        width: 100%;
        height: 100%;
      }
    }
    p {
      width: 81px;
      margin-top: 5px;
      font-family: PingFangSC-Regular;
      font-size: 12px;
      color: #666666;
      text-align: center;
    }
  }
}
//申请人信息
.messageSheng {
  padding: 0 20px;
  .row-item {
    width: 100%;
    display: flex;
    line-height: 30px;
    font-family: PingFangSC-Regular;
    font-size: 12px;
    p {
      width: 108px;
      color: #777777;
    }
    span {
      color: #333333;
    }
  }
}
//订单联系人
.peopleTel {
  padding: 0 20px;
  .row-item {
    width: 100%;
    display: flex;
    line-height: 30px;
    font-family: PingFangSC-Regular;
    font-size: 12px;
    p {
      width: 48px;
      color: #777777;
    }
    span {
      color: #333333;
    }
  }
}
//付款信息
.messageFu {
  padding: 0 20px;
  .row-item {
    width: 100%;
    display: flex;
    line-height: 30px;
    font-family: PingFangSC-Regular;
    font-size: 12px;
    p {
      width: 60px;
      color: #777777;
    }
    span {
      color: #333333;
    }
  }
}
////////
</style>
