<template>
  <a-modal
    title="图片库"
    @cancel="close"
    :visible="visible"
    okText="确定"
    cancelText="取消"
    :maskClosable="false"
    :destroyOnClose="true"
    wrapClassName="eidtwrapper"
    style="display: flex; justify-content: flex-end; top: 0px; height: 847px"
    width="900px"
    @ok="centain"
    :bodyStyle="{ padding: '0px 0 56px', width: '900px' }"
  >
    <div v-show="visible" class="imageLibrary_wrapper">
      <div class="newfolder">
        <a-button type="primary" @click="newFolder">创建目录</a-button>
        <a-tooltip
          title="建议文件类型：jpg、jpeg、png、gif、mp4、m4v;
          建议图片大小：10M内;
          建议视频大小：100M内"
        >
          <a-button type="primary" style="margin-left: 20px" @click="clickUploadFile">
            <input
              multiple
              accept="image/png,image/jpeg,image/jpg,image/gif,video/mp4,video/m4v"
              style="width: 88px; height: 100%; display: none; position: absolute; left: 0; top: 0"
              type="file"
              name=""
              ref="uploadfile"
              id="uploadfile"
              @change="uploadFile"
            />
            上传文件</a-button
          >
        </a-tooltip>

        <a-button type="primary" style="margin-left: 20px" @click="rename"> 重命名</a-button>

        <a-input-search
          placeholder="请输入搜索内容"
          :value="value"
          style="width: 300px; margin-left: 50px"
          enter-button
          @change="changeValue"
          @search="searchfile"
        />
      </div>

      <a-tabs :default-active-key="defaultKey" tab-position="left" :style="{ height: '100%' }" @change="changTab">
        <a-tab-pane v-for="item in folderList" :key="item.key" :tab="item.title">
          <div class="imageLibrary_content_box">
            <div
              :class="{ imageLibrary_img_box: true, checked: checkedItem.fileId === child.fileId }"
              v-for="(child, j) in rowsList"
              :key="j"
              @click="checkedSource(child)"
            >
              <a-icon
                v-show="checkedItem.fileId === child.fileId"
                type="check-circle"
                style="
                  color: #1890ff;
                  font-weight: 700;
                  background-color: #fff;
                  border-radius: 25px;
                  position: absolute;
                  right: 10px;
                  top: 10px;
                "
              />

              <img v-if="child.fileSuffix === 'img'" class="imageLibrary_img" :src="child.link" alt="" />

              <img
                v-else-if="child.fileSuffix === 'video'"
                class="imageLibrary_img_video"
                src="https://oss.intcolon.com/images/TE-img/videodemo.png"
                alt="视频logo"
              />
              <span
                v-if="!(renameChecked && child.fileId === checkedItem.fileId)"
                class="imageLibrary_title"
                :title="child.fileName"
                >{{ child.fileName }}</span
              >
              <input
                v-if="renameChecked && child.fileId === checkedItem.fileId"
                @click.stop.prevent="clickinput"
                @blur="changeRenameValue"
                :value="checkedItem.fileName"
                :class="{ rename_input: true, [`_${child.fileId}`]: true }"
                type="text"
              />
            </div>
          </div>
          <pagination v-model="current" :total="total" :page-size="12" @change="switchPagination" />
        </a-tab-pane>
      </a-tabs>
    </div>
    <div v-show="checkedItem.fileSuffix === 'video' && checkedItem.link" class="preview" @click="previewVideo">
      预览
    </div>
    <div class="video_previewmodal" v-if="showViewModal">
      <div class="video_content">
        <img class="close" @click="previewVideo" src="https://oss.intcolon.com/images/TE-img/close.png" alt="" />
        <video :src="checkedItem.link" controls></video>
      </div>
    </div>
    <div class="loading_wrapper" v-show="loading">
      <Spin tip="上传中..." :spinning="loading" size="large"> </Spin>
    </div>
    <a-modal
      title="创建目录"
      @cancel="newFolderClose"
      :visible="folderModal"
      okText="确定"
      cancelText="取消"
      :maskClosable="false"
      width="640px"
      wrapClassName="newFolderWrapper"
      style="display: flex; align-items: center; top: 0px"
      :destroyOnClose="true"
      @ok="newFolderCentain"
      :bodyStyle="{ padding: '44px 0', width: '640px' }"
    >
      <div class="newFolderContent">
        <span>请输入目录名称：</span
        ><a-input id="newfolder" v-model="newFolderValue" style="width: 200px" placeholder="请输入目录名称" />
      </div>
    </a-modal>
  </a-modal>
</template>

<script>
import { Pagination, Spin } from 'ant-design-vue'
import axios from 'axios'

export default {
  name: 'ImageLibrary',
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    onlyImg: {
      type: Boolean,
      default: false
    }
  },
  components: {
    Pagination,
    Spin
  },
  data() {
    return {
      folderList: [],
      rowsList: [],
      checkedItem: {},
      defaultKey: '',
      checkedTab: '',
      current: 1,
      total: 0,
      value: '',
      showViewModal: false,
      loading: false,
      folderModal: false,
      newFolderValue: '',
      renameChecked: false
    }
  },
  watch: {
    visible(val) {
      console.log(val)
    }
  },
  created() {
    axios({
      method: 'get',
      url: 'https://teapi.intcolon.com/api/teDetailPage/listFileFolder'
    })
      .then(res => {
        this.folderList = res.data.data
        this.defaultKey = res.data.data[0].key
        this.checkedTab = res.data.data[0].key
        this.getFileList(res.data.data[0].key)
      })
      .catch(error => {
        this.$message.error('文件夹获取失败')
      })
  },

  methods: {
    clickUploadFile() {
      document.getElementById('uploadfile').click()
    },
    close() {
      this.$emit('changeModalStatus', false)
    },
    changeValue(e) {
      this.value = e.target.value
    },
    newFolder() {
      this.folderModal = true
      setTimeout(() => {
        document.getElementById('newfolder').focus()
      }, 0)
    },
    newFolderClose() {
      this.folderModal = false
      this.newFolderValue = ''
    },
    newFolderCentain() {
      axios({
        method: 'post',
        url: 'https://teapi.intcolon.com/api/teDetailPage/addFolder',
        params: { folderName: this.newFolderValue }
      })
        .then(res1 => {
          this.$message.success('新建成功')
          this.folderModal = false
          this.newFolderValue = ''

          axios({
            method: 'get',
            url: 'https://teapi.intcolon.com/api/teDetailPage/listFileFolder'
          })
            .then(res => {
              this.folderList = res.data.data
            })
            .catch(error => {
              console.log(error)
              this.$message.error('文件夹获取失败')
            })
        })
        .catch(error => {
          this.$message.error('获取列表失败')
        })
    },
    searchfile() {
      this.getFileList(this.checkedTab, this.value, this.current)
    },
    centain() {
      if (this.onlyImg && this.checkedItem.fileSuffix === 'video') {
        this.$message.error('不能选择视频类型！！')
        return
      }
      this.$emit('changeModalStatus', false, this.checkedItem)
    },
    changTab(v) {
      if (this.checkedTab !== v) {
        this.rowsList = []
        this.checkedTab = v
        this.checkedItem = {}
        this.current = 1
        this.total = 0
        //请求该页的数据
        this.getFileList(v, this.value)
      }
    },
    switchPagination(e) {
      this.current = e
      this.getFileList(this.checkedTab, this.value, e)
    },
    checkedSource(item) {
      this.renameChecked = false
      this.checkedItem = item
    },

    uploadFile(e) {
      const formData = new FormData()
      const filesArr = e.target.files
      filesArr.forEach((v, i) => {
        formData.append(`file${i}`, v)
      })
      this.loading = true
      axios({
        method: 'post',
        url: 'https://teapi.intcolon.com/api/sysFileInfo/mput?folderName=' + this.checkedTab,
        data: formData
      })
        .then(response => {
          this.loading = false

          this.$message.success('上传成功！')
          this.getFileList(this.checkedTab, this.value, this.current)
        })
        .catch(error => {
          this.loading = false

          this.$message.error('图片上传失败')
        })
    },
    getFileList(folderName, keywords = '', pageNo = 1, pageSize = 12) {
      axios({
        method: 'post',
        url: 'https://teapi.intcolon.com/api/teDetailPage/pageFiles',
        params: { folderName: folderName, keywords: keywords, pageNo, pageSize }
      })
        .then(res1 => {
          this.rowsList = res1.data.data.rows
          this.total = res1.data.data.totalRows
          // this.current = this.current + 1
        })
        .catch(error => {
          this.$message.error('获取列表失败')
        })
    },
    previewVideo() {
      this.showViewModal = !this.showViewModal
    },
    rename() {
      if (!this.checkedItem.fileName) {
        this.$message.warning('您需要先选中文件')
        return
      }
      this.renameChecked = true
      setTimeout(() => {
        Array.from(document.querySelectorAll('._' + this.checkedItem.fileId)).forEach(v => {
          console.log(v)
          v.focus()
          v.select()
        })
      }, 0)
    },
    changeRenameValue(e) {
      this.renameChecked = false
      if (this.checkedItem.fileName === e.target.value) {
        return
      }
      axios({
        method: 'post',
        url: 'https://teapi.intcolon.com/api/teDetailPage/renameFile',
        params: { fileId: this.checkedItem.fileId, newFileName: e.target.value }
      })
        .then(res1 => {
          this.$message.success('重命名成功！')
          this.getFileList(this.checkedTab, this.value, this.current)
        })
        .catch(error => {
          this.$message.error('重命名失败')
        })
    },
    clickinput() {}
  }
}
</script>

<style scoped>
.imageLibrary_wrapper {
  width: 900px;
  height: 665px;
  position: relative;
  /* position: absolute;
  left: 0;
  top: 0; */
  background: #fff;
  /* transform: translate(-50%, -50%); */
}
.imageLibrary_content_box {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
}
.imageLibrary_img_box {
  width: 160px;
  height: 190px;
  padding: 3px;
  margin-top: 5px;
  margin-left: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-sizing: content-box;
  border: 1px solid transparent;
  position: relative;
}
.imageLibrary_img_box:hover {
  background: #f8f8f8;
}
.checked {
  border: 1px solid #1890ff;
  /* opacity: .3; */
  border-radius: 5px;
  background: #f6f6f6;
}
.imageLibrary_img {
  width: 150px;
  height: 150px;
  object-fit: contain;
  object-position: center;
  flex-shrink: 0;
}
.imageLibrary_img_video {
  width: 100px;
  height: 100px;
}
.imageLibrary_title {
  display: block;
  width: 100%;
  height: 40px;
  font-size: 14px;
  line-height: 17px;
  padding-top: 6px;
  /* line-height: 30px; */
  /* text-align: center; */
  word-break: break-all;
  color: #000;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
}
.newfolder {
  width: calc(100% - 118px);
  margin-left: 118px;
  height: 60px;
  border-bottom: 1px solid #e8e8e8;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 0 56px 0px 0;
  margin-top: -10px;
}
.ant-pagination {
  position: absolute;
  bottom: 15px;
  right: 50px;
}
.preview {
  position: absolute;
  right: 190px;
  bottom: 15px;

  height: 32px;
  background: #1890ff;
  color: #fff;
  padding: 0 15px;
  line-height: 32px;
  touch-action: manipulation;
  font-size: 14px;
  border-radius: 2px;
  cursor: pointer;
  font-weight: 400px;
  text-align: center;
  letter-spacing: 3px;
}
.video_previewmodal {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 10000;
}
.video_previewmodal > .video_content {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 80%;
  height: 80%;
  background: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
}
.video_content > .close {
  position: absolute;
  right: 30px;
  top: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.video_content > video {
  width: 80%;
}
.loading_wrapper {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  z-index: 1000000;
}
.newFolderContent {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: flex-start;
  padding: 0 24px;
}
#menu {
  width: 150px;
  visibility: hidden;
  position: fixed;
  left: 0;
  top: 0;
  border: 1px solid #979797;
  background: #fff;
  z-index: 1000;
  /* background: #f1f1f1; */
}
#menu > ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.rename_input {
  background: none;
  outline: none;
  border: none;
  height: 30px;
  margin-top: 10px;
  color: #000;
  font-size: 14px;
}
.rename_input:focus {
  border: 1px solid #000;
}
</style>
