<template>
  <a-layout style="padding: 0px; height: 100%">
    <button ref="myButton" @click="speakText">开启语音播报</button>
    <a-layout-content>
      <div class="card-container">
        <!-- <a-tabs v-model="activeKey" type="card" @change="tabChange">
          <a-tab-pane v-for="pane in panes" :key="pane.key" :tab="pane.title" :closable="pane.closable"> </a-tab-pane>
        </a-tabs> -->
        <div>
          <zh-warn-table ref="zhWarnTables" @success="refload" />
        </div>
      </div>
    </a-layout-content>
  </a-layout>
</template>
<script>
import zhWarnTable from './sub/zhWarnTable.vue'
import warnManage from '@/api/warnManageApi'
import wellInfo from '@/api/wellInfo'
export default {
  name: 'warnTable',
  components: { zhWarnTable },
  props: {
    value: {
      type: Array,
      default: []
    },
    queryParam: {
      type: Object,
      default: () => {
        return {
          warnTimeRange: [
            moment()
              .add(-2, 'days')
              .format('YYYY-MM-DD'),
            moment().format('YYYY-MM-DD')
          ],
          source: '工程预警'
        }
      }
    }
  },
  // watch: {
  //   value: {
  //     immediate: true,
  //     handler(orgCode) {
  //       console.log(orgCode)
  //       this.loadData(orgCode)
  //     }
  //   }
  // },
  data() {
    return {
      activeKey: '0',
      panes: [{
        key: '0',
        title: '所有异常',
        closable: false,
        content: '钩载异常'
      },
      {
        key: '1',
        title: '钩载异常',
        closable: false,
        content: '钩载异常'
      }, {
        key: '2',
        title: '扭矩异常',
        closable: false,
        content: '扭矩异常'
      }, {
        key: '3',
        title: '泵压异常',
        closable: false,
        content: '泵压异常'
      }, {
        key: '4',
        title: '总池体积异常',
        closable: false,
        content: '总池体积异常'
      }
      ],
      text: '',

      jhListStr: '',
      dataSource: [],
      type: '',
      dataList: [],
      timeInterval: ''
    }
  },
  created() {
    // console.log('工况智能识别参数异常页面加载')
    //this.loadData(this.value)

  },
  mounted() {
    this.$refs.myButton.click()
    //30秒后执行定时器任务
    setTimeout(() => { this.repeat() }, 30 * 1000)
  },
  beforeDestroy() {
    clearInterval(this.timeInterval)
    this.timeInterval = ''
  },
  methods: {
    refload() {
      this.loadTableData(this.jhListStr)
    },
    repeat() {
      console.log('开始定时获取预警数据')
      this.timeInterval = setInterval(this.loadTableData(this.jhListStr), 3 * 60 * 1000)
    },
    updateDataSource(dataSource) {
      this.dataSource = dataSource
    },
    speakText() {

      //this.warnSpeak(this.dataList)
      this.speak('开始播报预警信息')
    },
    tabChange(value) {
      //   console.log('activeKey', this.activeKey)
      //console.log(this.$refs.gzWarnTables[0].init())
      this.loadData(this.value)
      //console.log('aa', this.$refs.zhWarnTables + "0")
    },
    async loadData(jhList, dataSource, type) {
      console.log('调用接口', jhList)
      this.dataSource = dataSource
      this.jhListStr = jhList
      this.type = type
      var _this = this
      var res = await _this.getData(jhList)
      console.log(res)
      this.dataList = res
      if (res != null) {
        setTimeout(() => {
          _this.warnSpeak(res)
        }, 5000);
        _this.$refs.zhWarnTables.init(res)
      }
    },
    async getData(jhList) {
      this.$refs.zhWarnTables.updateLoad(true)
      console.log('this.queryParam.warnTimeRange', this.queryParam.warnTimeRange)
      var params = {
        jhs: jhList,
        endDate: this.queryParam.warnTimeRange[1].replace(/-/g, '/'),
        strDate: this.queryParam.warnTimeRange[0].replace(/-/g, '/'),
      }
      var res = await wellInfo.getMaxTimeWarnDataByJh(params)
      this.$refs.zhWarnTables.updateLoad(false)
      return res.result
    },
    async loadTableData(jhList) {
      console.log('获取预警数据')
      var res = await this.getData(jhList)
      res = this.warnSpeak(res)
      this.$refs.zhWarnTables.init(res)
    },
    warnSpeak(list) {
      var updateList = []
      list.forEach(item => {
        var status = item.status
        var warnJh = this.dataSource.filter(items => items.jh == item.jh)
        var isWarn = warnJh[0].isWarn
        if (status == '0') {
          var text = item.jh + '井;发生' + item.yjlb + '。'
          item.status = '1'
          //判断是否语音预警
          if (isWarn == '0') {
            //每条数据播放两次
            for (i = 0; i < 2; i++) {
              this.speak(text)
            }

          }
          updateList.push(item)
        }
      })
      this.updateListBatch(updateList)
      return list
    },
    updateListBatch(list) {
      console.log('更新预警数据状态', list.length)
      if (list.length > 0) {
        list.forEach(item => {
          this.updateWarnLog(item.warnLogId, item.yjlb)
        })
      }
    },
    updateWarnLog(id, type) {
      var param = {
        id: id,
        type: type,
        status: '1'
      }
      console.log('param', param)
      wellInfo.updateWarnLogStatusById(param).then(res => {
        console.log("更新预警日志数据状态:主键:" + id + ";类别:" + type)
      })
    },
    speak(text) {
      console.log('报警内容', text)
      var utterance = new SpeechSynthesisUtterance(text);
      window.speechSynthesis.speak(utterance);
    },
    loadData_old(jhList) {
      var _this = this
      var param = {
        jhs: jhList,
        type: this.activeKey,
        strDate: this.queryParam.warnTimeRange[0].replace(/-/g, '/'),
        endDate: this.queryParam.warnTimeRange[1].replace(/-/g, '/')
      }
      warnManage.getWarnLogListByType(param).then(res => {
        // console.log('获取数据', res)
        _this.$refs.zhWarnTables.init(res.result)
      })
    },

  }
}
</script>

<style lang="scss" scoped>
</style>
<style scoped>
.card-container {
  background: #f5f5f5;
  overflow: hidden;
  padding: 0px !important;
  /* height: 100%; */
}
/* .card-container > .ant-tabs-card {
  height: 1px;
} */
.card-container /deep/ .ant-tabs-content {
  /* margin-top: -16px; */
  height: 1px;
}
/* .card-container > .ant-tabs-card > .ant-tabs-content {
  margin-top: -16px;
  height: 1px;
} */

.card-container > .ant-tabs-card > .ant-tabs-content > .ant-tabs-tabpane {
  background: #fff;
  padding: 16px;
  /* height: 100%; */
}

.card-container > .ant-tabs-card > .ant-tabs-bar {
  border-color: #fff;
}

.card-container > .ant-tabs-card > .ant-tabs-bar .ant-tabs-tab {
  border-color: transparent;
  background: transparent;
}

.card-container > .ant-tabs-card > .ant-tabs-bar .ant-tabs-tab-active {
  border-color: #fff;
  background: #fff;
}
</style>