import { raw } from 'hono/html';
import { renderToString } from 'hono/jsx/dom/server';

type SheQiItems = {
    id?: string;
    has_money?: boolean;
    zc_type_text?: string;
    zc_type_icon?: string;
    zc_key?: string;
    company_type_text?: string;
    industry_text?: string;
    scale_text?: string;
};

type JieDuItem = {
    jd_title?: string;
    jd_content?: string;
    attach_items?: Array<{ file_url?: string }>;
};

type WenDaItem = {
    question?: string;
    answer?: string;
};

type ZcjdptData = {
    art_title?: string;
    pub_unite?: string;
    pub_time?: string;
    expiry_date?: string;
    zc_title?: string;
    summary?: string;
    link?: string;
    she_qi_items?: SheQiItems;
    jie_du_items?: JieDuItem[];
    wen_da_items?: WenDaItem[];
};

const splitValues = (value?: string) => (value ? value.split(',') : []);

export const renderZcjdpt = (data: ZcjdptData) => {
    const sheQiItems = data.she_qi_items ?? {};
    const zcType = splitValues(sheQiItems.zc_type_text);
    const zcTypeIcon = splitValues(sheQiItems.zc_type_icon);
    const zcKey = splitValues(sheQiItems.zc_key);
    const cType = splitValues(sheQiItems.company_type_text);
    const iType = splitValues(sheQiItems.industry_text);
    const cScale = splitValues(sheQiItems.scale_text);

    return renderToString(
        <div class="content">
            <div class="wrap" style="max-width: 1200px;margin: auto;">
                <h3 class="policy" style="text-align: center;font-size: 40px;font-weight: bold;color: #32638C;line-height: 66px;">
                    {data.art_title}
                </h3>
                <p
                    class="department"
                    style="max-width: 506px;text-align: center;background: #3b87c7;font-size: 20px;font-weight: bold;color: #FFF;margin: 12px auto 36px;box-sizing: border-box;padding: 10px 15px;background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAfoAAAAzCAMAAABIWzqzAAAAXVBMVEUAAAA7h8c7h8c7h8c7h8c7h8c7h8c7h8c7h8c7h8c7h8c7h8c7h8c7h8c7h8c7h8c7h8c7h8c7h8c7h8c7h8c7h8c7h8c7h8c7h8c7h8c7h8c7h8c7h8c7h8e9GIvqAAAAHnRSTlMA/fjk0xQEwbKoaz8v8OyblYmCWjUlIQ0Kx3NfVUbjQScSAAABNElEQVR42u3cB3LCUBAE0VFEiSyCCXv/Y9rlCFhwgD/97qAqqXe1agKWGu3ygKF8J60DhtaSDkXATnHQh3PAzlmf3gJm3vRlzAJWslHflgErS/2o5gEj80q/TgEjJ/2py4CNstaNa8DGVbdI+T4a3duT8k3kez3YBCxs9OhIyrdQHPXPNmBgqwmzQPJmmjKQ8pOXDZq0CiRupWnVIpC0RaUnukDSOt0h5dsoaz3VBxLW64U2kKxWr4yBZI3iqTfV6oWeqpOwrBdv+KbKWnzXm+pEzTO1qETDN7USkztT2SDm9aZmmnAJGLiI3TxTxVFs5JraiD18U/meeO+qZVBvqyfeuypr4r2rTlzVMDWvxC0dU0vivatsIN67mvGLra2tuJFrqjiIy9im1uIevql8x+ksV807+Hx1WMdc5EgAAAAASUVORK5CYII=) 0 0 no-repeat;background-size: 100% 100%;"
                >
                    {data.pub_unite}
                </p>
                <div class="p_date" style="text-align: center;margin: 0 0 36px 0;display: flex;justify-content: center;flex-wrap: wrap;">
                    {data.pub_time?.length ? (
                        <span class="pub_time" style="font-size: 20px;color: #32638C;width: 15em;margin: 0.5em;">
                            政策发布时间：{data.pub_time}
                        </span>
                    ) : null}
                    {data.expiry_date?.length ? (
                        <span class="expiry_date" style="font-size: 20px;color: #32638C;width: 15em;margin: 0.5em;">
                            政策有效期：{data.expiry_date}
                        </span>
                    ) : null}
                </div>
                <div
                    class="smalltext"
                    style="position: relative;padding: 2em 0;max-width: 1044px;margin: auto;background: url(https://zcjd.cloud.gd.gov.cn/zcjd/TemplateOne/images/smalltext.png) center no-repeat;background-size: 100% 100%;"
                >
                    <div class="s_title" style="display: flex;flex-wrap: wrap;justify-content: space-between;padding: 2em 2em 0.5em;">
                        <div>
                            <span class="sLeft" style="line-height: 42px;font-size: 22px;border-left: 0.2em solid #3b87c7;padding-left: 0.3em;">
                                政策原文
                            </span>
                        </div>
                        {sheQiItems.has_money ? (
                            <div class="cIs she_qi" style="border: 2px dashed #3B87C7;padding: 0 19px 0 12px;white-space: nowrap;">
                                <span style="font-size: 20px;line-height: 42px;">本政策涉及资金支持</span>
                            </div>
                        ) : null}
                    </div>
                    <div class="p_main" style="padding: 1em 2em;">
                        <h3 style="font-size: 22px;line-height: 36px;margin-bottom: 7px;text-align: center;">{data.zc_title}</h3>
                        <p style="font-size: 18px;line-height: 32px;text-indent: 2em;">{data.summary}</p>
                    </div>
                    <a href={data.link} class="toOriginal" style="font-size: 20px;color: #2F6EA3;font-weight: bold;text-decoration: none;width: 90%;display: block;text-align: right;">
                        &gt;&gt;阅读原文
                    </a>
                </div>

                {sheQiItems.id ? (
                    <>
                        <div class="cBar she_qi" style="margin-top: 56px;">
                            <h3
                                class="c_title"
                                style="text-align: center;background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABK0AAAACCAYAAACaPC/6AAAA9klEQVRoQ+2XMQoCMRBFN6vibRR7QRsPIYo3cK+gJxBBa5tFT2G7lYLgAWw8hxtJEdxNk2kMCbwtwy8m8/e/yahBcd5kztfJs9djvyjt8Wh9mXyUnrq6fjc/3XbztzlPUWPqltw/Nk2KvZbUjB9x5Qw/8MM3GyRslGQ/RQ35IB/ko92B5puQfJAP8kE+mh2IeWeEV/AKXsXPKzUsSu0apbW+Pg+rmT03i4nK6q2r69VqfD8uKxv21DSmbsn9Y9Pgh/+fDekZfuBHCDbCq7jmEH7gh+/tJJlDzA/mB/Pj1wH2j/b+JWFISA28glfwCl7ZDri8/jeLvsjV9/igSBApAAAAAElFTkSuQmCC) center repeat-x;"
                            >
                                <span style="display: inline-block;font-size: 36px;color: #32638C;font-weight: bold;background: #FFF;padding: 0 30px;line-height: 44px;">政策种类</span>
                            </h3>
                            <div class="pTypeList" style="text-align: center;">
                                {zcType.map((type, index) => (
                                    <div
                                        class="tIcon"
                                        style="display: inline-block;vertical-align: middle;margin: 22px 35px 0;text-align: left;width: 180px;height: 86px;background: url(data:image/png;base64, ) no-repeat;"
                                    >
                                        <i style="display: inline-block;vertical-align: middle;width: 86px;line-height: 86px;text-align: center;font-size: 40px;color: #FFF;font-family: 'cmsicon';">{zcTypeIcon[index]}</i>
                                        <span style="line-height: 86px;margin-left: 6px;font-size: 18px;color: #3B87C7;">{type}</span>
                                    </div>
                                ))}
                            </div>
                        </div>

                        <div class="cBar she_qi" style="margin-top: 56px;">
                            <h3
                                class="c_title"
                                style="text-align: center;background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABK0AAAACCAYAAACaPC/6AAAA9klEQVRoQ+2XMQoCMRBFN6vibRR7QRsPIYo3cK+gJxBBa5tFT2G7lYLgAWw8hxtJEdxNk2kMCbwtwy8m8/e/yahBcd5kztfJs9djvyjt8Wh9mXyUnrq6fjc/3XbztzlPUWPqltw/Nk2KvZbUjB9x5Qw/8MM3GyRslGQ/RQ35IB/ko92B5puQfJAP8kE+mh2IeWeEV/AKXsXPKzUsSu0apbW+Pg+rmT03i4nK6q2r69VqfD8uKxv21DSmbsn9Y9Pgh/+fDekZfuBHCDbCq7jmEH7gh+/tJJlDzA/mB/Pj1wH2j/b+JWFISA28glfwCl7ZDri8/jeLvsjV9/igSBApAAAAAElFTkSuQmCC) center repeat-x;"
                            >
                                <span style="display: inline-block;font-size: 36px;color: #32638C;font-weight: bold;background: #FFF;padding: 0 30px;line-height: 44px;">政策关键词</span>
                            </h3>
                            <div class="keywords" style="text-align: center;margin-top: 46px;">
                                {zcKey.map((key, index) =>
                                    index % 2 === 0 ? (
                                        <span style="display: inline-block;vertical-align: middle;line-height: 48px;background: #BDDCF4;padding: 0 45px;font-size: 18px;color: #32638C;margin: 10px 4px 0;">{key}</span>
                                    ) : (
                                        <span class="dBlue" style="display: inline-block;vertical-align: middle;line-height: 48px;background: #3B87C7;padding: 0 45px;font-size: 18px;color: #FFF;margin: 10px 4px 0;">
                                            {key}
                                        </span>
                                    )
                                )}
                            </div>
                        </div>

                        <div class="cBar she_qi" style="margin-top: 56px;">
                            <h3
                                class="c_title"
                                style="text-align: center;background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABK0AAAACCAYAAACaPC/6AAAA9klEQVRoQ+2XMQoCMRBFN6vibRR7QRsPIYo3cK+gJxBBa5tFT2G7lYLgAWw8hxtJEdxNk2kMCbwtwy8m8/e/yahBcd5kztfJs9djvyjt8Wh9mXyUnrq6fjc/3XbztzlPUWPqltw/Nk2KvZbUjB9x5Qw/8MM3GyRslGQ/RQ35IB/ko92B5puQfJAP8kE+mh2IeWeEV/AKXsXPKzUsSu0apbW+Pg+rmT03i4nK6q2r69VqfD8uKxv21DSmbsn9Y9Pgh/+fDekZfuBHCDbCq7jmEH7gh+/tJJlDzA/mB/Pj1wH2j/b+JWFISA28glfwCl7ZDri8/jeLvsjV9/igSBApAAAAAElFTkSuQmCC) center repeat-x;"
                            >
                                <span style="display: inline-block;font-size: 36px;color: #32638C;font-weight: bold;background: #FFF;padding: 0 30px;line-height: 44px;">适用群体</span>
                            </h3>
                            <div class="zc-user-item" style="display: flex;flex-direction: column;align-items: center;margin-top: 3em;">
                                <div
                                    class="zc-user-item_content zc-company-content"
                                    style="position: relative;padding: 12px 12px 12px 6em;box-sizing: border-box;line-height: 20px;background: #f7fafd;border: 1px dotted #3b87c7;width: 92%;"
                                >
                                    <i
                                        class="zc-user-item_icon"
                                        style="position: absolute;left: -18px;margin-top: -22px;display: inline-block;line-height: 44px;font-size: 22px;color: #3b87c7;text-align: center;background: #bddcf4;padding: 0 0.5em;"
                                    >
                                        企业类型
                                    </i>
                                    {cType.map((item) => (
                                        <span style="color: #666;font-size: 18px;margin-left: 2em;font-weight: bold;line-height: 2em;">{item}</span>
                                    ))}
                                </div>
                            </div>
                            <div class="zc-user-item" style="display: flex;flex-direction: column;align-items: center;margin-top: 3em;">
                                <div
                                    class="zc-user-item_content zc-company-content"
                                    style="position: relative;padding: 12px 12px 12px 6em;box-sizing: border-box;line-height: 20px;background: #f7fafd;border: 1px dotted #3b87c7;width: 92%;"
                                >
                                    <i
                                        class="zc-user-item_icon"
                                        style="position: absolute;left: -18px;margin-top: -22px;display: inline-block;line-height: 44px;font-size: 22px;color: #3b87c7;text-align: center;background: #bddcf4;padding: 0 0.5em;"
                                    >
                                        行业
                                    </i>
                                    {iType.map((item) => (
                                        <span style="color: #666;font-size: 18px;margin-left: 2em;font-weight: bold;line-height: 2em;">{item}</span>
                                    ))}
                                </div>
                            </div>
                            <div class="zc-user-item" style="display: flex;flex-direction: column;align-items: center;margin-top: 3em;">
                                <div
                                    class="zc-user-item_content zc-company-content"
                                    style="position: relative;padding: 12px 12px 12px 6em;box-sizing: border-box;line-height: 20px;background: #f7fafd;border: 1px dotted #3b87c7;width: 92%;"
                                >
                                    <i
                                        class="zc-user-item_icon"
                                        style="position: absolute;left: -18px;margin-top: -22px;display: inline-block;line-height: 44px;font-size: 22px;color: #3b87c7;text-align: center;background: #bddcf4;padding: 0 0.5em;"
                                    >
                                        企业规模
                                    </i>
                                    {cScale.map((item) => (
                                        <span style="color: #666;font-size: 18px;margin-left: 2em;font-weight: bold;line-height: 2em;">{item}</span>
                                    ))}
                                </div>
                            </div>
                        </div>
                    </>
                ) : null}

                {data.jie_du_items?.length ? (
                    <div class="interpret">
                        {data.jie_du_items.map((item) => (
                            <div class="iBar" style="position: relative;padding: 0px 15px 40px;border: 2px dashed #2F6EA3;margin: 80px auto 0;">
                                <h3 class="i_title" style="text-align: center;font-size: 36px;color: #32638C;">
                                    {item.jd_title}
                                </h3>
                                <div class="compare">
                                    <div class="commonText" style="border: 4px solid #3B87C7;background: #3B87C7;">
                                        <div class="iNShow qaWhite" style="padding: 20px;color: #FFFFFF;">
                                            <p style="font-size: 16px;line-height: 32px;text-indent: 2em;">{item.jd_content ? raw(item.jd_content) : null}</p>
                                        </div>
                                    </div>
                                </div>
                                {item.attach_items?.length ? (
                                    <div class="iList">
                                        {item.attach_items.map((attach) => (
                                            <img style="width: 100%;margin-top: 24px;" src={attach.file_url} />
                                        ))}
                                    </div>
                                ) : null}
                            </div>
                        ))}
                    </div>
                ) : null}

                {data.wen_da_items?.length ? (
                    <div class="qAnda">
                        <div class="swiper-container qaSwiper">
                            <div class="swiper-wrapper">
                                {data.wen_da_items.map((item) => (
                                    <div class="swiper-slide">
                                        <div class="qSlide qaWhite" style="margin-top: 2em;display: flex;flex-direction: column;align-items: center;">
                                            <h3 style="margin: 0;padding: 1em;background: #3b87c7;color: #FFF;width: 100%;">问：{item.question}</h3>
                                            <div style="border: 1px solid #3b87c7;box-sizing: border-box;padding: 1em;background: #ebf3f9;width: 100%;">答：{item.answer}</div>
                                        </div>
                                    </div>
                                ))}
                            </div>
                        </div>
                    </div>
                ) : null}
            </div>
        </div>
    );
};
