<template>
  <div>
    <el-dialog
      title="选择附件存储配置"
      :visible.sync="configvisible"
      width="70%"
      appendToBody
      :close-on-click-modal="false"
      top="5vh"
      @close="closeDialog"
      v-if="configvisible"
    >
      <el-container>
        <el-main style="padding: 10px; height: 400px">
          <ht-table
            @load="loadData"
            :data="data"
            :selectable="false"
            :highlightCurrentRow="true"
            :page-result="pageBean"
            quick-search-props="name,key"
            ref="htTable"
            :show-export="false"
            :show-custom-column="false"
            @row-click="rowClick"
          >
            <template>
              <ht-table-column
                type="index"
                width="50"
                align="center"
                label="序号"
              />
              <ht-table-column
                prop="name"
                label="附件存储名称"
                :show-overflow-tooltip="true"
                :sortable="true"
              >
              </ht-table-column>
              <ht-table-column
                prop="code"
                label="附件存储编码"
                :show-overflow-tooltip="true"
                :sortable="true"
              />
              <ht-table-column
          prop="uploadType"
          label="附件存储方式"
          width="150"
          :filters="[
            {text: '磁盘', value: 'folder'},
            {text: '数据库', value: 'database'},
            {text: 'FTP服务器', value: 'ftp'},
            {text: 'MinIo', value: 'minio'},
            {text: '阿里云OSS', value: 'aliyunOss'},
            {text: '华为云OBS', value: 'huaweiyunObs'},
          ]"
        >
          <template v-slot="{row}">
            <el-tag effect="plain" v-if="row.uploadType == 'folder'"
              >磁盘</el-tag
            >
            <el-tag
              type="info"
              effect="plain"
              v-if="row.uploadType == 'database'"
              >数据库</el-tag
            >
            <el-tag type="success" v-if="row.uploadType == 'ftp'"
              >FTP服务器</el-tag
            >
            <el-tag type="danger" v-if="row.uploadType == 'minio'"
              >MinIo</el-tag
            >
            <el-tag type="warning" v-if="row.uploadType == 'aliyunOss'"
              >阿里云OSS</el-tag
            >
            <el-tag v-if="row.uploadType == 'huaweiyunObs'">华为云OBS</el-tag>
          </template>
        </ht-table-column>
            </template>
          </ht-table>
        </el-main>
      </el-container>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="handleOK" size="medium"
          >确 定</el-button
        >
        <el-button @click="closeDialog" size="medium">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import portal from '@/api/portal.js'
import utils from '@/hotent-ui-util.js'
export default {
  data() {
    return {
      configvisible: false,
      pageBean: {
        page: 1,
        pageSize: 20,
        total: 0,
      },
      data: [],
      activeRow: {},
    }
  },
  methods: {
    rowClick(row) {
      this.activeRow = row
    },
    open() {
      this.configvisible = true
    },
    handleOK() {
      let selectRow = utils.deepClone(this.activeRow)
      this.$emit('select', selectRow)
      this.configvisible = false
      this.activeRow = {}
    },
    loadData(param, cb) {
      if (!param) {
        this.pageBean.total = 0
        param = {pageBean: ''}
        param.pageBean = this.pageBean
        param.sorter = this.defaultSort
      }
     this.$http
        .post('${portal}/file/fileStorage/v1/listJson', param)
        .then(
          (resp) => {
            let response = resp.data
            this.data = response.rows
            this.pageBean = {
              page: response.page,
              pageSize: response.pageSize,
              total: response.total,
            }
          },
          (error) => {
            reject(error)
          }
        )
        .finally(() => cb())
    },
    closeDialog() {
      this.configvisible = false
      this.activeRow = {}
    },
  },
}
</script>

<style lang="scss" scoped>
>>> .el-dialog__body {
  padding-bottom: 0px !important;
}
</style>