<template>
  <div class="fullheight">
    <ht-table
      @load="loadData"
      :data="data"
      :pageResult="pageResult"
      :selection="true"
      :quick-search-props="querySearch"
      :show-export="false"
      :show-custom-column="false"
      ref="htTable"
    >
      <template v-slot:toolbar>
          <el-button
            size="small"
            @click="showDialog('添加')"
            icon="el-icon-plus"
            type="primary"
            >添加</el-button
          >
          <ht-delete-button
            url="${portal}/file/fileStorage/v1/"
            :htTable="$refs.htTable"
            >删除</ht-delete-button
          >
      </template>
      <template>
        <ht-table-column type="index" width="50" align="center" label="序号" />
        <ht-table-column
          prop="name"
          label="名称"
          :sortable="true"
          :show-overflow-tooltip="true"
        >
          <template v-slot="{row}">
            <el-link
              type="primary"
              @click="showDialog(row.id)"
              title="查看详情"
              >{{ row.name }}</el-link
            >
          </template>
        </ht-table-column>
        <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>
        <ht-table-column
          width="120"
          prop="location"
          label="存储位置"
          :sortable="true"
          :show-overflow-tooltip="true"
        >
        </ht-table-column>
        <ht-table-column
          width="180"
          prop="url"
          label="上传地址"
          :sortable="true"
          :show-overflow-tooltip="true"
        >
        </ht-table-column>
        <ht-table-column
          prop="status"
          label="状态"
          width="120"
          :filters="[
            {text: '启用', value: 'enable'},
            {text: '禁用', value: 'disable'},
          ]"
        >
          <template v-slot="{row}">
            <el-tag type="success" v-if="row.status == 'enable'">启用</el-tag>
            <el-tag type="danger" v-if="row.status == 'disable'">禁用</el-tag>
          </template>
        </ht-table-column>
        <ht-table-column
          width="180"
          prop="desc"
          label="描述"
          :sortable="true"
          :show-overflow-tooltip="true"
        >
        </ht-table-column>
      </template>
    </ht-table>
    <ht-sidebar-dialog
      width="35%"
      title="附件存储配置"
      class="sp-manager__dialog"
      :visible="dialogVisible"
      :before-close="beforeCloseDialog"
    >
      <el-form v-form data-vv-scope="flowUploadPropertiesForm">
        <ht-form-item label="名称">
          <ht-input v-model="fileStorage.name" validate="required" />
        </ht-form-item>
        <ht-form-item label="编码">
          <ht-input v-model="fileStorage.code" validate="required" />
        </ht-form-item>
        <ht-form-item label="上传方式" stylestyle="width:120px;">
          <ht-select
            v-model="fileStorage.uploadType"
            :options="uploadTypeOptions"
            :validate="{required: true}"
          />
        </ht-form-item>
        <ht-form-item
          v-if="fileStorage.uploadType == 'folder'"
          label="存储位置"
          style="width: 400px"
        >
          <ht-input v-model="fileStorage.location" validate="required" />
          <!-- <el-tooltip
              class="item"
              effect="dark"
              content="存储格式例如:images\\two.png"
              placement="bottom-end"
            >
              <span class="el-icon-question" style="margin-left: 10px"></span>
            </el-tooltip> -->
          <el-tooltip
            class="item"
            effect="dark"
            content="存储格式例如:images\\two.png"
            placement="top-start"
          >
            <span class="el-icon-question" style="margin-left: 10px"></span>
          </el-tooltip>
        </ht-form-item>
        <ht-form-item
          v-if="
            fileStorage.uploadType == 'ftp' || fileStorage.uploadType == 'minio'
          "
          :label="fileStorage.uploadType == 'ftp' ? '根目录' : '桶名'"
          stylestyle="width:120px;"
        >
          <ht-input v-model="fileStorage.location" validate="required" />
        </ht-form-item>
        <ht-form-item
          v-if="
            fileStorage.uploadType == 'ftp' || fileStorage.uploadType == 'minio'
          "
          label="上传地址"
          stylestyle="width:120px;"
        >
          <ht-input
            type="textarea"
            v-model="fileStorage.ftpUrl"
            placeholder="上传地址"
            validate="required"
          />
        </ht-form-item>
        <ht-form-item
          v-if="
            fileStorage.uploadType == 'ftp' || fileStorage.uploadType == 'minio'
          "
          label="端口号"
          stylestyle="width:120px;"
        >
          <ht-input v-model="fileStorage.ftpPort" validate="required" />
        </ht-form-item>
        <ht-form-item
          v-if="
            fileStorage.uploadType == 'ftp' || fileStorage.uploadType == 'minio'
          "
          label="用户名"
          stylestyle="width:120px;"
        >
          <ht-input v-model="fileStorage.ftpUserName" validate="required" />
        </ht-form-item>
        <ht-form-item
          v-if="
            fileStorage.uploadType == 'ftp' || fileStorage.uploadType == 'minio'
          "
          label="密码"
          stylestyle="width:120px;"
        >
          <ht-input
            v-model="fileStorage.ftpPassword"
            type="password"
            validate="required"
          />
        </ht-form-item>

        <ht-form-item
          v-if="
            fileStorage.uploadType == 'aliyunOss' ||
            fileStorage.uploadType == 'huaweiyunObs'
          "
          :label="
            fileStorage.uploadType == 'aliyunOss' ? '访问域名' : '终端地址'
          "
          stylestyle="width:120px;"
        >
          <ht-input
            v-model="fileStorage.aliyunOssEndpoint"
            placeholder="http://oss-cn-guangzhou.aliyuncs.com"
            validate="required"
          />
        </ht-form-item>
        <ht-form-item
          v-if="
            fileStorage.uploadType == 'aliyunOss' ||
            fileStorage.uploadType == 'huaweiyunObs'
          "
          label="密钥Id"
          stylestyle="width:120px;"
        >
          <ht-input
            type="password"
            v-model="fileStorage.aliyunOssAccessKeyId"
            placeholder=""
            validate="required"
          />
        </ht-form-item>
        <ht-form-item
          v-if="
            fileStorage.uploadType == 'aliyunOss' ||
            fileStorage.uploadType == 'huaweiyunObs'
          "
          label="密钥Secret"
          stylestyle="width:120px;"
        >
          <ht-input
            type="password"
            v-model="fileStorage.aliyunOssAccessKeySecret"
            placeholder=""
            validate="required"
          />
        </ht-form-item>
        <ht-form-item
          v-if="
            fileStorage.uploadType == 'aliyunOss' ||
            fileStorage.uploadType == 'huaweiyunObs'
          "
          :label="fileStorage.uploadType == 'aliyunOss' ? '主目录' : '桶名'"
          stylestyle="width:120px;"
        >
          <ht-input
            v-model="fileStorage.location"
            placeholder="hotent"
            validate="required"
          />
        </ht-form-item>
        <ht-form-item label="状态" stylestyle="width:120px;">
          <el-radio-group v-model="fileStorage.status" validate="required">
            <el-radio v-model="fileStorage.status" label="enable"
              >启用</el-radio
            >
            <el-radio v-model="fileStorage.status" label="disable"
              >禁用</el-radio
            >
          </el-radio-group>
        </ht-form-item>
        <ht-form-item label="描述" stylestyle="width:120px;">
          <ht-input
            type="textarea"
            v-model="fileStorage.desc"
            placeholder="请输入描述"
          />
        </ht-form-item>
      </el-form>
      <div slot="footer" style="text-align: center">
        <ht-submit-button
          url="${portal}/file/fileStorage/v1/save"
          :model="fileStorage"
          scope-name="fileStorageForm"
          @after-save-data="afterSaveData"
          >{{ $t('eip.common.save') }}</ht-submit-button
        >
        <el-button @click="beforeCloseDialog">{{
          $t('eip.common.cancel')
        }}</el-button>
      </div>
    </ht-sidebar-dialog>
  </div>
</template>

<script>
import portal from '@/api/portal.js'
export default {
  props: {},
  data() {
    return {
      data: [],
      pageResult: {
        page: 1,
        pageSize: 50,
        total: 0,
      },
      querySearch: [
        {
          label: '名称',
          prop: 'name',
        },
        {
          label: '描述',
          prop: 'desc',
        },
      ],
      dialogVisible: false,
      fileStorage: {
        uploadType: 'folder',
        status: 'enable',
      },
      uploadTypeOptions: [
        {key: 'folder', value: '文件目录'},
        {key: 'ftp', value: 'FTP服务器'},
        {key: 'minio', value: 'MinIo'},
        {key: 'database', value: '数据库'},
        {key: 'aliyunOss', value: '阿里云OSS'},
        {key: 'huaweiyunObs', value: '华为云OBS'},
      ],
    }
  },
  methods: {
    loadData(param, cb) {
      this.$http
        .post('${portal}/file/fileStorage/v1/listJson', param)
        .then(
          (resp) => {
            let response = resp.data
            this.data = response.rows
            this.pageResult = {
              page: response.page,
              pageSize: response.pageSize,
              total: response.total,
            }
          },
          (error) => {
            reject(error)
          }
        )
        .finally(() => cb())
    },
    showDialog(id) {
      if (id == '添加') {
        console.log(1)
      } else {
        portal
          .getFileStorage(id)
          .then((res) => {
            console.log(res)
            this.fileStorage = res
          })
          .finally(() => cb())
      }
      this.dialogVisible = true
    },
    beforeCloseDialog() {
      this.fileStorage = {
        uploadType: 'folder',
        status: 'enable',
      }
      this.dialogVisible = false
    },
    afterSaveData() {
      setTimeout(() => {
        this.beforeCloseDialog()
        this.$refs.htTable.load()
      }, 500)
    },
  },
}
</script>
<style lang="scss" scoped>
.el-tag + .el-tag {
  margin-left: 5px;
  margin-right: 5px;
}
.sp-manager__dialog /deep/ > .el-dialog > .el-dialog__body {
  height: calc(100% - 170px);
}

.sp-manager__dialog >>> .dialog-popconfirm {
  margin-left: 3px;
}
@media (max-width: 1024px) {
  /deep/ .el-dialog {
    width: 45% !important;
  }
}
</style>
