<template>
    <div class="kf-card-container w-100 h-100 flex-column-start-start" v-show="props.show" :style="cardStyle" ref="cardsBoxs"
         :class="'vivify '+ buttonClass">
        <div class="kf-light-title" v-if="title.isShow" :style="'fontSize:'+title.fontSize+'px'">
            {{ title.content }}</div>
        <div class="kf-card-cons flex-row-start-center">
            <div class="kf-card-cons-item mb5" v-for="(item,index) in dataList" :key="item.titleName+index" v-show="item.isShow">
                <div class="kf-card-cons-item1 kf-cards-title2" :style="'color:'+item.titleColor+';fontSize:'+item.titleFontSize+'px'">
                    {{item.titleName}}
                </div>
                <div class="kf-card-cons-item2 kf-cards-title1" :style="'color:'+props.valueColor">
                    {{item.value}}
                    <div class="kf-cards-title3" v-if="item.unit" :style="'color:'+props.unitColor">
                        {{item.unit}}</div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { ref, watch, onMounted, getCurrentInstance, computed } from "vue";
import styleManager from "../utils/style.vue";
import eventManager from "../utils/event";
import pageModel from "../model/page";
import dataModel from "@/components/ui/model/data";
import stateManager from "@/components/ui/utils/state";
import { ElScrollbar } from "element-plus";
export default {
    name: "kfCards",
    props: {
        props: {
            type: Object,
            default: () => { },
        },
        eventList: {
            type: Array,
            default: () => [],
        },
        eventScript: {
            type: String,
        },
    },
    widgetConfig: {
        parent: "base",
        rank: 6,
        label: {
            zh: Kf.t('IndicatorCard'),
        },
        category: Kf.t('Operations'),
        component: "kfCards",
        display: true,
        version: 1,
        icon: "icon-anniu",
        defaultSize: {
            x: 444,
            y: 130,
        },
        minSize: {
            width: 444,
            height: 130,
        },
        imgName: "kfCards",
        state: {
            isAdd: false,
            isCondition: false,
        },
    },
    setup(props) {
        let bindData = null;
        let bindDevice = null,
            bindModel = null;
        let cardsBoxs = ref(null);
        let cardStyle = ref({});
        const { proxy } = getCurrentInstance();
        let defaultHandler = ref({});
        let buttonClass = ref("");

        const locale = window.Kf.locale.value.replace("-", "");

        let cardsData = ref([]);

        let dataVersion = ref(0);

        const updateData = function () {
            dataVersion.value++;
        };

        onMounted(() => {
            refreshEvents();
            cardStyle.value = styleManager.updateStyle(proxy);
            /*cardsBoxs.value.style.setProperty(
              "--valueColor",
              props.props["valueColor"] != undefined &&
                props.props["valueColor"]
                ? props.props["valueColor"]
                : "#166CE4"
            );
              cardsBoxs.value.style.setProperty(
                  "--unitColor",
                  props.props["unitColor"] != undefined &&
                  props.props["unitColor"]
                      ? props.props["unitColor"]
                      : "#fff"
              );*/
            buttonClass.value = styleManager.updateClass(proxy);
        });
        const refreshEvents = function () {
            eventManager.registerEvent(proxy);
        };
        /*watch(props,(newValue,oldValue)=>{
            refreshEvents();
            cardStyle.value = styleManager.updateStyle(proxy)
        });*/
        pageModel.watchProps(props, watch, proxy, (changes) => {
            refreshEvents();
            if (styleManager.styleChanged("kfCards", changes)) {
                cardStyle.value = styleManager.updateStyle(proxy);
            }
            if (styleManager.classChanged("kfCards", changes)) {
                buttonClass.value = styleManager.updateClass(proxy);
            }
            if (changes && changes["deviceId"] !== undefined) {
                console.log(changes, "====");
                bindDevice = null;
                bindModel = null;
                watchDecviceIdChange(changes);
            }
            if (changes && changes["deviceData"] !== undefined) {
                initCardsData(props.props["deviceData"]);
            }
            /* if(changes && changes['dataList']!=undefined && disabledH){
                if(props.props.dataList.title.isShow) {
                    pageModel.updatePropValue('height',defaultSize.y)
                }else{
                    pageModel.updatePropValue('height',(defaultSize.y - 40))
                }
            }*/
            if (cardsBoxs.value?.style) {
                /* cardsBoxs.value.style.setProperty(
                   "--valueColor",
                   props.props["valueColor"] != undefined &&
                     props.props["valueColor"]
                     ? props.props["valueColor"]
                     : "#166CE4"
                 );
                   cardsBoxs.value.style.setProperty(
                       "--unitColor",
                       props.props["unitColor"] != undefined &&
                       props.props["unitColor"]
                           ? props.props["unitColor"]
                           : "#fff"
                   );*/
            }
        });

        const title = computed(() => {
            let title = props.props.dataList.title;
            if (bindData) {
                title.content = bindData.deviceName;
            }
            return title;
        });

        const dataList = computed(() => {
            // debugger;
            if (props.props?.deviceId) {
                watchDecviceIdChange();
                const deviceData = props.props.deviceData;
                if ((dataVersion.value > 0 || props.props.pageType===1) && props.props.deviceData) {
                    let changeData = dataModel.getData(props.props, true);
                    if (Array.isArray(changeData)) {
                        for (let i = 0; i < changeData.length; i++) {
                            let _data = changeData[i];
                            if (cardsData.value[i] && deviceData[i]) {
                                cardsData.value[i].value = _data;
                            }
                        }
                    } else if (cardsData.value.length === 1) {
                        cardsData.value[0].value = changeData;
                    }
                }
            } else {
                cardsData.value = props.props.dataList.data;
            }
            return cardsData.value;
        });

        const initCardsData = (deviceData) => {
            cardsData.value = [];
            if (bindDevice) {
                title.value.content = bindDevice?.deviceName;
                bindModel = dataModel.getDeviceModelByDevice(bindDevice);
            } else {
                return;
            }
            if (Array.isArray(deviceData)) {
                for (let i = 0; i < deviceData.length; i++) {
                    if (bindModel && bindModel?.properties?.length > 0) {
                        cardsData.value[i] = createPanelTemplate();
                        const property = bindModel.properties.find(
                            (prop) => prop.name === deviceData[i]
                        );
                        if (property?.label && property?.label[locale]) {
                            cardsData.value[i].titleName = property.label[locale];
                        } else {
                            cardsData.value[i].titleName = property && property.name ? property.name : '';
                        }
                    }
                }
            } else if (deviceData && typeof deviceData === "string") {
                cardsData.value[0] = createPanelTemplate();
                cardsData.value[0].titleName =
                    bindModel.properties[0].label[locale];
            }
        };

        const watchDecviceIdChange = () => {
            const { deviceId } = props.props;
            if (deviceId && !bindDevice) {
                bindDevice = dataModel.getDataSourceByDeviceId(deviceId);
                if (bindDevice) {
                    bindModel = dataModel.getDeviceModelByDevice(bindDevice);
                    title.value.content = bindDevice.deviceName;
                    initCardsData(props.props["deviceData"]);
                }
            } else {
                return;
            }
        };

        const createPanelTemplate = () => {
            let panelTemplate = {
                titleName: "default",
                value: Kf.t('Open'),
                unit: "",
                isShow: true,
                color: "#ffffff8c",
                fontSize: 16,
                valueColor: "#166CE4",
                valueFontSize: 32,
                unitColor: "#ffffff8c",
                unitFontSize: 16,
            };
            return panelTemplate;
        };

        const changePropertyLabel = () => { };

        const eventHandler = computed(() => {
            return eventManager.loadEventHandler(
                defaultHandler,
                undefined,
                props.props.pageName
            );
        });
        return {
            cardStyle,
            eventHandler,
            cardsBoxs,
            buttonClass,
            updateData,
            title,
            dataList,
        };
    },
};
</script>

<style lang="scss">
.kf-card-container {
  display: flex;
  width: 100%;
  /* padding: 0px 8px 16px 8px;*/
  flex-direction: column;
  align-items: center;
  gap: 16px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: #1c1c1c;
  //box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.2);
  .kf-light-title {
    border-top-left-radius:5px;
    border-top-right-radius: 5px;
    display: flex;
    height: 40px;
    padding: 4px 4px 4px 8px;
    align-items: center;
    gap: 4px;
    align-self: stretch;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.9);
    font-family: Open Sans;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
  }
  .kf-card-cons {
    width: 100%;
    padding: 0px 8px 0 8px;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 8px;
    overflow: hidden;
    .kf-card-cons-item {
      width: calc((100% - 16px) / 3);
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      align-items: flex-start;
      gap: 8px;
      .kf-card-cons-item1 {
        display: flex;
        /*  height: 12px;*/
        justify-content: center;
        align-items: center;
        gap: 10px;
      }
      .kf-card-cons-item2 {
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: flex-end;
      }
      .kf-cards-title1 {
        color: var(--valueColor);
        text-align: right;
        leading-trim: both;
        text-edge: cap;
        font-family: Alibaba PuHuiTi;
        font-size: 32px;
        font-style: normal;
        font-weight: 500;
      }
      .kf-cards-title2 {
        color: rgba(255, 255, 255, 0.55);
        text-align: right;
        font-family: Alibaba PuHuiTi;
        font-size: 16px;
        font-style: normal;
        font-weight: 400;
      }
      .kf-cards-title3{
        color:  var(--unitColor);;
        text-align: right;
        font-family: Alibaba PuHuiTi;
        font-size: 16px;
        font-style: normal;
        font-weight: 400;
      }
    }
  }
}
</style>