<template>
  <div class="p-4">
    <div class="top-search">
      <div class="left-search-input">
        <div class="input">
          <span>关键字</span>
          <a-input allowClear v-model:value="searchValue" style="width: 200px;" placeholder="请输入关键字"></a-input>
        </div>
      </div>
      <div class="right-btns">
        <a-button style="margin-right: 15px;" @click="handleReset">重置</a-button>
        <a-button type="primary" @click="handleSearch">查询</a-button>
      </div>
    </div>
    <div class="bottom-table">
      <BasicTable @register="registerTable" class="basic-table">
        <template #toolbar>
          <a-button type="primary" @click="handleAdd">新增应用</a-button>
        </template>
        <template #action="{ record }">
          <TableAction :actions="[
            {
              label: '查看',
              tooltip: '查看',
              onClick: handleDetail.bind(null, record),
            },
            {
              label: '编辑',
              tooltip: '编辑',
              onClick: handleEdit.bind(null, record),
            },
            {
              label: '删除',
              tooltip: '删除',
              onClick: handleDelete.bind(null, record),
            },
          ]" />
        </template>
      </BasicTable>
    </div>
    <AppModal v-if="showAppModal" @closeModal="closeAppModal" :appInfo="appInfo" :title="appModalTitle" @onSubmit="onSubmit" />
  </div>
</template>
<script>
import { defineComponent, reactive, ref, onMounted, watch, toRefs, computed, createVNode, nextTick } from 'vue';
import { BasicTable, useTable, TableAction } from '/@/components/Table';
import AppModal from './AppModal.vue';
import { columns } from './app.data';
import { list, deleteApp } from '/@/api/authorize/authorize';
import uiTool from '/@/utils/uiTool';
import { message } from 'ant-design-vue';

export default defineComponent({
  name: 'Empowerment',
  components: { BasicTable, TableAction, AppModal },
  setup() {
    const searchValue = ref('')
    const showAppModal = ref(false)
    const appInfo = ref({})
    const appModalTitle = ref('')
    const grantTypes = {
      authorization_code: "授权码",
      password: "密码",
      client_credentials: "客户端凭证",
      refresh_token: "token刷新口令",
    }
    onMounted(() => {
    })
    //获取应用列表
    const getAllData = () => {
      return new Promise(async (resolve) => {
        let params = {
          keyStr: searchValue.value
        }
        let resData = await list(params)
        resData.forEach(item => {
          if (item.AUTHORIZED_GRANT_TYPES) {
            let types = item.AUTHORIZED_GRANT_TYPES.split(',')
            let typeLabels = []
            types.forEach(type => {
              typeLabels.push(grantTypes[type])
            })
            item.AUTHORIZED_GRANT_TYPE_LABELS = typeLabels.join(',')
          } else {
            item.AUTHORIZED_GRANT_TYPE_LABELS = ''
          }
        })
        resolve(resData)
      })
    }
    //注册表格
    const [registerTable, { reload, getRowSelection, getSelectRowKeys, clearSelectedRowKeys, getDataSource }] = useTable({
      title: '应用列表',
      api: getAllData,
      columns,
      // rowSelection: { type: 'checkbox' },
      useSearchForm: false,
      showTableSetting: true,
      bordered: false,
      striped: false,
      canResize: true,
      showIndexColumn: true,
      indexColumnProps: { fixed: 'left' },
      actionColumn: {
        width: 150,
        title: '操作',
        dataIndex: 'action',
        slots: { customRender: 'action' },
        fixed: 'right',
      },
      pagination: {
        hideOnSinglePage: false,
      },
      clickToRowSelect: false,
      tableSetting: {
        redo: true,
        size: true,
        setting: false,
        fullScreen: false
      },
    });
    //重置查询
    const handleReset = () => {
      searchValue.value = ''
    }
    //条件查询
    const handleSearch = () => {
      reload();
    }
    //新增
    const handleAdd = () => {
      showAppModal.value = true
      appModalTitle.value = '新增应用'
    }
    //查看
    const handleDetail = async (record) => {
      appInfo.value = {
        name: record.NAME,
        key: record.KEY,
        id: record.SYSID,
        note: record.NOTE,
        grantTypes: record.AUTHORIZED_GRANT_TYPES ? record.AUTHORIZED_GRANT_TYPES.split(',') : [],
        scope: record.SCOPE,
        autoapproveType: record.AUTOAPPROVE === 'true' ? 1 : 0,
        userIds: record.USERID
      }
      showAppModal.value = true
      appModalTitle.value = '查看应用'
    }
    //编辑
    const handleEdit = (record) => {
      appInfo.value = {
        name: record.NAME,
        key: record.KEY,
        id: record.SYSID,
        note: record.NOTE,
        grantTypes: record.AUTHORIZED_GRANT_TYPES ? record.AUTHORIZED_GRANT_TYPES.split(',') : [],
        scope: record.SCOPE,
        autoapproveType: record.AUTOAPPROVE === 'true' ? 1 : 0,
        userIds: record.USERID
      }
      showAppModal.value = true
      appModalTitle.value = '编辑应用'
    }
    //删除
    const handleDelete = (record) => {
      uiTool.delModal('确认删除该应用？',()=>{
        let params = {
          systemId: record.SYSID,
          systemKey: record.KEY
        }
        deleteApp(params).then(res=>{
          if(res.resp_code===0){
            message.success('删除成功')
            reload()
          }
        })
      })
    }
    //审核提交
    const onSubmit = (isPass) => {
      closeAppModal()
      reload()
    }
    const closeAppModal = ()=>{
      appInfo.value = {}
      showAppModal.value = false
    }

    return {
      showAppModal,
      appInfo,
      appModalTitle,
      searchValue,
      registerTable,
      handleReset,
      handleSearch,
      handleAdd,
      handleDetail,
      handleEdit,
      handleDelete,
      onSubmit,
      closeAppModal
    };
  },
});
</script>

<style lang="less" scoped>
.p-4 {
  height: 100%;

  .top-search {
    width: 100%;
    height: 74px;
    border-radius: 6px;
    background: #FFFFFF;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .left-search-input {
      margin-left: 20px;
      display: flex;

      .input {
        margin-right: 30px;

        span {
          margin-right: 10px;
        }
      }
    }

    .right-btns {
      margin-right: 20px;
    }
  }

  .bottom-table {
    margin-top: 24px;
    padding: 20px;
    height: calc(100% - 98px);
    background-color: #fff;

    .basic-table {
      height: 100%;

      ::v-deep .ant-table-title {
        padding: 0 !important;

        .vben-basic-title {
          font-family: '阿里巴巴普惠体 2.0';
          font-size: 16px;
          font-weight: bold;
          color: #333333;
        }

      }
    }
  }
}
</style>
