---
import Layout from "../../../layouts/Layout_2.astro";
import { Image } from "astro:assets";
import { getConfig, getExtra } from "../../../../utils/config";
import { TP2_COLUMN_CONTACT_US, TP2_COLUMN_CONTACT_US_URL } from "../../../../utils/const";
import BaijiahaoLogo from '../../../../public/template_2/baijiahao.svg'
import Toutiaohao from '../../../../public/template_2/toutiaohao.svg'
// import Youxiang from "../../../../public/template_2/contact-us/youxiang.svg";
const extra = getExtra('')
const config = getConfig(Astro);
const breadcrumb = [
  { title: '主页', url: '/' },
  { title: TP2_COLUMN_CONTACT_US, url: TP2_COLUMN_CONTACT_US_URL }
];
---
<Layout title={TP2_COLUMN_CONTACT_US + ` - ${config.app_name}`} breadcrumb={breadcrumb}>

<main>
    <div class="contact-container">
        <h1 style="font-size: 5rem;margin-bottom: 5rem;">{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>

            <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/hotline.png" 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> : ''
                    }
            </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; */
    }
</style>