<template>
    <div class="box">
      <div class="selectFile" @click="selectFileVisible = true">
        <i v-if="!isItem.type" class="el-icon-document-checked"></i>
        <i v-if="isItem.type == 'file'" class="el-icon-tickets isFile"></i>
        <div class="isFileName" v-if="isItem.type == 'file'">{{ isItem.name }}</div>
        <el-image v-if="isItem.type == 'image'" :src="isItem.url" fit="fit" class="selectFile">
          <div slot="error" class="image-slot">
            <i class="el-icon-picture-outline"></i>
          </div>
        </el-image>
      </div>
      
      <el-dialog class="selectFileDialog" title="资源选择" :visible.sync="selectFileVisible" width="50%" @close="selectFileClose" :append-to-body="true">
        <div slot="title" class="dialog-title">
          <el-breadcrumb separator="/">
            <el-breadcrumb-item v-for="item in breadcrumbList" :key="item.path" class="selectFileBreadcrumb" @click.native="breadcrumbClick(item)">{{ item.name }}</el-breadcrumb-item>
          </el-breadcrumb>
        </div>
        <div class="selectFileMain">
          <div v-for="(item, index) in list" :key="index" class="filesBox" @dblclick="itemClick(item)">
            <i :class="item.icon" class="fileIcon" v-if="item.type !== 'image'" style="width: 100px; height: 100px"></i>
            <el-image v-else :src="item.url" fit="fit" class="imageFile"></el-image>
            <div class="fileName">{{ item.name }}</div>
          </div>
        </div>
      </el-dialog>
    </div>
</template>
  
  <script>
  export default {
    name: 'SelectFile',
    props: {
      selectFileList: {
        type: Array,
        default: () => []
      },
      url: {
        type: String,
        default: ''
      }
    },
    components: {},
    computed: {
      list() {
        return this.selectFileList.map(e => {
          if (e.isDirectory) {
            e.icon = e.isEmpty == true ? 'el-icon-folder' : 'el-icon-folder-opened';
            e.type = 'folder'
          }
          if (!e.isDirectory) {
            if (e.name.includes('jpg') || e.name.includes('png')) {
              e.icon = 'el-icon-picture';
              e.type = 'image'
            }
            if (!e.name.includes('jpg') && !e.name.includes('png')) {
              e.icon = 'el-icon-tickets'
              e.type = 'file'
            }
            
          }
          return e;
        })
      }
    },
    data() {
      return {
        path: '',
        selectFileVisible: false,
        breadcrumbList: [],
        isItem: {
          url: this.url,
          ...({ type:  this.url ? 'image' : null })
        }
      };
    },
    async created() {
      this.path = '/';
    },
    methods: {
      // 双击
      async itemClick(item) {
        // if (item.isDirectory && item.isEmpty) {
        //   this.$modal.msgError('空文件夹');
        //   return;
        // }
        if (item.isDirectory) {
          this.path = this.path == '/' ? `${item.path}${item.name}` : `${item.path}/${item.name}`;
          this.$emit('selectFileQuery', this.path);
          return;
        }
        this.$emit('selectFile', item)
        this.isItem = item;
        this.selectFileClose();
      },
      // 设置面包屑
      setBreadcrumb() {
        this.breadcrumbList = [];
        let list = this.path.split('/');
        if (this.path == '/') list = list.slice(1, list.length);
        for (let i = 0; i < list.length; i++) {
          let name = list[i];
          if (name == '') name = '根目录'
          const path = list.slice(0, i + 1);
          const obj = { name, path: path.join('/') == '' ? '/' : path.join('/') }
          this.breadcrumbList.push(obj)
        }
      },
      // 点击面包屑
      breadcrumbClick(item) {
        this.path = item.path;
        this.$emit('selectFileQuery', this.path);
      },
      // 关闭
      selectFileClose() {
        this.path = '/'
        this.selectFileVisible = false
      }
    },
    watch: {
      path() {
        this.setBreadcrumb();
      }
    }
  };
  </script>
  <style lang="scss" scoped>
    .box {
      width: 100%;
      .selectFile {
        display: block;
        width: 148px;
        height: 148px;
        text-align: center;
        border: 1px dashed #c0ccda;
        border-radius: 12px;
        background: #fbfdff;
        font-size: 28px;
        cursor: pointer;
        i {
          line-height: 148px;
        }
        .isFile {
          color: #008000;
          line-height: 70px;
        }
      }
    }
    .el-breadcrumb {
      padding-left: 2em;
      border: 1px solid #c0ccda;
    }
    .selectFileBreadcrumb {
      text-align: left;
      line-height: 3em;
      cursor: pointer;
    }
    .selectFileDialog {
      z-index: 9999 !important;
      ::v-deep .el-dialog__header {
        padding: 0;
        margin: 0;
      }
    }
    .selectFileMain {
      width: 90%;
      margin: 0 auto;
      display: flex;
      flex-wrap: wrap;
      padding-bottom: 50px;
    }
    .fileName {
      width: 100%;
      text-align: center;
    }
    .filesBox {
      max-width: 100px;
      max-height: 120px;
      margin: 20px 18px;
      cursor: pointer;
    }
    .fileIcon {
      display: block;
      text-align: center;
      border-radius: 12px;
      line-height: 100px;
      background: #F5F7FA;
      font-size: 28px;
    }
    .imageFile {
      width: 100px;
      height: 100px;
      display: block;
      border-radius: 12px;
      overflow: hidden;
    }
    .isFileName {
      font-size: 12px;
      color: #999;
      line-height: 1.5em;
      width: 90%;
      margin: 0 auto;
    }
  </style>