<template>
  <div class="fullheight">
    <ht-table
      @load="loadData"
      :data="rows"
      :pageResult="pageResult"
      :selection="true"
      quick-search-props="name,alias"
      :show-export="false"
      :show-custom-column="false"
      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
          >
          <!-- <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/portalServiceChoreography/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 width="200" 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: '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: 'testConnect'}"
                  >测试连接</el-dropdown-item
                >
              </el-dropdown-menu>
            </el-dropdown> -->
          </template>
        </ht-table-column>
      </template>
    </ht-table>
    <PortalServiceChoreography-manager-edit
      ref="PortalServiceChoreographyManagerEdit"
      @reloadList="reloadList"
    ></PortalServiceChoreography-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>
  </div>
</template>
<script>
import PortalServiceChoreographyManagerEdit from './PortalServiceChoreographyManagerEdit.vue'
import PortalServiceLogManager from '../log/PortalServiceLogManager.vue'
import portal from '@/api/portal.js'
export default {
  components: {PortalServiceChoreographyManagerEdit, PortalServiceLogManager},
  data() {
    return {
      dialogVisible: false,
      serviceLogVisible: false,
      type: 'service',
      alias: '',
      rows: [],
      pageResult: {
        page: 1,
        pageSize: 50,
        total: 0
      },
      PortalServiceChoreography: {},
      formRow: {},
      saveMethod: 'POST',
      isDisabled:true,  //按钮的禁用
      selectedList:[]
    }
  },
  mounted() {
    this.$validator = this.$root.$validator
  },
  watch: {
    // 监听选中下
     selectedList:{
      handler(val){
        this.isDisabled = val.length < 1 ? true : false
      },
      deep:true
    }
  },
  methods: {
      handleSelectionChange(selection){
      this.selectedList = selection
    },
    showDialog(id) {
      this.$refs.PortalServiceChoreographyManagerEdit.showDialog(id)
    },
    loadData(param, cb) {
      portal
        .getChoreographyManageList(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.PortalServiceChoreographyManagerEdit.showDialog(params.row.id)
          break
        case 'log':
          this.alias = params.row.alias
          this.serviceLogVisible = true
          break;
        case 'testConnect':
          portal.executeServiceChoreography(params.row.alias).then(resp => {
            if (resp) {
              let result = JSON.stringify(resp)
              this.$message({
                type: 'success',
                message: "调用服务成功, 返回结果" + result
              })
            } else {
              this.$message.$error("调用服务失败")
            }
          })
          break
        default:
          break
      }
    },
    reloadList() {
      this.$refs.htTable.load()
    },
    handleCloseServiceLog() {
      this.serviceLogVisible = false
    }
  }
}
</script>
<style lang="scss" scoped>
.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>