/**
 * Copyright (c) 2020 kedacom
 * OpenATC is licensed under Mulan PSL v2.
 * You can use this software according to the terms and conditions of the Mulan PSL v2.
 * You may obtain a copy of Mulan PSL v2 at:
 * http://license.coscl.org.cn/MulanPSL2
 * THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND,
 * EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT,
 * MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
 * See the Mulan PSL v2 for more details.
 **/
<template>
<div class="realtime-panel">
  <div class="cross-mess">{{$t('openatccomponents.overview.crossinfo')}}</div>
  <div class="cross-module">
    <div class="cross-content">
      <div style="float: left;" class="cross-name">{{$t('openatccomponents.overview.crossname')}}:</div>
      <div style="margin-left: 85px;" class="cross-value">{{agentName}}</div>
    </div>
    <!-- <div class="cross-content">
      <div style="float: left;" class="cross-name">{{$t('openatccomponents.overview.divicestate')}}:</div>
      <div
        v-show="devStatus===3"
        style="margin-left: 85px;"
        class="cross-value"
      >{{$t('openatccomponents.overview.connected')}}</div>
      <div
        v-show="devStatus===2"
        style="margin-left: 85px;"
        class="cross-value"
      >{{$t('openatccomponents.overview.offline')}}</div>
      <div
        v-show="devStatus===1"
        style="margin-left: 85px;"
        class="cross-value"
      >{{$t('openatccomponents.overview.onlineing')}}</div>
    </div> -->
    <!-- <div class="cross-content"><div style="float: left;" class="cross-name">{{$t('openatccomponents.overview.protocoltype')}}:</div><div style="margin-left: 85px;" class="cross-value">{{protocol}}</div></div> -->
    <!-- <div class="cross-content"><div style="float: left;" class="cross-name">信号机型号:</div><div style="margin-left: 85px;" class="cross-value">XHJ-CW-GA-KSS100</div></div> -->
    <div class="cross-content">
      <div style="float: left;" class="cross-name">{{$t('openatccomponents.overview.signalID')}}:</div>
      <div style="margin-left: 85px;" class="cross-value">{{agentId}}</div>
    </div>
    <div class="cross-content">
      <div style="float: left;" class="cross-name">{{$t('openatccomponents.overview.signalIP')}}:</div>
      <div style="margin-left: 85px;" class="cross-value">{{ip}}</div>
    </div>
    <div class="cross-content" v-if="platform">
      <div style="float: left;" class="cross-name">{{$t('openatccomponents.overview.platform')}}:</div>
      <div style="margin-left: 85px;" class="cross-value">
        {{firm !== undefined && firm !== '' ? firm : platform}}
      </div>
    </div>
    <div class="cross-content" v-if="controlData.current_stagecd !== undefined">
      <div style="float: left;" class="cross-name">{{$t('openatccomponents.overview.stagecountdown')}}:</div>
      <div style="margin-left: 85px;" class="cross-value">{{controlData.current_stagecd}}</div>
    </div>
    <div class="cross-content" v-if="controlData.stages_len">
      <div style="float: left;" class="cross-name">{{$t('openatccomponents.overview.stageduration')}}:</div>
      <div style="margin-left: 85px;" class="cross-value">{{controlData.stages_len + ''}}</div>
    </div>
    <div class="cross-content">
      <div style="float: left;" class="cross-name">{{$t('openatccomponents.overview.faultinfo')}}:</div>
      <div style="margin-left: 85px;" v-if="curFaultList.length">
        <el-tag v-if="confirmedFault.length" type="success">
          {{$t('openatccomponents.overview.confirmed')}}
          <span style="margin: 0 2px;">{{confirmedFault.length}}</span>
        </el-tag>
        <el-tag v-if="untreatedFault.length">
          {{$t('openatccomponents.overview.untreated')}}
          <span style="margin: 0 2px;">{{untreatedFault.length}}</span>
        </el-tag>
        <el-tag v-if="ignoredFault.length" type="info">
          {{$t('openatccomponents.overview.ignored')}}
          <span style="margin: 0 2px;">{{ignoredFault.length}}</span>
        </el-tag>
        <span class="fault-detail-btn" @click="showFaultDetail">{{$t('openatccomponents.overview.details')}} >></span>
      </div>
      <div
        style="margin-left: 85px;"
        class="cross-value"
        v-if="!curFaultList.length"
      >{{$t('openatccomponents.overview.nofault')}}</div>
    </div>
    <div class="cross-content" v-if="faultboardState !== null">
      <div style="float: left;" class="cross-name">{{$t('openatccomponents.overview.faultboard')}}:</div>
      <div style="margin-left: 85px;" class="cross-value">{{faultboardStateText}}</div>
    </div>
  </div>
  <div class="control-bottom">
    <div
      class="cross-mess"
      style="float: left;margin-top: 20px;margin-bottom: 18px;"
    >{{$t('openatccomponents.overview.controlmode')}}</div>
    <el-button
      type="primary"
      style="float: right; margin-right: 20px;margin-top: 16px;font-size: 14px;"
      size="mini"
      v-if="isHasPermission('configer:manual') && isHasPermission('configer:manual:renew')"
      @click="changeStatus"
    >{{$t('openatccomponents.overview.manual')}}</el-button>
    <!-- <el-button type="primary" style="float: right; margin-right: 40px;" size="mini" @click="changeStatus" v-show="isOperation">{{$t('openatccomponents.overview.exitmanual')}}</el-button> -->
  </div>
  <div class="cross-module">
    <!-- 信号机控制状态模块 Start-->
    <div class="controlStatePart">
      <div class="bigPart">
        <el-row :gutter="7">
          <el-col :span="12">
            <div class="grid-content bg-base">
              <div class="value">{{controlData.mode}}</div>
              <div class="name">{{$t('openatccomponents.overview.controlmodel')}}</div>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="grid-content bg-base">
              <div class="value">{{currModel > -1 ? $t('openatccomponents.overview.modelList' + currModel) : ''}}</div>
              <div class="name">{{$t('openatccomponents.overview.curModel')}}</div>
            </div>
          </el-col>
        </el-row>
      </div>
      <div class="smallPart">
        <el-row :gutter="7">
          <el-col :span="8" v-if="controlData.patternid !== undefined">
            <div class="grid-content bg-base">
              <div class="value">{{controlData.patternid}}</div>
              <div class="name">{{$t('openatccomponents.overview.controlnumber')}}</div>
            </div>
          </el-col>
          <el-col :span="8" v-if="responseTime !== undefined">
            <div class="grid-content bg-base">
              <div class="value">{{responseTime + ' ms'}}</div>
              <div class="name">{{$t('openatccomponents.overview.responseTime')}}</div>
            </div>
          </el-col>
          <el-col :span="8" v-if="controlData.duration !== undefined">
            <div class="grid-content bg-base">
              <div class="value">{{controlData.duration + ' s'}}</div>
              <div class="name">{{$t('openatccomponents.overview.duration')}}</div>
            </div>
          </el-col>
          <el-col :span="8" v-if="controlData.delay !== undefined">
            <div class="grid-content bg-base">
              <div class="value">{{controlData.delay}}</div>
              <div class="name">{{$t('openatccomponents.overview.delay')}}</div>
            </div>
          </el-col>
          <el-col :span="8" v-if="currentStage !== undefined">
            <div class="grid-content bg-base">
              <div class="value">{{currentStage}}</div>
              <div class="name">{{$t('openatccomponents.overview.curStage')}}</div>
            </div>
          </el-col>
          <el-col :span="8" v-if="controlData.current_phase !== undefined && controlData.current_phase.length !== 0 ">
            <div class="grid-content bg-base">
              <div class="value" v-html="controlData.current_phase.join(',')"></div>
              <div class="name">{{$t('openatccomponents.overview.curPhase')}}</div>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
    <!-- 信号机控制状态模块 End-->

    <div class="cross-content">
      <div class="cross-name">{{$t('openatccomponents.overview.currentstage')}}:</div>
      <div>
      <Stages v-if="resetcomponent"
              :crossStatusData="crossStatusData"
              :phaseList="phaseList"
              @onSelectStages="onSelectStages"></Stages>
      </div>
    </div>

    <div class="cross-content" v-show="closePhase && closePhase.length > 0">
      <div
        style="float: left;margin-right: 16px;"
        class="cross-name"
      >{{$t('openatccomponents.overview.phaseclose')}}:</div>
      <el-tag
        type="danger"
        size="small"
        v-for="(phase, index) in closePhase"
        :key="index"
      >{{phase.typename + $t('openatccomponents.overview.phase') + phase.id + $t('openatccomponents.overview.close')}}</el-tag>
    </div>
  </div>
</div>
</template>

<script>
import xdrdirselector from '../../XRDDirSelector/XRDDirSelector'
import { hasPermission } from '../../../../utils/auth'
export default {
  name: 'realtimestatus',
  components: {
    xdrdirselector
  },
  props: {
    crossStatusData: {
      type: Object,
      default: () => {}
    },
    phaseList: {
      type: Array,
      default () {
        return []
      }
    },
    Visible: {
      type: Boolean
    },
    controlData: {
      type: Object
    },
    agentName: {
      type: String
    },
    // devStatus: {
    //   type: Number
    // },
    agentId: {
      type: String
    },
    ip: {
      type: String
    },
    platform: {
      type: String
    },
    firm: {
      type: String
    },
    curFaultList: {
      type: Array
    },
    currModel: {
      type: Number
    },
    responseTime: {
      type: Number
    },
    stagesList: {
      type: Array
    },
    currentStage: {
      type: Number
    },
    preselectStages: {
      type: Number
    },
    closePhase: {
      type: Array
    },
    sidewalkPhaseData: {
      type: Array
    },
    confirmedFault: {
      type: Array
    },
    ignoredFault: {
      type: Array
    },
    untreatedFault: {
      type: Array
    },
    roadDirection: {
      type: String
    },
    faultboardState: {
      type: Number,
      default: null,
      validator: function (value) {
        return value === null || value === 1 || value === 2
      }
    }
  },
  computed: {
    faultInfo () {
      return this.$t('openatccomponents.overview.nofault')
    },
    faultboardStateText () {
      return this.faultboardState === 1
        ? this.$t('openatccomponents.overview.faultboardLearned')
        : this.$t('openatccomponents.overview.faultboardNotLearned')
    }
  },
  watch: {
    agentId: {
      handler: function (val1, val2) {
        this.$nextTick(() => {
          setTimeout(() => {
          if (val1 !== val2) {
        this.resetcomponent = false
        this.$nextTick(() => {
          this.resetcomponent = true
        })
        }
        }, 100)
        })
      },
      // 深度观察监听
      deep: true
    }
  },
  data () {
    return {
      resetcomponent: true
    }
  },
  methods: {
    isHasPermission (path) {
      let res = hasPermission(path)
      return res
    },
    onSelectStages (val) {},
    changeStatus () {
      this.$emit('changeStatus')
    },
    showFaultDetail () {
      this.$emit('showFaultDetail')
    }
  }
}
</script>
<style lang="scss" scoped>
</style>