<template>
  <div class="fullheight">
    <ht-table
      @load="loadData"
      :data="data"
      :pageResult="pageResult"
      :selection="true"
      :quick-search-props="querySearch"
      :show-export="false"
      :default-sorter="[{direction: 'DESC', property: 'id_'}]"
      :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/fileConfig/v1/"
            :htTable="$refs.htTable"
            style="margin: 0"
            >删除</ht-delete-button
          >
      </template>
      <template>
        <ht-table-column type="index" width="50" align="center" label="序号" />
        <ht-table-column
          prop="name"
          label="附件上传名称"
          :show-overflow-tooltip="true"
          width='120'
        >
          <template v-slot="{row}">
            <el-link @click="showDialog(row.id)" type="primary">
              {{ row.name }}
            </el-link>
          </template>
        </ht-table-column>
        <ht-table-column
          prop="code"
          label="附件上传编码"
          :show-overflow-tooltip="true"
          width='120'
        >
          <template v-slot="{row}">
            <span>{{ row.code }}</span>
          </template>
        </ht-table-column>
        
        <ht-table-column
          prop="storageName"
          label="附件存储名称"
          :show-overflow-tooltip="true"
          width='140'
        >
          <template v-slot="{row}">
            <span>{{ row.storageName }}</span>
          </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
          prop="allowSize"
          label="附件上传大小"
          :sortable="true"
          :show-overflow-tooltip="true"
          width="140"
        >
          <template v-slot="{row}">
            <span>{{ `${row.allowSize}MB` }}</span>
          </template>
        </ht-table-column>
        <ht-table-column
          prop="allowDelete"
          label="是否允许删除"
          width="120"
          :show-overflow-tooltip="true"
        >
          <template v-slot="{row}">
            <el-tag type="success" v-if="row.allowDelete == '1'">是</el-tag>
            <el-tag type="danger" v-if="row.allowDelete == '0'">否</el-tag>
          </template>
        </ht-table-column>
        <ht-table-column
          prop="allowMultiple"
          label="是否允许同时上传多个"
          width="200"
          :show-overflow-tooltip="true"
        >
          <template v-slot="{row}">
            <el-tag type="success" v-if="row.allowMultiple == '1'">是</el-tag>
            <el-tag type="danger" v-if="row.allowMultiple == '0'">否</el-tag>
          </template>
        </ht-table-column>
        <ht-table-column prop="fileKinds" label="允许上传附件类型" width="180">
        </ht-table-column>
      </template>
    </ht-table>
    <el-dialog
      width="50%"
      title="附件配置"
      class="sp-manager__dialog attachment_config"
      :visible="dialogVisible"
      :before-close="beforeCloseDialog"
    >
      <el-form v-form data-vv-scope="attachmentConfigForm" label-width="160px">
        <el-form-item label="附件上传名称">
          <el-input v-model="attachmentConfig.name" validate="required"/>
        </el-form-item>
        <el-form-item label="附件上传编码">
          <el-input v-model="attachmentConfig.code" validate="required" />
        </el-form-item>
        <el-form-item label="附件存储配置分类">
          <el-input
            placeholder="附件存储配置分类"
            v-model="attachmentConfig.storageName"
            validate="required"
          >
            <el-button
              type="primary"
              @click="openTemplateKind"
              slot="append"
              icon="el-icon-search"
            ></el-button>
          </el-input>
        </el-form-item>
        <el-form-item label="附件上传大小">
          <el-input v-model="attachmentConfig.allowSize" validate="required">
            <template slot="append">MB</template>
          </el-input>
        </el-form-item>
        <el-form-item label="是否允许删除">
          <el-radio-group
            v-model="attachmentConfig.allowDelete"
            validate="required"
          >
            <el-radio :label="1">是</el-radio>
            <el-radio :label="0">否</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="是否允许同时上传多个">
          <el-radio-group
            v-model="attachmentConfig.allowMultiple"
            validate="required"
          >
            <el-radio :label="1">是</el-radio>
            <el-radio :label="0">否</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="允许上传附件类型">
          <el-input v-model="attachmentConfig.fileKinds" validate="required" />
        </el-form-item>
        <el-form-item label="备注">
          <el-input
            v-model="attachmentConfig.memo"
            type="textarea"
            validate="required"
          />
        </el-form-item>
      </el-form>
      <div slot="footer" style="text-align: center">
        <ht-submit-button
          :url="submitUrl"
          :model="attachmentConfig"
          scope-name="flowUploadPropertiesForm"
          :isSubmit="isSubmit"
          @before-save-data="beforeSaveData"
          @after-save-data="afterSaveData"
          >{{ $t('eip.common.save') }}</ht-submit-button
        >
        <el-button @click="beforeCloseDialog">{{
          $t('eip.common.cancel')
        }}</el-button>
      </div>
      <config-dialog ref="msgkind" @select="handleSelectMsgkind">
      </config-dialog>
    </el-dialog>
  </div>
</template>
<script>
const eipFlowDialog = () => import('@/components/dialog/EipFlowDialog.vue')
import ConfigDialog from '@/components/dialog/ConfigDialog'
export default {
  components: {
    eipFlowDialog,
    ConfigDialog,
  },
  data() {
    return {
      dialogVisible: false,
      submitUrl: '',
      insertUrl: '${portal}/file/fileConfig/v1/insertFileConfig',
      updateUrl: '${portal}/file/fileConfig/v1/updateFileConfig',
      data: [],
      querySearch: [
        {
          label: '名称',
          prop: 'c.name_',
        }
      ],
      pageResult: {
        page: 1,
        pageSize: 50,
        total: 0,
      },
      attachmentConfig: {
        allowDelete: 1,
        storageName: '',
        allowMultiple: 1,
      },
      isSubmit: false,
    }
  },
  mounted() {
    this.$validator = this.$root.$validator
  },
  methods: {
    handleSelectMsgkind(row) {
      this.attachmentConfig.storageName = row.name
      this.attachmentConfig.storageId = row.id
      this.$forceUpdate()
    },
    openTemplateKind() {
      this.$refs.msgkind.open()
    },
    showFlowDialog() {
      this.$refs.eipFlowDialog.showDialog()
    },
    showDialog(id) {
      if (id) {
        this.$http.get('${portal}/file/fileConfig/v1/getOneById?id='+id).then(
          (resp) => {
            this.attachmentConfig = resp.data
            this.dialogVisible = true
            this.submitUrl = this.updateUrl
          },
          (error) => {
            reject(error)
          }
        )
      } else {
        this.attachmentConfig = {
          allowMultiple: 1,
          allowDelete: 1,
        }
        this.dialogVisible = true
        this.submitUrl = this.insertUrl
      }
    },
    beforeCloseDialog() {
      this.attachmentConfig = {}
      this.submitUrl = ''
      this.dialogVisible = false
    },
    handleClose(flow) {
      this.selectedFlows.splice(this.selectedFlows.indexOf(flow), 1)
    },
    loadData(param, cb) {
      this.$http
        .post('${portal}/file/fileConfig/v1/queryPage', 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())
    },
    beforeSaveData() {
      this.isSubmit = true
    },
    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;
  }
}
.attachment_config .fileKind-help {
  color: rgba(0, 0, 0, 0.45);
}
</style>
