<template>
  <Dialog
    :is-dialog-exist="visible"
    title="选择"
    :dialog-style="{
      '--dialog-width': '1074px',
      '--dialog-height': '619px',
      '--title-height': '51px'
    }"
    @close-dialog="handleClose"
  >
    <el-container>
      <el-main>
        <div class="assets-warpper">
          <div v-if="isSearchVisible" class="external-link">
            <el-form :inline="true">
              <el-form-item label="外链地址:">
                <el-input placeholder="请输入"></el-input>
              </el-form-item>
              <el-form-item>
                <el-button type="danger" icon="el-icon-s-operation">选择</el-button>
              </el-form-item>
              <div class="tips">
                <i class="el-icon-question" />
                <span>例如：http://hairuyi.com/admin/</span>
              </div>
            </el-form>
          </div>
          <el-form
            v-if="isSearchVisible"
            ref="formData"
            class="filter-form"
            :inline="true"
            :model="formData"
            size="mini"
          >
            <el-form-item label="附件ID:" prop="attachmentId">
              <el-input v-model="formData.attachmentId" placeholder="请输入搜索内容"></el-input>
            </el-form-item>

            <el-form-item label="来源类型:" prop="sourceType" class="text-center">
              <el-select v-model="formData.sourceType" disabled placeholder="请选择">
                <el-option
                  v-for="(item, index) in sourceTypeOptions"
                  :key="index"
                  :label="item.name"
                  :value="item.val"
                ></el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="高度:" prop="height" class="text-right">
              <el-input v-model="formData.height" placeholder="请输入"></el-input>
            </el-form-item>
            <el-form-item label="宽度:" prop="width">
              <el-input v-model="formData.width" placeholder="请输入"></el-input>
            </el-form-item>
            <el-form-item label="文件类型:" prop="fileType" class="text-center">
              <el-select v-model="formData.fileType" placeholder="请选择">
                <el-option
                  v-for="(item, index) in fileTypeOptions"
                  :key="index"
                  :label="item.name"
                  :value="item.val"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="存储类型:" prop="storageType" class="text-right">
              <el-select v-model="formData.storageType" placeholder="请选择">
                <el-option
                  v-for="(item, index) in providerOptions"
                  :key="index"
                  :label="item.name"
                  :value="item.val"
                ></el-option>
              </el-select>
            </el-form-item>

            <el-form-item style="margin-left:126px;">
              <el-button type="primary" @click="submitForm">查询</el-button>
              <el-button @click="resetForm('formData')">重置</el-button>
            </el-form-item>
          </el-form>
          <div class="filter-area">
            <div class="refush">
              <el-button
                type="primary"
                icon="el-icon-refresh"
                @click="refreshData()"
              ></el-button>
            </div>
            <div class="search">
              <el-form :inline="true">
<!--                <el-form-item>-->
<!--                  <el-input placeholder="请输入搜索内容"></el-input>-->
<!--                </el-form-item>-->
                <el-form-item>
                  <el-button
                    type="primary"
                    icon="el-icon-menu"
                    @click="selFieldVisibe = true"
                  >
                    <i class="el-icon-caret-bottom" />
                  </el-button>
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" icon="el-icon-search" @click="isSearchVisible = !isSearchVisible"></el-button>
                </el-form-item>
              </el-form>
            </div>
          </div>

          <div class="breadcrumb pointer">
            <el-breadcrumb separator="/">
              <el-breadcrumb-item
                v-if="dirs && dirs.length > 0"
                class="high"
                @click.native="handleBack"
              >
                返回上一级
              </el-breadcrumb-item>

              <el-breadcrumb-item class="high" @click.native="handleRoot">
                全部文件
              </el-breadcrumb-item>

              <el-breadcrumb-item
                v-for="(dir, index) in dirs"
                :key="index"
                class="high"
                @click.native="handleTo(index)"
              >
                {{ dir.showName }}
              </el-breadcrumb-item>
            </el-breadcrumb>
          </div>

          <div class="assets-table">
            <el-table
              ref="assetsTable"
              :data="fileList"
              stripe
              row-class-name="assets-row"
              style="width: 100%"
              @select-all="handleSelectionAllChange"
              @select="handleSelectionChange"
              @row-click="handleSelectionClick"
            >
              <el-table-column min-width="150" label="名称">
                <template slot-scope="{ row }">
                  <el-image
                    v-if="row.fileType == '1'"
                    class="image"
                    :src="row.imageUrl"
                    :preview-src-list="[row.imageUrl]"
                  >
                  </el-image>
                  <img
                    v-if="row.fileType == '0'"
                    src="/pic/setting-center/setting-folder@2x.png"
                    class="image pointer"
                  />

                  <span class="name pointer">{{ row.showName }}</span>
                </template>
              </el-table-column>
              <el-table-column
                v-if="showField.fid"
                prop="fileFid"
                label="附件ID"
                align="center"
              ></el-table-column>
              <el-table-column
                v-if="showField.providerName"
                label="存储引擎"
                align="center"
                min-width="110"
              >
                <template slot-scope="{ row }">
                  <div class="provider">
                    <i class="el-icon-upload" />
                    <span>{{ row.providerName }}</span>
                  </div>
                </template>
              </el-table-column>
              <el-table-column
                v-if="showField.width"
                prop="width"
                sortable
                label="宽度"
                align="center"
              ></el-table-column>
              <el-table-column
                v-if="showField.height"
                prop="height"
                sortable
                label="高度"
                align="center"
              ></el-table-column>
              <el-table-column
                v-if="showField.fileSize"
                prop="fileSize"
                sortable
                min-width="100"
                label="文件大小"
              ></el-table-column>
              <el-table-column v-if="showField.action" label="操作">
                <template slot-scope="{ row }">
                  <el-button
                    v-if="row.fileType === '1'"
                    class="sel-btn"
                    icon="el-icon-s-operation"
                    @click="$emit('select', [row])"
                  ></el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
      </el-main>
      <el-footer>
        <!-- 分页组件 -->
        <el-pagination
          :page-sizes="[10, 20, 30, 40]"
          :page-size="limit"
          :current-page="currentPage"
          :total="totalCount"
          layout="total, prev, pager, next,sizes, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </el-footer>
      <!-- 选择列表显示字段 -->
      <Dialog
        :is-dialog-exist="selFieldVisibe"
        title="自定义列表"
        :dialog-style="{
        '--dialog-width': '682px',
        '--dialog-height': '407px',
        '--title-height': '51px'
      }"
        @close-dialog="selFieldVisibe = false"
      >
        <div class="sel-filed">
          <div class="sel-all">
            <div class="h"></div>
            <el-checkbox v-model="fieldAllChecked" @change="handleFieldAllChange"
            >列表展示内容</el-checkbox
            >
          </div>
          <div class="sel-list">
            <div v-for="(item, index) in fieldList" :key="index" class="sel-item">
              <el-checkbox v-model="item.checked" @change="handleFieldChange">{{
                item.name
                }}</el-checkbox>
            </div>
          </div>
          <div class="sel-footer">
            <el-button type="primary" size="small" @click="handleSaveField"
            >保存</el-button
            >
            <el-button size="small" @click="handleResetField">重置</el-button>
          </div>
        </div>
      </Dialog>
    </el-container>

  </Dialog>
</template>

<script>
import commonApi from '@/myModel/commonApi'
import Dialog from '../Dialog'
export default {
  name: 'SelectAssets',
  components: {
    Dialog
  },
  model: {
    prop: 'visible',
    event: 'click'
  },
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    // 是否支持多选
    isMultiple: {
      type: Boolean,
      default: false
    },
    // 使用复杂筛选
    useComplexFilter: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      isSearchVisible: false,
      // 分页数据
      limit: 20,
      currentPage: 1,
      totalCount: 0,
      // 文件夹路径堆栈
      dirs: [],
      // 文件列表数据
      fileList: [],
      // 选中的存储引擎
      provider: '',
      // 存储引擎下拉框数据
      providerOptions: [],
      // 选中的来源类型
      sourceType: '',
      // 来源类型下拉框数据
      sourceTypeOptions: [],
      // 选中的文件类型
      fileType: '',
      // 文件类型下拉框数据
      fileTypeOptions: [],
      // 字段是否全部选中
      fieldAllChecked: true,
      // 控制显示字段弹出层
      selFieldVisibe: false,
      // 字段列表数据
      fieldList: [
        { name: '附件id', key: 'fileFid', checked: true },
        { name: '宽度', key: 'width', checked: true },
        { name: '高度', key: 'height', checked: true },
        { name: '文件预览', key: 'imageUrl', checked: true },
        { name: '存储引擎', key: 'providerName', checked: true },
        { name: '文件大小', key: 'fileSize', checked: true },
        { name: '操作', key: 'action', checked: true }
      ],
      formData: {
        attachmentId: '',
        sourceType: '',
        height: '',
        width: '',
        fileType: '',
        storageType: '',
        fileName: ''
      },
      // 控制table显示字段
      showField: {
        action: true,
        fid: true,
        fileSize: true,
        height: true,
        imageUrl: true,
        providerName: true,
        width: true
      },
      // table选中行
      multipleSelection: []
    }
  },
  watch: {
    visible(val) {
      if (val) {
        this.isSearchVisible = this.useComplexFilter
        this.initFileList()
      }
    }
  },
  methods: {
    // 提交
    submitForm() {
      this.initFileList()
    },
    // 重置
    resetForm(formName) {
      this.$refs[formName].resetFields()
    },
    // 每页条数改变
    handleSizeChange(val) {
      this.limit = val
      this.initFileList()
    },
    // 页数改变
    handleCurrentChange(val) {
      this.currentPage = val
      this.initFileList()
    },
    // 刷新
    refreshData() {
      this.initFileList(true)
    },
    // 初始化文件列表数据
    initFileList(needToast = false) {
      var fid = ''
      if (this.dirs.length > 0) {
        fid = this.dirs[this.dirs.length - 1].fileFid
      }
      const params = {
        fid: fid,
        id: this.formData.attachmentId,
        provider: this.formData.storageType,
        height: this.formData.height,
        width: this.formData.width,
        ext: this.formData.fileType,
        p: this.currentPage,
        limit: this.limit
      }
      commonApi.loadFileList2(params).then(data => {
        if (needToast) this.$message.success('刷新成功')
        this.fileTypeOptions = data.fileType
        this.providerOptions = data.provider
        this.fileList = data.fileList
        this.totalCount = parseInt(data.count)
      })
    },
    // table checkbox 事件
    handleSelectionChange(value) {
      if (this.isMultiple) {
        this.multipleSelection = value
      } else {
        this.multipleSelection = value.slice(-1) // 单选默认选中最后一个
        this.$refs.assetsTable.clearSelection() // 先清空
        this.multipleSelection.forEach(row => {
          this.$refs.assetsTable.toggleRowSelection(row, true) // 再选中
        })
      }
      this.$emit('select', this.multipleSelection)
    },
    // table checkbox all 事件
    handleSelectionAllChange(value) {
      if (this.isMultiple) {
        this.multipleSelection = value
        this.$emit('select', this.multipleSelection)
      } else {
        this.$refs.assetsTable.clearSelection() // 清空
        this.$message({
          message: '当前不允许多选操作',
          type: 'warning'
        })
      }
    },
    // 派发关闭事件
    handleClose() {
      this.$emit('close')
    },
    // 字段选中事件
    handleFieldAllChange(value) {
      this.fieldList = this.fieldList.map(val => {
        val.checked = value
        return val
      })
    },
    // 检查是否全选
    handleFieldChange(value) {
      this.fieldAllChecked = this.fieldList.every(val => val.checked === true)
    },
    // 点击打开文件夹
    handleSelectionClick(row, event, column) {
      if (row.fileType === '0') {
        this.dirs.push(row)
        this.formData.attachmentId = ''
        // 打开文件夹
        this.initFileList()
      }
    },
    // 返回上一级
    handleBack() {
      if (this.dirs.length > 0) {
        this.dirs.pop()
      }
      // 打开文件夹
      this.initFileList()
    },
    // 返回顶层
    handleRoot() {
      this.dirs = []
      // 打开文件夹
      this.initFileList()
    },
    // 跳转下标
    handleTo(index) {
      console.log(index)
      while (index < this.dirs.length - 1) {
        this.dirs.pop()
      }
      this.initFileList()
    },
    // 重置显示字段
    handleResetField() {
      this.fieldAllChecked = false
      this.handleFieldAllChange(false)
    },
    // 保存显示字段
    handleSaveField() {
      const showField = {}
      this.fieldList.forEach(val => {
        showField[val.key] = !!val.checked
      })
      console.log('this.showField', showField)
      this.showField = showField
      this.selFieldVisibe = false
    }
  }
}
</script>

<style lang="scss" scoped>

.el-container {
  height: 100%;
  width: 100%;
  .el-main {
    height: 90%;
    width: 100%;
  }
  .el-footer {
    height: 10%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}

.assets-warpper {
  height: 100%;
  .el-input {
    width: 627px;
  }
  .el-form-item {
    margin-bottom: 10px;
    margin-top: 10px;
  }
  .el-button--medium {
    border-radius: 2px;
    padding: 8px;
  }
  .external-link {
    height: 90px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .tips {
    font-size: 12px;
    padding-left: 70px;
    color: #40a3ff;
    span {
      padding-left: 10px;
    }
  }
  .filter-area {
    margin: 0 22px;
    margin-top: 10px;
    display: flex;
    justify-content: space-between;
    .el-input {
      width: 164px;
    }
  }
  .filter-form {
    margin: 0 22px;
    display: flex;
    justify-content: flex-start;
    flex-flow: row wrap;
    .text-right {
      text-align: right;
    }
    .text-center {
      text-align: center;
    }
    .el-input--mini,
    .el-select--mini {
      width: 160px;
    }
    .el-form-item {
      width: 32.3%;
    }
    ::v-deep .el-form-item__label {
      width: 80px !important;
    }
  }
}
.breadcrumb {
  font-size: 14px;
  font-weight: 400;
  color: #333333;
  margin: 0 22px 10px 22px;
  ::v-deep .high .el-breadcrumb__inner {
    color: #1890ff;
  }
  ::v-deep .el-breadcrumb__separator {
    color: #1890ff;
    margin: 0 6px;
  }
}
.assets-table {
  margin: 0 10px;
  .image {
    width: 30px;
    height: auto;
    margin-right: 16px;
    vertical-align: middle;
  }
  .sel-btn {
    width: 30px;
    height: 30px;
    background: #ffe7e7;
    border-radius: 2px;
    border: 0;
    color: #ff4949;
  }
  .provider {
    color: #13ce66;
    span {
      padding-left: 5px;
    }
  }
}
.sel-filed {
  display: flex;
  flex-direction: column;
  height: 100%;
  .sel-all {
    width: 100%;
    height: 68px;
    padding-left: 53px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    .h {
      width: 5px;
      height: 12px;
      background: #1890ff;
      margin-right: 10px;
    }
  }
  .sel-list {
    display: flex;
    flex-wrap: wrap;
    flex: 1;
    align-content: flex-start;
    .sel-item {
      width: 33%;
      height: 40px;
      box-sizing: border-box;
      padding-left: 68px;
    }
  }
  .sel-footer {
    height: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0px -2px 4px 0px rgba(0, 0, 0, 0.04);
    .el-button {
      width: 88px;
    }
  }
}
</style>
