import { onMount, createSignal, Show, For } from "solid-js";
import { createStore } from "solid-js/store";
import dayjs from "dayjs"

import utils from "../../utils/index"

import "../../assets/style/CommonBigScreenHome.css";

import Usertrend from "./components/Usertrend";
import SelfPlatform from "./components/SelfPlatform";
// import Column from "./components/Column_g2";
import ListeningRate from "./components/ListeningRate_g2";
import Activity from "./components/Activity";
import Map from "./components/Map-l7";
// import Map from "./components/Map";
import NewMedia from "./components/NewMedia";
import NewMediaTrend from "./components/NewMediaTrend"

import { getWeather, getCommonData } from "../../api/bigScreen"
const [TimeDate, setTimeDate] = createSignal("");
const [eHeight, seteHeight] = createSignal(0);
const [Weather, setWeather] = createSignal("请稍候...");
const [Geography] = createSignal({
    latitude: -190,
    longitude: -190
})

function setTQ(TQ) {
    const w = TQ.lives && TQ.lives.length ? TQ.lives[0] : {};
    w.city && setWeather(`${w.city} ${w.weather} ${w.temperature}℃ ${w.winddirection}风 ${w.windpower}级`);
    !w.city && setWeather(TQ);
}

function BigScreenHome() {
    const [HeadTitle, setHeadTitle] = createSignal();
    const [proTv, setproTv] = createSignal([])
    const [oriData, setoriData] = createStore({});
    let $ele = undefined, mainHeight = document.body.offsetHeight * 0.925 - 124;

    onMount(() => {
        setTimeDate(dayjs().format('YYYY-MM-DD'));
        seteHeight(Math.floor($ele.offsetWidth / 16 * 9) + 70);
        getWeather().then(r => setTQ(r.data))
        getCommonData().then(r => {
            if (r.code != 0) return
            const d = r.data || {};
            setoriData(d || {})
            setHeadTitle([
                {
                    title: "传统媒体-覆盖终端",
                    color: "rgb(153,204,255)",
                    isMore: d.media_overview.data.totalUser >= d.media_overview.data.yesterday.totalUser,
                    value: d.media_overview.data.totalUser,
                    path: [
                        {
                            d: "M858.5 763.6c-18.9-44.8-46.1-85-80.6-119.5-34.5-34.5-74.7-61.6-119.5-80.6-0.4-0.2-0.8-0.3-1.2-0.5C719.5 518 760 444.7 760 362c0-137-111-248-248-248S264 225 264 362c0 82.7 40.5 156 102.8 201.1-0.4 0.2-0.8 0.3-1.2 0.5-44.8 18.9-85 46-119.5 80.6-34.5 34.5-61.6 74.7-80.6 119.5C146.9 807.5 137 854 136 901.8c-0.1 4.5 3.5 8.2 8 8.2h60c4.4 0 7.9-3.5 8-7.8 2-77.2 33-149.5 87.8-204.3 56.7-56.7 132-87.9 212.2-87.9s155.5 31.2 212.2 87.9C779 752.7 810 825 812 902.2c0.1 4.4 3.6 7.8 8 7.8h60c4.5 0 8.1-3.7 8-8.2-1-47.8-10.9-94.3-29.5-138.2zM512 534c-45.9 0-89.1-17.9-121.6-50.4S340 407.9 340 362c0-45.9 17.9-89.1 50.4-121.6S466.1 190 512 190s89.1 17.9 121.6 50.4S684 316.1 684 362c0 45.9-17.9 89.1-50.4 121.6S557.9 534 512 534z",
                            color: "#02ffec"
                        }
                    ]
                },
                {
                    title: "传统媒体-日活跃用户",
                    color: "rgb(0,255,0)",
                    isMore: d.media_overview.data.activeUser > d.media_overview.data.yesterday.activeUser,
                    value: d.media_overview.data.activeUser,
                    path: [
                        {
                            d: "M512.000512 64.909335c-246.926856 0-447.090665 200.158692-447.090665 447.088618 0 246.935042 200.163809 447.090665 447.090665 447.090665 246.935042 0 447.087595-200.158692 447.087595-447.090665C959.088106 265.068028 758.933507 64.909335 512.000512 64.909335zM512.000512 899.476939c-213.646891 0-387.478985-173.828001-387.478985-387.476939 0-213.646891 173.832094-387.475915 387.478985-387.475915 213.647915 0 387.474892 173.830047 387.474892 387.475915C899.476427 725.646891 725.648426 899.476939 512.000512 899.476939z",
                            color: "#02ffec"
                        },
                        {
                            d: "M159.919734 484.371756l55.255465 0 0 55.256488-55.255465 0 0-55.256488Z",
                            color: "#02f5e2"
                        },
                        {
                            d: "M807.639812 484.370733l55.256488 0 0 55.256488-55.256488 0 0-55.256488Z",
                            color: "#02f5e2"
                        },
                        {
                            d: "M484.370221 164.528194l55.256488 0 0 55.256488-55.256488 0 0-55.256488Z",
                            color: "#02f5e2"
                        },
                        {
                            d: "M484.370221 253.55174l55.256488 0 0 286.079574-55.256488 0 0-286.079574Z",
                            color: "#02f5e2"
                        },
                        {
                            d: "M682.960649 660.67276l-39.071863 39.071863-159.509552-159.509552 39.071863-39.071863 159.509552 159.509552Z",
                            color: "#02f5e2"
                        },
                        {
                            d: "M484.371244 802.527886l55.256488 0 0 55.256488-55.256488 0 0-55.256488Z",
                            color: "#02f5e2"
                        }
                    ]
                },
                {
                    title: "传统媒体-日收视次数",
                    color: "rgb(153,204,0)",
                    isMore: d.media_overview.data.timeCount > d.media_overview.data.yesterday.timeCount,
                    value: d.media_overview.data.timeCount,
                    key: '次',
                    path: [
                        {
                            d: "M682.666667 853.333333H213.333333V213.333333h469.333334v256h170.666666v384h-170.666666z m0-42.666666h128v-298.666667h-128v298.666667z m-42.666667-298.666667V256H256v554.666667h384v-298.666667zM341.333333 384V298.666667h42.666667v85.333333H341.333333z m85.333334 0V298.666667h42.666666v85.333333h-42.666666z m-85.333334 128v-85.333333h42.666667v85.333333H341.333333z m85.333334 0v-85.333333h42.666666v85.333333h-42.666666z m-85.333334 128v-85.333333h42.666667v85.333333H341.333333z m85.333334 0v-85.333333h42.666666v85.333333h-42.666666z m-85.333334 128v-85.333333h42.666667v85.333333H341.333333z m85.333334 0v-85.333333h42.666666v85.333333h-42.666666z m85.333333-384V298.666667h42.666667v85.333333h-42.666667z m0 128v-85.333333h42.666667v85.333333h-42.666667z m0 128v-85.333333h42.666667v85.333333h-42.666667z m0 128v-85.333333h42.666667v85.333333h-42.666667z m213.333333-170.666667v-42.666666h42.666667v42.666666h-42.666667z m0 85.333334v-42.666667h42.666667v42.666667h-42.666667z m0 85.333333v-42.666667h42.666667v42.666667h-42.666667z",
                            color: "#02ffec"
                        }
                    ]
                },
                {
                    title: "传统媒体-日收视时长",
                    color: "rgb(0,153,255)",
                    isMore: d.media_overview.data.watchCount > d.media_overview.data.yesterday.watchCount,
                    value: d.media_overview.data.watchCount,
                    key: '小时',
                    path: [
                        {
                            d: 'M920.900621 803.267543 112.32753 803.267543c-49.059901 0-88.982874-39.921757-88.982874-88.982874L23.344655 172.240573c0-49.07328 39.922973-88.996254 88.982874-88.996254l808.573091 0c49.061117 0 88.981658 39.922973 88.981658 88.996254l0 542.044096C1009.882279 763.345786 969.961738 803.267543 920.900621 803.267543zM112.32753 104.039587c-37.593738 0-68.188823 30.595085-68.188823 68.202202l0 542.044096c0 37.594954 30.595085 68.190039 68.188823 68.190039l808.573091 0c37.592522 0 68.190039-30.593869 68.190039-68.190039L989.09066 172.240573c0-37.605901-30.596301-68.202202-68.190039-68.202202L112.32753 104.038371z',
                            color: "#02ffec"
                        },
                        {
                            d: 'M908.227878 636.659706 124.997841 636.659706 124.997841 163.603549l783.230037 0L908.227878 636.659706zM145.791892 615.866871l741.643151 0L887.435043 184.397601 145.791892 184.397601 145.791892 615.866871z',
                            color: "#02ffec"
                        },
                        {
                            d: "M516.613467 943.368317c-5.740988 0-10.397026-4.657255-10.397026-10.397026l0-109.736787c0-5.739771 4.656038-10.394593 10.397026-10.394593 5.739771 0 10.397026 4.654822 10.397026 10.394593l0 109.736787C527.010493 938.711062 522.353239 943.368317 516.613467 943.368317z",
                            color: "#02ffec"
                        },
                        {
                            d: "M682.963447 943.368317 350.263488 943.368317c-5.739771 0-10.397026-4.657255-10.397026-10.397026 0-5.738555 4.657255-10.395809 10.397026-10.395809l332.699958 0c5.739771 0 10.397026 4.657255 10.397026 10.395809C693.360472 938.711062 688.703218 943.368317 682.963447 943.368317z",
                            color: "#02ffec"
                        },
                        {
                            d: "M608.966739 494.002247c-2.66737 0-5.320144-1.01562-7.350167-3.046859-4.062478-4.061262-4.062478-10.640288 0-14.70155l168.08079-168.082006c4.061262-4.061262 10.641504-4.061262 14.70155 0 4.062478 4.062478 4.062478 10.641504 0 14.702766L616.318122 490.955388C614.285667 492.986628 611.632893 494.002247 608.966739 494.002247z",
                            color: "#02ffec"
                        },
                        {
                            d: 'M270.486871 470.89234c-2.66737 0-5.32136-1.01562-7.350167-3.044426-4.062478-4.062478-4.062478-10.640288 0-14.703983l110.899581-110.899581c4.061262-4.060046 10.640288-4.060046 14.70155 0 4.061262 4.063695 4.061262 10.641504 0 14.703983l-110.899581 110.899581C275.807015 469.87672 273.153025 470.89234 270.486871 470.89234z',
                            color: "#02ffec"
                        },
                        {
                            d: 'M270.486871 470.89234c-2.66737 0-5.32136-1.01562-7.350167-3.044426-4.062478-4.062478-4.062478-10.640288 0-14.703983l110.899581-110.899581c4.061262-4.060046 10.640288-4.060046 14.70155 0 4.061262 4.063695 4.061262 10.641504 0 14.703983l-110.899581 110.899581C275.807015 469.87672 273.153025 470.89234 270.486871 470.89234z',
                            color: "#02ffec"
                        },
                        {
                            d: "M259.225048 478.982024c0 9.090708-7.365979 16.462768-16.462768 16.462768-9.08341 0-16.461552-7.37206-16.461552-16.462768 0-9.089492 7.378142-16.462768 16.461552-16.462768C251.857853 462.519255 259.225048 469.892532 259.225048 478.982024z",
                            color: "#02ffec"
                        },
                        {
                            d: "M417.776042 331.984768c0 9.090708-7.363546 16.461552-16.461552 16.461552-9.084626 0-16.462768-7.370844-16.462768-16.461552 0-9.098006 7.376926-16.462768 16.462768-16.462768C410.411279 315.521999 417.776042 322.886762 417.776042 331.984768z",
                            color: "#02ffec"
                        },
                        {
                            d: "M597.122303 505.839385c0 9.09314-7.364763 16.462768-16.462768 16.462768-9.08341 0-16.460336-7.370844-16.460336-16.462768 0-9.089492 7.376926-16.460336 16.460336-16.460336C589.757541 489.37905 597.122303 496.749894 597.122303 505.839385z",
                            color: "#02ffec"
                        },
                        {
                            d: "M533.075019 704.246455c0 9.090708-7.364763 16.462768-16.461552 16.462768-9.084626 0-16.462768-7.373277-16.462768-16.462768 0-9.089492 7.378142-16.462768 16.462768-16.462768C525.711473 687.783687 533.075019 695.156963 533.075019 704.246455z",
                            color: "#02ffec"
                        },
                        {
                            d: "M813.721736 293.571236c0 9.090708-7.36233 16.462768-16.459119 16.462768-9.084626 0-16.462768-7.37206-16.462768-16.462768 0-9.089492 7.378142-16.461552 16.462768-16.461552C806.359406 277.109684 813.721736 284.481745 813.721736 293.571236z",
                            color: "#02ffec"
                        },
                        {
                            d: "M552.934944 494.002247c-2.706292 0-5.40042-1.042378-7.443823-3.140515L414.66107 356.852244c-4.006528-4.100184-3.926252-10.680426 0.189745-14.700334 4.102617-3.978553 10.680426-3.954227 14.70155 0.190961l130.826402 134.007056c4.007744 4.102617 3.927468 10.681642-0.188528 14.703983C558.173595 493.013387 555.562176 494.002247 552.934944 494.002247z",
                            color: "#02ffec"
                        }
                    ]
                },
                {
                    title: "新媒体月度传播力",
                    color: "rgb(255,153,0)",
                    value: d.media_month_play.data,
                    path: [
                        {
                            d: "M294.4 684.032c-95.232 0-174.592-79.36-174.592-174.592s79.36-174.592 174.592-174.592 174.592 79.36 174.592 174.592-78.848 174.592-174.592 174.592z m0-293.376c-65.024 0-118.784 53.76-118.784 118.784s53.76 118.784 118.784 118.784 118.784-53.76 118.784-118.784-53.248-118.784-118.784-118.784zM732.672 1013.248c-86.016 0-156.16-69.632-156.16-156.16s69.632-156.16 156.16-156.16 156.16 69.632 156.16 156.16-70.144 156.16-156.16 156.16z m0-256c-55.808 0-99.84 44.032-99.84 99.84s44.032 99.84 99.84 99.84 99.84-44.032 99.84-99.84-44.032-99.84-99.84-99.84zM667.136 291.84c-79.36 0-141.824-62.976-141.824-141.824s62.976-141.824 141.824-141.824S808.96 71.168 808.96 150.016 745.984 291.84 667.136 291.84z m0-227.84c-46.592 0-86.016 39.424-86.016 86.016s39.424 86.016 86.016 86.016 86.016-39.424 86.016-86.016-39.424-86.016-86.016-86.016z",
                            color: "#02ffec"
                        },
                        {
                            d: "M573.44 259.072L401.408 398.848c-11.776 9.216-30.208 7.168-39.424-4.608l-2.56-2.56c-9.216-11.776-7.168-30.208 4.608-39.424l172.032-139.776c11.776-9.216 30.208-7.168 39.424 4.608l2.56 2.56c9.216 13.824 7.168 30.208-4.608 39.424zM588.288 785.408l-177.152-134.144c-13.312-10.24-14.336-26.624-6.656-39.936l2.56-2.048c10.24-13.312 26.624-14.336 39.936-6.656l177.152 134.144c13.312 10.24 14.336 26.624 6.656 39.936l-2.56 2.048c-10.24 13.824-27.136 17.408-39.936 6.656z",
                            color: "#02ffec"
                        }
                    ]
                },
                {
                    title: "重大活动传播总量",
                    color: "rgb(0,204,255)",
                    value: d.activity_total.data,
                    path: [
                        {
                            d: "M910.4 0H115.2C52.8 0 1.6 51.2 1.6 113.6v793.6c0 62.4 51.2 113.6 113.6 113.6h793.6c62.4 0 113.6-51.2 113.6-113.6V113.6C1024 51.2 972.8 0 910.4 0z m-568 795.2H228.8V396.8h113.6v398.4z m227.2 0H456v-568h113.6v568z m227.2 0H683.2V568h113.6v227.2z",
                            color: "#02ffec"
                        }
                    ]
                }
            ])
            setproTv([
                {
                    text: "陕台频道收视率",
                    color: "rgb(0,153,255)",
                    value: d.cm_tv_overview.data.watchRate
                },
                {
                    text: "陕台频道忠诚度",
                    color: "rgb(41,242,178)",
                    value: d.cm_tv_overview.data.occRate
                },
                {
                    text: "陕台频道市场份额",
                    color: "rgb(96,117,255)",
                    value: d.cm_tv_overview.data.loyalty
                },
            ])
        })
    })

    document.title = "集团大数据平台";

    return (
        <div class="home">
            <div class="homeHeader">
                <div class="sz">
                    <img style={{ "vertical-align": 'middle', width: '115px', "margin-right": '3px' }}
                        src="https://cxzx.smcic.net/topic/tool/img/jtlogo.png" alt="" />
                    <span style={{ "vertical-align": 'middle' }}>
                        {TimeDate()}
                    </span>
                </div>
                <div class="tq">{Weather()}</div>
                <div class="headTitle">陕西广电融媒体集团大数据平台</div>
                {/* <div className="tq">
                    <iframe style="height: 5em; " src="//i.tianqi.com/index.php?c=code&id=10&color=%23C6C6C6&icon=1&site=16" frameborder="0"></iframe>
                </div> */}
            </div>
            <div class="body">
                <div style={{ "display": "flex", "width": "100%" }}>
                    <For each={HeadTitle()}>{title =>
                        <div class="itemHeader">
                            <div class="itemMain">
                                <div class="icons">
                                    <svg t="1650243218920" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32">
                                        <For each={title.path}>{dItem =>
                                            <path d={dItem.d} fill={dItem.color}></path>
                                        }</For>
                                    </svg>
                                    <svg
                                        t="1650263511830"
                                        class="img"
                                        viewBox="0 0 1077 1024"
                                        version="1.1"
                                        xmlns="http://www.w3.org/2000/svg"
                                    >
                                        <path d="M794.211994 1024h-0.832916l-563.050769-6.108046a83.91622 83.91622 0 0 1-79.265776-61.358096L3.15065 428.396123a83.291534 83.291534 0 0 1 33.316614-91.551278L509.077309 14.506609a83.291534 83.291534 0 0 1 97.173457 2.359927l437.83583 330.112112a83.91622 83.91622 0 0 1 27.763844 96.340541l-199.760862 526.402495a83.707992 83.707992 0 0 1-77.877584 54.278316zM556.275845 83.360944L83.457571 405.69918l147.564834 528.415373 563.189589 6.246865 199.760862-526.471904z" fill="#02ffec"></path>
                                        <path d="M229.888 942.08L51.712 394.24l466.432-338.944L984.576 394.24l-178.176 547.84z" fill="rgba(3, 76, 117, 1)" ></path>
                                    </svg>
                                </div>
                                <div class="text">
                                    <span class="textNum" style={{ color: title.color }}>{utils.formatNum(title.value, 2) + (title.key || "")}</span>
                                    <Show when={title.isMore != undefined && title.isMore}>
                                        <img class='ismore' src="https://cxzx.smcic.net/topic/tool/img/up.png" alt="" />
                                    </Show>
                                    <Show when={title.isMore != undefined && !title.isMore}>
                                        <img class='ismore' src="https://cxzx.smcic.net/topic/tool/img/down.png" alt="" />
                                    </Show>
                                    <br />
                                    {title.title}
                                </div>
                            </div>
                        </div>
                    }
                    </For>
                </div>
                <div class="main">
                    <div ref={$ele} class="mainbody left">
                        <Show when={eHeight() > 0 && oriData.watch_rank && oriData.watch_rank.name} >
                            <ListeningRate
                                title={oriData.watch_rank.name}
                                list={oriData.watch_rank.data}
                                width={Math.floor($ele.offsetWidth)}
                                height={(mainHeight - 54) / 3}
                            />
                        </Show>
                        {/* <Show when={eHeight() > 0 && oriData.schedule_rank && oriData.schedule_rank.name} >
                            <div style={{ "margin-bottom": "6px", "margin-top": "6px" }}>
                                <Column
                                    title={oriData.schedule_rank.name}
                                    list={oriData.schedule_rank.data}
                                    width={Math.floor($ele.offsetWidth)}
                                    height={(mainHeight - 54) / 3}
                                />
                            </div>
                        </Show> */}
                        <Show when={eHeight() > 0 && oriData.user_trend && oriData.user_trend.name} >
                            <div style={{ "margin-bottom": "6px", "margin-top": "6px" }}>
                                <Usertrend
                                    title={oriData.user_trend.name}
                                    list={oriData.user_trend.data}
                                    width={Math.floor($ele.offsetWidth)}
                                    height={(mainHeight - 54) / 3}
                                />
                            </div>
                        </Show>
                        <Show when={eHeight() > 0 && oriData.activity_spread && oriData.activity_spread.name}>
                            <Activity
                                styleCss={{ marginLeft: '6px' }}
                                title={oriData.activity_spread.name}
                                list={oriData.activity_spread.data}
                                width={Math.floor($ele.offsetWidth)}
                                height={(mainHeight - 104) / 3 + 20}
                            />
                        </Show>
                    </div>
                    <div class="mainbody center">
                        <div style={{ "margin-bottom": "6px" }}>
                            <Show when={eHeight() > 0 && oriData.cm_area && oriData.cm_area.name}>
                                <Map
                                    title={oriData.cm_area.name}
                                    Geography={Geography()}
                                    li={oriData.cm_area.data}
                                    width={Math.floor($ele.offsetWidth)}
                                    height={mainHeight - 130}
                                    setfun={setTQ}
                                />
                            </Show>
                        </div>
                        <div class="flex">
                            <For each={proTv()} >{item => <div class="flexItem">
                                <p class="textNum" style={{ color: item.color }}>{utils.formatNum(item.value, 2)}%</p>
                                {item.text}
                            </div>
                            }</For>
                        </div>
                    </div>
                    <div class="mainbody right">
                        <Show when={eHeight() > 0 && oriData.media_read_trend && oriData.media_read_trend.name}>
                            <div style={{ "margin-bottom": "6px", "margin-top": "6px" }}>
                                <SelfPlatform
                                    styleCss={{ marginBottom: '6px' }}
                                    title={oriData.media_read_trend.name}
                                    list={oriData.media_read_trend.data}
                                    width={Math.floor($ele.offsetWidth - 20)}
                                    height={(mainHeight - 104) / 3}
                                />
                            </div>
                        </Show>
                        <Show when={eHeight() > 0 && oriData.media_spread_trend && oriData.media_spread_trend.name}>
                            <NewMediaTrend
                                styleCss={{ marginBottom: '6px' }}
                                title={oriData.media_spread_trend.name}
                                list={oriData.media_spread_trend.data}
                                width={Math.floor($ele.offsetWidth - 20)}
                                height={(mainHeight - 104) / 3}
                            />
                        </Show>
                        <Show when={eHeight() > 0 && oriData.media_spread && oriData.media_spread.name}>
                            <NewMedia
                                title={oriData.media_spread.name}
                                list={oriData.media_spread.data}
                                width={Math.floor($ele.offsetWidth - 20)}
                                height={(mainHeight - 104) / 3 + 20}
                            />
                        </Show>
                    </div>
                </div>
            </div >
        </div >
    );
}

export default BigScreenHome;