<template>
  <div class="kf-card-container1 w-100 h-100 flex-column-start-start" v-show="props.show" :style="cardStyle" ref="cardBox"
       :class="'vivify '+ buttonClass">
    <div class="kf-light-title" v-if="props.showTitle">
      {{ title }}</div>
    <div class="kf-card-cons flex-row-start-center" v-if="data?.length>0">
      <div class="kf-card-cons-item mb5" v-for="(item,index) in data" :key="'kf-card'+index">
        <div class="kf-card-cons-item1 kf-cards-title2">{{item.label.zhCN}}</div>
        <div class="kf-card-cons-item2 kf-cards-title1">
          {{item.valueToLabel?item.valueToLabel:item.value}}
<!--          <div class="kf-cards-title2" v-if="item.unit" >{{item.unit}}</div>-->
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  ref,
  watch,
  onMounted,
  getCurrentInstance,
  computed,
  nextTick,
} 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";
export default {
  name: "kfCard",
  props: {
    props: {
      type: Object,
      default: () => { },
    },
    eventList: {
      type: Array,
      default: () => [],
    },
    eventScript: {
      type: String,
    },
  },
  widgetConfig: {
    parent: "base",
    rank: 6,
    label: {
      zh: Kf.t('IndividualIndicators'),
    },
    category: Kf.t('Operations'),
    component: "kfCard",
    display: true,
    version: 1,
    icon: "icon-anniu",
    defaultSize: {
      x: 190,
      y: 130,
    },
    minSize:{
      width: 190,
      height: 130
    },
    imgName: "kfCard",
    state: {
      isAdd: false,
      isCondition: false,
    },
  },
  setup(props) {
    let cardBox = ref(null);
    let cardStyle = ref({});
    const { proxy, type } = getCurrentInstance();
    let defaultHandler = ref({});
    let defaultSize = type.widgetConfig.defaultSize;
    let buttonClass = ref("");
    const locale = window.Kf.locale.value.replace("-", "");
    let cardData = ref([
      {
        label: { zhCN: Kf.t('Indicators')+'1'},
        value: "1",
        unit: "%",
        unitColor: "#fff",
        unitFontSize: 12,
      },
    ]);
    let bindDevice = null;
    let bindModel = null;
    onMounted(() => {
      refreshEvents();
      cardStyle.value = styleManager.updateStyle(proxy);
      cardBox.value.style.setProperty("--titleColor", props.props["titleColor"] !== undefined && props.props["titleColor"] ? props.props["titleColor"] : "#166CE4");
      buttonClass.value = styleManager.updateClass(proxy);
    });

    const dataVersion = ref(0);
    const updateData = function () {
      dataVersion.value = new Date().getTime();
    };

    const refreshEvents = function () {
      eventManager.registerEvent(proxy);
    };

    pageModel.watchProps(props, watch, proxy, (changes) => {
      refreshEvents();
      if (styleManager.styleChanged("kfCard", changes)) {
        cardStyle.value = styleManager.updateStyle(proxy);
      }
      if (styleManager.classChanged("kfCard", changes)) {
        buttonClass.value = styleManager.updateClass(proxy);
      }
      if (changes && changes["titleName"] !== undefined) {
        // loadTitle();
      }
      if (changes && changes["isShowTitle"] !== undefined) {
        if (props.props.isShowTitle) {
          pageModel.updatePropValue("height", defaultSize.y);
        } else {
          pageModel.updatePropValue("height", defaultSize.y - 40);
        }
      }
      if (changes && changes["deviceId"] !== undefined) {
        watchDecviceIdChange();
      }
      if (changes && changes["deviceData"] !== undefined) {
        initCardsData(props.props["deviceData"]);
      }
      cardBox.value.style.setProperty(
          "--titleColor",
          props.props["titleColor"] !== undefined && props.props["titleColor"]
              ? props.props["titleColor"]
              : "#166CE4"
      );
    });
    const eventHandler = computed(() => {
      return eventManager.loadEventHandler(
          defaultHandler,
          undefined,
          props.props.pageName
      );
    });

    let title = computed(() => {
      let titleName = Kf.t('Title');
      watchDecviceIdChange();
      const bindData = dataModel.getDataSourceByDeviceId(props.props.deviceId);
      if (bindData) {
        titleName = bindData.deviceName;
      }
      return titleName;
    });
    let data = computed(() => {
      if (dataVersion.value > 0) {
        let _data = dataModel.getData(props.props, true);
        if (_data) {
          cardData.value[0].value = _data;
        }
        if(bindModel){
          const property = bindModel.properties.find(p => p.name === props.props.deviceData);
          cardData.value[0].label[locale] = property?.label[locale];
        }
      }
      return cardData.value;
    });



    const initCardsData = (deviceData) => {
      if (bindDevice) {
        bindModel = dataModel.getDeviceModelByDevice(bindDevice);
      } else {
        watchDecviceIdChange();
      }
      const property = bindModel.properties.find(p => p.name === deviceData);
      cardData.value[0].label[locale] = property?.label[locale];
      if(property && property.enumItems){
        let value = property.enumItems.find(e => e.value === bindDevice.data[property.name])?.label[locale];
        cardData.value[0].value = value;
      }
    };

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

    return {
      cardStyle,
      eventHandler,
      title,
      data,
      cardBox,
      buttonClass,
      updateData,
      cardData
    };
  },
};
</script>

<style lang="scss">
.kf-card-container1 {
  display: flex;
  width: 100%;
  /* padding: 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%;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 8px;
    overflow: hidden;
    .kf-card-cons-item {
      padding: 0 16px;
      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(--titleColor);
        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;
        height: 16px;
      }
    }
  }
}
</style>
