<template>
    <div class="w-100 h-100" :style="listStyle" ref="listBox" v-show="props.show" :class="'vivify '+ buttonClass">
        <el-row class="kf-alert-title" style="width: 100%" v-if="props.showToolbar">
            <el-col :span="9" class="flex-row-start-center fs14 "> 　消息日志 ({{
          listData.length > 99 ? "99+" : listData.length
        }})
            </el-col>
            <el-col :span="5" class="kf-video-input">
                <el-select v-model="currSortMethod" placeholder="排序方式" style="width: 99%;">
                    <el-option v-for="item in sortMethods" :key="item.value" :label="item.label" :value="item" />
                </el-select>
            </el-col>
            <el-col :span="5" class="kf-video-input">
                <el-select v-model="currDeviceType" placeholder="设备类型" clearable style="width: 99%;">
                    <el-option v-for="item in deviceTypes" :key="item.value" :label="item.label" :value="item" />
                </el-select>
            </el-col>
            <el-col :span="5" class="kf-video-input">
                <el-input v-model="search" placeholder="搜索" style="width: 99%;" />
            </el-col>
        </el-row>
        <el-row style="width: 100%" class="kf-alert-content">
            <el-col :span="24" class="kf-alert-list-box">
                <el-table-v2 :columns="columns" :data="listData" :height="listHeight" :width="listWidth" :header-height="5"
                             :row-height="105" header-class="hidden" style="width: 100%; height: 100%" />
            </el-col>
        </el-row>
    </div>
</template>

<script lang="jsx">
import {onMounted, ref, getCurrentInstance, computed, watch} from 'vue'
import styleManager from '../utils/style.vue'
import eventManager from '../utils/event'
import pageModel from '../model/page'
import alertModel from "@/components/ui/model/alert"
import globalEventManager from "@/utils/globalEvent";
import tools from "@/utils/tools";

export default {
  name: "kfAlertList",
  props: {
    props: {
      type: Object,
      default: () => {
      }
    },
    eventList: {
      type: Array,
      default: () => []
    },
    eventScript: {
      type: String
    }
  },
  widgetConfig: {
    parent: "base",
    rank: 1,
    label: {
      zh: "告警列表"
    },
    category: "业务",
    component: "kfAlertList",
    display: true,
    version: 1,
    icon: "icon-anniu",
    defaultSize: {
      x: 400,
      y: 400
    },
    minSize:{
      width: 400,
      height: 350
    },
    imgName: 'kfAlertList',
    state: {
      isAdd: false,
      isCondition: false
    },
  },
  setup(props) {
    let listBox = ref(null);
    let listStyle = ref({})
    const {proxy} = getCurrentInstance();
    let defaultHandler = ref({})
    let buttonClass = ref('')

    onMounted(() => {
      refreshEvents()
      listStyle.value = styleManager.updateStyle(proxy)
      buttonClass.value = styleManager.updateClass(proxy)
    })

    const refreshEvents = function (firstTime = false) {
      eventManager.registerEvent(proxy, () => {
      });
    }

    pageModel.watchProps(props, watch, proxy, (changes) => {
      if (styleManager.styleChanged("kfAlertList", changes)) {
        listStyle.value = styleManager.updateStyle(proxy)
      }
      if (styleManager.classChanged("kfAlertList", changes)) {
        buttonClass.value = styleManager.updateClass(proxy)
      }
    })

    const eventHandler = computed(() => {
      return eventManager.loadEventHandler(defaultHandler, undefined, props.props.pageName)
    });

    const weekDays = ["日", "一", "二", "三", "四", "五", "六"];
    const level = ["普通", "紧急", "严重", "危险"];

    const columns = computed(() => {
      return [{
        key: `content`,
        dataKey: `content`,
        title: `内容`,
        width: listBox.value ? listBox.value.offsetWidth : 300,
        cellRenderer: ({cellData: data}) => (
            <div class={'h-100 border-level-' + data.level} style="padding: 5px;" onClick={doClick.bind(this, data)}
                 onDblclick={doDblclick.bind(this, data)}>
              <div class="kf-table-title">{data.title} <div class="kf-table-title3"> {new Date(data.alarmTime).getFullYear()}/{new Date(data.alarmTime).getMonth() + 1}/{new Date(data.alarmTime).getDate()} 星期{weekDays[new Date(data.alarmTime).getDay()]} {new Date(data.alarmTime).getHours()}:{new Date(data.alarmTime).getMinutes()}:{new Date(data.alarmTime).getSeconds()}</div></div>
              <div class="kf-table-contents">{data.message}</div>
              <div class="flex-row-start-center kf-table-title2 kf-table-title3">来源: {data.device?.deviceType ? data.device.deviceType.name : ''}
                  <div>设备: {data.device?.deviceName ? data.device.deviceName : ''} <span style="cursor: pointer"
                                                            onClick={locateDevice.bind(this, data)}>定位</span></div>
                  <div className={'level-' + data.level}>等级: {level[data.level]}</div>
              </div>

            </div>
        )
      }];
    });

    const locateDevice = (device) => {
      if (device) {
        globalEventManager.issueEvent("/locate_device", {deviceId: device.deviceId});
      }
    }

    const doClick = (device) => {
      eventHandler.value.click(device);
    }

    const doDblclick = (alert) => {
      alertModel.showAlert(alert);
    }

    const listData = computed(() => {
      let alerts = [...alertModel.alerts.value];
    //   debugger
      if (search.value) {
        alerts = alerts.filter(alert => {
          return tools.pinyinMatch(alert.message, search.value)
              || tools.pinyinMatch(alert.title, search.value)
              || tools.pinyinMatch(alert.device.deviceName, search.value);
        })
      }
      if (currDeviceType.value?.value != null) {
        alerts = alerts.filter(alert => {
          return alert.device.deviceTypeCode === currDeviceType.value.value;
        })
      }

      switch (currSortMethod.value.value) {
        case "time":
          alerts.sort((a, b) => {
            const bDate = new Date(b.alarmTime);
            const aDate = new Date(a.alarmTime);
            return bDate.getTime() - aDate.getTime();
          })
          break;
        case "level":
          alerts.sort((a, b) => {
            return b.level - a.level;
          })
          break;
        case "deviceType":
          alerts.sort((a, b) => {
            return a.device.deviceTypeCode.localeCompare(b.device.deviceTypeCode);
          })
          break;
      }
      return alerts.filter(alert => alert != undefined).map(alert => {
        return {
          content: alert
        }
      })
    })

    const listHeight = computed(() => {
      return props?.props?.height ? (props?.props?.showToolbar? (props.props.height - 35) :(props.props.height - 5)): 300
    })

    const listWidth = computed(() => {
      return props?.props?.width ? props.props.width : 300
    })

    const sortMethods = [
      {
        label: "时间",
        value: "time"
      }, {
        label: "等级",
        value: "level"
      },
      {
        label: "设备类型",
        value: "deviceType"
      }
    ];

    const currSortMethod = ref(sortMethods[0]);

    const deviceTypes = computed(() => {
      let types = [];
      alertModel.alerts.value.forEach(alert => {
        if (!types.find(type => type.value === alert.device.deviceTypeCode)) {
            if(alert.device?.deviceType && alert.device?.deviceTypeCode){
                types.push({
            label: alert.device.deviceType,
            value: alert.device.deviceTypeCode
          })
            }
        }
      })
      return types;
    });

    const currDeviceType = ref();

    const search = ref("")

    return {
      alerts: alertModel.alerts,
      listBox,
      listStyle,
      defaultHandler,
      eventHandler,
      columns,
      listData,
      listHeight,
      listWidth,
      sortMethods,
      currSortMethod,
      deviceTypes,
      currDeviceType,
      search,
      locateDevice,
      doClick,
      doDblclick,
      buttonClass
    }
  }
}
</script>

<style lang="scss">
.level-0 {
    color: #00ff00;
}

.level-1 {
    color: #ffff00;
}

.level-2 {
    color: #ffa500;
}

.level-3 {
    color: #ff0000;
}

.border-level-0 {
    border: solid #00ff00;
    border-width: 0px 0px 0px 2px;
}

.border-level-1 {
    border: solid #ffff00;
    border-width: 0px 0px 0px 2px;
}

.border-level-2 {
    border: solid #ffa500;
    border-width: 0px 0px 0px 2px;
}

.border-level-3 {
    border: solid #ff0000;
    border-width: 0px 0px 0px 2px;
}

.hidden {
    display: none;
    height: 0px;
}

.kf-video-input {
    .el-select {
        width: 100%;

        .select-trigger {
            width: 100%;
            outline: none;
        }
    }

    .el-input {
        width: 100%;

        .el-input__wrapper {
            width: calc(100% - 4px);
            margin-left: 1px;
            padding: 0;
            outline: none;
            background: #282828;
            box-shadow: none;

            .el-input__inner {
                background: transparent;
                box-shadow: none;
                border: none;
                outline: none;
            }
        }
    }
}

.kf-alert-title {
    width: 100%;
    height: 35px;
    pointer-events: inherit;
    .kf-video-input{
        pointer-events: inherit;
        .el-select{
            pointer-events: inherit;
            .el-tooltip__trigger{
                pointer-events: inherit;
                .el-input{
                    pointer-events: inherit;
                    .el-input__wrapper{
                        pointer-events: inherit;
                        .el-input__inner{
                            pointer-events: inherit;
                        }
                    }
                    .el-input__inner{
                        pointer-events: inherit;
                    }
                    .el-input__suffix{
                        pointer-events: inherit;
                        .el-input__suffix-inner{
                            pointer-events: inherit;
                        }
                    }
                }
            }
        }
    }
}

.kf-alert-content {
    width: 100%;
    height: calc(100% - 35px);

    .kf-alert-list-box {
        width: 100%;
        height: 100%;

        .el-table-v2 {
            width: 100%;
            height: 100%;

            .el-table-v2__header-wrapper {
                display: none;
            }

            .el-table-v2__main {
                width: 100%;
                height: 100%;
                background: transparent;
                .el-table-v2__body {
                    width: 100%;
                    height: 100%;
                    .el-table-v2__row {
                        border-bottom: 5px solid #000;
                        background: #141414;
                    }
                }
            }
        }
    }
}
.fs14 {
    font-size: 14px;
}
.kf-table-title {
    font-size: 14px;
    color: #fff;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    gap: 8px;
    height: 30px;
}
.kf-table-title3 {
    font-size: 14px;
    color: #aaa;
}
.kf-table-contents {
    font-size: 14px;
    color: #fff;
    height: calc(100% - 60px);
}
.kf-table-title2 {
    height: 30px;
    gap: 30px;
}
.kf-alert-title {
    .el-col{
        height: 100%;
        .el-input{
            line-height: 100%;
            height: 100%;
            .el-input__wrapper{
                line-height: 100%;
                height: 100%;
                .el-input__inner{
                    line-height: 100%;
                    height: 100%;
                }

            }
        }
        .el-select{
            line-height: 100%;
            height: 100%;
            .select-trigger {
                line-height: 100%;
                height: 100%;
                .el-input{
                    line-height: 100%;
                    height: 100%;
                    .el-input__wrapper{
                        line-height: 100%;
                        height: 100%;
                        .el-input__inner{
                            line-height: 100%;
                            height: 100%;
                        }

                    }
                }
            }
        }
    }
}
</style>