<template>
  <a-layout>
    <a-layout-content class="header-content">
      <div>
        <div class="header-title">
          <span>支付配置</span
          ><DownOutlined
            v-if="ShowIcon.HeaderIcon"
            @click="onHearder"
          ></DownOutlined>
          <UpOutlined v-else @click="onHearder" ></UpOutlined>
        </div>
        <ContentHeaders v-if="ShowIcon.HeaderIcon" :list="list" ></ContentHeaders>
      </div>
    </a-layout-content>
    <!-- <a-layout-content class="body-content">
      <div>
        <div class="header-title">
          <span>域名配置</span
          ><DownOutlined
            v-if="ShowIcon.BodyIcon"
            @click="onBody"
          ></DownOutlined>
          <UpOutlined v-else @click="onBody"></UpOutlined>
        </div>
        <ContentBodys v-if="ShowIcon.BodyIcon"></ContentBodys>
      </div>
    </a-layout-content>
    <a-layout-footer class="footer-content">
      <div>
        <div class="header-title">
          <span>公众号配置</span
          ><DownOutlined
            v-if="ShowIcon.FooterIcon"
            @click="onFooter"
          ></DownOutlined>
          <UpOutlined v-else @click="onFooter"></UpOutlined>
        </div>
        <ContentFooters v-if="ShowIcon.FooterIcon"></ContentFooters>
      </div>
    </a-layout-footer> -->
  </a-layout>
</template>
<script lang="ts" setup>
import { defineExpose, reactive,ref} from "vue";
import ContentHeaders from "./compoents/header/index.vue";
import ContentBodys from "./compoents/body/index.vue";
import ContentFooters from "./compoents/footer/index.vue";
import { DownOutlined, UpOutlined } from "@ant-design/icons-vue";
    interface ShowIcon {
      HeaderIcon: Boolean;
      BodyIcon: Boolean;
      FooterIcon: Boolean;
    }
    let list = ref<Object>([{name:'1',num:2,status:'0',paytype:'2'},{name:'2',num:2,status:'1',paytype:'1'},{name:'3',num:2,status:'0',paytype:'3'},{name:'4',num:2,status:'0',paytype:'4'},{name:'5',num:2,status:'0',paytype:'5'}])
    const ShowIcon = reactive<ShowIcon>({
      HeaderIcon: true,
      BodyIcon: true,
      FooterIcon: true,
    });
    const onHearder = () => {
      ShowIcon.HeaderIcon = !ShowIcon.HeaderIcon;
    };
    const onBody = () => {
      ShowIcon.BodyIcon = !ShowIcon.BodyIcon;
    };
    const onFooter = () => {
      ShowIcon.FooterIcon = !ShowIcon.FooterIcon;
    };
  
    // onMounted(async()=>{
    //    const data:any =await payConfigGetSearch(1)
    //     list.value = data.data.alipay
    //     return list
    // })

    defineExpose({
      ShowIcon,
      list,
      onHearder,
      onBody,
      onFooter,
    });
</script>
<style lang="less" scoped>
.header-content {
  background-color: white;
  padding: 0px;
}
.body-content {
  background-color: white;
}
.footer-content {
  background-color: white;
  padding: 0px;
}
.header-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
</style>
<style lang="less">
.ant-layout{
  overflow-y: hidden;
}
</style>