<template>
  <div class="fullheight">
    <ht-table
      @load="loadData"
      :defaultSorter="defaultSorter"
      :data="data"
      :pageResult="pageResult"
      :selection="true"
      quick-search-props="id,subject"
      :show-export="false"
      :show-custom-column="false"
      ref="htTable"
      @row-click="rowClick"
      @selection-change="handleSelectionChange"
    >
      <template v-slot:toolbar>
        <el-button
          size="small"
          @click="showDialog()"
          type="primary"
          icon="el-icon-plus"
          >添加</el-button
        >
        <el-button @click="importPopup">
          <i class="el-icon-upload2"> 导入 </i>
        </el-button>
        <el-button @click="showStyleDia">
          <i class="icon-dialog"> 弹窗样式 </i>
        </el-button>
        <el-button @click="handleExport" :disabled="isDisabled">
          <i class="el-icon-download">导出</i>
        </el-button>
        <el-button size="small" @click="batchAuth" :disabled="isDisabled">
          <i class="icon-xinjianyonghu"></i>
          批量授权</el-button
        >
        <ht-delete-button
          style="margin-left:10px;"
          url="${portal}/portal/portalSysPopup/v1/"
          :htTable="$refs.htTable"
          :disabled="isDisabled"
          >删除</ht-delete-button
        >
        <!-- </el-button-group> -->
      </template>
      <template>
        <ht-table-column type="index" width="50" align="left" label="序号" />
        <ht-table-column
          align="left"
          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="alias"
          label="别名"
          :sortable="true"
          :show-overflow-tooltip="true"
          align="left"
        ></ht-table-column>
        <ht-table-column
          prop="subject"
          label="主题"
          :sortable="true"
          :show-overflow-tooltip="true"
          align="left"
        >
        </ht-table-column>
        <ht-table-column
          prop="dataType"
          label="数据获取方式"
          :sortable="false"
          :show-overflow-tooltip="false"
          align="left"
        >
          <template slot-scope="scope">
            <el-tag
              type="success"
              size="mini"
              v-if="scope.row.dataType == 'sql'"
              >SQL</el-tag
            >
            <el-tag
              type="primary"
              size="mini"
              v-if="scope.row.dataType == 'script'"
              >脚本</el-tag
            >
          </template>
        </ht-table-column>
        <ht-table-column
          prop="order"
          label="排序"
          :sortable="true"
          :show-overflow-tooltip="true"
          align="left"
        >
        </ht-table-column>
        <ht-table-column
          prop="isEnable"
          label="状态"
          :show-overflow-tooltip="true"
          align="left"
          :render-header="renderHeaderMethod"
          :filters="[{text: '禁用', value: 0}, {text: '启用', value: 1}]"
        >
          <template v-slot="{row}">
            <el-switch
              :width="38"
              v-model="row.isEnable"
              :active-value="1"
              :inactive-value="0"
              @change="switchStatus(row)"
            ></el-switch>
            <span class="status_text" :class="{primary: row.isEnable == 1}"
              >{{ row.isEnable == 1 ? '启用' : '禁用' }}
            </span>
          </template>
        </ht-table-column>
        <ht-table-column
          prop="url"
          label="跳转URL"
          :show-overflow-tooltip="true"
          align="left"
        ></ht-table-column>
        <ht-table-column label="操作" align="left">
          <template v-slot="{row}">
            <el-button type="text" @click="showDialog(row.id)">编辑</el-button>
            <el-button type="text" @click="popupAuth(row.id)">授权</el-button>
          </template>
        </ht-table-column>
      </template>
    </ht-table>
    <ht-sidebar-dialog
      :close-on-click-modal="false"
      v-if="dialogVisible"
      width="720px"
      :title="PortalSysPopup.id ? '编辑提醒' : '添加提醒'"
      :visible.sync="dialogVisible"
      :before-close="beforeCloseDialog"
    >
      <el-form v-form data-vv-scope="PortalSysPopupForm" size="mini" ref="form">
        <ht-form-item label="名称" align="left" label-width="110px">
          <ht-input
            v-model="PortalSysPopup.name"
            validate="required"
            :maxlength="50"
            :showWordLimit="true"
          />
        </ht-form-item>
        <ht-form-item label="别名" align="left" label-width="110px">
          <ht-input
            v-model="PortalSysPopup.alias"
            v-pinyin="PortalSysPopup.name"
            validate="required"
            :disabled="PortalSysPopup.id != null"
            :maxlength="50"
            :showWordLimit="true"
          />
        </ht-form-item>
        <ht-form-item label="主题" align="left" label-width="110px">
          <ht-input
            v-model="PortalSysPopup.subject"
            validate="required"
            :maxlength="50"
            :showWordLimit="true"
          />
        </ht-form-item>
        <ht-form-item label="排序" align="left" label-width="110px">
          <ht-input
            v-model="PortalSysPopup.order"
            validate="required"
            type="number"
          />
        </ht-form-item>
        <ht-form-item label="是否启用" align="left" label-width="110px">
          <el-switch
            active-text="启用"
            :active-value="1"
            :inactive-value="0"
            v-model="PortalSysPopup.isEnable"
          ></el-switch>
        </ht-form-item>
        <ht-form-item label="跳转URL" align="left" label-width="110px">
          <template slot="label">
            <el-tooltip
              content="当用户点击提醒信息时的跳转地址，可使用【127.0.0.1:8088/xxxx?参数1=''&参数2=''】形式进行传参"
            >
              <i class="el-icon-info"></i>
            </el-tooltip>
            <span>跳转URL</span>
          </template>
          <ht-input
            v-model="PortalSysPopup.url"
            validate="required"
            type="textarea"
            class="long-width"
            :maxlength="200"
            :showWordLimit="true"
          />
        </ht-form-item>
        <ht-form-item label="跳转方式" align="left" label-width="110px">
          <ht-select
            v-model="PortalSysPopup.popupType"
            :options="[
              {key: 'tab', value: '当前窗口'},
              {key: 'new', value: '新窗口'},
              {key: 'dialog', value: '弹窗'}
            ]"
            validate="required"
          />
        </ht-form-item>
        <ht-form-item label="有效期" align="left" label-width="110px">
          <ht-date-picker
            v-model="portalSysPopupDate"
            type="datetimerange"
            validate="required"
            rangeSeparator="至"
          ></ht-date-picker>
        </ht-form-item>
        <ht-form-item
          label="弹窗宽度"
          v-if="PortalSysPopup.popupType == 'dialog'"
          align="left"
          label-width="110px"
        >
          <ht-input
            v-model="PortalSysPopup.dialogWidth"
            validate="required"
            type="number"
          />
        </ht-form-item>
        <ht-form-item
          label="弹窗高度"
          v-if="PortalSysPopup.popupType == 'dialog'"
          align="left"
          label-width="110px"
        >
          <ht-input
            v-model="PortalSysPopup.dialogHeight"
            validate="required"
            type="number"
          />
        </ht-form-item>
        <ht-form-item label="数据获取方式" align="left" label-width="110px">
          <ht-radio
            v-model="PortalSysPopup.dataType"
            :options="dataTypeOption"
          ></ht-radio>
        </ht-form-item>
        <ht-form-item
          label="数据源"
          v-if="PortalSysPopup.dataType === 'sql'"
          align="left"
          label-width="110px"
        >
          <ht-select
            v-model="PortalSysPopup.dataSourceAlias"
            validate="required"
            :options="dataSources"
          ></ht-select>
        </ht-form-item>
        <ht-form-item
          label="SQL语句"
          v-if="PortalSysPopup.dataType === 'sql'"
          align="left"
          label-width="110px"
        >
          <template slot="label">
            <el-tooltip
              content="注意：此处的SQL语句要满足只返回一条记录且是number类型的场合"
            >
              <i class="el-icon-info"></i>
            </el-tooltip>
            <span>SQL语句</span>
          </template>
          <div class="sql-item">
            <span>常用数据</span>
            <el-button
              type="default"
              size="mini"
              @click="insertValue('{curUserId}')"
              >当前用户ID</el-button
            >
          </div>
          <ht-input
            class="long-width"
            v-model="PortalSysPopup.sql"
            validate="required"
            type="textarea"
            @change="isSubmit = false"
            :maxlength="200"
            :showWordLimit="true"
          />
          <el-button
            style="margin-top:15px;"
            :type="isSubmit ? 'success' : 'primary'"
            size="mini"
            @click="
              validateSql(PortalSysPopup.sql, PortalSysPopup.dataSourceAlias)
            "
            >验证SQL语句</el-button
          >
        </ht-form-item>
        <ht-form-item
          label="脚本"
          v-if="PortalSysPopup.dataType === 'script'"
          align="left"
          label-width="110px"
        >
          <template slot="label">
            <el-tooltip content="执行groovy脚本返回数据">
              <i class="el-icon-info"></i>
            </el-tooltip>
            <span>脚本</span>
          </template>
          <div class="sql-item">
            <span>常用数据</span>
            <el-button
              type="default"
              size="mini"
              @click="insertValue('{curUserId}')"
              >当前用户ID</el-button
            >
            <el-button @click="showScriptDialog()" type="primary" plain
              >选择脚本 <i class="el-icon-search"></i>
            </el-button>
          </div>
          <ht-input
            class="long-width"
            v-model="PortalSysPopup.script"
            validate="required"
            type="textarea"
            :maxlength="200"
            :showWordLimit="true"
          />
        </ht-form-item>
        <ht-form-item label="提醒内容" align="left" label-width="110px">
          <template slot="label">
            <el-tooltip
              content="注意:{result}为固定写法，表示SQL语句查询结果的记录总数"
            >
              <i class="el-icon-info"></i>
            </el-tooltip>
            <span>提醒内容</span>
          </template>
          <ht-input
            class="long-width"
            v-model="PortalSysPopup.desc"
            validate="required"
            type="textarea"
            :maxlength="200"
            :showWordLimit="true"
          />
        </ht-form-item>
      </el-form>
      <div style="text-align: center;margin-top: 40px;">
        <el-button @click="beforeCloseDialog">{{
          $t('eip.common.cancel')
        }}</el-button>
        <ht-submit-button
          url="${portal}/portal/portalSysPopup/v1/saveWithAuth"
          :model="PortalSysPopupDeep"
          :request-method="saveMethod"
          scope-name="PortalSysPopupForm"
          @after-save-data="afterSaveData"
          :isSubmit="isSubmit"
          @before-save-data="beforeSaveData"
          >{{ $t('eip.common.save') }}</ht-submit-button
        >
      </div>
    </ht-sidebar-dialog>
    <eip-auth-dialog @onConfirm="authConfirm" ref="popupAuth" />
    <!-- 脚本选择对话框 -->
    <eip-script-dialog
      :appendToBody="true"
      ref="eipScriptDialog"
      @onConfirm="handleScriptSelected"
    ></eip-script-dialog>
    <el-dialog
      title="上传文件"
      :visible="uploadDialogVisible"
      :before-close="beforeClose"
      name="uploadDialog"
      width="40%"
      top="30vh"
      custom-class="upload-dialog"
    >
      <el-upload
        :on-exceed="onExceed"
        :action="uploadUrl"
        :http-request="handleImport"
        accept=".zip"
        :file-list="fileList"
        :limit="1"
        :auto-upload="false"
        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>
    <el-dialog
      title="弹窗样式"
      :visible="isStyleDiaShow"
      width="618px"
      :before-close="popupStyleBeforeClose"
    >
      <el-form
        v-form
        :model="popupStyle"
        label-width="100px"
        data-vv-scope="agreeForm"
      >
        <ht-form-item label-width="120px" align="left">
          <template slot="label">
            <el-tooltip content="单位秒，默认为4，设置为0时不会自动关闭">
              <i class="el-icon-info"></i>
            </el-tooltip>
            <span>持续时间</span>
          </template>
          <ht-input
            class="style-duration"
            type="number"
            v-model="popupStyle.duration"
            placeholder="请输入持续时间"
            :min="1"
            :step="1"
            validate="min_value:1"
          >
          </ht-input>
        </ht-form-item>
        <ht-form-item align="left" label-width="120px">
          <template slot="label">
            <el-tooltip content="默认为右上角">
              <i class="el-icon-info"></i>
            </el-tooltip>
            <span>弹出位置</span>
          </template>
          <ht-select
            v-model="popupStyle.position"
            placeholder="请选择弹出位置"
            :options="positionOption"
          >
          </ht-select>
        </ht-form-item>
        <ht-form-item align="left" label-width="120px">
          <template slot="label">
            <el-tooltip content="默认为显示">
              <i class="el-icon-info"></i>
            </el-tooltip>
            <span>显示关闭按钮</span>
          </template>
          <el-switch
            v-model="popupStyle.showClose"
            :active-value="true"
            :inactive-value="false"
          >
          </el-switch>
        </ht-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="default" @click="popupStyleBeforeClose"
          >取消</el-button
        >
        <el-button type="primary" @click="saveStyle">保存</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
const eipAuthDialog = () => import('@/components/dialog/EipAuthDialog.vue')
const EipScriptDialog = () => import('@/components/dialog/EipScriptDialog.vue')
import tableHeaderFilter from '@/mixins/tableHeaderFilter.js'
import portal from '@/api/portal.js'
export default {
  components: {
    eipAuthDialog,
    EipScriptDialog
  },
  mixins: [tableHeaderFilter],
  data() {
    return {
      isDisabled: true,
      selectedList: [],
      dataTypeOption: [
        {key: 'sql', value: 'SQL'},
        {key: 'script', value: '脚本'}
      ],
      positionOption: [
        {key: 'top-left', value: '左上角'},
        {key: 'top-right', value: '右上角'},
        {key: 'bottom-left', value: '左下角'},
        {key: 'bottom-right', value: '右下角'}
      ],
      isStyleDiaShow: false,
      dialogVisible: false,
      data: [],
      defaultSorter: [{property: 'order_', direction: 'ASC'}],
      pageResult: {
        page: 1,
        pageSize: 50,
        total: 0
      },
      PortalSysPopup: {
        dialogWidth: 1580,
        dialogHeight: 740,
        name: '',
        alias: ''
      },
      portalSysPopupDate: '',
      saveMethod: 'POST',
      dataSources: [],
      selectId: '',
      isSubmit: false,
      styleOptions: [
        {label: '成功', value: 'success'},
        {label: '警告', value: 'warning'},
        {label: '信息', value: 'info'},
        {label: '错误', value: 'error'}
      ],
      popupStyle: {
        duration: 5,
        type: '',
        position: 'bottom-right',
        showClose: true
      },
      PortalSysPopupDeep: {},
      authType: 'single',
      replaceMentOptions: [
        {label: '当前用户ID', value: '{curUserId}'},
        {label: '当前用户账号', value: '{curUserAccount}'},
        {label: '当前用户名称', value: '{curUserName}'},
        {label: '当前用户所在组织ID', value: '{curUserOrgId}'},
        {label: '当前用户所在组织code', value: '{curUserOrgCode}'},
        {label: '当前用户所在组织名', value: '{curUserOrgName}'}
      ],
      uploadDialogVisible: false,
      fileList: [],
      uploadUrl: `${window.context.portal}/portal/portalSysPopup/v1/importPopup`
    }
  },

  watch: {
    selectedList: {
      handler(val) {
        this.isDisabled = val.length < 1 ? true : false
      },
      deep: true
    },
    PortalSysPopup: {
      handler(val) {
        this.PortalSysPopupDeep = _.cloneDeep(val)
        delete this.PortalSysPopupDeep.date
      },
      immediate: true,
      deep: true
    }
  },
  mounted() {
    this.$validator = this.$root.$validator
  },
  methods: {
    handleSelectionChange(selection) {
      this.selectedList = selection
    },
    saveStyle() {
      this.$validator.validateAll('agreeForm').then(res => {
        if (res) {
          portal
            .setRemindPopStyle({
              styleContent: JSON.stringify(this.popupStyle)
            })
            .then(res => {
              if (res && res.data && res.data.state) {
                this.$message.success('保存成功!')
                this.isStyleDiaShow = false
              }
            })
        } else {
          this.$message({
            showClose: true,
            message: `有字段未通过校验，请正确填写表单内容。`,
            type: 'warning'
          })
        }
      })
    },
    showStyleDia() {
      if (!this.data.length) {
        this.$message.info('请先新增数据再配置弹出框样式!')
        return
      }
      portal.getRemindPopStyle().then(res => {
        if (res.data.state && res.data.value) {
          this.popupStyle = JSON.parse(res.data.value)
        }
      })
      this.isStyleDiaShow = true
    },
    rowClick(row, column, event) {
      this.$refs.htTable.$refs.htTable.toggleRowSelection(row)
    },
    beforeSaveData() {
      if (this.portalSysPopupDate) {
        let date = this.portalSysPopupDate.split(',')
        this.PortalSysPopup.validityStart = date[0]
        this.PortalSysPopup.validityEnd = date[1]
      }
      if (!this.isSubmit && this.PortalSysPopup.dataType == 'sql') {
        this.$message({type: 'warning', message: 'SQL未校验通过，请先校验SQL'})
        this.isSubmit = false
        return
      }

      this.isSubmit = true
    },
    // 展示新增弹窗页面
    showDialog(id) {
      this.getDataSource()
      if (id) {
        this.saveMethod = 'PUT'
        this.$http
          .get('${portal}/portal/portalSysPopup/v1/' + id)
          .then(resp => {
            if (resp.data && resp.data.validityStart && resp.data.validityEnd) {
              resp.data.date = `${resp.data.validityStart},${
                resp.data.validityEnd
              }`
            }
            this.PortalSysPopup = resp.data
            if (!this.PortalSysPopup.dialogWidth)
              this.PortalSysPopup.dialogWidth = 1580
            if (!this.PortalSysPopup.dialogHeight)
              this.PortalSysPopup.dialogHeight = 740
            // if (resp.data.styleContent) {
            //   this.popupStyle = JSON.parse(resp.data.styleContent)
            // }

            if (
              this.PortalSysPopup.validityEnd &&
              this.PortalSysPopup.validityStart
            ) {
              this.portalSysPopupDate =
                this.PortalSysPopup.validityStart +
                ',' +
                this.PortalSysPopup.validityEnd
            }
            this.dialogVisible = true
          })
        this.errors.clear('PortalSysPopupForm')
      } else {
        this.$set(this.PortalSysPopup, 'desc', '{result}')
        this.$set(this.PortalSysPopup, 'dataType', 'script')
        // 此处请求最新弹出样式设置
        this.getNewStyle()
        this.saveMethod = 'POST'
        this.dialogVisible = true
      }
    },
    getNewStyle() {
      portal.getRemindPopStyle().then(res => {
        if (res.data.state && res.data.value) {
          this.PortalSysPopup.styleContent = res.data.value
        }
      })
    },
    beforeCloseDialog() {
      this.PortalSysPopup = {
        dialogWidth: 1580,
        dialogHeight: 740,
        name: '',
        alias: '',
        date: ''
      }
      this.dialogVisible = false
    },
    loadData(param, cb) {
      this.$http
        .post('${portal}/portal/portalSysPopup/v1/query', param)
        .then(resp => {
          let response = resp.data
          this.data = response.rows
          this.pageResult = {
            page: response.page,
            pageSize: response.pageSize,
            total: response.total
          }
        })
        .finally(() => cb())
    },
    afterSaveData() {
      setTimeout(() => {
        this.beforeCloseDialog()
        this.$refs.htTable.load()
      }, 500)
    },
    getDataSource() {
      this.dataSources.splice(0)
      this.$http
        .get(window.context.portal + '/sys/sysDataSource/v1/getDataSources')
        .then(resp => {
          if (resp.data && resp.data.length > 0) {
            resp.data.forEach(item => {
              this.dataSources.push({
                key: item.alias,
                value: item.name
              })
            })
          }
        })
    },
    authConfirm(data) {
      if (this.authType == 'single') {
        if (this.selectId) {
          this.saveRightSingle(data)
        }
      } else if (this.authType == 'batch') {
        this.saveRightBatch(data)
      }
    },
    saveRightSingle(data) {
      let param = {
        id: this.selectId,
        objType: 'popup',
        ownerNameJson: JSON.stringify(data)
      }
      this.$http
        .post('${portal}/sys/authUser/v1/saveRights', param)
        .then(resp => {
          if (resp.data) {
            if (resp.data.state) {
              this.$message({type: 'success', message: '授权成功'})
            } else {
              this.$message({type: 'error', message: '授权失败'})
            }
          }
        })
    },
    saveRightBatch(data) {
      let param = {
        ids: this.$refs.htTable.$refs.htTable.selection.map(item => item.id),
        objType: 'popup',
        ownerNameJson: JSON.stringify(data)
      }
      this.$http
        .post(`${window.context.portal}/sys/authUser/v1/batchSaveRights`, param)
        .then(resp => {
          if (resp.data && resp.data.state) {
            this.$message.success('授权成功')
          } else {
            this.$message.error(resp.data ? resp.data.message : '授权失败')
          }
        })
    },
    popupAuth(id) {
      this.authType = 'single'
      portal.getRights(id, 'popup').then(resp => {
        if (resp.data) {
          let config = {
            right: resp.data.right,
            permissionList: resp.data.type,
            authClose: false
          }
          this.selectId = id
          this.$refs.popupAuth.showDialog(config)
        }
      })
    },
    insertValue(val) {
      if (!this.PortalSysPopup[this.PortalSysPopup.dataType]) {
        this.$set(this.PortalSysPopup, this.PortalSysPopup.dataType, val)
      } else {
        this.PortalSysPopup[this.PortalSysPopup.dataType] += val
      }
    },
    validateSql(sql, dsAlias) {
      if (!dsAlias) {
        this.$message({type: 'warning', message: '验证失败，数据源为空'})
        return
      }
      this.$http
        .get(
          '${portal}/portal/portalSysPopup/v1/validateSql?sql=' +
            Base64.encode(sql) +
            '&dsAlias=' +
            dsAlias
        )
        .then(resp => {
          let data = resp.data
          if (data.state) {
            this.$message({
              type: 'success',
              message: '查询成功,结果条数为:' + data.value
            })
            this.isSubmit = true
          }
        })
    },
    switchStatus(row) {
      console.log('row', row)
      //request.js的方法里的put不可用
      this.$http
        .request({
          url: '${portal}/portal/portalSysPopup/v1/',
          data: row,
          params: '',
          method: 'PUT',
          responseType: 'json'
        })
        .then(resp => {
          if (resp && resp.data && resp.data.state) {
            this.$message({
              type: 'success',
              message: row.isEnable == 1 ? '启用成功' : '停用成功'
            })
          } else {
            row.isEnable = row.isEnable == 1 ? 0 : 1
          }
        })
    },
    handleScriptSelected(script, name) {
      this.insertValue(script)
    },
    showScriptDialog() {
      this.$refs.eipScriptDialog.showDialog()
    },
    // 格式化日期
    formatDate: value => {
      let date = null
      if (!value) {
        return date
      }
      if (value.constructor == Date && !isNaN(value.getTime())) {
        date = value
      } else if (value.constructor == String || value.constructor == Number) {
        date = new Date(value)
      } else {
        throw '格式化日期时，传入的数据格式不正确。'
      }
      let y = date.getFullYear()
      let MM = date.getMonth() + 1
      MM = MM < 10 ? '0' + MM : MM
      let d = date.getDate()
      d = d < 10 ? '0' + d : d
      let h = date.getHours()
      h = h < 10 ? '0' + h : h
      let m = date.getMinutes()
      m = m < 10 ? '0' + m : m
      let s = date.getSeconds()
      s = s < 10 ? '0' + s : s
      return y + '-' + MM + '-' + d + ' ' + h + ':' + m + ':' + s
    },
    batchAuth() {
      let {selection} = this.$refs.htTable.$refs.htTable
      if (!selection || selection.length == 0) {
        this.$message.warning('请选择要授权的数据')
        return
      }
      this.authType = 'batch'
      let id = selection[0].id
      portal.getRights(id, 'popup').then(resp => {
        if (resp.data) {
          let config = {
            right: resp.data.right,
            permissionList: resp.data.type,
            authClose: false
          }
          this.selectId = id
          this.$refs.popupAuth.showDialog(config)
        }
      })
    },
    handleExport() {
      let {selection} = this.$refs.htTable.$refs.htTable
      if (!selection || selection.length == 0) {
        this.$message.warning('请选择要导出的记录')
        return
      }
      let ids = selection.map(item => item.id)
      this.$http.request({
        url: `${window.context.portal}/portal/portalSysPopup/v1/exportPopup`,
        data: ids,
        method: 'post',
        responseType: 'arraybuffer'
      })
    },
    beforeClose() {
      this.uploadDialogVisible = false
      this.fileList.splice(0)
    },
    popupStyleBeforeClose() {
      this.isStyleDiaShow = false
    },
    handleImport(param) {
      var height =
        (document.documentElement.clientHeight || document.body.clientHeight) *
          0.85 +
        'px'
      this.fullscreenLoading = false

      let formData = new FormData()
      formData.append('file', param.file)
      portal.checkImport(formData).then(resp => {
        if (resp.state) {
          this.$message.success(resp.message)
          this.beforeClose()
          this.$refs.htTable.load()
        } else {
          if (
            resp.message &&
            resp.message.indexOf('是否继续为其新增版本') > 0
          ) {
            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(() => {
                this.fullscreenLoading = true
                let newFormData = new FormData()
                newFormData.append('confirmImport', true)
                newFormData.append('cacheFileId', resp.value)
                portal.importPopup(newFormData).then(resp => {
                  if (resp.state) {
                    this.$message.success(resp.message)
                    this.beforeClose()
                    this.$refs.htTable.load()
                  } else {
                    this.beforeClose()
                  }
                })
              })
              .catch(action => {
                this.uploadDialogVisible = false
              })
          } else {
            this.uploadDialogVisible = false
          }
        }
      })
    },
    uploadSubmit() {
      if (this.$refs.elUpload.uploadFiles.length == 0) {
        this.$message.warning('请上传文件')
        return
      }
      this.$refs.elUpload.submit()
    },
    importPopup() {
      this.uploadDialogVisible = true
    },
    onExceed() {
      this.$message.warning('只能选择一个zip文件!')
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .style-duration {
  .el-input-number {
    width: 100%;
  }
}
::v-deep .long-width.inputs.ht-form-inputs__inline {
  width: 100%;
}
.sql-item {
  margin-bottom: 15px;
  > span {
    margin-right: 10px;
  }
}
/deep/ .ht-delete-button {
  margin-left: 0px;
}
::v-deep {
  .cell > .el-table__column-filter-trigger {
    display: none;
  }
}
</style>
