<!-- 接口服务 -->
<template>
    <div class="main">
        <div class="left">
            <a-card class="box-card">
                <div class="left-content">
                    <div class="btn">
                        <a-button :type="type1" size="large" @click="show1">用户中心<span>(18)</span></a-button>
                    </div>
                    <div class="btn">
                        <a-button :type="type2" size="large" @click="show2">数据分析<span>(18)</span></a-button>
                    </div>
                    <div class="btn">
                        <a-button :type="type3" size="large" @click="show3">授权中心<span>(18)</span></a-button>
                    </div>
                    <div class="btn">
                        <a-button :type="type4" size="large" @click="show4">空间分析<span>(18)</span></a-button>
                    </div>
                    <div class="btn">
                        <a-button :type="type5" size="large" @click="show5">专项接口<span>(18)</span></a-button>
                    </div>
                </div>
            </a-card>
        </div>
        <div class="right">
            <a-card class="box-card">
                <div class="right-header">
                    <div style="margin-right: auto;">
                        共有<span style="color: blue;">68</span>个通用接口
                    </div>
                    <div class="btu">
                      <a-button type="primary">申请库</a-button>
                    </div>
                    <div class="select">
                     <a-select
                       ref="select"
                       v-model:value="value1"
                       style="width: 120px">
                      <a-select-option value="jack">全部审核通过</a-select-option>
                      <a-select-option value="lucy">审核中</a-select-option>
                      <a-select-option value="Yiminghe">未申请</a-select-option>
                    </a-select>
                    </div>
                    <div>
                    <a-input-search
                    class="search"
                      v-model:value="value"
                      placeholder="请输入接口名称"
                      style="width: 200px"
                      @search="onSearch"/>
                    </div>
                </div>
                <div class="right-content">
                    111
                </div>
            </a-card>
        </div>
    </div>
</template>

<script>
  import { defineComponent,ref } from 'vue';
  export default defineComponent({
    setup(){
        let type1 = ref('')
        let type2 = ref('')
        let type3 = ref('')
        let type4 = ref('')
        let type5 = ref('')
        const show1 = () => {
            type1.value = 'primary'
            type2.value = ''
            type3.value = ''
            type4.value = ''
            type5.value = ''
        }
        const show2 = () => {
            type1.value = ''
            type2.value = 'primary'
            type3.value = ''
            type4.value = ''
            type5.value = ''
        }
        const show3 = () => {
            type1.value = ''
            type2.value = ''
            type3.value = 'primary'
            type4.value = ''
            type5.value = ''
        }
        const show4 = () => {
            type1.value = ''
            type2.value = ''
            type3.value = ''
            type4.value = 'primary'
            type5.value = ''
        }
        const show5 = () => {
            type1.value = ''
            type2.value = ''
            type4.value = ''
            type5.value = 'primary'
        }
        return {
            type1,
            type2,
            type3,
            type4,
            type5,
            show1,
            show2,
            show3,
            show4,
            show5,
        }
    }
  });
</script>

<style lang="scss" scoped>
.main{
    margin: 0;
    padding: 0;
    display: flex;
    height: 90vh;
    .box-card{
        height: calc(100% - 0px);
        overflow-y:auto;
    }

    .left{
        height: 100%;
        width: 12%;
        margin: 10px;
        .left-content{
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            .btn{
                margin-top: 10px;
            }
        }
    }

    .right{
        height: 100%;
        width: 88%;
        margin: 10px;
        .right-header{
            height: 10vh;
            line-height:10vh;
            padding-left: 10px;
            display: flex;
            justify-content: flex-end;
        border-style:solid;
        border-width:1px;
        border-color:#E9E9E9;
        .btu{
            margin-right: 10px;
        }
        .select{
            margin-right: 10px;
        }
        .search{
            margin-right: 10px;
        }
        }

        .right-content{
            height: 15vh;
            margin-top: 15px;
        border-style:solid;
        border-width:1px;
        border-color:#E9E9E9;
        }
    }
}
</style>