<template>
  <div class="file-list-group">
    <div class="header" @click="toggleExpand">
      <div class="icon-wrapper">
        <Icon v-if="isExpanded" type="ios-arrow-up" />
        <Icon v-else type="ios-arrow-down" />
      </div>
      <div class="title-text">单据影像</div>
    </div>
    <div class="content-wrapper" v-show="isExpanded">
      <Item
        v-for="(img, index) in imgList"
        :key="img.imgUrl"
        :img="img"
        @click.native="handleItemClick(index)"
        :isSelected="index == currentIndex"
      />
    </div>
  </div>
</template>

<script>
import Item from './item.vue'
export default {
  components: {
    Item,
  },
  props: ['currentIndex', 'imgList'],
  data() {
    return {
      isExpanded: true,
    }
  },
  watch: {
  },
  methods: {
    handleItemClick(index) {
      this.$emit('current-change', index)
    },
    toggleExpand() {
      this.isExpanded = !this.isExpanded
    },
  },
}
</script>

<style lang="less" scoped>
.file-list-group {
  width: 100%;
  height: 100%;
  overflow-y: scroll;
  font-family: PingFangSC-Medium, PingFang SC;
  .header {
    cursor: pointer;
    display: flex;
    align-items: center;
    width: 100%;
    height: 42px;
    background: #F8F8F8;
    .icon-wrapper {
      color: #03A4AD;
      margin: 0 8px 0 16px;
    }
    .title-text {
      height: 20px;
      font-size: 14px;
      font-weight: 500;
      color: #555555;
      line-height: 20px;
    }
  }
}

</style>