<template>
  <div class="fullheight">
    <ht-table
      @load="loadData"
      :data="rows"
      :pageResult="pageResult"
      :selection="true"
      quick-search-props="name,alias"
      :default-sorter="[{direction: 'DESC', property: 'createTime'}]"
      :show-export="false"
      :show-custom-column="false"
      ref="htTable"
      :header-cell-class-name="headerCellClassName"
      @selection-change="handleSelectionChange"
    >
      <template v-slot:toolbar>
        <!-- <el-button-group> -->
          <el-button size="small" @click="showDialog()" icon="el-icon-plus"  type="primary" 
            >添加</el-button
          >
          <!-- <el-button
                size="small"
                @click="handleImport()"
                icon="el-icon-back"
                >导入</el-button
              >
              <el-button size="small" @click="handExport()" icon="el-icon-right"
                >导出</el-button
              > -->
          <ht-delete-button
            url="${portal}/portal/portalInterfaceManager/v1/remove"
            :htTable="$refs.htTable"
            :disabled="isDisabled"
            >删除</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="alias"
          label="接口别名"
          :sortable="true"
          :show-overflow-tooltip="true"
        >
        </ht-table-column>
        <ht-table-column
          prop="sourceType"
          label="接口来源"
          :render-header="renderHeaderMethod"
          :filters="[
            {text: '连接', value: 0},
            {text: '服务', value: 1}
          ]"
        >
          <template v-slot="{row}">
            <el-tag type="info" v-if="row.sourceType == 0"
              >连接</el-tag
            >
            <el-tag type="success" v-if="row.sourceType == 1"
              >服务</el-tag
            >
          </template>
        </ht-table-column>
        <ht-table-column
          prop="connectionType"
          label="连接类型"
          :render-header="renderHeaderMethod"
          :filters="[
            {text: '数据源', value: 'dataSource'},
            {text: 'restful接口', value: 'restful'}
          ]"
        >
          <template v-slot="{row}">
            <el-tag type="info" v-if="row.connectionType == 'dataSource'"
              >数据源</el-tag
            >
            <el-tag type="success" v-if="row.connectionType == 'restful'"
              >restful接口</el-tag
            >
          </template>
        </ht-table-column>
        <ht-table-column width="230" label="操作" align="left">
          <template v-slot="{row}">
                <el-button type="text" @click="handleCommand({row: row, command: 'log'})">查看日志</el-button>
                <el-button type="text" @click="handleCommand({row: row, command: 'copyAddress'})">接口地址</el-button>
                <el-button type="text" @click="handleCommand({row: row, command: 'testConnect'})">测试连接</el-button>

            <!-- <el-dropdown
              size="mini"
              split-button
              @command="handleCommand"
              @click="handleCommand({row: row, command: 'log'})"
            >
              <span> <i class="el-icon-tickets"></i>查看日志 </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item
                  icon="el-icon-menu"
                  :command="{row: row, command: 'copyAddress'}"
                  >接口地址</el-dropdown-item
                >
                <el-dropdown-item
                  icon="el-icon-menu"
                  :command="{row: row, command: 'testConnect'}"
                  >测试连接</el-dropdown-item
                >
              </el-dropdown-menu>
            </el-dropdown> -->
          </template>
        </ht-table-column>
      </template>
    </ht-table>
    <PortalInterfaceManager-manager-edit
      ref="PortalInterfaceManagerManagerEdit"
      @reloadList="reloadList"
    ></PortalInterfaceManager-manager-edit>
    <el-dialog
      title="调用日志"
      class="form-version__dialog"
      width="60%"
      destroy-on-close
      :visible.sync="serviceLogVisible"
      :before-close="handleCloseServiceLog"
      top="8vh"
    >
      <portal-service-log-manager
        v-if="serviceLogVisible"
        :visible.sync="serviceLogVisible"
        :type="type"
        :alias="alias"
      />
    </el-dialog>
    <!-- 接口地址 -->
    <PotalIntefaceAddress ref="portalIntefaceAddress"></PotalIntefaceAddress>
  </div>
</template>
<script>
import PortalInterfaceManagerManagerEdit from './PortalInterfaceManagerManagerEdit.vue'
import PortalServiceLogManager from '../log/PortalServiceLogManager.vue'
import PotalIntefaceAddress from './PotalIntefaceAddress.vue'
import portal from '@/api/portal.js'
import tableHeaderFilter from '@/mixins/tableHeaderFilter.js'
export default {
  components: {
    PortalInterfaceManagerManagerEdit,
    PortalServiceLogManager,
    PotalIntefaceAddress
  },
  mixins: [tableHeaderFilter],
  data() {
    return {
      dialogVisible: false,
      serviceLogVisible: false,
      type: 'interface',
      alias: '',
      rows: [],
      pageResult: {
        page: 1,
        pageSize: 50,
        total: 0
      },
      PortalInterfaceManager: {},
      formRow: {},
      saveMethod: 'POST',
       isDisabled:true,  //按钮的禁用
      selectedList:[]
    }
  },
   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
    },
    showDialog(id) {
      this.$refs.PortalInterfaceManagerManagerEdit.showDialog(id)
    },
    loadData(param, cb) {
      portal
        .getInterfaceManageList(param || {})
        .then(resp => {
          let response = resp.data
          this.rows = response.rows
          this.pageResult = {
            page: response.page,
            pageSize: response.pageSize,
            total: response.total
          }
          // this.$loading().close()
        })
        .finally(() => cb && cb())
    },
    handleCommand(params) {
      this.formRow = params.row
      switch (params.command) {
        case 'edit':
          this.$refs.PortalInterfaceManagerManagerEdit.showDialog(params.row.id)
          break
        case 'log':
          this.alias = params.row.alias
          this.serviceLogVisible = true
          break
        case 'testConnect':
          portal.doQueryInterface(params.row.alias).then(resp => {
            if (resp) {
              let result = JSON.stringify(resp)
              this.$message({
                type: 'success',
                dangerouslyUseHTMLString: true,
                message: `<div class="result-message">测试连接成功，返回结果:' ${result}</div>`
              })
            } else {
              this.$message({
                type: 'error',
                message: '测试连接失败'
              })
            }
          })
          break
        case 'copyAddress':
          this.$refs.portalIntefaceAddress.showDialog(params.row.alias)
        default:
          break
      }
    },
    //导入
    handleImport() {},
    //导出
    handExport() {},
    reloadList() {
      this.$refs.htTable.load()
    },
    handleCloseServiceLog() {
      this.serviceLogVisible = false
    }
  }
}
</script>
<style lang="scss" scoped>
::v-deep{
  .cell>.el-table__column-filter-trigger{
    display: none;
  }
}
.sp-manager__dialog /deep/ .el-dialog > .el-dialog__body {
  height: calc(100% - 170px);
}
.form-version__dialog /deep/ .el-dialog > .el-dialog__body {
  padding: 0 10px;
}
</style>
<style>
.result-message {
  max-height: 800px;
  overflow-y: auto;
  line-height: normal;
}
</style>