<template>
  <el-dialog
   :close-on-click-modal="false"
:title="'选择' + resourceType"
:visible.sync="dialogVisible"
width="900px"
top="5vh"
append-to-body
             @close="closeDialog">
    <el-row :gutter="10">
      <el-col :span="6">
        <project-nav @itemClick="projectClick"></project-nav>
      </el-col>
      <el-col :span="18">
        <el-form :model="formData" label-width="50px" @submit.native.prevent>
          <el-row :gutter="24" style="line-height: 28px;">
            <el-col :span="6">
              <el-form-item label="名称">
                <el-input v-model="formData.name" clearable placeholder="请输入"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-button type="primary" @click="powerSearch">搜索</el-button>
              <el-button type="primary" @click="rest">重置</el-button>
            </el-col>
            <el-col :span="12">
              <el-tooltip class="float-r" effect="dark" content="上传文件" :enterable="false" placement="top">
                <upload
class="ml-10"
style="display: inline-block"
size="mini"
:options="uploadOptions"
                        :fileList.sync="fileList"
:fileType="resourceType"
@on-success="handleSuccess"/>
              </el-tooltip>
            </el-col>
          </el-row>
        </el-form>
        <div class="tableWrap">
          <el-radio-group v-if="!isMore" v-model="selectIndex" style="width: 100%">
            <el-table
:data="tableList"
v-loading="tableLoading"
highlight-current-row
                      style="width: 100%; margin-bottom: 10px"
size="mini"
@current-change="handleCurrentChange">
              <el-table-column type="index" label="序号" width="50" align="center">
              </el-table-column>
              <el-table-column prop="name" label="名称" width="150" align="left" show-overflow-tooltip>
              </el-table-column>
              <el-table-column prop="path" label="路径" align="center" show-overflow-tooltip>
              </el-table-column>
              <el-table-column label="选择" width="60" align="center">
                <template slot-scope="scope">
                  <el-radio  :label="scope.$index" class="radioEmpty">{{ '' }}</el-radio>
                </template>
              </el-table-column>
            </el-table>
          </el-radio-group>
          <el-table
v-else
:data="tableList"
v-loading="tableLoading"
highlight-current-row
                    style="width: 100%; margin-bottom: 10px"
size="mini"
ref="multipleTable"
tooltip-effect="dark"
                    row-key="id"
                    :reserve-selection="true"
@row-click="clickRow"
@selection-change="handleSelectionChange">
            <el-table-column type="selection" width="50" align="center" :reserve-selection="true">
            </el-table-column>
            <el-table-column type="index" label="序号" width="50" align="center">
            </el-table-column>
            <el-table-column prop="name" label="名称" width="150" align="left" show-overflow-tooltip>
            </el-table-column>
            <el-table-column prop="path" label="路径" align="center" show-overflow-tooltip>
            </el-table-column>
          </el-table>
          <el-pagination
:page-size="page.pageSize"
:current-page.sync="page.pageNum"
background
                         @current-change="getData()"
                         :total="page.total"></el-pagination>
        </div>
      </el-col>
    </el-row>
    <span slot="footer" class="dialog-footer">
      <el-button @click="cancel">取 消</el-button>
      <el-button type="primary" @click="submit">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { listFiles } from '@/api/esb_service'
import Upload from '@/components/upload/Upload'
import ProjectNav from '@/components/projectNav'

export default {
  components: {
    ProjectNav,
    Upload
  },
  name: 'ChooseGoodsDialog',
  data() {
    return {
      objName: {},
      dialogVisible: false,
      tableLoading: false,
      formData: {},
      tableList: [],
      page: {
        pageSize: 10,
        pageNum: 1,
        total: 0
      },
      selectIndex: -1,
      multipleSelection: [],
      filters: [],
      uploadOptions: {
        name: 'file',
        url: `${process.env.VUE_APP_HOST_URL}${process.env.VUE_APP_BASE_URL}/soa/resource/upload`,
        limit: 100000000
      },
      fileList: [],
      projectId: localStorage.getItem('projectID')
    }
  },
  props: {
    value: {
      type: Boolean,
      default: false
    },
    isMore: {
      type: Boolean,
      default: false
    },
    resourceType: {
      type: String,
      default: ''
    }
  },
  watch: {
    value(val) {
      this.dialogVisible = val
      if (val) {
        this.uploadOptions.url = `${process.env.VUE_APP_HOST_URL}${process.env.VUE_APP_BASE_URL}/soa/resource/upload`
        this.getData()
      } else if (this.isMore) {
        this.$refs.multipleTable.clearSelection()
        this.$refs.multipleTable.setCurrentRow()
      }
    },
    dialogVisible(val) {
      this.$emit('input', val)
    }
  },
  methods: {
    // 项目列表点击时
    projectClick(item) {
      this.projectId = item.id
      this.objName.name = item.name
      this.getData()
    },
    handleSuccess(res, fileList) {
      this.getData()
    },
    getData() {
      this.tableLoading = true
      this.selectIndex = -1
      const data = this.formData.name ? `/${this.formData.name}` : ''
      listFiles({
        'filters': [
          {
            'key': 'type',
            'value': this.resourceType
          },
          {
            'key': 'name',
            'opt': 'LIKE',
            'value': this.formData.name
          },
          {
            key: 'project_id',
            opt: 'LIKE',
            type: 'S',
            value: this.projectId
          }
        ],
        'orderby': 'createon',
        'sort': 'desc',
        'pageNum': this.page.pageNum,
        'pageSize': this.page.pageSize
      }).then((rt) => {
        this.tableLoading = false
        if (rt.status === '200') {
          this.tableList = rt.data.list || []
          this.page.total = rt.data.total
        }
      }).catch(() => {
        this.tableLoading = false
      })
    },
    // 搜索
    powerSearch() {
      // this.page.pageNum = 1
      // this.filterData(this.formData)
      this.getData()
    },
    // 重置
    rest() {
      this.formData = {}
      this.powerSearch()
    },
    // 搜索过滤
    filterData(obj) {
      this.filters = []
      Object.keys(obj).forEach(key => {
        const filter = {
          key,
          opt: 'LIKE',
          type: 'S',
          value: obj[key]
        }
        if (filter.value) {
          this.filters.push(filter)
        }
      })
    },
    // 单选
    handleCurrentChange(val) {
      if (val) {
        this.selectIndex = this.tableList.findIndex(item => item.id === val.id)
      }
    },
    // 多选
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    clickRow(row) {
      this.$refs.multipleTable.toggleRowSelection(row)
    },
    submit() {
      if (this.isMore) {
        const data = JSON.parse(JSON.stringify(this.multipleSelection))
        this.$emit('confirm', data, this.objName)
        this.dialogVisible = false
      } else {
        if (this.selectIndex >= 0) {
          const data = JSON.parse(JSON.stringify(this.tableList[this.selectIndex]))
          this.$emit('confirm', data, this.objName)
          this.dialogVisible = false
        }
      }
    },
    // 关闭dialog
    closeDialog() {
      this.formData = {}
    },
    cancel() {
      this.dialogVisible = false
    }
  }
}
</script>

<style type="text/scss" lang="scss" scoped>
.upload {
  /deep/ .uploader {
    .el-upload-list {
      display: none;
    }
  }
}
</style>
