<template>
  <div class="fullheight">
    <ht-table
        @load="loadData"
        :data="data"
        :pageResult="pageResult"
        :selection="true"
        :show-export="false"
        :show-custom-column="false"
        quick-search-props="sysId"
        ref="table"
        @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}/portalUrlPermission/v1/"
              :htTable="$refs.table"
              :disabled="isDisabled"
          >删除</ht-delete-button
          >
        <!-- </el-button-group> -->
      </template>
      <template>
        <ht-table-column type="index" width="50" align="center" label="序号" />
        <!--        <ht-table-column-->
        <!--          prop="id"-->
        <!--          label="主键"-->
        <!--          :sortable="true"-->
        <!--          :show-overflow-tooltip="true"-->
        <!--        >-->
        <!--          <template v-slot="{row}">-->
        <!--            <el-link type="primary">{{ row.id }}</el-link>-->
        <!--          </template>-->
        <!--        </ht-table-column>-->
        <ht-table-column
            prop="sysId"
            label="系统编码"
            :sortable="true"
            :show-overflow-tooltip="true"
        >
          <!--          <template v-slot="{row}">-->
          <!--            <el-link type="primary">{{ row.id }}</el-link>-->
          <!--          </template>-->
        </ht-table-column>
        <ht-table-column
            prop="module"
            label="所属模块"
            :sortable="true"
            :show-overflow-tooltip="true"
        >
        </ht-table-column>
        <ht-table-column
            prop="function"
            label="所属功能"
            :sortable="true"
            :show-overflow-tooltip="true"
        >
        </ht-table-column>
        <ht-table-column
            prop="description"
            label="接口描述"
            :sortable="true"
            :show-overflow-tooltip="true"
        >
        </ht-table-column>
        <ht-table-column
            prop="authUrl"
            label="接口授权路径"
            :sortable="true"
            :show-overflow-tooltip="true"
        >
        </ht-table-column>
        <ht-table-column
            prop="createTime"
            label="创建日期"
            :sortable="true"
            :show-overflow-tooltip="true"
        >
        </ht-table-column>
<!--        <ht-table-column-->
<!--            prop="createBy"-->
<!--            label="创建人的ID"-->
<!--            :sortable="true"-->
<!--            :show-overflow-tooltip="true"-->
<!--        >-->
<!--        </ht-table-column>-->
<!--        <ht-table-column-->
<!--            prop="createOrgId"-->
<!--            label="创建人组织ID"-->
<!--            :sortable="true"-->
<!--            :show-overflow-tooltip="true"-->
<!--        >-->
<!--        </ht-table-column>-->
      </template>
    </ht-table>
    <PortalUrlPermission-manager-edit
        ref="PortalUrlPermissionManagerEdit"
        @loadData="loadData"
    ></PortalUrlPermission-manager-edit>
  </div>
</template>
<script>
import PortalUrlPermissionManagerEdit from './PortalUrlPermissionManagerEdit.vue'
export default {
  components: {
    PortalUrlPermissionManagerEdit,
  },
  name: 'PortalUrlPermissionManager',
  data() {
    return {
      dialogVisible: false,
      data: [],
      pageResult: {
        page: 1,
        pageSize: 50,
        total: 0,
      },
      PortalUrlPermission: {},
      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.PortalUrlPermissionManagerEdit.showDialog(id)
    },
    beforeCloseDialog() {
      this.PortalUrlPermission = {}
      this.dialogVisible = false
    },
    loadData(param, cb) {
      this.$http
          .post('${portal}/portalUrlPermission/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 && cb()
          })
    },
    afterSaveData() {
      setTimeout(() => {
        this.beforeCloseDialog()
        this.$refs.htTable.load()
      }, 500)
    },
  },
}
</script>

<style lang="scss" scoped>
.sp-manager__dialog /deep/ > .el-dialog > .el-dialog__body {
  height: calc(100% - 170px);
}
</style>
