<template>
  <el-container class="fullheight">
    <ht-table
      ref="i18nMessageTable"
      @load="loadData"
      @row-click="rowClick"
      :data="data"
      :pageResult="pageResult"
      :selection="true"
      :quick-search-props="[
        {prop: 'key', label: '资源KEY'},
        {prop: 'val', label: '国际化内容'}
      ]"
      :show-export="false"
      @selection-change="handleSelectionChange"
    >
      <template v-slot:toolbar>
        <el-dropdown
          split-button
          size="small"
          type="primary"
          @command="importCommand"
        >
          <span @click="showImportDialog">导入</span>

          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item :command="{command: 'downloadTemplate'}"
              >下载模板</el-dropdown-item
            >
          </el-dropdown-menu>
        </el-dropdown>
        <el-divider direction="vertical"></el-divider>

        <el-button-group>
          <el-button size="small" icon="el-icon-plus" @click="showDialog('add')"
            >添加</el-button
          >
          <!--<el-button
                  size="small"
                  icon="el-icon-tickets"
                  @click="showDialog('resources')"
              >选择国际化资源</el-button>-->
          <el-button
            size="small"
            icon="el-icon-refresh"
            @click="showDialog('init')"
            >初始化</el-button
          >
          <el-button
            size="small"
            icon="el-icon-error"
            @click="showDialog('clearAll')"
            >清除缓存</el-button
          >
          <el-button
            size="small"
            icon="el-icon-download"
            @click="exportLangPackage()"
            >导出</el-button
          >
          <ht-delete-button
            size="small"
            :url="i18nMessageTypeDeleteUrl"
            :htTable="$refs.i18nMessageTable"
            pk="key_"
            parameter="key"
            style="margin: 0"
            :disabled="isDisabled"
            >删除</ht-delete-button
          >
        </el-button-group>
      </template>
      <template>
        <ht-table-column type="index" width="50" align="center" label="序号" />
        <ht-table-column
          prop="key_"
          label="资源KEY"
          :show-overflow-tooltip="true"
        >
          <template v-slot="{row}">
            <el-link @click="showDialog('edit', row)" type="primary">{{
              row.key_
            }}</el-link>
          </template>
        </ht-table-column>
        <ht-table-column
          :prop="item.type"
          :label="item.desc"
          :show-overflow-tooltip="true"
          v-for="item in types"
          :key="item.id"
        />
      </template>
    </ht-table>
    <el-dialog width="40%" title="导入" :visible.sync="importDialog">
      <el-form
        :model="importDialogData"
        class="demo-form-inline"
        v-if="importDialog"
      >
        <el-form-item label="导入文件:">
          <el-upload
            style="display: inline-block"
            :action="importCheckUrl"
            :on-success="handleUploadResult"
            :on-error="handleUploadResult"
            :headers="uploadHeaders"
            accept=".xls,.xlsx"
            :limit="1"
            :auto-upload="false"
            ref="upload"
            :on-change="onChange"
          >
            <el-button size="small" icon="el-icon-upload">上传</el-button>
          </el-upload>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="importDialog = false">取 消</el-button>
        <el-button
          type="primary"
          @click="submitImport"
          element-loading-text="拼命导入中"
          v-loading.fullscreen.lock="fullscreenLoading"
          >确 定</el-button
        >
      </span>
    </el-dialog>

    <el-dialog
      width="70%"
      :title="i18nMessageTitle"
      :visible="dialogVisible"
      :before-close="handleClose"
      :close-on-click-modal="false"
    >
      <el-form v-model="i18nMessage" data-vv-scope="editi18nMessageForm">
        <table class="form-table" cellspacing="0" cellpadding="0" border="0">
          <tbody>
            <tr>
              <th width="120px" class="is-required">资源KEY:</th>
              <td class="i18nMessage-input-width">
                <ht-input
                  v-model="i18nMessage.key_"
                  autocomplete="off"
                  :maxlength="200"
                  :show-word-limit="true"
                  :validate="{
                    required: true,
                    regex: {
                      exp: '^[a-zA-Z][a-zA-Z0-9._-]*$',
                      message: '只能输入字母、数字、下划线和点，且以字母开头'
                    }
                  }"
                  :disabled="oldKey ? true : false"
                  @blur="isKey()"
                ></ht-input>
              </td>
            </tr>
            <tr>
              <th width="120px">
                <el-tooltip
                  class="item"
                  effect="dark"
                  content="资源值至少填写一个"
                  placement="right-start"
                >
                  <span class="el-icon-question" style="margin-left: 10px"
                    >资源:</span
                  >
                </el-tooltip>
              </th>
              <td>
                <table
                  class="form-table I18nTable"
                  cellspacing="0"
                  cellpadding="0"
                  border="0"
                >
                  <tbody>
                    <tr>
                      <th width="30%">类型</th>
                      <th width="30%">描述</th>
                      <th width="30%">资源值</th>
                    </tr>
                    <tr v-for="item in types" :key="item.id">
                      <td>{{ item.type }}</td>
                      <td>{{ item.desc }}</td>
                      <td>
                        <ht-input
                          :maxlength="50"
                          :show-word-limit="true"
                          v-model="item.val"
                        ></ht-input>
                      </td>
                    </tr>
                  </tbody>
                </table>
              </td>
            </tr>
          </tbody>
        </table>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogCancle('dialogVisible')">{{
          $t('eip.common.cancel')
        }}</el-button>
        <ht-submit-button
          :url="savei18nMessageUrl()"
          :model="i18nMessage"
          :is-submit="isSubmit"
          request-method="POST"
          scope-name="editi18nMessageForm"
          @before-save-data="beforeSaveData"
          @after-save-data="afterSaveData"
          >{{ $t('eip.common.save') }}</ht-submit-button
        >
      </div>
    </el-dialog>
    <!-- 加载数据 用作编辑数据源和查看数据源-->
    <ht-load-data
      :url="loadDataUrl"
      requestMethod="post"
      context="portal"
      @after-load-data="afterLoadData"
    ></ht-load-data>
    <!-- 国际化资源选择对话框  -->
    <eip-i18n-dialog
      ref="eipI18nDialog"
      @onConfirm="dialogOnConfirm"
      append-to-body
    />
  </el-container>
</template>
<script>
import sys from '@/api/portal.js'
import {Loading} from 'element-ui'
import request from '@/request.js'
import {mapState} from 'vuex'
const eipI18nDialog = () => import('@/components/dialog/EipI18nDialog.vue')
export default {
  name: 'i18n-i18nMessage',
  components: {eipI18nDialog},
  data() {
    return {
      uploadHeaders: {
        Authorization: 'Bearer ' + this.$store.state.login.currentUser.token
      },
      fullscreenLoading: false,
      fileList: [],
      importDialogData: {},
      importDialog: false,
      bizSystems: [],
      i18nMessage: {},
      i18nMessageTitle: '',
      loadDataUrl: '',
      dialogVisible: false,
      data: [],
      pageResult: {
        page: 1,
        pageSize: 50,
        total: 0
      },
      isSubmit: true,
      types: [],
      newTypes: [],
      oldKey: '',
      isDisabled: true, //按钮的禁用
      selectedList: []
    }
  },
  mounted() {
    // 因为resize事件在整个项目中只能监听一次，所以这里通过全局广播发送这个事件
    this.$root.$emit('resize')
    //查询所有语种类型
    sys.geti18nMessageTypeAll().then(data => {
      if (data && data.length > 0) {
        this.types = data
        this.types.forEach(element => {
          delete element.id
        })
      }
    })
  },
  watch: {
    // 监听选中下
    selectedList: {
      handler(val) {
        this.isDisabled = val.length < 1 ? true : false
      },
      deep: true
    }
  },
  computed: {
    i18nMessageTypeDeleteUrl: function() {
      return window.context.portal + '/i18n/custom/i18nMessage/v1/delByKey'
    },
    importCheckUrl: function() {
      return window.context.portal + '/i18n/custom/i18nMessage/v1/importMessage'
    }
  },
  methods: {
    handleSelectionChange(selection) {
      this.selectedList = selection
    },
    exportLangPackage() {
      let data = {}

      if (this.$refs.i18nMessageTable.selection.length > 0) {
        data.keys = []
        this.$refs.i18nMessageTable.selection.forEach(item => {
          data.keys.push(item.key_)
        })
      }
      let url = `${
        request.getContext().portal
      }/i18n/custom/i18nMessage/v1/exportMessage`
      this.$http.request({
        method: 'post',
        responseType: 'arraybuffer',
        url: url,
        data: data
      })
    },
    submitImport() {
      if (this.fileList.length > 0) {
        this.fileList[0].status = 'ready'
        this.fullscreenLoading = true
        this.$refs.upload.submit()
      }
    },
    onChange(file, fileList) {
      this.fileList = fileList
    },
    handleUploadResult(response) {
      this.fullscreenLoading = false
      if (response.state) {
        this.$message.success(response.message || '操作成功')
        this.importDialog = false
        this.$refs.i18nMessageTable.load
      } else {
        this.$message.error(response.message || '操作失败')
      }
      this.$refs.upload.clearFiles()
    },

    showImportDialog() {
      this.importDialog = true
    },
    importCommand(params) {
      switch (params.command) {
        case 'downloadTemplate':
          this.downloadTemplate()
          break
        case 'importExcel':
          this.importExcel()
          break
        default:
          break
      }
    },
    downloadTemplate() {
      let loadingInstance = Loading.service({fullscreen: true}) //开始
      request
        .download(
          request.getContext().portal +
            '/i18n/custom/i18nMessage/v1/downloadTemplate'
        )
        .then(r => {
          loadingInstance.close() // 结束
        })
        .catch(() => {
          loadingInstance.close() // 结束
        })
    },
    bizSysKeyChange(v, v2) {
      this.i18nMessage.bizSysName = v2.name
    },
    rowClick(row, column, event) {
      this.$refs.i18nMessageTable.$refs.htTable.toggleRowSelection(row)
    },
    dialogOnConfirm(data) {
      this.$message({
        type: 'success',
        message: JSON.stringify(data),
        showClose: true
      })
    },
    isKey() {
      if (this.oldKey || !this.i18nMessage.key_) return
      sys.getByMessKey(this.i18nMessage.key_).then(rep => {
        if (rep && rep.key_ == this.i18nMessage.key_) {
          this.$message.error('资源Key【' + rep.key_ + '】已存在')
          this.i18nMessage.key_ = ''
        }
      })
    },
    beforeSaveData() {
      this.isSubmit = true
      this.i18nMessage.vals = ''
      this.i18nMessage.types = ''
      var noData = true
      this.types.forEach(item => {
        this.i18nMessage.types = this.i18nMessage.types + item.type + ','
        if (item.val && item.val != '') {
          noData = false
          this.i18nMessage.vals = this.i18nMessage.vals + ','
        } else {
          this.i18nMessage.vals = this.i18nMessage.vals + item.val + ','
        }
      })
      if (noData) {
        this.$message.error('资源中资源值至少有一个！')
        this.isSubmit = false
        return
      }
      this.i18nMessage.key = this.i18nMessage.key_
      this.i18nMessage.mesTypeInfo = this.types
    },
    savei18nMessageUrl: function() {
      return (
        window.context.portal +
        '/i18n/custom/i18nMessage/v1/save' +
        '?oldKey=' +
        this.oldKey
      )
    },
    afterSaveData() {
      this.dialogVisible = false
      this.$refs.i18nMessageTable.load(true)
      this.oldKey = ''
    },
    afterLoadData(data) {
      this.i18nMessage = data
      this.types = data.mesTypeInfo
      // 编辑数据源
      if (this.dialogVisible) {
        setTimeout(() => this.$validator.validateAll('editi18nMessageForm'))
      }
    },
    dialogCancle(dialogVisible) {
      this.loadDataUrl = ''
      this[dialogVisible] = false
    },
    handleClose() {
      this.loadDataUrl = ''
      this.dialogVisible = false
    },
    showDialog(command, row) {
      switch (command) {
        case 'add':
          this.oldKey = ''
          if (this.types.length > 0) {
            this.types.forEach(element => {
              delete element.val
            })
          }
          this.dialogVisible = true
          this.i18nMessage = {}
          this.i18nMessageTitle = '添加国际化资源支持的语言类型'
          break
        case 'edit':
          this.oldKey = row.key_
          this.loadDataUrl =
            '/i18n/custom/i18nMessage/v1/getI18nMessageJson?key=' + row.key_
          this.dialogVisible = true
          this.i18nMessageTitle = '编辑国际化资源支持的语言类型'
          break
        case 'del':
          this.$confirm('是否确认删除？', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            sys.i18nMessageDelByKey(row.key_).then(
              data => {
                if (data.state) {
                  this.$message.success(data.message)
                  this.$refs.i18nMessageTable.load(true)
                } else {
                  this.$message.error(data.message || '删除失败')
                }
              },
              error => {
                this.$message.error(error || '删除失败')
              }
            )
          })
          break
        case 'resources':
          this.$refs['eipI18nDialog'].showDialog()
          break
        case 'init':
          this.$confirm('是否确认初始化？', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            sys.i18nMessageInit().then(data => {
              if (data.state) {
                this.$message.success('初始化成功')
                this.$refs.i18nMessageTable.load(true)
              } else {
                this.$message.error(data.message || '初始化失败')
              }
            })
          })
          break
        case 'clearAll':
          this.$confirm('是否确认清除国际化缓存数据？', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            sys.i18nMessageClearCache().then(data => {
              this.$message.success('清除缓存成功')
              this.$refs.i18nMessageTable.load(true)
            })
          })
          break
      }
    },
    handleNodeClick(node) {},
    loadData(param, cb) {
      sys
        .getI18nMessagePageJson(param)
        .then(response => {
          this.data = response.rows
          this.pageResult = {
            page: response.page,
            pageSize: response.pageSize,
            total: response.total
          }
        })
        .finally(() => cb())
    }
  }
}
</script>

<style lang="scss" scoped>
.el-main {
  padding: 0px;
}
.i18nMessage-input-width .inputs {
  width: 100%;
}
.I18nTable th {
  text-align: center;

  background-color: #f4f4f5;
}
.form-table > tbody > tr > th > span,
.form-table > thead > tr > th > span {
  color: #666666;
}
.form-table > thead > tr > th,
.form-table > tbody > tr > th {
  color: #606266;
}
@media (max-width: 1024px) {
  /deep/ .search-container__col {
    flex-wrap: wrap;
    .el-button-group {
      margin-top: 10px;
    }
  }
}
</style>
