<template>
  <div class="mybill-container">
    <div class="title">我的账单</div>
    <div class="card-wrapper">
      <CardItem
        v-for="(item, index) in reimburseList" 
        :key="index"
        :item="item"
      >
      </CardItem>
    </div>
  </div>
</template>
<script>
import CardItem from '../components/CardItem.vue'

export default {
  props: {
    itemSetting: {
      type: Array,
      default: () => []
    },
  },
  components: {
    CardItem,
  },
  data() {
    return {
      reimburseList: [],
      functionMap: new Map(),
    }
  },
  async created() {
    const routes = await window.GMS.util.nvwa.getRoutes()
    this.addFunction(routes.data.children)
    let prop = this.itemSetting.properties
		if (prop && Array.isArray(prop)) {
			this.reimburseList = this.mapProperties(prop)
		}
  },
  mounted() {
    window.GMS.vbus.$on('widgetPluginPropertiesChange', (val) => {
      if (!val.id || val.id != this.itemSetting.type + this.itemSetting.id) return
      this.reimburseList = this.mapProperties(val.properties || [])
    })
  },
  unmounted() {
    window.GMS.vbus.$off('widgetPluginPropertiesChange')
  },
	methods: {
    addFunction(l = []) {
      for (let o of l) {
        if (o.type == 'ROUTE') {
          this.functionMap.set(o.id, o)
        }
        else if (o.type == 'GROUP') {
          this.addFunction(o.children)
        }
      }
    },
    mapProperties(val) {
      return val.map((o) => {
        const ans = {...o, function: this.functionMap.get(o.function)}
        return ans
      })
    }
	}
}
</script>
<style lang="less" scoped>
.mybill-container {
  font-family: PingFangSC-Medium, PingFang SC;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 16px;
  border-radius: 6px;
  border: 1px solid #E5E5E5;
  overflow: hidden;
  background-color: white;
  .title {
    text-align: left;
    padding-left: 11px;
    height: 22px;
    font-size: 16px;
    font-weight: 500;
    color: #0F0F0F;
    position: relative;
    line-height: 22px;
    &::before {
      content: '';
      position: absolute;
      left: 0;
      top: ~"calc(50% - 7px)";
      width: 3px;
      height: 14px;
      background: #5369D8;
      border-radius: 2px;
    }
  }
  .card-wrapper {
    display: flex;
    flex-grow: 1;
  }
}

</style>