<template>
  <div>
    <viewer v-if="permission_sub != 'n'" :images="imgArr"  v-model="inputVal">
      <ul>
        <li v-for="(item, index) of imgArr" :key="index">
          <el-card
            alt="查看原图"
            :body-style="{ padding: '0px', margin: '10px', cursor: 'pointer' }"
          >
            <img v-if="previewAble" :src="item.previewUrl" :key="index" :style="style" />
            <div>
              <span>{{ item.fileName }}</span>
              <el-row v-if="downloadAble" style="float: right; padding: 3px 0">
                <el-button
                  v-if="uploadType == 'local'"
                  icon="el-icon-download"
                  circle
                  @click="downloadFile(item)"
                ></el-button>
                <el-button
                  v-if="permission_sub != 'r'"
                  icon="el-icon-delete"
                  circle
                  @click="imgArr.remove(item)"
                ></el-button>
              </el-row>
            </div>
          </el-card>
        </li>
      </ul>
    </viewer>
    <input v-if="permission_sub != 'n'" type="hidden" v-model="value" v-validate="inputValidate" :name="inputName" />
    <el-upload
      v-if="uploadType == 'local' && permission_sub != 'r' && permission_sub != 'n'"
      class="upload-demo"
      :action="actionUrl"
      :headers="header"
      :file-list="imgArr"
      :show-file-list="false"
      :on-success="success"
      :on-progress="progress"
      :before-upload="beforeAvatarUpload"
      :multiple="multiple"
      :limit="Number(limit)"
      :on-exceed="handleExceed"
    >
      <el-tooltip placement="right" effect="light">
        <div slot="content">附件格式支持：img/jpg/gif</div>
        <el-button size="mini" round icon="el-icon-plus">上传</el-button>
      </el-tooltip>
    </el-upload>
    <ht-field-tail v-if="permission_sub != 'n'" :fieldName="inputName" :readonly="!inputWriteable" :inputValue="inputVal">
      <slot name="append" slot="append"></slot>
    </ht-field-tail>
    <el-button
      v-if="uploadType == 'https' && permission_sub != 'r' && permission_sub != 'n'"
      size="mini"
      round
      icon="el-icon-plus"
      @click="dialogFormVisible = true"
      >上传</el-button
    >

    <el-dialog title="网络图片上传" :visible.sync="dialogFormVisible" :close-on-click-modal="false">
      <el-form :model="httpsFile" data-vv-scope="httpsFileForm">
        <el-form-item label="文件名称" label-width="100px">
          <ht-input
            style="width:100%"
            placeholder="请输入文件名称"
            v-model="httpsFile.fileName"
            :validate="{ required: true }"
          ></ht-input>
        </el-form-item>
        <el-form-item label="文件地址" label-width="100px">
          <ht-input
            style="width:100%"
            placeholder="请输入文件地址"
            v-model="httpsFile.url"
            :validate="{ required: true }"
          ></ht-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="httpsDialog()">确定</el-button>
        <el-button @click="dialogFormVisible = false">取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import req from "@/request.js";
import { mapState } from "vuex";
import { Loading } from "element-ui";
import hotentUtils from "@/hotent-ui-util.js";
import sub_pio_mixin from "@/components/bizComponents/sub-permission-mixin.js";
import utils from "@/components/bizComponents/utils.js";
export default {
  name: "EipViewer",
  props: [
    "value",
    "permission",
    "modelExpression",
    "imgHeight",
    "imgWidth",
    "uploadType",
    "limit",
    "multiple",
    "validate",
    "name",
    "allowPreview",
    "allowDownload"
  ],
  mixins: [sub_pio_mixin],//混入方式引入表单组件中公共属性，处理子表、孙表行内联动（切面修改permission_sub_sub）
  data() {
    return {
      httpsFile: { fileName: "", url: "", previewUrl:"" },
      dialogFormVisible: false,
      style: {
        width: "265px",
        height: "180px",
        border: "2px solid #ccc",
        borderRadius: "3px",
        padding: "1px",
        margin: "1px",
        cursor: "pointer"
      },
      imgArr: []
    };
  },
  computed: mapState({
    inputVal: {
      get() {
        return this.value;
      },
      set(val) {
        this.$emit("input", val);
      }
    },
    inputWriteable: function() {
      return utils.getWriteable(this.permission_sub);
    },
    inputValidate: function() {
      var validateObj = this.$store.state.index.validate;
      return utils.addRequiredOrNot(
        this.permission_sub,
        this.validate,
        validateObj,
        this
      );
    },
    inputName: function() {
      let labeldesc = "";
      if(this.$slots && this.$slots.labeldesc && this.$slots.labeldesc[0].children && this.$slots.labeldesc[0].children[0].text ){
        labeldesc = this.$slots.labeldesc[0].children[0].text;
        return this.name ? this.name : utils.getName()+ "-" +labeldesc;
      }else{
        return this.name ? this.name : utils.getName();
      }
    },
    header: state => {
      return { Authorization: `Bearer ${state.login.currentUser.token}` };
    },
    actionUrl: function() {
      return window.context.portal + "/system/file/v1/upload";
    },
    previewAble: function(){
      if(this.permission_sub!='w' && !this.allowPreview){
        return false;
      }
      return true;
    },
    downloadAble: function(){
      if(this.permission_sub!='w' && !this.allowDownload){
        return false;
      }
      return true;
    },
  }),
  watch: {
    imgArr: function(newVal,oldVal) {
      if (newVal && (newVal.length>0 && (!newVal[newVal.length-1].status || newVal[newVal.length-1].status!="success"))) {
        if(this.previewAble){
          let  this_ = this;
          let index = 0;
          this.imgArr.forEach(img => {
            if ( this.uploadType=='local' && !img.previewUrl){
              req.get(img.url,'arraybuffer').then(response=>{
                let type = response.headers['content-type'];
                if(type){
                  img.previewUrl = window.URL.createObjectURL(new Blob([response.data], { type: type }));
                }else{
                  img.previewUrl = window.URL.createObjectURL(new Blob([response.data]));
                }
                this_.$set(this_.imgArr, index, img);
                index++;
              });
            } else if (this.uploadType=='https') {
              img.previewUrl=img.url
            }
          });
        }
        this.$emit("input", JSON.stringify(this.imgArr));
      }
    }
  },
  mounted() {
    if (this.value) {
      let ary = JSON.parse(this.value);
      if(ary instanceof Array){
        this.imgArr = ary;
      }
    }
    if (this.imgHeight > 0 && this.imgWidth > 0) {
      this.style = {
        height: this.imgHeight + "px",
        width: this.imgWidth + "px"
      };
    }
  },
  created() {
    this.$validator = this.$root.$validator;
  },
  methods: {
    handleExceed(files, fileList) {
        this.$message.warning(`当前限制选择 ${Number(this.limit)} 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
      },
    progress() {
      Loading.service("文件上传中");
    },
    //文件上传成功时
    success(response, file, fileList) {
      let loadingInstance = Loading.service("文件上传中");
      const this_ =this;
      setTimeout(function () {
        if(fileList.length != this_.imgArr.length){
          for (let i = 0; i < fileList.length; i++) {
            let value = fileList[i].response;
            if (value) {
              let item = {};
              item.url = window.context.portal +"/file/onlinePreviewController/v1/getFileById_" +value.fileId;
              item.fileName = value.fileName;
              item.previewUrl = '';
              this_.imgArr.push(item);
            }
          }
        }
        // 以服务的方式调用的 Loading 需要异步关闭
        loadingInstance.close();
      }, 1000);
    },
    beforeAvatarUpload(file) {
      var FileExt = file.name.replace(/.+\./, "");
      if (
        ["jpg", "png", "gif", "ico", "jpeg"].indexOf(FileExt.toLowerCase()) ===
        -1
      ) {
        this.$message({
          type: "warning",
          message: "请上传后缀名为jpg、png、gif、ico、jpeg类型的图片"
        });
        return false;
      }
    },
    downloadFile(item) {
      if(item && item.url && item.url.split("getFileById_").length==2){
        let fileId = item.url.split("getFileById_")[1];
        req.download("${portal}/system/file/v1/downloadFile?fileId=" +  fileId);
      }
    },
    httpsDialog: function() {
      this.$validator.validateAll("httpsFileForm").then(result => {
        if (result) {
          let item = {
            fileName: this.httpsFile.fileName,
            url: this.httpsFile.url,
            previewUrl:''
          };
          this.imgArr.push(item);
          this.httpsFile = { fileName: "", url: "",previewUrl:"" };
          this.dialogFormVisible = false;
        } else {
          this.$message.error("表单未正确填写");
        }
      });
    }
  }
};
</script>
<style scoped>
input[aria-invalid='true'] + div /deep/ button {
  border-color: #f56c6c;
}
ul {
  display: flex;
  flex-wrap: wrap;
}
ul li {
  list-style: none;
}
</style>
