<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" v-loading="loading1">
          <img v-if="imgUrl1" :src="imgUrl1" alt="" />
          <div v-else class="imgs">
            <i class="el-icon-plus"></i>
            <span>(需盖公章)</span>
          </div>
          <!-- 1 -->
          <UploadImg
            :action="action"
            :data="dataone"
            ref="upImg"
            flag="picUrl"
            :num="1"
            @getsuccess="getImgUrl"
          />
        </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" v-loading="loading2">
          <img v-if="imgUrl2" :src="imgUrl2" alt="" />
          <div v-else class="imgs">
            <i class="el-icon-plus"></i>
            <span>(需盖公章)</span>
          </div>
          <!-- 2 -->
          <UploadImg
            :action="action"
            :data="datatwo"
            ref="upImg"
            flag="picUrl"
            :num="2"
            @getsuccess="getImgUrl"
          />
        </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" v-loading="loading3">
          <img v-if="imgUrl3" :src="imgUrl3" alt="" />
          <div v-else class="imgs">
            <i class="el-icon-plus"></i>
            <span>(需盖公章)</span>
          </div>
          <!-- 3 -->
          <UploadImg
            :action="action"
            :data="datathree"
            ref="upImg"
            flag="picUrl"
            :num="3"
            @getsuccess="getImgUrl"
          />
        </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";
//
import UploadImg from "./uploadImg";
//
import { getOss, uploadStandardTm, pic2pdf } from "@/api/tmTools.js";
export default {
  components: {
    UploadImg
  },
  data() {
    return {
      chakanKey: null,
      toViewImgType: false,
      toViewImgSrc: "",
      action: "",
      dataone: {},
      datatwo: {},
      datathree: {},
      loading1: false,
      loading2: false,
      loading3: false,
      imgUrl: "",
      imgUrl1: "",
      imgUrl2: "",
      imgUrl3: ""
    };
  },
  mounted() {
    this.getOss();
  },
  methods: {
    getImgUrl(msg, num) {
      console.log(num, msg);
      this.imgUrl = msg;
      if (num == 1) {
        this.loading1 = true;
        this.imgUrl1 = msg;
      }
      if (num == 2) {
        this.loading2 = true;
        this.imgUrl2 = msg;
      }
      if (num == 3) {
        this.loading3 = true;
        this.imgUrl3 = msg;
      }
      uploadStandardTm(this.imgUrl).then(res => {
        if (res.status == 0) {
          //图片转pdf
          pic2pdf(res.data.url).then(re => {
            this.loading1 = false;
            this.loading2 = false;
            this.loading3 = false;
            if (re.status == 0) {
              this.$message({
                type: "success",
                message: "上传成功"
              });
            } else {
              this.$message.error("上传失败，请重新上传！");
            }
          });
        } else {
          this.$message.error("上传失败，请重新上传！");
        }
        //上传后重新获取偶oss
        this.getOss();
      });
    },
    getOss() {
      getOss().then(re => {
        this.dataone = re.data;
        this.datatwo = re.data;
        this.datathree = re.data;
        this.dataone.key = this.setKey();
        this.datatwo.key = this.setKey();
        this.datathree.key = this.setKey();
        this.action = re.data.url;
      });
    },
    setKey(name, flag) {
      // name = name.substring(name.length - 5);
      var myDate = new Date();
      var key =
        "zc_" +
        flag +
        Math.round(Math.random() * 10000) +
        myDate.getTime() +
        myDate.getFullYear() +
        myDate.getMonth() +
        myDate.getDate() +
        ".jpg";
      // this.$refs[flag].data.key = key;
      return key;
    },
    //
    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;
    img {
      width: 100%;
      height: 100%;
    }
    .imgs {
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      i {
        font-size: 30px;
        color: #b8b8b8;
      }
      span {
        color: #0f8ee9;
        font-size: 12px;
        margin-top: 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>
