<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>
                <el-button>手动上传</el-button>
                <el-button>自动生成</el-button>
              </div>
              <div>
                <div class="trademarkImg">
                  <img src="" 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>
                <div class="trademarkImg">
                  <img src="" alt="" />
                </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>
export default {
  data() {
    return {
      drawerRight: false,
      lookIndex: null,
      drawerTitle: "",
      ruleForm: {
        name: "",
        resource: 1
      },
      rules: {
        name: [{ required: true, message: "请输入商标名称", trigger: "blur" }],
        resource: [
          { required: true, message: "请选择活动资源", trigger: "change" }
        ]
      }
    };
  },
  methods: {
    lookImg(title, index) {
      this.drawerTitle = title;
      this.lookIndex = index;
      this.drawerRight = true;
    }
  }
};
</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;
      }
      .trademarkImg {
        width: 124px;
        height: 124px;
        border: 2px dashed #e9e9e9;
        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>
