<template>
  <div>
    <div class="demo-image__preview">
      <el-image-viewer
        hide-on-click-modal
        @close="
          () => {
            showViewer = false;
          }
        "
        :initial-index="urlindex"
        show-progress
        v-if="showViewer"
        :url-list="initFileList"
        fit="cover"
      />
    </div>
    <div class="selcet flex justify-between" v-show="!show" v-if="list.length">
      <div class="name flex content-center items-center">
        <el-checkbox
          class="imgCheck"
          v-model="allChecked"
          :indeterminate="mylist.length && mylist.length != list.length"
          @change="changeAllItem"
          :label="
            mylist.length && mylist.length && mylist.length == list.length
              ? '取消选择'
              : '全选'
          "
          size="large"
        />
        <span class="ml-4"
          >已选
          <span style="color: #409eff"> {{ mylist.length }} </span> 张图片</span
        >
      </div>
      <div class="buttom">
        <el-button class="newbut" :icon="Edit" @click="handleEdit"
          >修改</el-button
        >
        <el-button class="newbut" :icon="Delete" @click="handleDel"
          >删除</el-button
        >
      </div>
    </div>
    <div class="imgList my-2 flex flex-wrap">
      <div
        class="maskContainer previewBox"
        :style="{ width: width, height: height }"
        v-for="(item, index) in list"
        :key="index"
      >
        <el-checkbox
          v-show="!show"
          class="imgCheck"
          v-model="item.checked"
          @change="changeItem"
          size="large"
        />
        <div
          class="demo-image__preview h-full w-full cursor-pointer demoItem" style="overflow:hidden"
          @click="showImgView(item.filesUrl)"
        >
          <el-image
            :src="urlFilter(item.filesUrl || item.mapUrl)"
            class="originalImg"
            fit="cover"
          >
            <template #error>
              <div class="image-slot el-image__error">
                <el-icon :size="30"><VideoCameraFilled /></el-icon>
              </div>
            </template>
          </el-image>
        </div>
      </div>
      <div class="noData" v-if="list.length == 0">暂无数据</div>
    </div>
    <el-dialog
      v-model="visible.show"
      title="查看视频"
      width="500"
      @close="close"
    >
      <video
        :src="visible.src"
        v-if="visible.show"
        ref="videoPlayer"
        style="width: 100%; height: 300px"
        controls
        class="video-js"
      >
        <source :src="visible.src" type="video/mp4" />
      </video>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, defineEmits, watchEffect, computed } from "vue";
import { router } from "@/router";
import { ElMessage, ElMessageBox } from "element-plus";
import fileImg from "@/assets/svg/file.svg";
import { delCaseFile } from "@/store/caseFile";
import { caseOverviewDel, show } from "@/store/case";
import { number } from "echarts";
import {
  Upload,
  DocumentAdd,
  CircleCheck,
  Delete,
  Edit,
} from "@element-plus/icons-vue";
const caseId = computed(() => {
  const caseId = router.currentRoute.value.params.caseId;
  if (caseId) {
    return Number(caseId);
  }
});
const emits = defineEmits(["handleItem", "handleEdit", "refresh"]);
const props = defineProps({
  width: {
    type: String,
    default: "203px",
    required: false,
  },
  height: {
    type: String,
    default: "203px",
    required: false,
  },
  edit: {
    type: Boolean,
    default: false,
    required: false,
  },
  delete: {
    type: Boolean,
    default: false,
    required: false,
  },
  deleteFun: {
    type: Boolean,
    default: false,
    required: false,
  },
  deleteShow: {
    type: Boolean,
    default: false,
    required: false,
  },
  close: {
    type: Boolean,
    default: false,
    required: false,
  },
  customize: {
    type: Boolean,
    default: false,
  },
  handleDel: {
    type: Function,
    default: false,
  },
  itenNumber: {
    type: number,
    default: 4,
  },
  list: {
    type: Array,
    default() {
      return [];
    },
  },
});
const visible = ref({
  show: false,
  src: "",
});
const allChecked = ref(false);
const deleteVal = ref(props.deleteShow);
const videoPlayer = ref(null);
const currSize = ref({ width: 0, height: 0 });
const mylist = ref([]);
const fileList = ref([".doc", ".docx", ".pdf", ".xls", ".xlsx"]);
const initFileList = ref([
  "https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg",
  "https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg",
  "https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg",
  "https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg",
  "https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg",
  "https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg",
  "https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg",
  "https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg",
]);
const urlFilter = (url) => {
  if (!url) return "";
  const fileType = url.substring(url.lastIndexOf(".")).toLowerCase();
  return fileList.value.includes(fileType) ? fileImg : url;
};

const TypeFilter = (url) => {
  if (!url) return "";
  const fileType = url.substring(url.lastIndexOf(".")).toLowerCase();
  return fileType;
};
const verifySuffix = (imageName) => {
  const suffix = `(bmp|jpg|png|tif|gif|pcx|tga|exif|fpx|svg|psd|cdr|pcd|dxf|ufo|eps|ai|raw|WMF|webp|jpeg)`;
  const regular = new RegExp(`.*\.${suffix}`);
  return regular.test(imageName);
};
watchEffect(() => {
  if (props.list.length) {
    let newlist = [];
    props.list.forEach((item) => {
      item.checked = false;
      newlist.push(item.filesUrl || item.fileUrl || item.mapUrl);
    });
    mylist.value = [];
    allChecked.value = false;
    initFileList.value = newlist.filter((item) => {
      return verifySuffix(item);
    });
  }
});

const urlindex = ref("");
const showViewer = ref(false);
const previewList = ref([]);

const showVideoView = (src) => {
  visible.value.show = true;
  visible.value.src = src;
};
const showImgView = (src) => {
  console.log(src, "showImgView", initFileList.value);
  const fileType = src.substring(src.lastIndexOf(".")).toLowerCase();
  urlindex.value = initFileList.value.findIndex((item) => item === src);
  console.log(fileType, fileList.value.includes(fileType), "urlFilter");
  if (fileList.value.includes(fileType)) {
    window.open(window.location.origin + src);
    return;
  }
  // url.value = src;
  showViewer.value = true;
  // previewList.value = [src];
};
const handleItem = (type, item) => {
  if (type == "delete") {
    del(item);
    return;
  }
  emits("handleItem", type, item);
};
const close = () => {
  visible.value.show = false;
  videoPlayer.value && videoPlayer.value.pause();
};
const handleEdit = () => {
  if (mylist.value.length === 0) return ElMessage.warning("请至少选择一项");
  emits("handleEdit", mylist.value);
  // setTimeout(() => {
  //   mylist.value = [];
  //   allChecked.value = false;
  // }, 200);
};
const handleDel = () => {
  if (mylist.value.length === 0) return ElMessage.warning("请至少选择一项");
  del(mylist.value.map((item) => item.filesId));
  // setTimeout(() => {
  //   mylist.value = [];
  //   allChecked.value = false;
  // }, 200);
};

const changeItem = (checked) => {
  mylist.value = props.list.filter((item) => item.checked);
  allChecked.value = mylist.value.length === props.list.length;
  console.log(mylist.value, "changeAllItem1");
};
const changeAllItem = (checked) => {
  console.log(allChecked, mylist.value, "changeAllItem2", checked, props.list);
  props.list.forEach((item) => {
    item.checked = checked;
  });
  mylist.value = checked ? props.list : [];
  // mylist.value = props.list.filter((item) => item.checked);
};

const del = async (ids) => {
  ElMessageBox.confirm("确定删除？", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  }).then(async () => {
    if (props.customize) return emits("handleDel", mylist.value);
    // if (props.delete) {
    //   //删除绘图
    //   await caseOverviewDel(file.id);
    // } else {
    await delCaseFile({ caseId: caseId.value, filesIds: ids });
    mylist.value = [];
    allChecked.value = false;
    // }
    emits("refresh", ids);
    ElMessage({
      type: "success",
      message: "删除成功",
    });
  });
};
</script>

<style lang="scss" scoped>
.maskContainer {
  position: relative;
  line-height: 0;
  width: 66px;
  height: 66px;
  border-radius: 4px;
  padding: 0px;
  margin: 8px;
  // border: 1px solid #d9d9d9;
  &:hover {
    .mask {
      opacity: 1;
    }

    img {
      transform: scale(1.1);
    }
    .originalImg{
      transform: scale(1.2);
    }
  }
  .imgCheck {
    position: absolute;
    left: 16px;
    z-index: 100;
    // top: 16px;
  }
  .mask {
    transition: all 0.5s;
    opacity: 0;
    position: absolute;
    border-radius: 4px;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba($color: #000000, $alpha: 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    div {
      margin: 3px;
    }
    .close {
      position: absolute;
      right: 0;
      top: 0;
    }
    .svgBox {
      height: 40px;
      width: 40px;
      background: rgb(#000, 0.3);
      border-radius: 50%;
      margin: 10px;
      padding: 10px;
      cursor: pointer;
    }

    svg {
      // color: #fff;
      width: 14px;
      height: 14px;
    }
  }
  .originalImg {
    height: 100%;
    width: 100%;
    border-radius: 4px;
    background: #d9d9d9;
    transition-duration: .3s;

  }
}
.noData {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) rotate(0deg);
}
</style>
<style lang="scss">
.imgCheck {
  .el-checkbox__inner {
    height: auto;
    border-radius: 50% !important;
  }
  .el-checkbox.el-checkbox--large {
    height: auto;
  }
}
</style>