<template>
  <div class="signature-manage">
    <el-form
      ref="form"
      :model="form"
      label-width="100px"
      class="signature-manage-form"
      :rules="rules"
    >
      <el-form-item label="签章:" class="signature-manage_uploadForm">
        <el-upload
          ref="signatureUpload"
          :action="action"
          class="signature-manage_upload"
          :class="{ uoloadSty: showBtnDealImg, disUoloadSty: noneBtnImg }"
          list-type="picture-card"
          :on-remove="handleDealImgRemove"
          :on-change="dealImgChange"
          accept=".jpeg,.jpg,.gif,.png"
          :limit="limitCountImg"
          :file-list="fileList"
          :http-request="httpRequest"
        >
          <i class="el-icon-plus"></i>
        </el-upload>
        <template v-if="noneBtnImg">
          <el-button type="text" style="padding: 0;"  @click="reloadImg">重新上传</el-button>
          <el-button type="text" style="padding: 0;"  @click="deleteImg">删除</el-button>
        </template>
      </el-form-item>
      <el-form-item label="登录密码:" prop="oldPassWord">
        <el-input
          v-model.trim="form.oldPassWord"
          placeholder="请输入登录密码"
          show-password
          clearable
        ></el-input>
      </el-form-item>
      <el-form-item label="设置密码:" prop="password">
        <el-input
          v-model.trim="form.password"
          placeholder="请设置签章密码"
          show-password
          clearable
        ></el-input>
      </el-form-item>
      <el-form-item label="确认密码:" prop="confirmPwd">
        <el-input
          v-model.trim="form.confirmPwd"
          placeholder="请再次输入密码"
          show-password
          clearable
        ></el-input>
      </el-form-item>
    </el-form>
    <div class="signature-manage-save">
      <el-button type="primary" class="save-btn" @click="handleClick">
        保存
      </el-button>
    </div>
  </div>
</template>

<script>
  import { getSealByCurrentUserId } from '@/api/uc.js'
  import req from '@/utils/request.js'
  import { fileUrl } from '@/api/portal'

  export default {
    data() {
      return {
        form: {
          fileId: '',
          id: '',
          isUse: 0,
          password: '',
          pkVal: '',
          userId: '',
          confirmPwd: '',
          createTime: '',
          oldPassWord: '',
        },
        rules: {
          oldPassWord: [
            { required: true, message: '不能为空', trigger: 'blur' },
          ],
          password: [
            { required: true, message: '不能为空', trigger: 'blur' },
            {
              pattern: '^[a-zA-Z][a-zA-Z0-9_]*$',
              message: '只能输入字母、数字、下划线，且以字母开头',
            },
          ],
          confirmPwd: [
            { required: true, message: '不能为空', trigger: 'blur' },
            {
              pattern: '^[a-zA-Z][a-zA-Z0-9_]*$',
              message: '只能输入字母、数字、下划线，且以字母开头',
            },
          ],
        },
        limitCountImg: 1,
        showBtnDealImg: true,
        noneBtnImg: false,
        fileList: [],
        action: '',
      }
    },
    async created() {
      // 上传路径拼接
      this.action = `${window.context.portal}/system/file/v1/upload`
      // 获取签章信息
      let res = await getSealByCurrentUserId()
      if (res.fileId) {
        this.fileList.push({
          url: fileUrl(res.fileId),
          ...res,
        })
        this.noneBtnImg = true
        this.form.fileId = res.fileId
      }
      this.form.id = res.id || '' // 有id为更新 没id为新增
      this.form.pkVal = res.pkVal || ''
      this.form.userId = res.userId
    },
    methods: {
      reloadImg() {
        this.$refs.signatureUpload.clearFiles()
        this.deleteImg()
        this.$refs.signatureUpload.$children[1].$refs.input.click()
      },
      deleteImg() {
        this.fileList = []
        this.handleDealImgRemove('', this.fileList)
      },
      // 自定义上传
      async httpRequest(val) {
        const formData = new FormData()
        formData.append('files', val.file)
        let response = await req.post(
          window.context.portal + '/system/file/v1/fileUpload',
          formData
        )
        if (response.success) {
          this.$message.success('上传成功')
          this.form.fileId = response.fileId
          this.form.userId = this.$store.state.user.userInfo.user.userId
        }
      },
      // 保存
      async handleClick() {
        if (
          this.form.password === '' ||
          this.form.confirmPwd === '' ||
          this.form.oldPassWord === ''
        ) {
          this.$message.warning('请输入密码后保存')
          return
        }
        if (this.form.password !== this.form.confirmPwd) {
          this.$message.error('两次密码输入不一致')
          return
        }
        this.$refs.form.validate((res) => {
          if (res) {
            this.form.createTime = new Date()
              .toLocaleString('en-ZA')
              .replaceAll('/', '-')
              .replaceAll(',', '')
            req
              .post(window.context.uc + '/uc/electronicSeal/v1/save', this.form)
              .then((res) => {
                if (res.state) {
                  this.$message.success(res.message)
                  this.form.oldPassWord = ''
                  this.form.password = ''
                  this.form.confirmPwd = ''
                } else {
                  this.$message.error(res.message)
                }
              })
          }
        })
      },
      // 改变
      dealImgChange(file, fileList) {
        this.noneBtnImg = fileList.length >= this.limitCountImg
      },
      // 删除
      handleDealImgRemove(file, fileList) {
        this.noneBtnImg = fileList.length >= this.limitCountImg
        this.fileList = []
        this.form.fileId = ''
        // 删除签章
        // req.delete(
        //   window.context.portal + `/uc/electronicSeal/v2/${this.form.id}`
        // )
      },
    },
  }
</script>

<style lang="scss" scoped>
  .signature-manage {
    width: 50%;
    height: 400px;
    margin: 88px auto;
    ::v-deep {
      .el-input {
        width: 80%;
      }
      .el-form-item__label {
        padding: 0 30px 0 0;
      }
      .el-upload--picture-card {
        width: 208px;
        height: 108px;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: #f9f9f9;
      }
    }
    .signature-manage-save {
      width: 100%;
      text-align: center;
      margin-top: 60px;
      .save-btn {
        padding: 8px 30px;
      }
    }
    .uoloadSty .el-upload--picture-card {
      width: 110px;
      height: 110px;
      line-height: 110px;
    }
    ::v-deep .disUoloadSty .el-upload--picture-card {
      width: 0; /* 上传按钮隐藏 */
      height: 0;
      opacity: 0;
    }
    ::v-deep .el-upload-list--picture-card .el-upload-list__item {
      width: 208px;
      height: 108px;
    }
    ::v-deep .signature-manage_uploadForm{
      .el-form-item__content{
        line-height: 0;
      }
    }
    ::v-deep .signature-manage_upload {
      .el-upload-list__item-status-label, .el-upload-list__item-actions {
        display: none;
      }
    }
  }
</style>