<template>
  <div class="fullheight">
    <ht-table
      @load="loadData"
      @row-click="rowClick"
      :data="data"
      :pageResult="pageResult"
      :selection="true"
      quick-search-props="name,memo"
      ref="layoutTable"
      :show-export="false"
      :header-cell-class-name="headerCellClassName"
    >
      <template v-slot:toolbar>
        <el-button-group>
          <el-button
            size="small"
            icon="el-icon-upload2"
            @click="showImportLayout"
            >导入</el-button
          >
          <el-button size="small" icon="el-icon-download" @click="exportLayout"
            >导出</el-button
          >
        </el-button-group>
      </template>
      <template>
        <ht-table-column type="index" width="50" align="center" label="序号" />
        <ht-table-column prop="id" label="主键" :sortable="true" hidden />
        <ht-table-column
          prop="name"
          label="布局名称"
          :sortable="true"
          :show-overflow-tooltip="true"
        >
          <template v-slot="{row}">
            <el-link
              @click="handleCommand({row: row, command: 'edit'})"
              type="primary"
              title="点击编辑"
              >{{ row.name }}</el-link
            >
          </template>
        </ht-table-column>
        <ht-table-column
          prop="memo"
          label="布局描述"
          :sortable="true"
          :show-overflow-tooltip="true"
        />
        <ht-table-column
          prop="layoutType"
          label="布局类型"
          :render-header="renderHeaderMethod"
          :filters="[
            {text: '管理端', value: 0},
            {text: '应用端', value: 2},
            {text: '手机端', value: 1}
          ]"
        >
          <template v-slot="{row}">
            <el-tag v-if="row.layoutType == 0" type="info">管理端</el-tag>
            <el-tag v-if="row.layoutType == 2" type="warning">应用端</el-tag>
            <el-tag v-if="row.layoutType == 1" type="success">手机端</el-tag>
          </template>
        </ht-table-column>
        <ht-table-column label="操作" width="150">
          <template v-slot="{row}">
            <el-button @click="handleCommand({row: row, command: 'preview'})"
              ><i class="icon icon-monitor"></i>预览</el-button
            >
          </template>
        </ht-table-column>
      </template>
    </ht-table>
    <el-dialog
      title="上传文件"
      :visible="uploadDialogVisible"
      :before-close="beforeClose"
      name="uploadDialog"
      width="40%"
      top="30vh"
      custom-class="upload-dialog"
    >
      <el-upload
        :action="uploadUrl"
        :http-request="handleImport"
        accept=".zip"
        :file-list="fileList"
        :limit="1"
        :auto-upload="false"
        :on-exceed="onExceed"
        ref="elUpload"
        class="upload-dialog__content"
      >
        <el-button size="small" icon="el-icon-upload">点击上传</el-button>
        <div slot="tip" class="el-upload__tip">
          只能上传zip文件（默认门户只能导入到默认门户）
        </div>
      </el-upload>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="uploadSubmit">上传</el-button>
        <el-button type="default" @click="beforeClose">取消</el-button>
      </span>
    </el-dialog>
    <PortalDesignerDialog ref="designDialog" @close="designClose" />
    <LayoutPreviewDialog ref="previewDialog" />
  </div>
</template>
<script>
import portal from '@/api/portal.js'
import utils from '@/hotent-ui-util.js'
const PortalDesignerDialog = () =>
  import('@/components/portal/PortalDesignerDialog.vue')
const LayoutPreviewDialog = () =>
  import('@/views/portal/LayoutPreviewDialog.vue')
let Base64 = require('js-base64').Base64
import tableHeaderFilter from '@/mixins/tableHeaderFilter.js'
export default {
  components: {PortalDesignerDialog, LayoutPreviewDialog},
  mixins: [tableHeaderFilter],
  data() {
    return {
      data: [],
      pageResult: {
        page: 1,
        pageSize: 20,
        total: 0
      },
      uploadDialogVisible: false,
      uploadUrl: '',
      fileList: []
    }
  },
  methods: {
    rowClick(row, column, event) {
      this.$refs.layoutTable.$refs.htTable.toggleRowSelection(row)
    },
    loadData(param, cb) {
      portal
        .getDefaultLayoutManagerPage(param)
        .then(response => {
          this.data = response.rows
          this.pageResult = {
            page: response.page,
            pageSize: response.pageSize,
            total: response.total
          }
        })
        .finally(() => cb && cb())
    },
    designClose(val) {
      this.$refs.layoutTable.load()
    },
    handleCommand(params) {
      switch (params.command) {
        case 'preview':
          this.preview(params.row.id, params.row.layoutType)
          break
        case 'edit':
          this.$refs.designDialog.showDialog(
            params.row.id,
            params.row.layoutType
          )
          break
      }
    },
    preview(id, layoutType) {
      this.$refs.previewDialog.showDialog(id, layoutType)
    },
    exportLayout() {
      let selection = this.$refs.layoutTable.$refs.htTable.selection
      if (!selection || selection.length == 0) {
        this.$message.warning('请至少选择一条数据')
        return
      }
      let ids = new Array()
      selection.forEach(item => {
        ids.push(item.id)
      })
      this.$http.request({
        url: `${window.context.portal}/portal/sysIndexLayoutManage/sysIndexLayoutManage/v1/exportDefaultLayout?isDefault=true`,
        method: 'POST',
        data: ids,
        responseType: 'arraybuffer'
      })
    },
    showImportLayout() {
      this.uploadDialogVisible = true
    },
    handleImport(param) {
      let formData = new FormData()
      formData.append('file', param.file)

      portal.importDefaultLayoutCheck(formData, this.orgId).then(resp => {
        if (resp.state) {
          this.$message.success(resp.message)
          this.fileList.splice(0)
          this.uploadDialogVisible = false
          this.$refs.layoutTable.load()
        } else if (resp.message.includes('覆盖更新')) {
          const height =
            (document.documentElement.clientHeight ||
              document.body.clientHeight) *
              0.85 +
            'px'
          this.$confirm(
            '<div style="overflow-x:hidden;overflow-y:auto ;max-height:' +
              height +
              '">' +
              resp.message +
              '</div>',
            '提示',
            {
              cancelButtonText: '取消',
              dangerouslyUseHTMLString: true,
              confirmButtonText: '确定',
              type: 'warning',
              closeOnClickModal: false
            }
          ).then(() => {
            formData.append('cacheFileId', resp.value)
            portal.importDefaultLayout(formData, this.orgId).then(resp2 => {
              if (resp2.state) {
                this.$message.success(resp2.message)
                this.fileList.splice(0)
                this.uploadDialogVisible = false
                this.$refs.layoutTable.load()
              } else {
                this.$message.error(resp2.message)
                this.beforeClose()
              }
            })
          })
        } else {
          this.$message.error(resp.message)
          this.beforeClose()
        }
      })
    },
    uploadSubmit() {
      if (this.$refs.elUpload.uploadFiles.length == 0) {
        this.$message.warning('请上传文件')
        return
      }
      this.$refs.elUpload.submit()
    },
    beforeClose() {
      this.uploadDialogVisible = false
      this.fileList.splice(0)
    },
    onExceed() {
      this.$message.warning('只能选择一个zip文件!')
    }
  }
}
</script>
<style scoped lang="scss">
::v-deep {
  .cell > .el-table__column-filter-trigger {
    display: none;
  }
}

div[aria-invalid='true'] >>> .el-input__inner,
div[aria-invalid='true'] >>> .el-input__inner:focus {
  border-color: #f56c6c;
}
a:hover {
  cursor: pointer;
  color: blue;
}
/deep/ .el-dialog.upload-dialog {
  height: unset;
  /deep/ .el-dialog__body {
    height: unset;
  }
  .upload-dialog__content {
    height: 150px;
  }
  min-height: unset;
}
</style>