<template>
  <div class="wrap" style="width: 200px; height: 60px;"
                    v-if="isdestroy"
                    v-show="PhaseMarkerState.isShow">
    <phase v-if="showLevel === 1"></phase>
    <phaseCount v-if="showLevel === 2"></phaseCount>
    <phaseCountCycle v-if="showLevel === 3"></phaseCountCycle>
    <div class="dirwrap">
      <xdrdirselector
        Width="60px" Height="60px" Widths="50px" Heights="50px"
        :showlist="dirshow">
      </xdrdirselector>
    </div>
    <div class="operation-pattern" v-if="showLevel > 1">
        <div class="cutdown-num" :style="phaseCountdownColor">
            <span>{{params.countdown}}/{{params.split}}</span>
        </div>
        <div class="cutdown-name">
            <span>{{params.control}}</span>
        </div>
    </div>
    <div class="pattern-name" v-if="showLevel > 2">
        <div class="planname-top">
        <div class="cycle">
          <span style="margin-left: 6px;">{{params.cycle}}</span>
        </div>
        <div class="offset">
          <span style="margin-right: 6px;">{{params.offset}}</span>
        </div>
      </div>
      <div class="planname-bottom">
        <span>{{params.curpattern}}</span>
      </div>
    </div>
  </div>
</template>

<script>
import xdrdirselector from '../XRDDirSelector'
import PatternSvg from './svg/patternSvg'
import PhaseSvg from './svg/phaseSvg'
import phase from './svg/phase'
import phaseCount from './svg/phaseCount'
import phaseCountCycle from './svg/phaseCountCycle'
export default {
  name: 'phasemarker',
  components: {
    xdrdirselector,
    PatternSvg,
    PhaseSvg,
    phaseCountCycle,
    phaseCount,
    phase
  },
  props: {
    dirshow: {
      type: Array,
      default: () => []
    },
    params: {
      type: Object,
      default: function () {
        return {
          countdown: 0,
          split: 0,
          control: 0,
          cycle: 0,
          offset: 0,
          curpattern: 'NO PLAN'
        }
      }
    },
    showLevel: {
      type: Number,
      default: 3
    }
  },
  data () {
    return {
      timer: 0,
      isdestroy: true,
      phaseCountdownColor: { // 控制倒计时的颜色与相位方向颜色一致
        color: '#333333'
      },
      PhaseMarkerState: {
        isShow: true
      }
    }
  },
  computed: {
  },
  methods: {
    show (dirshow, params, showLevel) {
      this.dirshow = dirshow
      this.params = params
      this.showLevel = showLevel
      this.phaseCountdownColor = {
        color: params.phaseCountdownColor
      }
      clearInterval(this.timer)
      let countdown = params.countdown
      if (countdown) {
        this.timer = setInterval(() => {
          params.countdown = params.countdown > 0 ? params.countdown - 1 : 0
        }, 1000)
      }
    }
  },
  mounted () {
  },
  created () {
  },
  destroyed () {
    clearInterval(this.timer)
  }
}
</script>

<style scoped>
.patternsvg {
  height: 60PX;
  position: relative;
}
.pattern-mess {
  float: left;
}
.dirwrap {
  position:relative;
  margin-top: -45PX;
  left: 7PX;
  width: 40PX;
  height: 39PX;
  z-index: 9;
}
.operation-pattern {
  position:relative;
  margin-top: -45PX;
  width: 60PX;
  height: 39PX;
  left: 60PX;
  z-index: 9;
}
.pattern-name {
  position:relative;
  margin-top: -43PX;
  width: 79PX;
  height: 39PX;
  margin-left: 110PX;
  z-index: 9;
}
.cycle {
  position:absolute;
  width: 39.5PX;
  height: 18PX;
  font-size: 15PX;
  text-align: center;
  margin-right: 5PX;
  color: #666666;
}
.offset {
  position:absolute;
  width: 39.5PX;
  height: 18PX;
  font-size: 15PX;
  text-align: center;
  color: #666666;
  margin-left: 39.5PX;
}
.cutdown-num {
  width: 50PX;
  height: 19PX;
  margin-left: auto;
  margin-top: 2PX;
  margin-right: auto;
  font-size: 15PX;
  text-align: center;
}
.cutdown-name {
  width: 50PX;
  height: 19PX;
  margin-left: auto;
  margin-bottom: 2PX;
  margin-right: auto;
  font-size: 12PX;
  text-align: center;
  color: #333333;
}
.planname-top {
  height: 18PX;
  margin-left: auto;
  margin-right: auto;
  margin-top: 2PX;
  font-size: 15PX;
  text-align: center;
  color: #666666;
}
.planname-bottom {
  height: 18PX;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 2PX;
  font-size: 12PX;
  text-align: center;
  color: #333333;
}
.wrap span{
  -moz-user-select: -moz-none;
  -moz-user-select: none;
  -o-user-select:none;
  -khtml-user-select:none;
  -webkit-user-select:none;
  -ms-user-select:none;
  user-select:none;
}
</style>
