<template>
  <div class="fullheight">
    <div style="height: 96%">
      <ht-table
        @load="loadData"
        :data="data"
        :pageResult="pageResult"
        :selection="true"
        :show-export="false"
        :show-custom-column="false"
        quick-search-props="sysName,sysCode"
        ref="htTable"
        @selection-change="handleSelectionChange"
      >
        <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}/portalBizSystem/v1/delete"
            :htTable="$refs.htTable"
            parameter="sysCode"
            pk="sysCode"
            :disabled="isDisabled"
            >删除</ht-delete-button
          >
          <!-- </el-button-group> -->
        </template>
        <template>
          <ht-table-column
            type="index"
            width="50"
            align="center"
            label="序号"
          />
          <ht-table-column
            prop="sysName"
            label="系统名称"
            :show-overflow-tooltip="true"
            width="200"
          >
            <template v-slot="{row}">
              <el-link
                type="primary"
                @click="showDialog(row.id)"
                title="查看详情"
                >{{ row.sysName }}</el-link
              >
            </template>
          </ht-table-column>
          <ht-table-column
            prop="sysCode"
            label="系统编码"
            :show-overflow-tooltip="true"
            width="170"
          >
          </ht-table-column>
          <ht-table-column
            prop="description"
            label="系统描述"
            :show-overflow-tooltip="true"
          />

          <!--        <ht-table-column-->
          <!--          prop="secretKey"-->
          <!--          label="系统密匙"-->
          <!--          :show-overflow-tooltip="true"-->
          <!--        >-->
          <!--        </ht-table-column>-->
          <!--        <ht-table-column-->
          <!--          prop="rootAddress"-->
          <!--          label="系统根路径"-->
          <!--          :show-overflow-tooltip="true"-->
          <!--          width="100"-->
          <!--        >-->
          <!--        </ht-table-column>-->
          <!--        <ht-table-column-->
          <!--          prop="homeAddress"-->
          <!--          label="系统首页地址"-->
          <!--          :show-overflow-tooltip="true"-->
          <!--        >-->
          <!--        </ht-table-column>-->
          <ht-table-column
            prop="bpmMsgQueue"
            label="流程消息队列"
            :show-overflow-tooltip="true"
            width="200"
          >
          </ht-table-column>
          <!--        <ht-table-column-->
          <!--            prop="managerName"-->
          <!--            label="管理员名称"-->
          <!--            :show-overflow-tooltip="true"-->
          <!--            width="90"-->
          <!--        >-->
          <!--        </ht-table-column>-->
          <ht-table-column
            prop="createTime"
            label="创建日期"
            :show-overflow-tooltip="true"
            width="160"
          >
          </ht-table-column>
          <ht-table-column
            prop="creatorName"
            label="创建人"
            :show-overflow-tooltip="true"
            width="120"
          >
          </ht-table-column>
          <ht-table-column
            prop="enabled"
            label="启用状态"
            :sortable="true"
            :show-overflow-tooltip="true"
            width="130"
          >
            <template v-slot="{row}">
              <div class="enabledDiv" v-if="row.enabled == 0">启用</div>
              <div class="disabledDiv" v-else>禁用</div>
            </template>
          </ht-table-column>
          <ht-table-column label="操作" width="230" align="left">
            <template slot-scope="scope">
              <!-- <div class="buttonList"> -->
              <el-button
                type="text"
                @click="goOutSideSystem(scope.row.homeAddress)"
                >访问</el-button
              >
              <el-button type="text" @click="addAuthUser(scope.row.sysCode)"
                >设置管理员</el-button
              >
              <!-- <el-button type="text" @click="gotoApiRecord(scope.row.sysCode)">删除调用记录</el-button> -->
              <!-- <el-button type="text" @click="deleteSystem(scope.row.sysCode)">删除</el-button> -->

              <!-- <div class="borderDivGoOutSideSystem" @click="goOutSideSystem(scope.row.homeAddress)"><span class="el-icon-position"></span>&nbsp;<b>访问</b></div>
                <div class="borderDiv" @click="addAuthUser(scope.row.sysCode)"><span class="el-icon-s-tools"></span>&nbsp;设置管理员</div>
                <div class="borderDiv" @click="gotoApiRecord(scope.row.sysCode)"><span class="el-icon-zoom-in"></span>&nbsp;接口调用记录</div>
                <div class="borderDivDelete" @click="deleteSystem(scope.row.sysCode)"><span class="el-icon-delete"></span>&nbsp;删除</div> -->
              <!-- </div> -->
              <el-dropdown
                size="mini"
                trigger="click"
                class="more-operate-btn__dropdown"
              >
                <span class="more-operate-btn"
                  >更多操作<i class="el-icon-caret-bottom"></i>
                </span>
                <el-dropdown-menu
                  slot="dropdown"
                  class="operate-dropdown__button"
                >
                  <el-dropdown-item
                    @click.native="deleteSystem(scope.row.sysCode)"
                    >删除</el-dropdown-item
                  >
                  <el-dropdown-item
                    @click.native="gotoApiRecord(scope.row.sysCode)"
                    >接口调用记录</el-dropdown-item
                  >
                </el-dropdown-menu>
              </el-dropdown>
            </template>
          </ht-table-column>
        </template>
      </ht-table>
    </div>
    <PortalBizSystem-manager-edit
      ref="PortalBizSystemManagerEdit"
      @loadData="loadData"
    ></PortalBizSystem-manager-edit>
    <PortalBiz-auth-manager ref="PortalBizAuthManager"></PortalBiz-auth-manager>
  </div>
</template>
<script>
import PortalBizSystemManagerEdit from './PortalBizSystemManagerEdit.vue'
const PortalBizAuthManager = () =>
  import('@/views/portal/PortalBizAuthManager.vue')
export default {
  components: {PortalBizSystemManagerEdit, PortalBizAuthManager},
  data() {
    return {
      isDisabled: true,
      selectedList: [],
      dialogVisible: false,
      data: [],
      pageResult: {
        page: 1,
        pageSize: 50,
        total: 0
      },
      PortalBizSystem: {},
      saveMethod: 'POST',
      idData: ''
    }
  },
  watch: {
    selectedList: {
      handler(val) {
        this.isDisabled = val.length < 1 ? true : false
      },
      deep: true
    }
  },
  mounted() {
    this.$validator = this.$root.$validator
  },
  methods: {
    handleSelectionChange(selection) {
      this.selectedList = selection
    },
    gotoApiRecord(systemType) {
      this.$router.push({
        name: 'externalSystemLog',
        query: {
          systemType
        }
      })
    },
    goOutSideSystem(url) {
      if (url) {
        url = url.startsWith('http') ? url : 'http://' + url
        // window.location.href = url;
        window.open(url, '_blank')
      } else {
        this.$message({
          message: '跳转失败，该外部系统没有配置系统首页地址',
          type: 'warning'
        })
      }
    },
    deleteSystem(sysCode) {
      this.$confirm(
        '此操作将删除该外部系统，并把该系统的管理员配置信息一并删除，是否确认删除?',
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      )
        .then(() => {
          this.$http
            .remove('${portal}/portalBizSystem/v1/delete?sysCode=' + sysCode)
            .then(result => {
              if (result.data.state) {
                this.$message({
                  type: 'success',
                  message: '删除成功!'
                })
                this.$refs.htTable.load()
                return
              }
              this.$message.error(result.data.message || '删除失败')
            })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    addAuthUser(systemCode) {
      this.$refs.PortalBizAuthManager.showDialog(systemCode)
    },
    showDialog(id) {
      this.$refs.PortalBizSystemManagerEdit.showDialog(id)
    },
    beforeCloseDialog() {
      this.PortalBizSystem = {}
      this.dialogVisible = false
    },
    loadData(param, cb) {
      this.$http
        .post('${portal}/portalBizSystem/v1/queryData', 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 && cb()
        })
    },
    afterSaveData() {
      setTimeout(() => {
        this.beforeCloseDialog()
      }, 500)
    }
  }
}
</script>

<style lang="scss" scoped>
.sp-manager__dialog /deep/ > .el-dialog > .el-dialog__body {
  height: calc(100% - 170px);
}
.fullheight {
  padding: 20px;
}
.enabledDiv {
  background-color: #d6f3cd;
  width: 83px;
  height: 25px;
  font-family: 'Arial Normal', 'Arial';
  font-weight: 400;
  font-style: normal;
  font-size: 13px;
  letter-spacing: normal;
  color: #217413;
  vertical-align: none;
  text-align: center;
  line-height: 25px;
  margin: 0 auto;
  border-radius: 5px;
}
.disabledDiv {
  background-color: #f4f4f4;
  width: 83px;
  height: 25px;
  font-family: 'Arial Normal', 'Arial';
  font-weight: 400;
  font-style: normal;
  font-size: 13px;
  letter-spacing: normal;
  color: #333333;
  vertical-align: none;
  text-align: center;
  line-height: 25px;
  margin: 0 auto;
  border-radius: 5px;
}
.borderDiv {
  height: 30px;
  line-height: 30px;
  flex: 24%;
  border-radius: 10px;
  border: 1px solid gray;
}
.borderDivGoOutSideSystem {
  height: 30px;
  line-height: 30px;
  flex: 20%;
  border-radius: 10px;
  border: 1px solid gray;
}
.borderDivDelete {
  height: 30px;
  line-height: 30px;
  flex: 20%;
  border-radius: 10px;
  background-color: #f56c6c;
  color: white;
}
.buttonList {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  overflow: hidden;
}
</style>