<template>
  <el-dialog
    v-if="outerVisible"
    :visible="outerVisible"
    :append-to-body="false"
    :close-on-press-escape="true"
    :show-close="false"
    destroy-on-close
    width="100%"
    custom-class="position-modal"
  >
    <div slot="title" class="dialog-title">
      <div style="display: flex">
        <div class="logo">
          <img src="@/assets/logo.png">
        </div>
        <div class="txt">{{ collectEntity.second }}</div>
      </div>
      <div>
        <el-tag
          color="#a20d13"
          effect="dark"
          class="close-tag"
          @click="close">
          <i class="el-icon-close"/>
        </el-tag>
      </div>
    </div>

    <el-tabs tab-position="left" v-model="activeName" @tab-click="onTabClick">
      <div>
        <navigation-name :msg="collectEntity.second" :red-line-width="{ width: collectEntity.second.length * 18 + 24 + 'px' }"/>
      </div>
      <el-tab-pane name="meterShow">
        <div slot="label" style="display: flex;align-items: center">
          <i class="jg-icon-meter-show"/>
          <div style="margin-left: 5px">计量仪表</div>
        </div>
        <data-meter-show :message="message" :collect-entity="collectEntity"/>
      </el-tab-pane>
      <el-tab-pane name="warnData">
        <div slot="label" style="display: flex;align-items: center">
          <i class="jg-icon-warn-data"/>
          <div style="margin-left: 5px">报警数据</div>
        </div>
        <div>
          <show-warn-modal ref="showWarnModal" :collect-entity="collectEntity"/>
        </div>
      </el-tab-pane>
      <!--<el-tab-pane name="temperatureSet">
        <div slot="label" style="display: flex;align-items: center">
          <i class="jg-icon-temperature-set"/>
          <div style="margin-left: 5px">温度报警设置</div>
        </div>
        <threshold-setting-modal/>
      </el-tab-pane>
      <el-tab-pane name="pressureSet">
        <div slot="label" style="display: flex;align-items: center">
          <i class="jg-icon-pressure-set"/>
          <div style="margin-left: 5px">压力报警设置</div>
        </div>
        <threshold-setting-modal/>
      </el-tab-pane>
      <el-tab-pane name="waterSet">
        <div slot="label" style="display: flex;align-items: center">
          <i class="jg-icon-water-warn"/>
          <div style="margin-left: 5px">含水量报警设置</div>
        </div>
        <threshold-setting-modal/>
      </el-tab-pane>
      <el-tab-pane name="pressureDiffSet">
        <div slot="label" style="display: flex;align-items: center">
          <i class="jg-icon-pressure-diff-set"/>
          <div style="margin-left: 5px">差压报警设置</div>
        </div>
        <threshold-setting-modal/>
      </el-tab-pane>-->
      <el-tab-pane name="realtimeLine">
        <div slot="label" style="display: flex;align-items: center">
          <i class="jg-icon-realtime-line"/>
          <div style="margin-left: 5px">实时曲线</div>
        </div>
        <realtime-line-modal ref="realtimeLineModal" :collect-entity="collectEntity"/>
      </el-tab-pane>
      <el-tab-pane name="historyLine">
        <div slot="label" style="display: flex;align-items: center">
          <i class="jg-icon-history-line"/>
          <div style="margin-left: 5px">历史曲线</div>
        </div>
        <history-line-modal ref="historyLineModal" :collect-entity="collectEntity"/>
      </el-tab-pane>
      <el-tab-pane name="dataReport">
        <div slot="label" style="display: flex;align-items: center">
          <i class="jg-icon-data-report"/>
          <div style="margin-left: 5px">数据报表</div>
        </div>
        <data-report-modal ref="dataReportModal" :collect-entity="collectEntity"/>
      </el-tab-pane>
    </el-tabs>
    <div class="go-back-btn" @click="close">
      <i class="jg-icon-go-back"/>
      返回
    </div>
  </el-dialog>
</template>

<script>
import NavigationName from '@/components/NavigationName'
import ShowWarnModal from '@/views/modules/ShowWarnModal'
import ThresholdSettingModal from '@/views/modules/ThresholdSettingModal'
import RealtimeLineModal from '@/views/modules/RealtimeLineModal'
import HistoryLineModal from '@/views/modules/HistoryLineModal'
import DataReportModal from '@/views/modules/DataReportModal'
import DataMeterShow from '@/views/modules/DataMeterShow'

export default {
  name: 'PositionModal',
  components: {
    DataMeterShow,
    DataReportModal,
    HistoryLineModal,
    RealtimeLineModal,
    ThresholdSettingModal,
    ShowWarnModal,
    NavigationName
  },
  props: {
    message: {
      type: Array,
      default: () => []
    },
  },
  data() {
    return {
      outerVisible: false,
      innerVisible: false,
      activeName: 'meterShow',
      collectEntityId: '',
      collectEntity: null,
    }
  },
  computed: {
    navigationName() {
      let navigationName = '报警数据显示'
      switch (this.activeName) {
        case 'meterShow':
          navigationName = '计量仪表'
          break
        case 'warnData':
          navigationName = '报警数据显示'
          break
        case 'temperatureSet':
          navigationName = '温度报警参数'
          break
        case 'pressureSet':
          navigationName = '压力报警参数'
          break
        case 'waterSet':
          navigationName = '含水量报警参数'
          break
        case 'pressureDiffSet':
          navigationName = '差压报警参数'
          break
        case 'realtimeLine':
          navigationName = '实时曲线'
          break
        case 'historyLine':
          navigationName = '历史曲线'
          break
        case 'dataReport':
          navigationName = '存盘数据浏览'
          break
        default:
      }
      return navigationName
    },
  },
  mounted() {
    this.fetchData()
  },
  methods: {
    showModal(collectEntityId, collectEntity) {
      const filteredCollectEntity = collectEntity
      filteredCollectEntity.tagList = collectEntity.tagList.filter(e => e.tableColumn !== 'FEEDBACK')
      this.collectEntity = filteredCollectEntity
      this.collectEntityId = collectEntityId
      this.activeName = 'meterShow'
      this.outerVisible = true
    },
    close() {
      this.outerVisible = false
    },
    fetchData() {
    },
    onTabClick(e) {
      const currentPaneName = e.paneName
      switch (currentPaneName) {
        case 'warnData':
          this.$refs.showWarnModal.updateTimeRange()
          break
        case 'realtimeLine':
          this.$refs.realtimeLineModal.initData()
          break
        case 'historyLine':
          this.$refs.historyLineModal.initData()
          break
        case 'dataReport':
          this.$refs.dataReportModal.updateTimeRange()
          break
      }
    },
  },
}
</script>

<style lang="less" scoped>
  /deep/ .position-modal {
    background: #ebebeb !important;
    display: flex;
    flex-direction: column;

    .el-dialog__header {
      height: 38px;
      line-height: 36px;
      background: linear-gradient(#d52730, #a20d13);
      display: flex;
      justify-content: space-between;
      color: white;
      user-select: none;
      padding: 0;

      .dialog-title {
        flex: 1;
        display: flex;
        justify-content: space-between;
        padding-right: 5px;

        .logo {
          padding-left: 8px;
          padding-right: 6px;
        }

        img {
          width: 20px;
          height: 20px;
          margin-top: 7px;
        }

        .txt {
          text-align: left;
          flex: 1;
          font-size: 14px;
        }

        div {
          .el-tag {
            .el-icon-close {
              border-radius: 50%;
              text-align: center;
              position: relative;
              cursor: pointer;
              font-size: 12px;
              height: 16px;
              width: 16px;
              line-height: 16px;
              vertical-align: middle;
              top: -1px;
              right: 0;
            }
          }

          .el-tag--dark {
            border-color: #a20d13;
            color: #fff;
          }

          .el-tag:hover {
            color: #fff;
            background-color: #409eff
          }

          .el-tag:active {
            opacity: .5;
          }
        }
      }
    }

    .el-dialog__body {
      flex: 1;
      padding: 0;
      color: #606266;
      font-size: 14px;
      word-break: break-all;
      background-color: #ebebeb;
    }

    .el-tabs--left, .el-tabs--right {
      height: 100%;
    }
    .el-tabs__content {
      height: 100%;
      display: flex;
      flex-direction: column;
      padding: 0;
    }

    .el-tab-pane {
      flex: 1;
      margin-bottom: 20px;
    }

    .el-tabs__item {
      padding: 0 24px;
      height: 50px;
      box-sizing: border-box;
      line-height: 50px;
      font-size: 14px;
      font-weight: 500;
      color: inherit;
      margin: 24px 16px;
      text-align: left;
      border-radius: 8px;
      box-shadow: 0.1rem 0.1rem 0.1rem #aaa7a7, -0.1rem -0.1rem 0.1rem #FFFFFF;
      user-select: none;
    }

    .el-tabs__active-bar {
      display: none;
    }

    .is-active {
      color: #FFFFFF;
      background-color: #A20D13;
      box-shadow: inset 0.2rem 0.2rem 0.5rem #6e090c, inset -0.2rem -0.2rem 0.5rem #c71016;
    }

    .go-back-btn {
      width: 130px;
      margin: 24px 0 24px 0;
      padding: 0 24px;
      height: 50px;
      box-sizing: border-box;
      line-height: 50px;
      font-size: 14px;
      font-weight: 500;
      position: absolute;
      left: 16px;
      top: 435px;
      border-radius: 8px;
      box-shadow: 0.1rem 0.1rem 0.1rem #aaa7a7, -0.1rem -0.1rem 0.1rem #FFFFFF;
      cursor: pointer;
      user-select: none;
    }

    .go-back-btn:active {
      color: #FFFFFF;
      background-color: #A20D13;
      box-shadow: inset 0.2rem 0.2rem 0.5rem #6e090c, inset -0.2rem -0.2rem 0.5rem #c71016;
    }

    .el-tabs__content {
      padding: 1px 24px;
    }
  }

</style>
