---
import Layout from "../../../layouts/Layout_5.astro";
import { Image } from "astro:assets";
import { getConfig, getExtra, getTp5Extra } from "../../../../utils/config";
import {
    TP2_COLUMN_CONTACT_US,
    TP2_COLUMN_CONTACT_US_URL,
    TP2_COLUMN_INDEX,
    TP2_COLUMN_INDEX_URL,
} from "../../../../utils/const";
import BaijiahaoLogo from '../../../../public/common/baijiahao.svg'
import Toutiaohao from '../../../../public/common/toutiaohao.svg'
import Douyin from '../../../../public/common/douyin.svg'
import Youxiang from '../../../../public/common/youxiang.svg'
const config = getConfig(Astro);
const extra = getTp5Extra(config.app_extra_tag)
const breadcrumb = [
  { title: TP2_COLUMN_INDEX, url: TP2_COLUMN_INDEX_URL },
  { title: TP2_COLUMN_CONTACT_US, url: TP2_COLUMN_CONTACT_US_URL }
];
// 页面描述
const desc = extra.contact_us.telephone.map(item => item.number).join('; ');
---
<Layout
    title={TP2_COLUMN_CONTACT_US + ` - ${config.app_name}`}
    description={`${config.app_name}24小时客服电话 - ${desc}`}
    keywords={config.app_keywords}
    breadcrumb={breadcrumb}
>
    <main>
        <div class="contact-container">
            <h1 style="font-size: 5rem;margin-bottom: 5rem;color:#000000">{extra.contact_us.title}</h1>
                <!-- <Fragment set:html={extra.contact_us.content}/> -->
            <section class="list-box">
                <h2 class="list-title">在线客服</h2>
                <ul>
                    {
                        extra.contact_us.telephone.map(e => {
                            return <li class="list-item">
                                        <a href={`tel:${e.number}`}>
                                            <div class="item-content">
                                                <Image height={50} width={50} src="/template_2/contact-us/hotline.png" alt="联系热线"/>
                                                <div class="txt">
                                                    <h3 style="margin-left: 1rem;font-weight: bold;">{e.number}</h3>
                                                    <h4 style="margin-left: 1rem;">24小时全国热线</h4>
                                                </div>
                                            </div>
                                            <i class="fas fa-chevron-right"></i>
                                        </a>
                                    </li>
                        })
                    }
                </ul>

                {extra.contact_us.email.length > 0 ? <h2 class="list-title">联系邮箱</h2> : ''}
                <ul>
                        {
                            extra.contact_us.email.map(e => {
                                return <li class="list-item">
                                            <a href={`tel:${e.address}`}>
                                                <div class="item-content">
                                                    <Image height={50} width={50} src="/template_2/contact-us/youxiang.svg" alt="联系邮箱"/>
                                                    <div class="txt">
                                                        <h3 style="margin-left: 1rem;font-weight: bold;">{e.address}</h3>
                                                        <h4 style="margin-left: 1rem;"></h4>
                                                    </div>
                                                </div>
                                                <i class="fas fa-chevron-right"></i>
                                            </a>
                                        </li>
                            })
                        }
                </ul>

                <h2 class="list-title">官方媒体平台</h2>
                <ul>
                        {
                            extra.weibo_offical.address ?
                            <li class="list-item">
                                <a href={extra.weibo_offical.address} target="blank">
                                    <div class="item-content">
                                        <span class="icon-lazy font-ico-weibo" data-name="font-ico-weibo"></span>
                                        <div class="txt">
                                            <h3>{extra.weibo_offical.name}</h3>
                                        </div>
                                    </div>
                                    <i class="fas fa-chevron-right"></i>
                                </a>
                            </li> : ''
                        }
                        {
                            extra.gongzhonghao_offical.address ?
                            <li class="list-item">
                                <a href={extra.gongzhonghao_offical.address} target="blank">
                                    <div class="item-content">
                                        <span class="icon-lazy font-ico-weixin" data-name="font-ico-weixin"></span>
                                        <div class="txt">
                                            <h3>{extra.gongzhonghao_offical.name}</h3>
                                        </div>
                                    </div>
                                    <i class="fas fa-chevron-right"></i>
                                </a>
                            </li> : ''
                        }
                        {
                            extra.baijiahao_offical.address ?
                            <li class="list-item">
                                <a href={extra.baijiahao_offical.address} target="blank">
                                    <div class="item-content">
                                        <BaijiahaoLogo class="icon-lazy" />
                                        <div class="txt">
                                            <h3>{extra.baijiahao_offical.name}</h3>
                                        </div>
                                    </div>
                                    <i class="fas fa-chevron-right"></i>
                                </a>
                            </li> : ''
                        }
                        {
                            extra.toutiaohao_offical.address ?
                            <li class="list-item">
                                <a href={extra.toutiaohao_offical.address} target="blank">
                                    <div class="item-content">
                                        <Toutiaohao class="icon-lazy"/>
                                        <div class="txt">
                                            <h3>{extra.toutiaohao_offical.name}</h3>
                                        </div>
                                    </div>
                                    <i class="fas fa-chevron-right"></i>
                                </a>
                            </li> : ''
                        }
                        {
                            extra.douyin_offical.address ?
                            <li class="list-item">
                                <a href={extra.douyin_offical.address} target="blank">
                                    <div class="item-content">
                                        <Douyin class="icon-lazy"/>
                                        <div class="txt">
                                            <h3>{extra.douyin_offical.name}</h3>
                                        </div>
                                    </div>
                                    <i class="fas fa-chevron-right"></i>
                                </a>
                            </li> : ''
                        }
                </ul>
            </section>
        </div>
    </main>
</Layout>
<style>

    .fa-chevron-right:before {
        content: ">"
    }

    h2 {
        font-size: 2rem ;
        margin-top: 4rem;
        margin-bottom: 1rem;
    }

    h3 {
        margin-left: 1rem;
        font-weight: bold;
    }

    h4 {
        margin-left: 1rem;
        color: #7f7f7f;
    }
    .icon-lazy {
        width: 50px;
        height: 50px;
    }
    .contact-container {
        padding-top: 5rem;
    }

    .list-item {
        border-top: 0.01rem solid #d8d8d8;
    }

    .item-content{
        display: flex;
        justify-content: center;
    }

    .txt {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .list-box .list-item>a {
        padding: 1.5rem;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-pack: justify;
        justify-content: space-between;
        -ms-flex-align: center;
        align-items: center;
        /* height: 1.08rem; */
    }

    main {
  max-width: 1200px;
  width: 100%;
  box-sizing: border-box;
  flex: 1 1 0%;
  /* padding: 5rem; */
  margin: 0px auto;
  padding-top: 5rem;
}
</style>