/*更换背景*/
<template>
  <div>
    <transition name="marsk-fade">
      <div v-show="changeConfig.isShow" class="marsk" />
    </transition>
    <transition name="slide-fade">
      <div v-show="changeConfig.isShow" class="action-limit">
        <div class="title">
          <p>更换背景</p>
          <div class="operation">
            <i class="el-icon-circle-close" @click="close" />
          </div>
        </div>

        <div class="image" v-if="changeConfig.backgroundFileid">
          <el-image
            fit="contain"
            :src="changeConfig.backgroundFileid"
            :preview-src-list="[changeConfig.backgroundFileid]"
          />
          <el-button
            size="mini"
            icon="el-icon-delete"
            circle
            @click="fileRemove"
          ></el-button>
        </div>

        <el-upload
          v-else
          ref="upload"
          drag
          action="string"
          accept="image/jpeg, image/png, image/jpg"
          :multiple="false"
          :limit="1"
          :before-upload="onBeforeUploadImage"
          :http-request="UploadImage"
          :on-remove="fileRemove"
          :show-file-list="false"
        >
          <i class="el-icon-upload"></i>
          <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        </el-upload>
        <div class="el-upload__tip">
          只能上传jpg/png文件，大小不能超过 2MB，建议尺寸1920*720
        </div>

        <div class="btn-group">
          <el-button
            type="danger"
            size="small"
            class="next-btn"
            @click.native.prevent="sure"
            >确定更换</el-button
          >
        </div>
      </div>
    </transition>
  </div>
</template>

<script>
import { request, uploadFile, getImage } from '@/utils/request'
export default {
  name: 'Change',
  props: {
    changeConfig: {
      isShow: {
        type: Boolean,
        default: () => false,
      },
      backgroundFileid: {
        type: String,
        default: () => '',
      },
    },
  },
  data() {
    return {
      fileId: '',
    }
  },
  created() {},
  methods: {
    // 点击关闭
    close() {
      this.fileRemove()
      this.$emit('putChange', false)
    },
    onBeforeUploadImage(file) {
      const isIMAGE =
        file.type === 'image/jpeg' ||
        file.type === 'image/jpg' ||
        file.type === 'image/png'

      if (!isIMAGE) {
        this.$message.error('上传文件只能是图片格式!')
      }
      // return isIMAGE

      const isLt1M = file.size / 1024 / 1024 < 2
      if (!isLt1M) {
        this.$message.error('上传文件大小不能超过 2MB!')
      }
      return isIMAGE && isLt1M
    },
    UploadImage(params) {
      this.$refs.upload.clearFiles() // 清除文件对象
      const param = new FormData()
      param.append('transCode', 'B00021')
      param.append('file', params.file)
      uploadFile(param, 'service', (progress) => {
        console.log('progress: ' + progress + '%')
      })
        .then((res) => {
          this.changeConfig.backgroundFileid = getImage(res.fileId)
          this.fileId = res.fileId
        })
        .catch((err) => {})
    },
    fileRemove() {
      this.changeConfig.backgroundFileid = ''
      this.fileId = ''
    },
    // 点击更换
    sure() {
      if (!this.fileId) return this.$message.warning('请选择要上传的图片！')
      const params = {
        transCode: 'B00002',
        backgroundFileid: this.fileId,
      }
      request(params)
        .then((res) => {
          this.$store.dispatch('user/changeState', {
            key: 'backgroundFileid',
            value: this.fileId,
          })
          this.$message.success('更换背景成功！')
          this.close()
        })
        .catch((err) => {})
    },
  },
}
</script>

<style lang="scss" scoped>
@import '@/styles/variables.scss';
@import '@/styles/mixin.scss';

.marsk-fade-enter-active,
.marsk-fade-leave-active {
  transition: all 0.5s;
}
.marsk-fade-enter,
.marsk-fade-leave-to {
  opacity: 0;
}
.marsk {
  @include position(fixed, 0, 0, 0, 0, 1000);
  background: rgba(4, 112, 204, 0.05);
}

.slide-fade-enter-active {
  transition: all 0.3s ease;
}
.slide-fade-leave-active {
  transition: all 0.3s cubic-bezier(1, 0.5, 0.8, 1);
}
.slide-fade-enter,
.slide-fade-leave-to {
  transform: translateY(7.48rem);
}
.action-limit {
  @include position(fixed, 50%, auto, 55%, auto, 1001);
  @include w_h(670px);
  padding: 20px 40px 10px 30px;
  transform: translate(-50%, -50%);
  background: $color_f;
  box-shadow: 0 0 7px 7px rgba(0, 0, 0, 0.04);
  .title {
    @include flex();
    margin-bottom: 10px;
    font-size: 18px;
    font-weight: 700;
    color: $color_3;
    .operation {
      font-size: 24px;
      color: $color_9;
      &:hover {
        cursor: pointer;
        color: $color_b;
      }
    }
  }
  .image {
    position: relative;
    @include w_h(100%, 225px);
    border: 1px dashed #d9d9d9;
    .el-image {
      @include w_h(100%, 100%);
    }
    .el-button {
      @include position(absolute, 45%, auto, auto, -32px);
    }
  }
  .btn-group {
    @include w_h();
    margin: 30px auto;
    .next-btn {
      @include w_h();
    }
  }
}
</style>

<style lang="scss">
@import '@/styles/variables.scss';
@import '@/styles/mixin.scss';
.action-limit {
  .el-upload {
    @include w_h(100%, 225px);
    &:hover {
      border-color: $color_b;
    }
    &-dragger {
      @include w_h(100%, 100%);
    }
    .upload-icon {
      margin-top: 40px;
      font-size: 24px;
      color: $color_d;
      text-align: center;
    }
  }
}
</style>
