<template>
  <div class="reimburseExpense-container">
    <div 
			class="reimburse-card"
			:class="{'last-card': index === 4}"
			v-for="(item, index) in reimburseList" 
			:key="index" 
			:style="{backgroundImage:`url(${require(`../assets/img/${item.background}.png`)})`}"
			@click="gotoQuery(item)"
			>
			<img :src="require(`../assets/img/${item.icon}.png`)" class="card-img">
      <div class="card-content">
				{{item.title}}
      </div>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    itemSetting: {
      type: Array,
      default: () => []
    },
  },
  data() {
    return {
      reimburseList: [
        {
          title: '报销出差费用',
          icon: 'chuchai',
          background: 'chuchaibg',
          query: 'queryview.CLFSQDJCX',
        },
        {
          title: '报销其他费用',
          icon: 'qita',
          background: 'qitabg',
          query: 'queryview.YGLSCGYYDJCX',
        },
        {
          title: '报销会议费用',
          icon: 'huiyi',
          background: 'huiyibg',
          query: 'queryview.HYFSQYYCX',
        },
        {
          title: '报销培训费用',
          icon: 'peixun',
          background: 'peixunbg',
          query: 'queryview.PXFSQYYCX',
        },
        {
          title: '借款/还款',
          icon: 'jiehuankuan',
          background: 'jiehuankuanbg',
          query: 'queryview.JKDCX',
        },
      ],
    }
  },
  created() {
    let prop = this.itemSetting.properties
		if (prop && Array.isArray(prop)) {
			for (let i = 0; i < this.reimburseList.length; i ++) {
				this.reimburseList[i] = Object.assign(this.reimburseList[i], prop[i])
			}
		}
  },
	methods: {
		gotoQuery(item) {
			GMS.$hideContainer.$router.push({
				path: `/backToQuery/${item.query}`
			})
		}
	}
}
</script>
<style lang="less" scoped>
.reimburseExpense-container {
  display: flex;
  flex-grow: 1;
  height: 100%;
  .reimburse-card {
    position: relative;
    height: 100%;
    width: 100%;
    background-repeat: no-repeat;
    background-size: 100% 100%;
		display: flex;
		align-items: center;
		margin-right: 12px;
		border-radius: 4px;
		cursor: pointer;
		.card-img {
			height: 50px;
			width: 50px;
			margin-left: 16px;
			margin-right: 4px;
		}
    .card-content {
      width: 100%;
			height: 24px;
			text-align: left;
			font-size: 17px;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #ffffff;
			line-height: 24px;
    }
  }
	.last-card {
		margin-right: 0px;
	}
}

</style>