<template>
  <div class="commonfunctions-container">
    <div class="title">常用功能</div>
    <div class="card-wrapper">
      <CardItem
        v-for="(item, index) in reimburseList" 
        :key="index"
        :item="item"
        :style="{width: `${100 / rowIconNum}%`}"
      >
      </CardItem>
    </div>
  </div>
</template>
<script>
import CardItem from '../components/CardItem.vue'

export default {
  props: {
    itemSetting: {
      type: Array,
      default: () => []
    },
    context: {
      type: Object,
      default: () => ({})
    },
  },
  components: {
    CardItem,
  },
  data() {
    return {
      reimburseList: [],
      rowIconNum: 4,
      appMap: new Map(),
    }
  },
  async created() {
    const routes = await window.GMS.util.nvwa.getRoutes()
    this.addApp(routes.data.children)
    let prop = this.itemSetting.properties
		if (prop) {
      this.rowIconNum = Number(prop?.properties?.rowIconNum || 4)
			this.reimburseList = this.mapFunction(prop)
		}
  },
  mounted() {
    window.GMS.vbus.$on('widgetPluginPropertiesChange', (val) => {
      if (!val.id || val.id != this.itemSetting.type + this.itemSetting.id) return
      this.rowIconNum = Number(val?.properties?.rowIconNum || 4)
      this.reimburseList = this.mapFunction(val.properties)
    })
  },
  unmounted() {
    window.GMS.vbus.$off('widgetPluginPropertiesChange')
  },
	methods: {
    mapFunction(val = { configList: [] }) {
      return val.configList.filter(o => this.appMap.has(o.function)).map(o => ({...o, function: this.appMap.get(o.function)}))
    },
    addApp(l = []) {
      for (let o of l) {
        if (o.type == 'ROUTE') {
          this.appMap.set(o.id, o)
        }
        else if (o.type == 'GROUP') {
          this.addApp(o.children)
        }
      }
    },
	}
}
</script>
<style lang="less" scoped>
.commonfunctions-container {
  font-family: PingFangSC-Medium, PingFang SC;
  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-wrap: wrap;
    flex-grow: 1;
  }
}

</style>