<template>
  <a-layout>
    <div 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>
    </div>
    <div 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>
    </div>
    <div 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>
    </div>
  </a-layout>
</template>
<script lang="ts" setup>
import { defineExpose, reactive,ref,onMounted} from "vue";
import ContentHeaders from "./compoents/header/index.vue";
import ContentBodys from "./compoents/body/index.vue";
import ContentFooters from "./compoents/footer/index.vue";
import { getPaySelect,onSearchSelectrealmName } from "@/api/index";

import { DownOutlined, UpOutlined } from "@ant-design/icons-vue";
    interface ShowIcon {
      HeaderIcon: Boolean;
      BodyIcon: Boolean;
      FooterIcon: Boolean;
    }
    let list = ref<Object>([])
    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 getPaySelect(1)
      list = data.data
      console.log(list,'list');
      const name= await onSearchSelectrealmName(1)
      console.log(name,'name');
      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>

