<template>
  <div id="test-header">
    <Navbar title="身份源管理" />
    <a-button type="primary" @click="createOrUpdate('')"> 新建认证源 </a-button>
  </div>
  <a-card :bordered="false" class="allInfo-card">
    <CommonTable
      class="commonTable"
      :have-page="false"
      :is-loading="isLoading"
      :columns="identityColumns"
      :data-source="identityDatas"
    >
      <template #bodyCell="{ column, record }">
        <template v-if="column.key === 'active'">
          <span v-if="record.active === true" style="color: #0abf5b">
            已启用
          </span>
          <span v-else-if="record.active === false" style="color: #e54545">
            已停用
          </span>
        </template>
        <template v-else-if="column.key === 'operation'">
          <span>
            <a
              v-if="record.active === false"
              style="margin-right: 6px"
              @click="enableConfirm(record)"
            >启用</a>
            <a v-else style="margin-right: 6px" @click="disableConfirm(record)">停用</a>
            <a-dropdown :trigger="['click']">
              <a class="ant-dropdown-link" @click.prevent>
                更多
                <DownOutlined />
              </a>
              <template #overlay>
                <a-menu>
                  <a-menu-item key="0">
                    <a @click="createOrUpdate(record.id)">编辑</a>
                  </a-menu-item>
                  <a-menu-item key="1">
                    <a @click="deleteIdentity(record.id)">删除</a>
                  </a-menu-item>
                </a-menu>
              </template>
            </a-dropdown>
          </span>
        </template>
      </template>
    </CommonTable>
  </a-card>
</template>

<script setup>
import { useRouter } from 'vue-router';
import Common from '../common/Common.js';
import { message, Modal } from 'ant-design-vue';
import { ref, onMounted, createVNode } from 'vue';
import CommonTable from '../common/CommonTable.vue';
import { DownOutlined, ExclamationCircleOutlined } from '@ant-design/icons-vue';
import {
  tableColumns,
  queryAllAuth,
  deleteAuth,
  changeActive,
} from './configData.js';

const router = useRouter();
const isLoading = ref(false); //表格加载loading
const identityDatas = ref([]); // 表格认证源数据
const identityColumns = ref(tableColumns); //表格列

onMounted(() => {
  queryAllAuthSetting();
});

// 查询所有认证源
const queryAllAuthSetting = () => {
  queryAllAuth().then(
    success => {
      if (success.errorCode === 0) {
        if(success.datas && success.datas.length > 0){
          identityDatas.value = success.datas;
        } else {
          identityDatas.value = [];
        }
      } else {
        identityDatas.value = [];
        message.warning(success.errorMessage);
      }
    },
    error => {
      Common.processException(error);
    },
  );
};

// 启用
const enableConfirm = (record, status) => {
  Modal.confirm({
    title: `确认启用${record.name}`,
    icon: createVNode(ExclamationCircleOutlined),
    content: '启用后认证源将可以正常使用',
    onOk() {
      changeStatus(record.id, true);
    },
  });
};
// 停用
const disableConfirm = (record, status) => {
  Modal.confirm({
    title: `确认停用${record.name}`,
    icon: createVNode(ExclamationCircleOutlined),
    content: '停用后认证源将无法正常使用',
    onOk() {
      changeStatus(record.id, false);
    },
  });
};

// 更改状态
const changeStatus = (id, status) => {
  const params = new FormData();
  params.append('id', id);
  params.append('active', status);
  changeActive(params).then(
    success => {
      if (success.errorCode === 0) {
        message.success('更新状态成功！');
        queryAllAuthSetting();
      } else {
        message.error(success.errorMessage);
      }
    },
    error => {
      Common.processException(error);
    },
  );
};

// 删除认证源
const deleteIdentity = id => {
  const params = new FormData();
  params.append('id', id);
  deleteAuth(params).then(
    success => {
      if (success.errorCode === 0) {
        message.success('删除成功！');
        queryAllAuthSetting();
      } else {
        message.error(success.errorMessage);
      }
    },
    error => {
      Common.processException(error);
    },
  );
};

// 去往新建认证源页面
const createOrUpdate = id => {
  router.push({
    path: '/desktop/createIdentity',
    query: {
      identityId: id,
    },
  });
};
</script>

<style scoped>
.allInfo-card {
  margin-top: 10px;
  box-shadow: 0 2px 4px 0 rgba(54, 58, 80, 0.32);
}
.allInfo-card > :deep(.ant-card-body) {
  padding: 0 !important;
}
.commonTable {
  margin: 0;
}
.ant-table-pagination.ant-pagination {
  margin: 10px 0;
}
</style>