<template>
    <div class="main-wrapper">

        <div class="row">
            <div class="col">
                <div class="card">
                <DataTable title="API管理" 
                :headers="tableHeaders" 
                :rows="tableData" 
                :data-count="dataCount"
                @pageChanged="pageChangedHandle" 
                @dataDelete="deleteHandle" 
                @dataModify="modifyHandle" />
                <card-loading v-if="!isLoaded"/>
                </div>
                <api-form-modal title="修改接口" ref="apiModal" />
            </div>
        </div>
    </div>
</template>

<script>
import DataTable from '@/components/DataTable.vue';
import ApiFormModal from '../../components/ApiFormModal.vue';
import CardLoading from '../../components/CardLoading.vue';


export default {
    name: "APIs",
    components: {
        DataTable,
        ApiFormModal,
        CardLoading
    },
    data() {
        return {
            isLoaded: false,
            packageList: [],
            tableHeaders: [
                { text: "编号", value: "id", width: "100px" },
                { text: "名称", value: "name", width: "100px" },
                { text: "描述", value: "description", width: "100px" },
                { text: "路径", value: "endpoint", width: "100px" },
                { text: "调用方法", value: "method", width: "100px", type: "method" },
                { text: "状态", value: "isactive", width: "100px", type: "bool" },
                { text: "所属套餐", value: "packageId", width: "100px", type: "find", findProperty: "id", findValue: [] },
            ],
            tableData: [],
            dataCount: 0
        }
    },
    methods: {
        async loadApiList(pageIndex = 1, pageSize = 10, desc = false) {
            this.isLoaded = false
            try {
                const res = await this.$api.getApiList(pageIndex, pageSize, desc)
                if (res.code == '1000') {
                    this.tableData = res.data
                }
            } catch (e) {
                this.$alert('API列表数据加载失败!', 'danger')
                console.error(e)
            }finally{
                this.isLoaded = true
            }
            
        },
        async pageChangedHandle(newval) {
            await this.loadApiList(newval.pageIndex, newval.pageSize, false)
        },
        async modifyHandle(id) {
            try {
                //加载API信息到新窗口
                const apiinfoRes = await this.$api.getApiInfoById(id)
                
                if (apiinfoRes.code != 1000) {
                    this.$alert(apiinfoRes.message, 'danger')
                    return
                }

                //拉起修改弹窗
                const res = await this.$refs.apiModal.open(id, apiinfoRes.data, this.packageList)
                //弹窗返回为null表示用户关闭了窗口，不执行操作
                if (res == null) return
                const modifyRes = await this.$api.updateApiInfo(id, res)
                const packageRes = await this.setApiPackage({packageId:res.packageId,apiId:id})
                if (modifyRes.code != 1000) {
                    this.$alert(modifyRes.message, 'danger')
                    return
                }
                this.$alert('修改成功', 'success')

            } catch (e) {
                this.$alert(e, 'danger')
            }
        },
        async deleteHandle(id) {
            const confirmRes = await this.$confirm('删除', '是否删除API？')
            if (!confirmRes) return;
            try {
                const res = await this.$api.deleteApi(id)
                if (res.code != 1000) {
                    this.$alert(res.message, 'danger')
                    return;
                }
                this.$alert('删除成功', 'success')

            } catch (e) {
                this.$alert(e, 'danger')
            }
        },
        async loadPackageList(pageIndex = 1, pageSize = 10, desc = false) {
            //获取套餐列表
            try{
                const packageRes = await this.$api.getPackageList(1, 1000, false)
            if (packageRes.code != 1000) {
                this.$alert(packageRes.message, 'danger')
            }
            this.packageList = packageRes.data
            }catch(e){
                this.$alert('加载套餐列表失败！', 'danger')
                console.error(e)
            }
        },
    async setApiPackage(params){
      return await this.$api.setApiPackage(params)
    }
    },
    async mounted() {
        await this.loadPackageList()
        await this.loadApiList()
        
        this.tableHeaders.find(x => x.value == 'packageId').findValue = this.packageList
        
    }
}
</script>

<style scoped></style>