<template>
  <div class="fullheight">
    <ht-table
      @load="loadData"
      :data="data"
      :pageResult="pageResult"
      :selection="true"
      quick-search-props="name,flowKey,flowName,desc"
      :show-export="false"
      :show-custom-column="false"
      ref="htTable"
    >
      <template v-slot:toolbar>
        <el-button-group>
          <el-button size="small" @click="showDialog()" icon="el-icon-plus" type="primary"
            >添加</el-button
          >
          <ht-delete-button
            url="${portal}/file/flowUploadProperties/v1/remove"
            :htTable="$refs.htTable"
            style="margin: 10px"
            >删除</ht-delete-button
          >
        </el-button-group>
      </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="flowName"
          label="流程名称"
          :sortable="true"
          :show-overflow-tooltip="true"
        >
          <template v-slot="{row}">
            {{ getShowName(row.flowName) }}
          </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="ftpUrl"
          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="flowUploadProperties.name" validate="required" />
        </ht-form-item>
        <ht-form-item label="流程名称" class="is-required">
          <el-tag
            :key="flow.key"
            v-for="flow in selectedFlows"
            closable
            :disable-transitions="false"
            @close="handleClose(flow)"
          >
            {{ flow.name }}
          </el-tag>
          <el-button
            type="primary"
            size="mini"
            icon="el-icon-search"
            @click="showFlowDialog()"
            >选择</el-button
          >
          <el-popconfirm
            title="您确定要清空嘛？"
            @onConfirm="cleanSelectedFlows()"
            class="dialog-popconfirm"
          >
            <el-button
              type="danger"
              size="mini"
              icon="el-icon-delete"
              slot="reference"
              >清空选择</el-button
            >
          </el-popconfirm>
          <!-- 流程选择对话框  -->
          <eip-flow-dialog
            ref="eipFlowDialog"
            name="eipFlowDialog"
            @onConfirm="dialogOnConfirm"
            append-to-body
          />
        </ht-form-item>
        <ht-form-item label="附件存储" class="is-required">
          <ht-input
            placeholder="请选择附件存储配置"
            readonly
            v-model="flowUploadProperties.file"
            :validate="{required: true}"
          >
            <el-button
              type="primary"
              @click="openTemplateKind"
              slot="append"
              icon="el-icon-search"
            ></el-button>
          </ht-input>
          <!-- 附件配置选择对话框  -->
        </ht-form-item>
      </el-form>
      <div slot="footer" style="text-align: center">
        <ht-submit-button
          url="${portal}/file/flowUploadProperties/v1/save"
          :model="flowUploadProperties"
          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>
    </ht-sidebar-dialog>
    <eip-file-dialog
      ref="eipFileDialog"
      name="eipFileDialog"
      @select="handleSelectMsgkind"
      append-to-body
    />
  </div>
</template>
<script>
const eipFlowDialog = () => import('@/components/dialog/EipFlowDialog.vue')
const eipFileDialog = () => import('@/components/dialog/EipFileDialog.vue')
export default {
  components: {
    eipFlowDialog,
    eipFileDialog,
  },
  data() {
    return {
      dialogVisible: false,
      data: [],
      pageResult: {
        page: 1,
        pageSize: 50,
        total: 0,
      },
      selectedFlows: [],
      flowUploadProperties: {
        file:'',
        filecode:''
      },
      isSubmit: false,
    }
  },
  mounted() {
    this.$validator = this.$root.$validator
  },
  methods: {
    showFlowDialog() {
      this.$refs.eipFlowDialog.showDialog()
    },
    openTemplateKind() {
      this.$refs.eipFileDialog.open()
    },
    showDialog(id) {
      this.selectedFlows = []
      if (id) {
        this.$http
          .get('${portal}/file/flowUploadProperties/v1/' + `${id}`)
          .then(
            (resp) => {
              this.flowUploadProperties = resp.data
              this.flowUploadProperties.encryptName = 1
              this.dialogVisible = true
              this.initSelectFlow(resp.data)
            },
            (error) => {
              reject(error)
            }
          )
      } else {
        // this.flowUploadProperties = {
        //   file:'123'
        // }
        this.dialogVisible = true
      }
    },
    initSelectFlow(properties) {
      if (properties.flowKey) {
        const flowKeys = properties.flowKey.split(',')
        const flowNames = properties.flowName.split(',')
        for (let i = 0; i < flowKeys.length; i++) {
          const key = flowKeys[i]
          if (key) {
            this.selectedFlows.push({key: key, name: flowNames[i]})
          }
        }
      }
    },
    beforeCloseDialog() {
      this.flowUploadProperties = {}
      this.dialogVisible = false
      this.selectedFlows = []
    },
    handleClose(flow) {
      this.selectedFlows.splice(this.selectedFlows.indexOf(flow), 1)
    },
    dialogOnConfirm(data) {
      data.forEach((ele) => {
        let isIn = false
        this.selectedFlows.forEach((sele) => {
          if (sele.key == ele.defKey) {
            isIn = true
          }
        })
        if (!isIn) {
          this.selectedFlows.push({key: ele.defKey, name: ele.name})
        }
      })
    },
    loadData(param, cb) {
      this.$http
        .post('${portal}/file/flowUploadProperties/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())
    },
    beforeSaveData() {
      this.isSubmit = true
      let flowKeys = ''
      let flowNames = ''
      this.selectedFlows.forEach((flow) => {
        if (flowKeys) {
          flowKeys += ','
          flowNames += ','
        }
        flowKeys += flow.key
        flowNames += flow.name
      })
      this.flowUploadProperties.flowKey = flowKeys
      this.flowUploadProperties.flowName = flowNames
    },
    afterSaveData() {
      setTimeout(() => {
        this.beforeCloseDialog()
        this.$refs.htTable.load()
      }, 500)
    },
    getShowName(name) {
      if (name) {
        name = name.substr(1)
        name = name.substr(0, name.length - 1)
      }
      return name
    },
    handleSelectMsgkind(row) {
      this.flowUploadProperties.file=row.name
      console.log(this.flowUploadProperties.file)
      this.flowUploadProperties.filecode=row.code
      this.flowUploadProperties.status=row.status
      this.flowUploadProperties.desc=row.desc
      this.flowUploadProperties.location=row.location
      this.flowUploadProperties.uploadType=row.uploadType
    },
    cleanSelectedFlows() {
      // 流程附件上传配置，清楚选择的流程
      this.selectedFlows = []
    },
  },
}
</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>
