<template>
  <div class="image_form">
    <div class="label">
      <Icon iconName="icondd" class="pre-tag" size="18"></Icon>
      <div class="label-text" :title="property.label">{{ property.label }}</div>
    </div>
    <div
      class="form_icon_require"
      :class="{ 'js-form_icon_require_empty': imgList.length === 0 }"
    >
      *
    </div>
    <div class="content_wrapper">
      <div class="list_wrapper">
        <div class="list-items">
          <div
            class="list-item"
            v-for="(item, index) in imgList"
            :key="index"
            @click="ReviewImages(item)"
          >
            <img class="list-item-img" :src="item.url || item.dataUrl" />
            <i
              class="iconfont iconshanchu3"
              @click.stop="deleteimg(item, index)"
            ></i>
          </div>
          <div class="add_wrapper">
            <div class="content-upload_box" @click="showSelectFile">
              <i class="iconfont iconjiahao"></i>
            </div>
          </div>
        </div>
      </div>
    </div>
    <input
      ref="inputDom"
      type="file"
      accept="image/jpeg, image/png, image/gif"
      @change="fileChange"
      hidden
    />
    <!-- 图片放大镜 -->
    <common-dialog
      v-if="Magnifier"
      @closePopup="Magnifier = false"
      showMask
      @ClickingBackground="Magnifier = false"
    >
      <div class="display-area">
        <img :src="pcUrl" />
      </div>
    </common-dialog>
  </div>
</template>

<script lang="ts">
import { Property } from "../types2";
import { GO_URLS, syCommonDialog as CommonDialog } from "cqk-sy-ui";
import Icon from "@/components/Icon/index.vue";
import { defineComponent, PropType } from "vue";
import { ElMessage } from "element-plus";
import { $ajax } from "@/service";

export default defineComponent({
  inject: ["showTip"],
  components: {
    CommonDialog,
    Icon,
  },
  props: {
    disable: {
      type: Boolean,
      default: false,
    },
    property: {
      type: Object as PropType<Property>,
      required: true,
    },
    setPropertyValue: {
      type: Function as PropType<any>,
      required: true,
    },
  },
  data() {
    return {
      imgList: [] as any[],
      Magnifier: false,
      pcUrl: "",
    };
  },
  mounted() {
    if (!Array.isArray(this.property.value)) return;
    this.property.value.forEach((url) => {
      this.PushList(url);
    });
  },
  watch: {
    imgList(newV) {
      this.setPropertyValue(this.imgList);
    },
  },
  methods: {
    async PushList(url: any) {
      if (!url || !url.value) return false;
      this.imgList.push({
        url: await this.requestPictures(url.value),
        hash: url.value, //同时保存hash
      });
    },
    // 图片回显
    ReviewImages(item: any) {
      if (item.url != "") {
        this.pcUrl = item.url;
      } else {
        this.pcUrl = item.dataUrl;
      }
      this.Magnifier = true;
    },
    // 图片替换
    async requestPictures(string: string) {
      const res = await $ajax({
        type: "post",
        url: GO_URLS.getFiles,
        params: { hashes: [string] },
      });

      if (res) {
        return res.data.files[0].url;
      }
    },
    showSelectFile() {
      if (this.disable) {
        return;
      }
      if (this.imgList.length > 10) {
        return;
      }
      (this.$refs.inputDom as any).click();
    },
    // 删除图片
    deleteimg(item: any, index: number) {
      (this as any).showTip(
        "此操作将永久删除该文件, 是否继续?",
        () => {
          this.imgList.splice(index, 1);
          ElMessage({
            type: "success",
            message: "删除成功!",
          });
        },
        () => {
          ElMessage({
            type: "info",
            message: "已取消删除",
          });
        }
      );
    },
    fileChange(e: any) {
      const file: File = e.target.files[0];

      if (!file) {
        return;
      }
      if (file.size > 5242880) {
        ElMessage({
          message: "上传图片大小不可超过5M",
          type: "warning",
        });
        return;
      }
      const fr = new FileReader();
      fr.onload = (event: any) => {
        this.imgList = [
          ...this.imgList,
          { url: "", dataUrl: event.target.result, file, hash: "" },
        ];
      };
      fr.readAsDataURL(file);
      e.target.value = null;
    },
  },
});
</script>
<style scoped lang="scss">
.display-area {
  max-height: 80vh;
  overflow-y: auto;
  img {
    width: 100%;
  }
}
.image_form {
  flex-shrink: 0;
  position: relative;
  padding-top: 10px;
  padding-left: 18px;
  padding-bottom: 10px;
  font-size: 0;
  display: flex;
  justify-content: flex-start;
}
.label {
  display: inline-block;
  width: 100px; /* 104 - 18 */
  height: 44px;
  line-height: 44px;
  color: #797d84; /* todo ui图颜色不一致 */
  font-size: 14px;
  font-weight: 300;

  position: relative;
}
.label-text {
  text-overflow: ellipsis;
  flex-shrink: 0;
  white-space: nowrap; /*规定段落中的文本不进行换行 */
  overflow: hidden;
}

.content_wrapper {
  flex: 1;
  display: flex;
}
.list_wrapper {
  width: 452px;
}
.add_wrapper {
  margin-right: 10px;
  float: left;
}
.list-items {
  float: left;
}
.content-upload_box {
  width: 80px;
  height: 80px;
  border-radius: 4px;
  border: 1px solid #dcdfe6;
  text-align: center;
  line-height: 80px;
  .iconjiahao {
    font-size: 24px;
    color: #d7d7d7;
  }
}
.list-item {
  float: left;
  margin-right: 10px;
  margin-bottom: 10px;
  width: 80px;
  height: 80px;
  cursor: pointer;
  background: rgba(216, 216, 216, 1);
  border-radius: 4px;
  text-align: center;
  position: relative;
  .list-item-img {
    width: 100%;
    height: 100%;
    border-radius: 4px;
    border: 1px solid #dcdfe6;
    overflow: hidden;
  }
  .iconshanchu3 {
    position: absolute;
    right: -10px;
    font-size: 18px;
    top: -10px;
    cursor: pointer;
  }
}

.form_icon_require {
  position: absolute;
  left: -10px;
  top: 0;
  color: #ff6565;
  font-size: 14px;
  line-height: 44px;
  display: none;
}

.pre-tag {
  position: absolute;
  left: -50px;
  top: 14px;
  display: none;
}
</style>
