<template>
  <!-- 处方图片上传阅览 -->
  <div>
    <div class="prescription">
      <el-dialog title="上传处方图片" :visible.sync="prescriptionVisible" width="700px" :close-on-click-modal="false"
        @close="closeDialog">
        <div class="card_prescription">
          <div class="title_prescription">处方图片:</div>
          <el-upload action="#" list-type="picture-card" :file-list="fileList" :http-request="UploadImage">
            <i slot="default" class="el-icon-plus"></i>
            <div slot="file" slot-scope="{file}">
              <img class="el-upload-list__item-thumbnail" :src="file.url" alt="">
              <span class="el-upload-list__item-actions">
                <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
                  <i class="el-icon-zoom-in"></i>
                </span>
                <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleRemove(file)">
                  <i class="el-icon-delete"></i>
                </span>
              </span>
            </div>
          </el-upload>
          <div class="title_prescription">已有处方图片:</div>
          <div class="card_prescription_picture">
            <div class="img_prescription_picture" v-for="(item,index) in srcList" :key="index">
              <el-image class="image_picture" :src="item" :preview-src-list="srcList" :initial-index="urlIndex"
                @click="prescriptionLook(item,index)">
              </el-image>
              <div @click.stop="delPicture(item,index)">
                <i class="el-icon-error del_picture"></i>
              </div>
            </div>
          </div>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button plain @click="prescriptionVisible = false">取 消</el-button>
          <el-button type="primary" :loading="sendConfirmLoading" @click.stop="sendHandleAdd">确 定</el-button>
        </span>
      </el-dialog>
    </div>
    <!-- // 图片查看器 -->
    <el-image-viewer v-if="showViewer" :on-close="closeViewer" :url-list="urlList" :z-index="2100" />
  </div>
</template>

<script>
  import {
    putWaybill
  } from '@/api/waybill'
  import {
    getFileToken,
  } from '@/api/login'
  import ElImageViewer from "element-ui/packages/image/src/image-viewer";
  export default {
    props: {
      fileList: {
        type: Array,
        default: () => [],
      },
      srcList: {
        type: Array,
        default: () => [],
      },
      orderID: {
        type: Number,
        default: () => null,
      },
    },
    components: {
      ElImageViewer
    },
    data() {
      return {
        prescriptionVisible: false,
        disabled: false,

        showViewer: false, // 显示查看器
        urlList: [], // 图片的url
        urlIndex: 0,
        sendConfirmLoading: false,
      }
    },
    methods: {
      sendHandleAdd() {
        this.sendConfirmLoading = true
        let arrImg = [...this.srcList]
        this.fileList.forEach(item => {
          arrImg.push(item.url)
        })
        if (arrImg.length > 0) {
          putWaybill({
            id: this.orderID,
            prescription: arrImg,
          }).then(res => {
            if (res.code == 200) {
              this.$message({
                message: '操作成功',
                type: 'success'
              });
              this.sendConfirmLoading = false
              this.prescriptionVisible = false
              this.$emit('prescription')
            }
          })
        } else {
          this.$message.error('请先上传处方');
        }
      },
      // 查看图片
      handlePictureCardPreview(file) {
        this.urlList = this.fileList.filter(e => e.url !== file.url).map(e => e.url);
        this.urlList.unshift(file.url)
        this.showViewer = true
      },
      // 删除图片
      handleRemove(file) {
        const filteredArr = this.fileList.filter(obj => obj.uid !== file.uid);
        this.fileList = filteredArr
        console.log('handleRemove', file)
      },
      prescriptionLook(file, index) {
        this.urlIndex = index
      },
      // 删除处方
      delPicture(event, index) {
        this.srcList.splice(index, 1)
      },
      closeViewer() {
        this.showViewer = false
      },
      // 上传文件
      UploadImage(file) {
        const loading = this.$loading({
          lock: true,
          text: 'Loading',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        });
        this.file = file.file;
        let formData = new FormData();
        formData.append('file', this.file);
        getFileToken(formData).then(res => {
          if (res.code == 200) {
            let arr1 = {
              uid: this.file.uid,
              url: res.data,
            }
            this.fileList.push(arr1)
          }
          loading.close();
        }).catch(e => {
          console.log(e, 23)
          loading.close();
          this.$message.error('上传失败');
        })
      },
      closeDialog() {
        this.$emit('closeDialog')
      }
    }
  }
</script>

<style lang="scss" scoped>
  .prescription ::v-deep .el-dialog__header {
    border-bottom: 1px solid #EBEEF5;
  }

  .prescription ::v-deep .el-dialog__body {
    padding: 20px;
  }

  .title_prescription {
    font-size: 16px;
    margin: 6px 0px;
  }

  .card_prescription_picture {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
  }

  .img_prescription_picture {
    position: relative;
    width: 148px;
    height: 148px;
    margin: 0 8px 8px 0;
  }

  .image_picture {
    cursor: pointer;
    width: 100%;
    height: 100%;
    border-radius: 6px;
  }

  .del_picture {
    position: absolute;
    top: 5px;
    right: 5px;
    color: #F56C6C;
    font-size: 20px;
    cursor: pointer;
    z-index: 2;
  }
</style>
