<template>
  <tf-page>
    <template v-slot:action>
      <PhotoHeader
        :kplaceholder="'支持搜索文件名称'"
        :onlySearch="true"
        :actived="isActive"
        :loading="loading"
        @search="onSearch"
        @add="upload"
        @del="onDelete"
      />
    </template>
    <div class="imgContainer">
      <div class="img-item" v-for="(item, index) of imageFileList" :key="index">
        <div class="img">
          <el-image style="width: 100%; height: 100%" :src="item.img" :preview-src-list="srcList"> </el-image>
        </div>
        <div class="img-info">
          <el-checkbox v-model="item.isChecked"></el-checkbox>
          <div class="img-name">{{ item.imgName }}</div>
          <div class="img-time">{{ item.createTime }}</div>
        </div>
        <div class="groupName">{{ item.groupName }}</div>
        <div
          class="visibilityIcon"
          :class="[item.isShow == '0' ? 'invisible' : 'visible']"
          @click="changeVisible(item)"
        >
          <div class="icon"></div>
        </div>
      </div>
    </div>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pagination.current"
      :page-sizes="pageSizes"
      :page-size="pagination.size"
      layout="sizes,total, prev, pager, next"
      :total="pagination.total"
    >
    </el-pagination>
    <PhotoForm
      ref="PhotoForm"
      v-if="visible"
      :visible.sync="visible"
      :loading="loading.add"
      :data="current"
      :title="`图片上传`"
      @submit="onSubmit"
    />
  </tf-page>
</template>

<script lang="ts">
import axios from '@/utils/request'
import { Vue, Component, Prop, Watch } from 'vue-property-decorator'
import { ElForm } from 'element-ui/types/form'
import PhotoHeader from './PhotoHeader.vue'
import PhotoForm from './PhotoForm.vue'
import { ILoading } from '../commonAPI/common'
import { getImgFilesPage, updateImgFiles, addImgFiles, delImgFilesByIds } from '../commonAPI/request'
import { getDefaultPagination, pageSizes } from '@/utils/constant'
import { IPagination } from '@/api/common'
//照片资料管理
@Component({
  name: 'PhotoManagement',
  components: { PhotoHeader, PhotoForm }
})
export default class PhotoManagement extends Vue {
  $refs!: { form: ElForm }

  visible: boolean = false

  isActive: boolean = false

  loading: ILoading = { search: false, add: false, update: false, delete: false, import: false, export: false }

  pagination: IPagination = getDefaultPagination()

  pageSizes = pageSizes

  imageFileList = []

  srcList = []

  @Watch('visible')
  onChangeVisibleMethod(val) {
    if (!val) {
      // this.$refs['PhotoForm'].destroy()
    }
  }

  get prjId() {
    return this.$store.getters['project/id'].projectId
  }
  mounted() {
    this.isActive = true
  }
  onSearch(data?) {
    this.loading.search = true
    let params = {}
    if (data) {
      params = {
        // name: data ? data.keyword : '',
        // prjId: this.prjId
        imgType: data.imgType,
        fileName: data.fileName,
        isShow: data.isShow ? '' : '1'
      }
    }
    params = { ...params, ...this.pagination }
    getImgFilesPage(params).then((res) => {
      this.imageFileList = []
      try {
        const { current, size, total, records } = res.result
        let list = []
        records.forEach((item) => {
          item.img =
            axios.defaults.baseURL +
            'base/file/loadImg' +
            '?remotePath=' +
            item.path +
            '&access_token=' +
            sessionStorage.getItem('token')
          item.isChecked = false
          list.push(item)
        })
        this.imageFileList = list //图片列表
        this.srcList = list.map((i) => i.img) //预览列表
        this.pagination = { current, size, total }
      } catch (error) {
        console.log(error)
      }
      this.loading.search = false
    })
  }
  upload() {
    this.visible = true
  }
  onSubmit(data) {
    console.log(data)
    addImgFiles(data).then((res) => {
      if (res.code == 1) {
        this.$message.success('添加成功')
        this.visible = false
        this.onSearch()
      } else {
        this.$message.warning('添加失败')
      }
    })
  }
  onEdit(data) {
    updateImgFiles(data).then((res) => {
      if (res.code == 1) {
        this.$message.success('修改成功')
        this.visible = false
        this.onSearch()
      } else {
        this.$message.warning('修改失败')
      }
    })
  }
  onDelete() {
    const delArr = this.imageFileList.filter((i) => i.isChecked)
    if (delArr.length == 0) {
      this.$message.warning('请选择需要删除的照片')
      return
    }
    let ids = delArr.map((i) => i.id).join()
    delImgFilesByIds({ ids }).then((res) => {
      if (res.code == 1) {
        this.$message.success('删除照片成功')
        this.onSearch()
      } else {
        this.$message.warning('删除照片失败')
      }
    })
  }
  changeVisible(item) {
    if (Reflect.deleteProperty(item, 'img') && Reflect.deleteProperty(item, 'createUserName')) {
      item.isShow = item.isShow == '0' ? '1' : item.isShow == '1' ? '0' : ''
      this.onEdit(item)
    }
  }
  handleCurrentChange(value) {
    this.pagination.current = value
    this.onSearch()
  }
  handleSizeChange(value) {
    this.pagination.size = value
    this.onSearch()
  }
}
</script>

<style lang='scss' scoped>
.imgContainer {
  height: calc(100% - 52px);
  width: 100%;
  padding: 15px;
  overflow: auto;
  //   display: grid;
  //   grid-template-columns: repeat(6, 260px);
  //   grid-template-rows: repeat(4, 186px);
  //   gap: 20px;
  .img-item {
    width: 260px;
    height: 186px;
    position: relative;
    display: inline-block;
    margin-right: 20px;
    margin-bottom: 10px;
    .img {
      width: 100%;
      height: 160px;
      cursor: pointer;
    }
    .img-info {
      height: calc(100% - 160px);
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-family: Source Han Sans CN;
      font-size: 14px;
      font-weight: normal;
      cursor: pointer;
      .img-name {
        color: #3d3d3d;
      }
      .img-time {
        color: #333333;
      }
    }
    .groupName {
      position: absolute;
      top: 10px;
      left: 10px;
      font-family: Source Han Sans CN;
      font-size: 14px;
      font-weight: 500;
      color: #ffffff;
    }
    .visibilityIcon {
      position: absolute;
      top: 0;
      right: 0;
      width: 33px;
      height: 23px;
      cursor: pointer;
      border-bottom-left-radius: 30px;
      //
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fff;
      .icon {
        margin-right: -5px;
        height: 16px;
        width: 16px;
      }
    }
    .visible {
      background: #2d74e7;
      .icon {
        background: url('./images/visible.png');
        background-repeat: no-repeat;
        background-size: 100% 100%;
      }
    }
    .invisible {
      background: rgba(0, 0, 0, 0.35);
      .icon {
        background: url('./images/invisible.png');
        background-repeat: no-repeat;
        background-size: 100% 100%;
      }
    }
  }
}
.el-pagination {
  margin-top: 10px;
  display: flex;
  justify-content: flex-end;
}
</style>