<template>
  <a-spin
    ref="container"
    :spinning="isLoading"
    :tip="tipMsg"
    :style="{ minHeight: '45px', height: '100%', width: '100%' }"
  >
    <a-icon slot="indicator" :type="spinIcon" style="font-szie: 24px" :spin="spinIcon === 'loading'" />
    <a-alert v-show="topAlert.visible" :type="topAlert.type" :showIcon="topAlert.showIcon">
      <p slot="message" style="margin-bottom: 0px">
        <count-down
          style="font-size: 14px"
          v-if="topAlert.countDown"
          :target="new Date().getTime() + config.interval * 1000"
        />
        {{ topAlert.txt }}
      </p>
    </a-alert>
    <a-list>
      <a-list-item :key="index" v-for="(item, index) in warnList">
        <a-list-item-meta>
          <div slot="title">
            <span>{{ item.jh }}</span>
            &nbsp; 在&nbsp;<a href="#">{{ item.warnTime }}</a> &nbsp; <span>{{ item.source }}</span>
            &nbsp;
          </div>
          <div slot="description">{{ item.warnMsg }}</div>
        </a-list-item-meta>
      </a-list-item>
    </a-list>
  </a-spin>
</template>

<script>
import { SlickList, SlickItem } from 'vue-slicksort'
import elementResizeDetector from 'element-resize-detector'
import TextHighlight from 'vue-text-highlight'
import JEllipsis from '@/components/jeecg/JEllipsis'
import { mapState } from 'vuex'
import _ from 'lodash'
import vue from 'vue'
import warnApi from '@/api/warnApi'
import CountDown from '@/components/CountDown/CountDown'
import { EVENT_ALL_WARN } from '@/WsMgr'
import { decode } from 'querystring'
import moment from 'moment'

const keysStoreKey = 'KEYFOCUS_KEYWORDS'
function sortWarn(src, type, keyWords) {
  switch (type) {
    case 'timeDesc':
      return _.sortBy(src, ['queryTime'], ['desc'])
    case 'timeAsc':
      return _.sortBy(src, ['queryTime'], ['asc'])
    case 'keyAsc':
      return _.sortBy(
        src,
        [
          p => {
            let exist = false
            _.each(keyWords, k => {
              exist = p.includes(k)
              return !exist
            })
            return exist ? 99 : 0
          },
          'queryTime'
        ],
        ['desc', 'desc']
      )
  }
}
export default {
  name: 'TextWarn',
  components: {
    SlickList,
    SlickItem,
    TextHighlight,
    JEllipsis,
    CountDown
  },
  props: {
    widgetItemData: {
      type: Object,
      default: () => undefined
    }
  },
  data() {
    return {
      isLoading: false,
      tipMsg: '正在查询最新数据...',
      spinIcon: 'loading',
      warnList: [],
      descriptionColumn: 1,
      preContentSpan: 1,
      contentSpan: 1,
      topAlert: {
        visible: false,
        type: 'info',
        txt: '',
        showIcon: false,
        countDown: false
      },

      configVisible: false,
      labelCol: { span: 6 },
      wrapperCol: { span: 14 },
      config: {
        jh: '井号123',
        keyWordsCmb: [],
        type: [],
        typeEnable: 0,
        interval: 30,
        sortType: 'timeDesc',
        coordinate: ['', '']
      },
      configSnap: {},
      isRunning: true
    }
  },
  created() {
    this.$bus.on(EVENT_ALL_WARN, this.setWebsocketWarn)
  },
  mounted() {
    const that = this
    const erd = elementResizeDetector()
    const breakPoints = { xxl: 1600, xl: 1200, lg: 992, md: 768, sm: 576, xs: -1 }
    const keys = Object.keys(breakPoints)
    const vals = { xxl: 4, xl: 4, lg: 4, md: 3, sm: 2, xs: 1 }
    const valsPreContent = { xxl: 2, xl: 2, lg: 2, md: 3, sm: 2, xs: 1 }
    const valsContent = { xxl: 4, xl: 4, lg: 4, md: 3, sm: 2, xs: 1 }
    erd.listenTo(this.$refs.container.$el, function(el) {
      false &&
        that.$nextTick(function() {
          var px = el.offsetWidth
          let fitIndex = -1
          for (var p in breakPoints) {
            fitIndex++
            if (px >= breakPoints[p]) {
              break
            }
          }
          for (var k = fitIndex; k < keys.length; k++) {
            if (vals[keys[k]] > 0) {
              that.descriptionColumn = vals[keys[k]]
              that.preContentSpan = valsPreContent[keys[k]]
              that.contentSpan = valsContent[keys[k]]
              break
            }
          }
        })
    })

    if (!this.widgetItemData.wellRecord) {
      this.isLoading = true
      this.tipMsg = '尚未选择井，请关闭工具选择井号后重新打开'
      return
    }
    // zjy, fzqk, gc
    // 1 ,  2,    4
    if (this.widgetItemData.wellRecord.zjy) {
      this.config.typeEnable = 1
    }
    if (this.widgetItemData.wellRecord.ltd) {
      // TODO: 查询井坐标 并 决定可以进行报警的种类
      this.config.typeEnable += 4
      warnApi
        .queryWellCoordinate({ jh: this.widgetItemData.wellRecord.JH })
        .then(res => {
          if (res.result.exist) {
            this.config.typeEnable += 2
            this.config.coordinate = res.result.coor
          }
        })
        .catch(e => {
          this.message.info(e.message)
        })
    }

    const keysStored = vue.ls.get(keysStoreKey)
    if (keysStored) {
      this.config.keyWordsCmb = keysStored
    }

    this.config.jh = this.widgetItemData.wellRecord.JH

    this.$nextTick(() => {
      setTimeout(() => {
        this.queryWarn(this, true)
      }, 300)
    })
  },
  beforeDestroy() {
    this.isRunning = false
    this.$bus.off(EVENT_ALL_WARN, this.setWebsocketWarn)
  },
  destroyed() {
    this.isRunning = false
  },
  computed: {
    ...mapState({
      warnTheme: state => state.app.warnTheme
    }),
    showContent() {
      return this.contentSpan > 1
    }
  },
  watch: {
    'config.type'(val) {
      if (val.length === 0) {
        this.setSourceEmptyTip()
      }
    },
    'widgetItemData.wellRecord'(val) {}
  },
  methods: {
    executeFromParent(which, paras) {
      switch (which) {
        case 'SHOWCONFIG':
          this.configSnap = _.clone(this.config)
          this.configVisible = true
          break
        default:
          break
      }
    },
    handleOk() {
      vue.ls.set(keysStoreKey, this.config.keyWordsCmb)
      this.configVisible = false
      this.$emit('configChanged')

      if (this.config.type.length > 0) {
        this.$nextTick(() => {
          this.topAlert.visible = false
          this.queryWarn(this, false)
        })
      }
    },
    handleCancel() {
      // this.config = this.configSnap
      if (this.config.type.length > 0) {
        this.topAlert.visible = false
        this.queryWarn(this, false)
      }
      this.configVisible = false
    },
    cancelWarn(item) {
      item.canceled = true
    },
    showCountDown() {
      this.$nextTick(() => {
        this.topAlert = {
          visible: true,
          txt: '正在等待下次预警查询...',
          type: 'info',
          showIcon: false,
          countDown: true
        }
      })
    },
    handleSortChange() {
      sortWarn(this.warnList, this.config.sortType, this.config.keyWordsCmb)
    },
    showQueryTip() {
      this.topAlert = {
        visible: true,
        txt: '正在查询预警内容...',
        type: 'info',
        showIcon: true
      }
    },
    setSourceEmptyTip() {
      this.topAlert = {
        visible: true,
        txt: '请点击右上配置选择报警数据源',
        type: 'warning',
        showIcon: true
      }
    },
    pickLastZjyTime() {
      if (this.widgetItemData.wellRecord.zjy === 1) {
        if (this.warnList.length === 0) {
          return null
        }
        let last = ''
        this.warnList.map(p => {
          if (p.warnTime > last) {
            last = p.warnTime
          }
        })
        return last
      }
      return null
    },
    setWebsocketWarn(data) {
      const that = this
      this.topAlert.showCountDown = false
      const jh = (this.widgetItemData.wellRecord && this.widgetItemData.wellRecord.JH) ?
            this.widgetItemData.wellRecord.JH : decode(window.location.hash)['jh']
      const wellWarn = _.filter(data, k => k.JH === this.widgetItemData.wellRecord.JH)
      const zjy = _.filter(wellWarn, k => k.SOURCE === '钻井液')
      const gc = _.filter(wellWarn, k => k.SOURCE === '工程预警')

      function filterWarn(list) {
        let addCount = 0
        list.map(p => {
          const exist = _.find(that.warnList, k1 => {
            return k1.key === p.ID
          })
          if (!exist) {
            that.warnList.unshift({
              key: p.ID,
              jh: p.JH,
              canceled: false,
              queryTime: moment(p.CREATE_TIME).format('YYYY-MM-DD HH:mm:ss'),
              warnTime: moment(p.WARN_TIME).format('YYYY-MM-DD HH:mm:ss'),
              source: p.SOURCE,
              catogary: p.CATOGARY,
              warnMsg: p.BJNR
            })
            addCount++
          }
        })
        return addCount
      }
      const a1 = zjy && filterWarn(zjy)
      const a3 = gc && filterWarn(gc)

      if (a1 && a3) {
        that.warnList = sortWarn(that.warnList, that.config.sortType, that.config.keyWordsCmb)
      }

      this.showCountDown()
    },
    queryWarn(that, doNext = true) {
      return;
      const queryBody = {
        jh: that.widgetItemData.wellRecord.JH,
        checkZjy: that.widgetItemData.wellRecord.zjy === 1,
        checkFzqk: false,
        checkGc: that.widgetItemData.wellRecord.ltd === 1,
        zjyLastType: '',
        zjyLastTime: this.pickLastZjyTime(),
        coorX: that.config.coordinate[0],
        coorY: that.config.coordinate[1]
      }
      if (!queryBody.coorX) {
        queryBody.coorX = '-1'
      }
      if (!queryBody.coorY) {
        queryBody.coorY = '-1'
      }
      that.showQueryTip()
      if (!this.isRunning) {
        // 王东--处于销毁过程中，终止数据的查询
        return
      }
      warnApi
        .queryFocusWarn(queryBody)
        .then(res => {
          const zjy = _.get(res.result, 'zjy', null)
          const fzqk = _.get(res.result, 'fzqk', null)
          const gc = _.get(res.result, 'gc', null)
          function filterWarn(list) {
            let addCount = 0
            list.map(p => {
              const exist = _.find(that.warnList, k1 => {
                return k1.key === p.key
              })
              if (!exist) {
                that.warnList.unshift({
                  key: p.key,
                  jh: p.jh,
                  canceled: false,
                  queryTime: p.requestStart,
                  warnTime: p.warnTime,
                  source: p.source,
                  catogary: p.catogary,
                  warnMsg: p.bjnr
                })
                addCount++
              }
            })
            return addCount
          }
          const a1 = zjy && filterWarn(zjy)
          const a2 = fzqk && filterWarn(fzqk)
          const a3 = gc && filterWarn(gc)

          if (a1 && a2 && a3) {
            that.warnList = sortWarn(that.warnList, that.config.sortType, that.config.keyWordsCmb)
          }
          that.showCountDown()
          this.isRunning && doNext && _.delay(this.queryWarn, that.config.interval * 1000, that)
        })
        .catch(e => {
          that.showCountDown()
          that.$notification.warning({
            message: `重点关注工具-${that.widgetItemData.wellRecord.JH}查询时出错`,
            description: e.message
          })
          this.isRunning && doNext && _.delay(this.queryWarn, that.config.interval * 1000, that)
        })
    }
  }
}
</script>

<style lang="less" scoped>
ul {
  list-style-type: none;
  padding: 0;
}

li {
  padding: 10px;
}

pre {
  width: 80%;
  max-width: 500px;
  border-radius: 20px;
  padding: 20px;
  background: #fefefe;
}

// Base styles
.list {
  width: 100%;
  margin: 0 auto;
  padding: 0;
  overflow: auto;
  background-color: #f3f3f3;
  border: none;
  border-radius: 3;
}

.list-item {
  // display: flex;
  align-items: center;
  width: 100%;
  padding: 20px;
  background-color: #fff;
  border-bottom: 1px solid #edb2b2;
  box-sizing: border-box;
  user-select: none;

  color: #333;
  font-weight: 400;
}

// Stylized
.stylizedList {
  position: relative;
  z-index: 0;
  background-color: #f3f3f3;
  border: 1px solid #efefef;
  border-radius: 3px;
  outline: none;
}
.stylizedItem {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 0 20px;
  background-color: #fff;
  border-bottom: 1px solid #efefef;
  box-sizing: border-box;
  user-select: none;

  color: #333;
  font-weight: 400;
}

// Drag handle
.handle {
  display: block;
  width: 18px;
  height: 18px;
  background-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 50 50"><path d="M 0 7.5 L 0 12.5 L 50 12.5 L 50 7.5 L 0 7.5 z M 0 22.5 L 0 27.5 L 50 27.5 L 50 22.5 L 0 22.5 z M 0 37.5 L 0 42.5 L 50 42.5 L 50 37.5 L 0 37.5 z" color="black"></path></svg>');
  background-size: contain;
  background-repeat: no-repeat;
  opacity: 0.25;
  margin-right: 20px;
  cursor: row-resize;
}

// Horizontal list
.horizontalList {
  display: flex;
  width: 600px;
  height: 300px;
  white-space: nowrap;
}

.horizontalItem {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 200px;
  border-right: 1px solid #efefef;
  border-bottom: 0;
}

// Grid
.grid {
  display: block;
  width: 130 * 4px;
  height: 350px;
  white-space: nowrap;
  border: 0;
  background-color: transparent;
}

.gridItem {
  float: left;
  width: 130px;
  padding: 8px;
  background: transparent;
  border: 0;

  .wrapper {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;
    height: 100%;
    background: #fff;
    border: 1px solid #efefef;

    font-size: 28px;

    span {
      display: none;
    }
  }
}

// Nested
.category {
  height: auto;

  .categoryHeader {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    padding: 10px 14px;
    background: #f9f9f9;
    border-bottom: 1px solid #efefef;
  }

  .categoryList {
    height: auto;
  }
}

// Divider
.divider {
  padding: 10px 20px;
  background: #f9f9f9;
  border-bottom: 1px solid #efefef;
  text-transform: uppercase;
  font-size: 14px;
  color: #333;
}

// Helper styles
.helper {
  box-shadow: 0 5px 5px -5px rgba(0, 0, 0, 0.2), 0 -5px 5px -5px rgba(0, 0, 0, 0.2);
}
.stylizedHelper {
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
  background-color: rgba(31, 136, 255, 0.8);
  color: #fff;
  cursor: row-resize;
  border: 1px solid white;

  &.horizontalItem {
    cursor: col-resize;
  }
  &.gridItem {
    background-color: transparent;
    white-space: nowrap;
    box-shadow: none;

    .wrapper {
      background-color: rgba(255, 255, 255, 0.8);
      box-shadow: 0 0 7px rgba(0, 0, 0, 0.15);
    }
  }
}

.shrinkedHelper {
  height: 20px !important;
}

/deep/ .ant-descriptions-title {
  margin-bottom: 0px;
}
/deep/ .ant-input:disabled {
  color: rgba(0, 0, 0, 0.85);
}

.breatheDiv {
  border: 1px solid #ccc;
  text-align: center;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  overflow: hidden;
  -webkit-animation-timing-function: ease-in-out;
  -webkit-animation-name: breathe;
  -webkit-animation-duration: 1500ms;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-direction: alternate;
  animation-timing-function: ease-in-out;
  animation-name: breathe;
  animation-duration: 1500ms;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

@-webkit-keyframes breathe {
  0% {
    opacity: 0.4;
    box-shadow: 0 1px 2px rgba(223, 171, 0, 0.4), 0 1px 1px rgba(0, 147, 223, 0.1) inset;
  }

  100% {
    opacity: 1;
    border: 1px solid rgba(235, 71, 59, 0.7);
    box-shadow: 0 1px 30px #df5200, 0 1px 20px #df3f00 inset;
  }
}
@keyframes breathe {
  0% {
    opacity: 0.4;
    box-shadow: 0 1px 2px rgba(223, 171, 0, 0.4), 0 1px 1px rgba(0, 147, 223, 0.1) inset;
  }

  100% {
    opacity: 1;
    border: 1px solid rgba(235, 71, 59, 0.7);
    box-shadow: 0 1px 30px #df5200, 0 1px 20px #df3f00 inset;
  }
}

/deep/ .ant-descriptions-item-label {
  min-width: 90px;
}
</style>
