<template>
    <div>
        <!--:http-request="upload"-->
        <!--:action="$upload.imgUrl+'/pc/common/uploadImage/'"-->
        <!--:disabled='sirIf'-->

        <el-upload
                :disabled='sirIf'
                class="avatar-uploader edit-form-banner"
                :action="$serverUrl+'/pc/common/uploadImage/'"
                :headers="headers"
                :show-file-list="false"
                :on-success="uploadBannerSuccess"
                :before-upload="beforeUploadBanner"
        >
            <img
                    v-if="banner"
                    :src="banner"
                    class="avatar"
            />
            <div v-else class="upload-txt">
                <i class="avatar-uploader-icon iconfont icontupian"></i>
            </div>
        </el-upload>
        <p class='edit-proposal' :class='[{"proposal-must":sirMust=="true"}]'>
            <span>{{sirTitle}}</span>
        </p>
    </div>
</template>

<script type="text/ecmascript-6">
import { getStorage } from '@/utils/auth'

export default {
    props: {
      sirProps: {
        type: String, default: '',
      },
      sirTitle: {
        type: String, default: '',
      },
      sirMust: {
        type: [String,Boolean], default: 'false',
      },
      sirUrl: {
        type: [String], default: '',
      },
      sirIf: {
        type: [String,Boolean], default: false,
      }
    },

    data() {
      return {
        banner: this.sirUrl,
      }
    },
    computed: {
      headers() {
        return{
          "Authorization": getStorage('token') // 直接从本地获取token就行
        }
      }
    },
  mounted() {
      console.log('sirIf',this.sirIf)
  },
    methods: {
      // 自定义上传方法 未使用
      upload(options) {
        let formData = new FormData()
        formData.append('file', options.file)
        console.log('options',options.file);
        console.log('formData',formData);

        this.$api.Common.uploadImage({
          file: formData,
        }).then(res => {
          console.log('res',res)
          // options.onSuccess({ fileId: res.fileId }) // 上传成功出现成功提示，同时把id传入
        }).catch(err => {
          console.log(err)
        })
      },
      // 上传成功
      uploadBannerSuccess(res) {
        const data = {
          sirProps: this.sirProps,
          url: res.data
        }
        this.banner = res.data;
        this.$emit('upSuccess', data)
        // this.setForm.banner = URL.createObjectURL(file.raw);
      },
      // 上传前
      beforeUploadBanner(file) {
        const isJPG = file.type === 'image/jpeg' || file.type === 'image/png';
        const isLt2M = file.size / 1024 / 1024 < 2;

        if (!isJPG) {
          this.$message.error('上传头像图片只能是 JPG、PNG 格式!');
        }
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!');
        }
        return isJPG && isLt2M;
      },
    }
  }
</script>

<style scoped lang='scss'>
    .edit-form-banner {
        width: 179px;
        height: 100px;
        line-height: 100px;
        text-align: center;
        border-radius:3px;
        border:1px dotted #D9D9D9;
        /deep/.el-upload--text {
            display: block;
        }
        .avatar {
            width: 179px;
            height: 100px;
            object-fit: cover;
        }
        .avatar-uploader-icon {
            font-size: 30px;
            color: #999999;
        }
    }
    .edit-proposal {
        position: relative;
        width: 177px;
        height: 20px;
        color: #333333;
        font-size: 14px;
        text-align: center;
        span{
            position: relative;
        }
    }
    .proposal-must{
        span:before {
            position: absolute;
            content: '*';
            color: #F04C60;
            left: -9px;
            top: -3px;
        }
    }
</style>

export const validateArr = {
  // 手机号验证
  phone: {
    reg: /^[1][3,4,5,6,7,8,9][0-9]{9}$/,
    title: '请输入有效的手机号码'
  },
  just: {
    reg: /^[1-9]\d{0,9}$/,
    title: '请输入正整数,最多9位'
  },
  // 用户名
  user: {
    reg: /^[a-zA-Z0-9]{0,20}$/,
    title: '请输入字母数字组合'
  },
  // 姓名
  name: {
    reg: /^[\u4e00-\u9fa5a-zA-Z]{2,20}$/,
    title: '请输入有效的姓名(2-20位字符)'
  },
  // 密码验证
  password: {
    reg: /^([a-zA-Z0-9]|[!@#$%^&*.`~'"|]){6,20}$/i,
    title: '请输入密码(6-20位字符(数字、字母、特殊符号))'
  },
  // 邮箱验证
  email: {
    /* eslint-disable */
    reg: /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/,
    /* eslint-enable*/
    title: '请输入正确的邮箱格式'
  },
  company: {
    reg: /^([a-zA-Z0-9_\u4e00-\u9fa5]){3,30}$/,
    title: '请输入有效的公司(3-30位字符)'
  },
  idCode: {
    reg: /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/,
    title: '请输入正确身份证号'
  }
}
export function validate(type) {
  const item = validateArr[type]
  return (rule, value, callback) => {
    if (item.reg.test(value) === false) {
      callback(new Error(item.title))
    } else {
      callback()
    }
  }
}

{ validator: validate('just') },