<template>
  <div class="app-container">
    <el-card class="box-card" style="margin: 10px auto;">
      <div class="refund-item">
        <el-form ref="logisticFrom" :model="params" :rules="rules" label-width="120px">
          <el-row :gutter="24" class="box-row">
            <el-form-item label="支付凭证图片：" prop="images">
              <div class="form-el-upload">
                <el-upload
                  :class="{hide: hideImg}"
                  :action="actionUrl"
                  :headers="getToken"
                  list-type="picture-card"
                  :before-upload="beforeUploadImg"
                  :on-remove="handleRemove"
                  :on-success="handleSuccess"
                  :on-preview="handlePictureCardPreview"
                  :limit="5"
                >
                  <div slot="tip" class="el-upload__tip">请上传jgp，jpeg，png格式的图片，每张不超过5M</div>
                  <i class="el-icon-plus" />
                </el-upload>
                <el-dialog :visible.sync="dialogVisible">
                  <img width="100%" :src="dialogImageUrl" alt="">
                </el-dialog>
              </div>
            </el-form-item>
            <el-form-item label="备注：" prop="remarks">
              <el-input v-model.trim="params.remarks" type="textarea" show-word-limit placeholder="请输入备注文字，200字以内" maxlength="200" :autosize="{ minRows: 5, maxRows: 6}" style="width: 600px;" />
            </el-form-item>
            <el-form-item>
              <div class="filter-container" style="text-align: left;margin-top: 20px;">
                <el-button type="primary" :disabled="disabled" @click="HandlerConfirm('logisticFrom')">保存</el-button>
                <el-button plain @click="backToList">返回</el-button>
              </div>
            </el-form-item>
          </el-row>
        </el-form>
      </div>
    </el-card>
  </div>
</template>

<script>
import { orderSaveVoucher } from '@/api/order'
import { mapState } from 'vuex'
export default {
  name: 'PayRemarks',
  filters: {
  },
  data() {
    return {
      params: {
        images: [], // 线下支付凭证图片
        remarks: '', // 备注
        orderId: this.$route.query.orderId * 1
      },
      fileImageList: [], // 上传图片列表
      fileUrl: process.env.VUE_APP_BASE_API + '/order/cmOrderRemark/upload/remark',
      fileList: [], // 上传文件列表
      rules: {
        images: [
          { required: true, message: '请上传支付凭证图片', type: 'array' }
        ]

      },
      dialogImageUrl: '',
      dialogVisible: false,
      hideImg: false, // 上传图片隐藏
      hideFile: false // 上传文件隐藏
    }
  },
  computed: {
    disabled() {
      return !this.params.images.length > 0
    },
    getToken() {
      return {
        'token': this.$store.getters.token
      }
    },
    actionUrl() {
      return process.env.VUE_APP_BASE_API + '/formData/MultiPictareaddData'
    },
    orderId: function() {
      return this.$route.query.orderId * 1
    },
    ...mapState({ adminName: state => state.user.name })
  },
  created() {},
  methods: {
    isImage(file) {
      return file.type === 'image/png' ||
      file.type === 'image/jpeg' ||
       file.type === 'image/jpg' ||
       file.type === 'image/webp'
    },
    HandlerConfirm(formName) {
      this.$refs[formName].validate(async valid => {
        if (valid) {
          try {
            await orderSaveVoucher(this.params)
            this.$message.success('添加成功')
            this.backToList()
          } catch (error) {
            console.log(error)
          }
        }
      })
    },
    // 上传图片事件
    handleSuccess(res, file, fileList) {
      this.params.images.push(res.data)
      this.handleChange()
    },
    // 删除图片事件
    handleRemove(file, fileList) {
      this.params.images = fileList.map(e => e.response.data)
      this.handleChange()
    },
    // 预览
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    },
    beforeUploadFile(file) {
      const whiteList = ['pdf', 'doc', 'docx', 'xlsx']
      const isUpload = file.size / 1024 / 1024 < 5
      if (whiteList.indexOf(file.name.substring(file.name.lastIndexOf('.') + 1)) === -1) {
        this.$message.error('请上传 pdf、doc、docx、xlsx格式的文件！')
        return false
      }
      if (isUpload) {
        return true
      } else {
        this.$message.error('文件过大，请重新上传！')
        return false
      }
    },
    // 图片数量判断
    handleChange(file, fileList) {
      this.hideImg = this.params.images.length >= 5
    },
    backToList() {
      this.$store.dispatch('tagsView/delView', this.$route).then(() => {
        this.$nextTick(() => {
          this.$router.replace({
            path: '/order/detail',
            query: {
              orderId: this.orderId
            }
          })
        })
      })
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-upload-list {
  display: inline-flex !important;
}
::v-deep .el-upload--picture-card {
  width: 148px !important;
  height: 148px !important;
}
::v-deep .el-upload__tip {
  position: static !important;
}

::v-deep .hide .el-upload--picture-card {
  display: none;
}
.fileUpload {
  ::v-deep .el-upload-list {
    flex-direction: column !important;
  }
}
  .app-title{
    line-height: 36px;
    font-size: 26px;
    font-weight: bold;
    color: #409EFF;
    text-align: center;
    margin: 0;
  }
  .box-card{
    margin-top: 20px;
    font-size: 14px;
  }
  .box-row{
    padding: 10px 0;
  }
  .box-row .dropdown{
    margin-top: -10px;
  }
  .refund-item{
    padding: 10px 0;
  }
  .order-item{
    background:#f7f7f7;
    margin-bottom: 20px;
    padding: 10px 15px;
    border-radius: 5px;
  }
  .product-row{
    padding: 10px 0;
    background: #EBEEF5;
    border-top: 1px dashed #DCDFE6;
  }
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 148px;
    height: 148px;
    line-height: 148px;
    text-align: center;
  }
  .avatar {
    width: 148px;
    height: 148px;
    display: block;
  }
  .avatar img {
    width: 148px;
    height: 148px;
    display: block;
  }
  .el-form-item__label{
      text-align: right !important;
  }
  .el-upload__tip{
    line-height: 20px;
    color: red;
    text-align: left;
    position: absolute;
    right: -50%;
    bottom: 0;
  }
  .span_tip{
    font-size: 12px;
    color: red;
    margin-left: 5px;
  }
  .filter-item-temp{
    width: 100px;
  }
  .op-item{
    padding: 5px 0;
  }
  .el-span-warning{
    color: #E6A23C;
  }
  .el-span-success{
    color: #67C23A;
  }
  .el-span-danger{
    color: #F56C6C;
  }
</style>

