<template>
  <div>
      <el-tag type="success" v-if="state === 1">播放正常</el-tag>
      <el-tag type="warning" v-else>播放停止</el-tag>
      <br v-if="listingState">
      <span v-if="listingState">{{ listingState }}</span>
      <br v-if="timeState">
      <span v-if="timeState">{{ timeState }}</span>
  </div>
</template>

<script setup>
  import { computed,getCurrentInstance,nextTick  } from "vue";
  const props = defineProps({
    propConfig:{},
    propValue:{},
    parentValue:{}
  })
  const listingState = computed({
    get() {
      let n = ''
      if(props.parentValue.onState == '下架'){
        n = '已下架'
      }
      return n;
    }
  })
  const timeState = computed({
    get() {
      let n = '';
      if(props.parentValue.planStartTime && props.parentValue.planEndTime){
        let date = new Date();
        if(!(date >= new Date(props.parentValue.planStartTime) && date < new Date(props.parentValue.planEndTime))){
          n = '已过期'
        }
      }else{
        n = '未设置时间段'
      }
      return n;
    }
  })
  const state = computed({
    get() {
      let v = 1;
      if(props.parentValue.onState == '下架'){
        v = 0;
      }
      if(props.parentValue.planStartTime && props.parentValue.planEndTime){
        let date = new Date();
        if(!(date >= new Date(props.parentValue.planStartTime) && date < new Date(props.parentValue.planEndTime))){
          v = 0
        }
      }else{
        v = 0;
      }
      return v;
    }
  })

</script>

<style lang="scss" scoped>
  
</style>