<template>
  <div class="reimburseExpense-container">
    <CardItem
      v-for="(item, index) in reimburseList" 
			:key="index"
      :item="item"
    >
    </CardItem>
  </div>
</template>
<script>
import CardItem from '../components/CardItem.vue'

export default {
  props: {
    itemSetting: {
      type: Array,
      default: () => []
    },
  },
  components: {
    CardItem,
  },
  data() {
    return {
      reimburseList: [],
      iconColorMap: {
        daishenpi: '#FEAA60',
        bohuidaiban: '#FF7A66',
        daixiayibushenpi: '#62AEFF',
        shenpiwancheng: '#57D896',
      },
      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
      val = val.properties || []
      this.reimburseList = this.mapProperties(val)
    })
  },
  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)}
        ans.color = this.iconColorMap[ans.icon]
        try {
          ans.icon = require(`../assets/img/${ans.icon}.png`)
        } catch {
          console.log('icon not found')
        }
        return ans
      })
    }
	}
}
</script>
<style lang="less" scoped>
.reimburseExpense-container {
  display: flex;
  flex-grow: 1;
  height: 100%;
}

</style>