<template>
  <div class="jdindentlist-drawerDetail">
    <div class="headerTips">
      <i class="el-icon-warning"></i> 格式为<span>PDF</span> 或
      <span>JPG</span>，大小不能超过<span>10M</span>
    </div>
    <!--  -->
    <div class="from-main">
      <div class="from-items">
        <div class="from-item-title"><span>*</span>上传材料：营业执照</div>
        <div class="upload-box">
          <!-- 1 -->
        </div>
        <div class="upload-box-next">
          <img src="@/assets/imgs/sbzc/yyzz1.png" alt="" />
          <div class="chakan" @click="lookImage(1)">
            查看大图
          </div>
        </div>
      </div>
      <div class="from-items">
        <div class="from-item-title">
          <p><span>*</span>上传材料：代理委托书</p>
          <a
            href="http://gsb-zc.oss-cn-beijing.aliyuncs.com/igirl_channel_tmwtsdemo001.doc"
            >下载委托书模板</a
          >
        </div>
        <div class="upload-box">
          <!-- 2 -->
        </div>
        <div class="upload-box-next">
          <img src="@/assets/imgs/sbzc/wts1.png" alt="" />
          <div class="chakan" @click="lookImage(2)">
            查看大图
          </div>
        </div>
      </div>
      <div class="from-items">
        <div class="from-item-title">
          <p>上传材料：优先权证明</p>
          <a
            href="http://gsb-zc.oss-cn-beijing.aliyuncs.com/yzq_201908281849646526xujnsedjnqwdoni.doc"
            >下载优先权证明</a
          >
        </div>
        <div class="upload-box">
          <!-- 3 -->
        </div>
        <div class="upload-box-next">
          <img src="@/assets/imgs/sbzc/yxq.png" alt="" />
          <div class="chakan" @click="lookImage(3)">
            查看大图
          </div>
        </div>
      </div>
    </div>
    <div class="drawer-bottom">
      <button class="esc">取消</button>
      <button class="enter">保存</button>
    </div>
    <!-- dialog -->
    <el-dialog
      style="z-index:99999;background:rgba(0,0,0,.3)"
      title=""
      :visible.sync="toViewImgType"
      center
      width="72%"
      append-to-body
    >
      <img
        :src="toViewImgSrc"
        style="max-width:100%;display:block;margin: 0 auto;"
        alt=""
      />
    </el-dialog>
  </div>
</template>

<script>
import imgUrl1 from "@/assets/imgs/sbzc/yyzzD.png";
import imgUrl2 from "@/assets/imgs/sbzc/wtsD.png";
import imgUrl3 from "@/assets/imgs/sbzc/yxqD.png";
export default {
  data() {
    return {
      chakanKey: null,
      toViewImgType: false,
      toViewImgSrc: ""
    };
  },
  methods: {
    enter(index) {
      this.chakanKey = index;
    },
    lookImage(index) {
      console.log(123123);
      this.toViewImgType = true;
      switch (index) {
        case 1:
          this.toViewImgSrc = imgUrl1;
          break;
        case 2:
          this.toViewImgSrc = imgUrl2;
          break;
        case 3:
          this.toViewImgSrc = imgUrl3;
          break;
      }
    }
  }
};
</script>

<style lang="scss">
.jdindentlist-drawerDetail {
  .headerTips {
    color: red;
    position: absolute;
    top: 10px;
    left: 120px;
    font-size: 12px;
  }
  .from-main {
    width: 100%;
  }
}
.drawer-bottom {
  width: 100%;
  padding: 10px 20px 20px;
  position: absolute;
  bottom: 0px;
  left: 0;
  border-top: 1px solid #dee0eb;
  button {
    padding: 6px 28px;
    border-radius: 100px;
    border: none;
    font-family: PingFangSC-Regular;
    font-size: 12px;
    margin-right: 10px;
  }
  .esc {
    background: #e7eaf3;
    color: #777777;
  }
  .enter {
    background: #3071fe;
    color: #ffffff;
  }
}
.from-items {
  width: 100%;
  height: 120px;
  display: flex;
  margin-top: 20px;
  .from-item-title {
    width: 160px;
    font-size: 14px;
    font-family: PingFangSC;
    font-weight: 400;
    color: rgba(99, 101, 105, 1);
    span {
      color: #f00;
    }
    a {
      color: #0f8ee9;
      font-size: 13px;
      cursor: pointer;
      line-height: 0px;
      border-bottom: 1px solid #0f8ee9;
      height: 5px;
      margin-left: 50px;
    }
  }
  .upload-box {
    width: 98px;
    height: 100%;
    cursor: pointer;
    position: relative;
    border: 3px dashed #ccc;
    margin-left: 20px;
  }
  .upload-box-next {
    width: 98px;
    height: 100%;
    cursor: pointer;
    position: relative;
    border: 3px dashed #ccc;
    margin-left: 20px;
    img {
      width: 100%;
      height: 100%;
    }
    .chakan {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      background: rgba(0, 0, 0, 0.5);
      display: none;
      color: #fff;
    }
  }
  .upload-box-next:hover > .chakan {
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
</style>
