<template>
  <div>
    <a-row type="flex" justfy="space-around">
      <template v-for="(item, index) in config">
        <!--    展示项    -->
        <a-col :key="'col' + index" :span="Math.floor(24 / config.length)">
          <div class="item">
            <!--    标题    -->
            <p class="label">{{ item.label }}</p>
            <!--    内容 - 进度条    -->
            <template v-if="item.type === 'percent'">
              <p class="value" :style="'color: ' + determineColor(data[item.key])">{{ data[item.key] }}%</p>
            </template>
            <!--    内容 - 非进度条    -->
            <template v-else>
              <p class="value" :style="item.style ? item.style : ''">{{ data[item.key] }}</p>
            </template>
          </div>
        </a-col>
        <!--    分割线    -->
        <a-col :key="'col' + index + 'after'" :span="1" v-if="index !== config.length - 1" class="divider-col">
          <a-divider type="vertical" class="divider"/>
        </a-col>
      </template>
    </a-row>
  </div>
</template>

<script>

import { getConfigByName } from '@vue2-client/services/api/common'

export default {
  name: 'XSimpleDescriptions',
  props: {
    // 配置
    dataConfig: {
      type: Array,
      default: undefined
    },
    // 数据
    dataContent: {
      type: Object,
      default: undefined
    },
    // 配置名
    dataConfigName: {
      type: String,
      default: undefined
    },
    // 服务名
    serviceName: {
      type: String,
      default: process.env.VUE_APP_SYSTEM_NAME
    }
  },
  data () {
    return {
      // 配置
      config: [],
      // 数据
      data: {},
    }
  },
  mounted () {
    // 初始化配置
    if (this.dataConfig) {
      this.config = this.dataConfig
    } else if (this.dataConfigName) {
      getConfigByName(this.dataConfigName, this.serviceName, (res) => {
        this.config = res.config
      })
    } else {
      this.config = [
        {
          label: '未能正确获取配置',
          key: 'totalUser'
        },
        {
          label: '未能正确获取配置',
          key: 'totalResidentArea'
        },
        {
          label: '未能正确获取配置',
          key: 'doneNum'
        },
        {
          label: '未能正确获取配置',
          key: 'todoNum'
        },
        {
          label: '未能正确获取配置',
          key: 'ratio',
          type: 'percent'
        }
      ]
    }

    // 初始化数据
    if (this.dataContent) {
      this.data = this.dataContent
    } else {
      this.data = {
        totalUser: 0,
        totalResidentArea: 0,
        doneNum: 0,
        todoNum: 0,
        ratio: 20
      }
    }
  },
  methods: {
    // 根据完成率决定颜色
    determineColor (ratio) {
      let result
      if (ratio >= 90) {
        result = 'rgb(   1,245, 38 )'
      } else if (ratio >= 75) {
        result = 'rgb( 139,245,  0)'
      } else if (ratio >= 40) {
        result = 'rgb(245,163,  0)'
      } else if (ratio >= 20) {
        result = 'rgb(244, 96,  0)'
      } else {
        result = 'rgb(255,  0,  0)'
      }
      return result
    }
  },
  watch: {
    dataContent: {
      handler (newValue) {
        this.data = newValue
      },
      deep: true
    }
  }
}
</script>

<style lang="less" scoped>
.item {
  padding: 5%;

  .label {
    color: rgba(117, 117, 117, 0.8);
    text-align: center;
  }

  .value {
    color: rgb( 51,157,255 );
    font-size: 1.6em;
    text-align: center;
  }
}

.divider-col {
  display: flex;
  justify-content: center;

  .divider {
    margin-top: 35%;
    height: 40px;
  }
}
</style>
