<template>
  <view class="xd-product-status" v-if="status !== 'ok' && initStatus">
    <view
      :style="{
        background: styleObj.bgColor,
        color: styleObj.color,
        height: height,
        width: width
      }">{{styleObj['name']}}</view>
  </view>
</template>

<script>
import {
  getParentsStyles //获取页面风格列表
} from '@/utils/xd.base';

const Color = require('color');

export default {
  name: "XdProductStatus",
  props: {
    status: {
      type: String,
      default: "ok",
    },
    color: {
      type: String,
      default: "#fff",
    },
    bgColor: {
      type: String,
      default: "#fff",
    },

    width: {
      type: String,
      default: '50%',
    },
    height:{
      type: String,
      default: '50%',
    }

  },

  computed:{
    styleObj(){
      return this.map[this.status]
    }
  },
  data(){
    return {
      initStatus: false,
      map: {
        ok: {
          name: '正常',
          color: 'rgba(0,0,0,0)',
          bgColor: 'rgba(0,0,0,0)'
        },
        soldout: {
          name: '已售罄',
          color: '#fff',
          bgColor: ''
        },
        off: {
          name: '已下架',
          color: '#fff',
          bgColor: ''
        },
      }
    }
  },
  async created(){
    let style = await getParentsStyles(this.$parent);
    this.initStatus = true;
    let soldoutBgc = Color(style['$warningColor']).alpha(0.8).toString();
    let offBgc = Color(style['$infoColor']).alpha(0.9).toString();
    this.$set(this.map.soldout, 'bgColor', soldoutBgc);
    this.$set(this.map.off, 'bgColor', offBgc)
  },
}
</script>

<style scoped lang="less">
.xd-product-status {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;

  &> view {
    border-radius: 50%;
    overflow: hidden;
    font-size: unit(24, rpx);
    display: flex;
    justify-content: center;
    align-items: center;
  }

}
</style>
