// created by zoiew 2020/05/15
<template>
  <div class="dof-panel">
    <div :class="['dof-panel-container', !hasBottomBar && 'container-bottom-padding']">
      <div class="dashboard" v-for="(line, index) in matrixData" :key="index">
        <div
          :class="['cell', !hasBottomBar && 'cell-no-Btn-Bar']"
          v-for="(item, i) in line"
          :key="i"
          :style="[
            adaptBorderFn(index, matrixData.length - 1, i, line.length - 1),
            adaptPaddingFn(index, matrixData.length - 1, i, line.length - 1)
          ]"
        >
          <div class="title">
            <text class="title-text">{{ item.title }}</text>
          </div>
          <div class="value">
            <text class="value-text">{{ item.value }}</text>
            <text class="unit-text">{{ item.unit }}</text>
          </div>
        </div>
      </div>
    </div>
    <div class="btn" v-if="hasBottomBar" @click="onClicked">
      <text class="btn-text" :style="mrTextStyle">{{ btnText }}</text>
    </div>
  </div>
</template>

<script>
import { THEME_COLOR } from './type.js'

export default {
  props: {
    listData: {
      type: Array,
      default: () => []
    },
    hasBottomBar: {
      type: Boolean,
      default: true
    },
    theme: {
      type: String,
      default: 'primary'
    },
    btnText: {
      type: String,
      default: '查看使用日志'
    }
  },
  computed: {
    matrixData() {
      return this.listData
    },
    mrTextStyle() {
      let { theme } = this
      let colorVal = THEME_COLOR[theme] || '#00A4F2'
      return {
        color: colorVal
      }
    }
  },
  methods: {
    adaptPaddingFn(li, ln, ci, cn) {
      return {}
    },
    adaptBorderFn(li, ln, ci, cn) {
      let { hasBottomBar } = this
      if (ln === 0) {
        if (ci < cn) {
          if (hasBottomBar) {
            return {
              ...{
                borderRightWidth: '1px',
                borderBottomWidth: '0'
              }
            }
          } else {
            return {
              ...{
                borderRightWidth: '1px',
                borderBottomWidth: '0'
              }
            }
          }
        } else {
          if (hasBottomBar) {
            return {
              ...{
                borderRightWidth: '0',
                borderBottomWidth: '0'
              }
            }
          } else {
            return {
              ...{
                borderRightWidth: '0',
                borderBottomWidth: '0'
              }
            }
          }
        }
      } else {
        if (li < ln) {
          if (ci < cn) {
            return {
              ...{
                borderBottomWidth: '1px',
                borderRightWidth: '1px',
                paddingBottom: '40px'
              }
            }
          } else {
            return {
              ...{
                borderBottomWidth: '1px',
                paddingBottom: '40px'
              }
            }
          }
        } else {
          if (ci < cn) {
            if (hasBottomBar) {
              return {
                ...{
                  borderRightWidth: '1px',
                  borderBottomWidth: '0',
                  paddingBottom: '40px'
                }
              }
            } else {
              return {
                ...{
                  borderRightWidth: '1px',
                  borderBottomWidth: '0',
                  paddingTop: '40px'
                }
              }
            }
          } else {
            if (hasBottomBar) {
              return {
                ...{
                  borderRightWidth: '0',
                  borderBottomWidth: '0',
                  paddingBottom: '40px'
                }
              }
            } else {
              return {
                ...{
                  borderRightWidth: '0',
                  borderBottomWidth: '0',
                  paddingTop: '40px'
                }
              }
            }
          }
        }
      }
    },
    onClicked() {
      this.$emit('dofBottomBarClicked')
    }
  }
}
</script>

<style scoped>
.dof-panel {
  width: 686px;
  border-radius: 16px;
  background-color: #ffffff;
}
.dof-panel-container {
  padding: 40px 32px;
}
.container-bottom-padding {
  /* padding-bottom: 40px; */
}
.dashboard {
  flex-direction: row;
}
.cell {
  flex: 1;
  justify-content: center;
  align-items: stretch;
  border-color: #f2f2f2;
  /* padding-bottom: 40px; */
}

.title {
  align-items: center;
  justify-content: center;
}
.title-text {
  font-family: PingFangSC-Regular;
  font-size: 24px;
  line-height: 24px;
  color: #616C73;
  lines: 1;
  text-overflow: ellipsis;
}
.value {
  flex-direction: row;
  margin-top: 18px;
  align-items: flex-end;
  justify-content: center;
}
.value-text {
  font-family: PingFangSC-Medium;
  font-size: 44px;
  line-height: 44px;
  color: #1E2E37;
}
.unit-text {
  margin-left: 6px;
  font-family: PingFangSC-Regular;
  font-size: 24px;
  line-height: 32px;
  color: #616C73;
}
.btn {
  height: 100px;
  align-items: center;
  justify-content: center;
  border-top-width: 1px;
  border-color: #f2f2f2;
}
.btn-text {
  font-family: PingFangSC-Medium;
  font-size: 28px;
  color: #00A4F2;
  text-align: center;
  line-height: 28px;
}
</style>