<template>
  <div class="modifyTrademark">
    <div class="modifyTrademark-main">
      <div class="categoryFrom">
        <el-form
          :model="ruleForm"
          :rules="rules"
          ref="ruleForm"
          label-width="100px"
          class="demo-ruleForm"
          label-position="left"
        >
          <el-form-item label="商标类型：" prop="resource">
            <el-radio-group v-model="ruleForm.resource">
              <el-radio :label="1">文字</el-radio>
              <el-radio :label="2">图形</el-radio>
              <el-radio :label="3">文字及图形</el-radio>
            </el-radio-group>
            <span class="a-span" @click="lookImg('如何选择商标类型', 1)"
              >如何选择商标类型?</span
            >
          </el-form-item>
          <el-form-item
            label="商标名称："
            prop="name"
            v-if="ruleForm.resource == 1 || ruleForm.resource == 3"
          >
            <el-input
              v-model="ruleForm.name"
              placeholder="请输入商标名称"
            ></el-input>
          </el-form-item>
          <el-form-item
            label="商标图样："
            prop="name"
            v-if="ruleForm.resource == 1"
          >
            <div class="trademark-name">
              <div class="div">
                <el-button @click="manualupload"
                  >手动上传<UploadImg
                    :action="action"
                    :data="data"
                    ref="upImg"
                    flag="picUrl"
                    @getsuccess="getImgUrl"
                /></el-button>
                <el-button @click="automatic">自动生成</el-button>
              </div>
              <div class="div">
                <div class="trademarkImg">
                  <div class="loadingImg" v-loading="loading"></div>
                  <img v-if="!imgUrl" src="@/assets/imgs/zwtp.png" alt />
                  <img v-else :src="imgUrl" alt="" />
                </div>
                <p>
                  <i class="el-icon-warning"></i
                  >自动生成的商标图样默认以“宋体”字样自左向右排列递交官方。
                </p>
              </div>
            </div>
          </el-form-item>
          <el-form-item
            label="商标图样："
            prop="name"
            v-if="ruleForm.resource == 2 || ruleForm.resource == 3"
          >
            <div class="trademark-name">
              <div class="div">
                <div class="trademarkImg" v-loading="loading">
                  <img v-if="!imgUrl" src="@/assets/imgs/sctp.png" alt="" />
                  <img v-else :src="imgUrl" alt="" />
                  <UploadImg
                    :action="action"
                    :data="data"
                    ref="upImg"
                    flag="picUrl"
                    @getsuccess="getImgUrl"
                  />
                </div>
                <div class="p-left">
                  <p>
                    <i class="el-icon-warning"></i
                    >上传黑白图样，注册后可以更换商标颜色使用；
                  </p>
                  <p>
                    <i class="el-icon-warning"></i
                    >上传彩色图样，注册后只能按照该彩色图样使用，并在委托书商标名称后方增加文字“（指定颜色）”；
                  </p>
                  <p>
                    <i class="el-icon-warning"></i
                    >上传的彩色图样需与黑白图样的样式一致。
                  </p>
                  <p>
                    <span @click="lookImg('查看上传商标图样注意事项', 2)"
                      >查看上传商标图样注意事项</span
                    >
                  </p>
                </div>
              </div>
            </div>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <!--  -->
    <div class="drawer-bottom">
      <button class="esc">取消</button>
      <button class="enter">保存</button>
    </div>
    <!--  -->
    <el-drawer
      :title="drawerTitle"
      custom-class="jdindentdetail-drawer"
      size="430px"
      :visible.sync="drawerRight"
    >
      <img
        class="shangImg"
        src="@/assets/imgs/jdt/shuoming.png"
        alt=""
        v-if="lookIndex == 1"
      />
      <p v-if="lookIndex == 2">
        图样文件格式应为jpg，图形应清晰，图样文件大小应小于“200KB”，且图形像素介于“600X600-
        1500X1500”之间，如果通过扫描获得图样的，应按24位彩色，300dpi分辨率扫描符合《商标法》
        及其实施条例规定的图形（图形清晰，大于5X5厘米且小于10X10厘米），申请人（或代理人）应
        确保扫描后的图形与原图形的色彩深浅（或灰度）一致，否则，可能影响《商标注册证》上图形
        的清晰度）如上传图样为黑白，取得注册后，可以更换商标颜色使用；如上传图样为彩色，取得
        注册后只能按照该彩色图样使用；如确认提交彩色图样，需在委托书商标名称后方增加以下文字“（指定颜色）”
      </p>
    </el-drawer>
  </div>
</template>

<script>
import { word2pic, getOss, uploadStandardTm } from "@/api/tmTools.js";
import UploadImg from "@/components/uploadImg";
export default {
  components: {
    UploadImg
  },
  data() {
    return {
      drawerRight: false,
      lookIndex: null,
      drawerTitle: "",
      ruleForm: {
        name: "",
        resource: 1
      },
      rules: {
        name: [{ required: true, message: "请输入商标名称", trigger: "blur" }],
        resource: [{ required: true, message: "", trigger: "change" }]
      },
      imgUrl: "",
      loading: false,
      action: "",
      data: {
        key: "zc_picUrl670615786273319262020010.jpg",
        Bucket: "gsb-zc",
        OSSAccessKeyId: "",
        Signature: "",
        policy: "",
        success_action_status: null
      }
    };
  },
  mounted() {
    getOss().then(res => {
      this.data = res.data;
      this.data.key = this.setKey();
      this.action = res.data.url;
    });
  },
  methods: {
    getImgUrl(msg) {
      this.loading = true;
      this.imgUrl = msg;
      uploadStandardTm(this.imgUrl).then(res => {
        console.log(res);
        this.loading = false;
        if (res.status == 0) {
          this.$message({
            type: "success",
            message: "上传成功"
          });
        } else {
          this.$message.error("上传失败，请重新上传！");
        }
      });
    },
    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;
    },
    lookImg(title, index) {
      this.drawerTitle = title;
      this.lookIndex = index;
      this.drawerRight = true;
    },
    automatic() {
      if (this.ruleForm.name) {
        this.loading = true;
        word2pic(this.ruleForm.name).then(res => {
          console.log(res);
          this.loading = false;
          if (res.status == 0) {
            this.imgUrl = res.data.url;
          }
        });
      }
    },
    manualupload() {}
  }
};
</script>

<style lang="scss">
.modifyTrademark {
  width: 100%;
  .el-drawer__container {
    background: rgba(0, 0, 0, 0.2);
  }
  .shangImg {
    width: 100% !important;
  }
  p {
    line-height: 25px;
    font-size: 14px;
    font-family: PingFangSC-Regular;
    font-weight: 400;
    color: rgba(74, 74, 74, 1);
    width: 100%;
    padding: 20px 30px;
  }
}
.categoryFrom {
  .el-input {
    input {
      width: 330px;
      height: 34px;
      border-radius: 0px;
    }
  }
  .a-span {
    font-family: PingFangSC-Regular;
    font-size: 12px;
    color: #409eff;
    cursor: pointer;
    margin-left: 30px;
  }
  .trademark-name {
    width: 100%;
    .div {
      width: 100%;
      display: flex;
      margin: 7px 0 24px;
      button {
        padding: 7px 15px;
        border-radius: 100px;
        color: rgb(102, 102, 102);
        font-size: 12px;
        position: relative;
      }
      .trademarkImg {
        width: 124px;
        height: 124px;
        border: 2px dashed #e9e9e9;
        position: relative;
        .loadingImg {
          width: 100%;
          height: 100%;
          position: absolute;
          top: 0;
          left: 0;
        }
        img {
          width: 100%;
          height: 100%;
        }
      }
      p {
        font-family: PingFangSC-Regular;
        padding: 20px;
        font-size: 12px;
        color: #bbbbbb;
        line-height: 20px;
        flex: 1;
      }
      .p-left {
        flex: 1;
        display: flex;
        flex-direction: column;
        p {
          padding: 0 20px;
          line-height: 25px;
          span {
            font-family: PingFangSC-Regular;
            font-size: 12px;
            color: #409eff;
            cursor: pointer;
          }
        }
      }
    }
  }
}
</style>
