<template>
  <div class="go-form-div-container" style="overflow: hidden;position: relative">
    <go-input
      :labelWidth="labelWidth"
      class="pull-left"
      :readOnly="true"
      v-model="showValue"
      @inputClick="inputClick"
      :clearValueFun="true"
      @clearInputValue="clearInputValue"
      :suffix="suffixIcon"
      :inputStyle="{color:'#fff'}"
      :width="this.width"
      :item="this.inputItem"
    ></go-input>

    <span
      style="position: absolute;top:6px"
      @click="inputClick"
      :style="labelStyle"
    >{{fileTempName}}</span>

    <Icon
      @click="downFile"
      v-show="downFlag&&showValue!=null&&showValue.length>0"
      title="下载"
      :size="20"
      style="margin-left: 5px;margin-top: 4px;cursor: pointer"
      type="md-cloud-download"
      class="pull-left"
    />

    <Icon
      v-preview="showImage(showValue)"
      :alt="fileTempName"
      preview-title-enable="true"
      preview-nav-enable="true"
      type="ios-eye"
      style="margin-left: 5px;margin-top: 4px;cursor: pointer"
      v-show="showPreview&&showValue!=null&&showValue.length>0"
      :size="22"
      class="pull-left"
    />

    <go-win
      v-model="selImgWin"
      @ok="selImgItem"
      title="请选择图片"
      :height="imgSelHeight"
      :width="imgSelWidth"
    >
      <!--空间设置界面-->
      <imgSelCtl ref="imgSelCtl"></imgSelCtl>
    </go-win>

    <go-win v-model="mainWinFlag" title="请选择图片" @ok="confirmSelImg" :height="350" :width="515">
      <Row class="go_file_sel_upload">
        <Col span="16">
          <div class="img_show_area">
            <Icon v-show="imgSrc.length===0" type="ios-images-outline" />
            <img v-show="imgSrc.length>0" :src="imgSrc" />
          </div>
        </Col>
        <Col span="8" style="padding-top: 70px;padding-left: 10px;">
          <Row>
            <go-btn
              :width="138"
              btnSize="default"
              @btnClick="clickFromImgs"
              type="submit"
              img="goingicon go-tupian"
            >从图片库中选择</go-btn>
          </Row>

          <div style="margin-top: 10px;">
            <Upload
              ref="upload"
              :data="posData"
              :multiple="false"
              :action="uploadAction"
              :before-upload="handleBeforeUpload"
              :format="formateAry"
              :on-format-error="handleFormatError"
              :on-exceeded-size="handleMaxSize"
              :on-success="handleSuccess"
              :on-error="handleError"
              :on-remove="handleRemove"
              :headers="headers"
              :max-size="maxSize"
            >
              <go-btn type="submit" btnSize="default" :width="138" img="goingicon go-tupian">附件上传</go-btn>
            </Upload>
          </div>
        </Col>
      </Row>
    </go-win>
  </div>
</template>

<script>
import { GoingUtils, AssertUtils } from "goingutils";
import formMixin from "../../mixins/formMixins";
import uploadFileMixin from "../ctlMixins/UploadFileMixins";
import FileUtils from "../../jsCom/utils/FileUtils";
import WinUtils from "../../winUtils";
import imgSelCtl from "../pageVue/go-img-sel/img-sel-ctl";

export default {
  name: "go-file-sel-upload",
  mixins: [formMixin, uploadFileMixin],
  data: function () {
    return {
      mainWinFlag: false, //主窗口标志
      selImgWin: false, //选择图片的窗口标志
      fileTempId: "", //附件上传的临时id
      fileTempName: "", //附件上传的临时Name
      innerChange: false, //用于区分 内部值变化 还是外部传入的值变化
      imgSrc: "",
      suffixIcon: "ivu-icon ivu-icon-ios-image", //图片后置图标
      posData: {
        ...this.params,
      },
      file: {
        id: "",
        name: "",
      },
      datas: [],
    };
  },
  props: {
    labelLeft: {
      type: Number,
      default: 125,
    },
    params: {
      type: Object,
      default: () => {},
    },
    value: {},
  },
  computed: {
    //左边但label的位置
    labelStyle() {
      let def = {};
      def["left"] = this.labelLeft + "px";
      return def;
    },
    //图片选择窗口的宽度
    imgSelWidth() {
      return $(window).width() - 120;
    },
    //图片选择窗口的高度
    imgSelHeight() {
      return $(window).height() - 80;
    },
  },
  methods: {
    //外层窗口点击确定 相应校验是否选择来相应数据
    confirmSelImg() {
      if (AssertUtils.isNotEmpty(this.fileTempId)) {
        this.$emit("input", this.fileTempId);
        //执行回调
        this.$emit("backFun", {
          ids: this.fileTempId,
          names: this.fileTempName,
        });
        //清空
        this.$refs.upload.clearFiles();
        //关闭主窗口
        this.mainWinFlag = false;
      } else {
        GoingUtils.showErrorMessage("请选择相应的图片后再确定!");
      }
    },
    //上传之前
    handleBeforeUpload() {
      //清空
      this.$refs.upload.clearFiles();
      GoingUtils.showLoading("附件上传中");
    },
    //选择图片
    selImgItem() {
      //获取图片展示组件
      let imgSelCtlObj = this.$refs.imgSelCtl.getCtlObj();
      let ids = imgSelCtlObj.getSelectedRowIds();
      if (ids.length > 1) {
        GoingUtils.showErrorMessage("每次请选择一张图片!");
        return void 0;
      }
      //回调填写相应的字体图标信息
      if (AssertUtils.isNotEmpty(ids.join(GoingUtils.relChart))) {
        //设置值
        this.fileTempId = imgSelCtlObj.getSelectedRowImgIds().join(";");
        this.fileTempName = imgSelCtlObj.getImgNames(this.fileTempId);
        this.innerChange = true;
        //设置图片路径
        this.imgSrc = this.showImage(imgSelCtlObj.getSelectedRowImgIds());
        //设置回调事件
        this.$emit("on-change", this.imgSrc);
      } else {
        GoingUtils.showErrorMessage("请选择相应的图片后再确定!");
        return void 0;
      }
      this.selImgWin = false;
    },
    //从图片库总选择相应的附件
    clickFromImgs() {
      this.selImgWin = true;
    },
    //上传成功
    handleSuccess(res) {
      GoingUtils.closeLoading();
      if (res.data[0] != null) {
        let { id, fileName } = res.data[0];
        //设置图片路径
        this.imgSrc = this.showImage(id);
        //设置回调事件
        this.$emit("on-change", this.imgSrc);
        this.fileTempId = id;
        this.fileTempName = fileName;
        this.innerChange = true;
        //删除以前上传的附件信息
        this.datas.map((item) => {
          //如果不是当前附件才这么执行
          if (item.id !== id) {
            //删除以前的物理文件
            this.delFileById(item.id);
          }
        });
        return;
      }

      GoingUtils.showErrorMessage(res.msg);
    },
    //弹出附件选择和上传的窗口
    inputClick() {
      this.mainWinFlag = true;
    },
    clearInputValue() {
      if (AssertUtils.isNotEmpty(this.fileTempId)) {
        //删除附件操作
        WinUtils.executeConfirm(`您确定要删除该附件吗?`, () => {
          FileUtils.delFile(this.fileTempId, () => {
            this.fileTempId = "";
            this.fileTempName = "";
            //清空显示的值
            this.showValue = "";
            this.imgSrc="";
            //执行附件删除函数
            this.$emit("delFileFun", this.fileTempId);
          });
        });
      }
    },
  },
  mounted() {
    if (AssertUtils.isNotEmpty(this.value)) {
      this.fileTempId = this.value;
      this.loadFileName(this.value);
      this.imgSrc = this.showImage(this.showValue);
    }
  },
  watch: {
    value(newVal) {
      this.showValue = newVal;
      this.fileTempId = this.showValue;
      //只有存在值 才需要进行图片名称信息的加载
      if (AssertUtils.isNotEmpty(this.showValue)) {
        this.imgSrc = this.showImage(this.showValue);
        if (!AssertUtils.isNotEmpty(this.fileTempName)) {
          this.loadFileName(this.value);
        }
      }
    },
    errorMsg: function (newVal) {
      this.cusValidMsg = newVal;
    },
    item: {
      handler: function (nowVal) {
        this.cusValidMsg = nowVal["validMsg"];
        this.inputItem = { ...nowVal };
      },
      deep: true,
    },
  },
  components: {
    imgSelCtl,
  },
};
</script>

