<template>
  <!-- 图片上传 -->
  <div class="select-box-img" :class="isFlex?'selectFlex':''">
    <div class="select-title">
      <span :class="isRedDot?'':'isRedDot'">*</span>
      {{name}}
    </div>

    <div class="home">
      <div class="">
        <el-upload ref="img" :class="{
            showUpload:fileList.length>=limit?true:false,
            borderRadius:uploadBorderRadius == '50%',
          }" action=""
          :multiple="limit>1"
          :accept="accept ? accept : '.jpg,.png,.jpeg,.gif'"
          :list-type="listType?listType:'picture-card'"
          :limit='limit'
          :on-remove="handleRemove"
          :http-request='httpRequest'
          :file-list="fileList"
          :disabled='disabled'
          :auto-upload="true">
          <el-button v-if="listType=='text'" size="small" type="primary">点击上传</el-button>
          <i v-else slot="default" class="el-icon-plus"></i>
        </el-upload>
      </div>

      <div v-show="showMsg" class="errorMsg">{{msg}}</div>
    </div>
  </div>
</template>

<script>
  import {clientArr} from '@/assets/admin/js/createOss.js'

  import {
    Loading
  } from 'element-ui';
  export default {
    props: ['name', 'isRedDot', 'isFlex', 'value', 'isCheck', 'createOss',
      'limit', 'witdh', 'dataType', 'listType', 'accept', 'disabled', 'uploadBorderRadius'
    ],
    data() {
      return {
        aliOss: '',
        msg: '',
        showMsg: false,
        showUpButton: false, //true隐藏 false显示上传按钮
        fileList: [],
        fileUrl: [],
      }
    },

    mounted() {
      clientArr().then(res=>{
        this.aliOss = res
      })
      if (this.value) {
        if (this.limit === 1) {
          this.fileList.push({
            url: this.value
          })
        } else {
          this.fileList = this.value
        }
      }
      this.setName(this.name)
    },
    watch: {
      fileList(val) {
        this.verification()
      },
      value(val) {
        if (val) {
          if (typeof val === 'string') {
            let list = val.split(';');
            list.forEach((url) => {
              this.setFileUrl(url);
            })
          } else {
            val.forEach((url) => {
              if (typeof url === 'string') {
                this.setFileUrl(url);
              } else {
                this.setFileUrl(url.url);
              }
            })
          }
        }
      },
    },
    methods: {
      setFileUrl(url) {
        let isAdd = true;
        this.fileList.forEach((v, k) => {
          if (v.url === url) {
            isAdd = false;
          }
        })
        if (isAdd) {
          this.fileList.push({
            name: this.getFileName(url),
            url: url
          });
        }
      },
      getFileName(o) {
        let pos = o.lastIndexOf("\\");
        return o.substring(pos + 1);
      },

      // 文件列表移除文件时的钩子
      handleRemove(file, fileList) {
        this.fileUrl.forEach((v, i) => {
          if (v == file.url) {
            this.fileUrl.splice(i, 1)
          }
        })
        this.fileList = fileList
      },

      httpRequest({
        file
      }) {
        let imgName = `${Date.parse(new Date())}/${file.name}`
        Loading.service({
          lock: true,
          text: '图片上传中',
          background: 'rgba(0, 0, 0, 0.7)'
        })
        this.aliOss.put(imgName, file).then((res) => {
          if (res.res && res.res.status == 200) {
            // console.log(`阿里云OSS上传文件成功回调`, res, url, name);
            Loading.service().close()
            this.popFun('成功', '上传成功', 'success')

            file.url = res.url;
            this.fileUrl.push(res.url)
            if (this.dataType === 1) {
              this.$emit('input', this.fileUrl)
            } else {
              this.$emit('input', this.fileUrl.join(';'))
            }
          }
        }).catch((err) => {
          this.fileList = []
          Loading.service().close()
          this.popFun('提示', '上传失败', 'error')
        })
      },

      popFun(title, msg, type) {
        this.$notify({
          title: title,
          message: msg,
          type: type
        });
      },

      // 处理name结尾的冒号
      setName(name) {
        if (this.name) {
          if (name.indexOf('：') != -1) {
            this.title = name.substr(0, name.length - 1)
          } else {
            this.title = name
          }
        }
      },
      verification() {
        if (this.isCheck) {
          this.showMsg = true

          if (this.fileList.length < 1) {
            this.msg = "请上传图片";
            return false
          }
          this.showMsg = false
          return true
        } else {
          return true
        }
      },
      alertMsg() {
        if (this.isCheck) {
          if (this.verification) {
            this.$notify.error({
              title: '提示',
              message: this.msg
            });
          }
        }
      },
    },
  }
</script>

<style scoped lang="scss">
  .selectFlex {
    display: flex;
  }

  .borderRadius {
    ::v-deep .el-upload-list--picture-card .el-upload-list__item-thumbnail {
      width: 84px;
      height: 86px;
      border-radius: 50%;
    }

    ::v-deep .el-upload-list--picture-card .el-upload-list__item {
      width: 84px;
      height: 86px;
      border-radius: 50%;
    }

    ::v-deep .el-upload--picture-card {
      width: 84px;
      height: 86px;
      border-radius: 50%;
      line-height: 100px;
      margin: 0 0 20px 0;
    }
  }

  .select-box-img {
    .home {
      max-width: 610px;
      // height: 180px;
      padding-top: 6px;
      position: relative;
      word-wrap: break-word;

      .showUpload {
        // height: 0.77083rem;
        :deep(.el-upload--picture-card){
          display: none;
          /* 上传按钮隐藏 */
        }
      }

      .errorMsg {
        min-width: 250px;
        color: #E30C0C;
        font-size: 14px;
        position: absolute;
        padding-top: 2px;
      }
    }

    .select-title {
      font-size: 18px;
      margin-bottom: 3px;
      line-height: 32px;
      color: #778CA2;

      span {
        color: #E30C0C;
      }
    }

    .isRedDot {
      display: none;
    }
  }
</style>
