<template>
  <div :class="['wrapper']" :style="dynamicWrapperStyle">
    <div class="png-wrapper" v-if="!!digitalComp.bgImg">
      <slot name="main-bg">
        <image class="png" :src="digitalComp.bgImg"></image>
      </slot>
    </div>
    <div class="custorm-animate-wrapper">
      <slot name="custorm-animate"></slot>
    </div>
    <slot name="main-lottie">
      <midea-lottie-view
        v-if="!!lottieComp[0].data"
        class="lottie"
        :style="{ width: lottieComp[0].width, height: lottieComp[0].height }"
        :data="lottieComp[0].data"
        :loop="lottieComp[0].loop"
      ></midea-lottie-view>
    </slot>

    <div class="digital-wrapper" :style="digitalStyleComp">
      <div class="digital">
        <div class="top-title">
          <text class="top-title-text" :style="textColorCalc(digitalComp)">{{
            digitalComp.title
          }}</text>
        </div>
        <div class="main-title">
          <div class="main-title-value">
            <div class="main-title-unit">
              <text :style="textColorCalc(digitalComp)">{{
                digitalComp.unit
              }}</text>
            </div>
            <text
              :class="['main-title-value-text', dynamicStateTextSize]"
              :style="textColorCalc(digitalComp)"
              >{{ digitalComp.value }}</text
            >
          </div>
        </div>
        <div class="desc-wrapper" v-if="!!digitalComp.desc">
          <div
            v-for="(item, index) in digitalComp.desc"
            :key="index"
            :class="['desc', alignStyleCalc(index, digitalComp.desc)]"
          >
            <div class="desc-title">
              <text class="desc-title-text" :style="textColorCalc(item)">{{
                item.title
              }}</text>
            </div>
            <div class="desc-value">
              <text class="desc-value-text" :style="textColorCalc(item)">{{
                item.value
              }}</text>
            </div>
            <div
              class="desc-item-split-line"
              v-if="index < digitalComp.desc.length - 1"
            ></div>
          </div>
        </div>
      </div>
    </div>
    <slot name="stuas-bar">
      <div class="status-bar-wrapper">
        <slot name="second-lottie">
          <midea-lottie-view
            v-if="lottieComp[1] && !!lottieComp[1].data"
            class="second-lottie"
            :style="{
              width: lottieComp[1].width,
              height: lottieComp[1].height
            }"
            :data="lottieComp[1].data"
            :loop="lottieComp[1].loop"
          ></midea-lottie-view>
        </slot>
        <div class="status-bar" v-if="state !== 'offline'">
          <div
            :class="['status-bar-title']"
            :style="{ backgroundColor: StatusBarBgColorCalc(digitalComp) }"
          >
            <text class="status-bar-title-text">{{ digitalComp.status }}</text>
          </div>
        </div>
      </div>
    </slot>
  </div>
</template>

<script>
export default {
  props: {
    state: {
      type: String,
      default: 'online'
    },

    digital: {
      type: Object,
      default: () => ({
        online: {
          title: 'online',
          value: '-',
          lottie: []
        },
        offline: {
          title: '',
          value: '已离线',
          lottie: []
        }
      })
    },
    position: {
      type: String,
      default: 'static'
    },
    textColor: {
      type: String,
      default: ''
    },
    panelTop: {
      type: [Number, String],
      default: 0
    },
    textTop: {
      type: [Number, String],
      default: 0
    }
  },
  data() {
    return {
      appName: 'dof-digital'
    }
  },
  computed: {
    dynamicWrapperStyle() {
      let { state, panelTop } = this

      if (state === 'offline') {
        return {
          height: '600px',
          marginTop: panelTop
        }
      } else {
        return {
          height: '724px',
          marginTop: panelTop
        }
      }
    },
    lottieComp() {
      let defaultLottieSizeConfig = {
        width: '750px',
        height: '600px',
        loop: true
      }
      let { digital, state } = this
      console.log(digital[state])
      return digital[state]['lottie'].map((item, index) => {
        if (index === 0) {
          return { ...defaultLottieSizeConfig, ...item }
        } else {
          return {
            ...item
          }
        }
      })
    },
    digitalComp() {
      let { digital, state } = this
      return { ...digital[state] }
    },
    digitalStyleComp() {
      let { textTop } = this
      return {
        marginTop: textTop
      }
    },
    dynamicStateTextSize() {
      let { state } = this
      if (state === 'online') {
        return ''
      } else {
        return 'main-text-size-offline'
      }
    },
    positionComp() {
      let { position } = this
      if (position === 'absolute') {
        return {
          position: 'absolute',
          left: 0,
          right: 0,
          top: 0
        }
      } else {
        return {}
      }
    },
    textColorComp() {
      let { textColor } = this
      if (textColor) {
        return {
          color: textColor
        }
      } else {
        return null
      }
    }
  },
  methods: {
    alignStyleCalc(i, arr) {
      if (arr.length === 1) {
        return 'desc-align-center'
      } else {
        return i === 0 ? 'desc-align-end' : ''
      }
    },
    textColorCalc(data) {
      if (data.color) {
        return {
          color: data.color
        }
      } else {
        return {}
      }
    },
    StatusBarBgColorCalc(data) {
      let { state } = this
      if (!data.statusBarBgColor) {
        if (state === 'offline') {
          return '#7c879b'
        } else {
          return 'transparent'
        }
      } else {
        return data.statusBarBgColor
      }
    }
  }
}
</script>

<style scoped>
.wrapper {
  width: 750px;
  height: 724px;
  align-items: center;
}
.png-wrapper {
  position: absolute;
}
.custorm-animate-wrapper {
  position: absolute;
  width: 750px;
  height: 600px;
}
.lottie {
  position: absolute;
  width: 750px;
  height: 600px;
}
.png {
  width: 600px;
  height: 600px;
}
.digital-wrapper {
  width: 750px;
  height: 600px;
  justify-content: center;
  align-items: center;
}
.digital {
  width: 750px;
  align-items: center;
  justify-content: stretch;
}
.top-title {
}
.top-title-text {
  font-family: PingFangSC-Regular;
  font-size: 24px;
  color: #616C73;
  letter-spacing: 0;
  text-align: center;
  line-height: 24px;
}
.main-title {
  flex-direction: row;
  padding: 18px;
}

.main-title-value {
  padding: 0 50px;
}

.main-title-value-text {
  font-family: PingFangSC-Regular;
  font-size: 160px;
  color: #1E2E37;
  letter-spacing: 0;
  text-align: center;
  line-height: 162px;
}
.main-text-size-offline {
  font-size: 80px;
}
.main-title-unit {
  position: absolute;
  right: 20px;
  top: 20px;
}
.main-title-unit-text {
  font-family: PingFangSC-Medium;
  font-size: 40px;
  color: #1E2E37;
  letter-spacing: 0;
  text-align: center;
  line-height: 40px;
}

.desc-wrapper {
  width: 600px;
  flex-direction: row;
}
.desc {
  flex: 1;
  align-items: flex-start;
  justify-content: center;
}

.desc-align-center {
  align-items: center;
}
.desc-align-end {
  align-items: flex-end;
}
.desc-title {
  margin-bottom: 20px;
}
.desc-title-text {
  font-family: PingFangSC-Regular;
  font-size: 24px;
  color: #8E969B;
  letter-spacing: 0;
  line-height: 24px;
  padding: 0 32px;
}
.desc-value {
  /* justify-content: center;
  align-items: center; */
}
.desc-value-text {
  font-family: PingFangSC-Regular;
  font-size: 32px;
  color: #616C73;
  letter-spacing: 0px;
  line-height: 32px;
  padding: 0 32px;
}
.desc-item-split-line {
  width: 1px;
  height: 60px;
  background-color: #e5e5e8;
  position: absolute;
  right: 0px;
}
.status-bar-wrapper {
  width: 600px;
  height: 140px;
  justify-content: center;
  align-items: center;
  margin-top: -50px;
}

.second-lottie {
  position: absolute;
  left: 300px;
  top: 70px;
  transform: translate(-50%, -50%);
}
.status-bar {
  min-width: 224px;
  height: 60px;
}
.status-bar-title {
  /* width: 224px; */
  height: 60px;
  border-radius: 30px;
  justify-content: center;
  background-color: #7c870b;
  padding: 0 32px;
}
.status-bar-title-text {
  font-family: PingFangSC-Medium;
  font-size: 32px;
  color: #ffffff;
  letter-spacing: 0;
  text-align: center;
  line-height: 32px;
}
</style>
