<template>
  <div class="scroll-x">
    <table class="table-box" cellspacing="0" v-if="toyCategoryList.length > 0">
      <tr class="table-row-box" v-for="(ditem, dindex) in toyCategoryList" :key="dindex">
        <td class="table-columns-box" v-for="(item, index) in columnsLength" :key="index"
          :style="{ minWidth: item == 1 ? '130px' : '160px' }">
          {{ ditem[index] ? (tipDict[ditem[index].key]) + ditem[index].title : '' }}
        </td>
      </tr>
    </table>
    <div v-else>--</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      columnsLength: 0,
      tipDict: {
        putArea: '',
        toyCategory: '二级：',
        detailCategory: '三级：',
        developmentGoals: '发展目标：',
        diversityLabels: '多样性：',
      }
    }
  },
  props: {
    toySortRelationList: {
      type: Array,
      default: () => []
    }
  },
  computed: {
    toyCategoryList() {
      return this.fn(this.toySortRelationList)
    },
  },
  methods: {
    fn(val) {
      if (val && val.length > 0) {
        let list = val.map((item, index) => {
          // 0 => 固定（一、二、三、发展、多样性）
          if (item.type != null && Number(item.type) == 0) {
            if (this.columnsLength < 5) this.columnsLength = 5;
            return this.getToyCategoryListItem(item, ['putArea', 'toyCategory', 'detailCategory', 'diversityLabels', 'developmentGoals'])
            // 1 => 固定（一、二、三、发展、多样性）
          } else if (item.type != null && Number(item.type) == 1) {
            if (this.columnsLength < 5) this.columnsLength = 5;
            return this.getToyCategoryListItem(item, ['putArea', 'toyCategory', 'detailCategory', 'developmentGoals', 'diversityLabels'])
            // 2 => 固定（一、二、三、多样性）
          } else if (item.type != null && Number(item.type) == 2) {
            if (this.columnsLength < 4) this.columnsLength = 4;
            return this.getToyCategoryListItem(item, ['putArea', 'toyCategory', 'detailCategory', 'diversityLabels'])
            // 3 => 固定（一、二、发展、多）
          } else if (item.type != null && Number(item.type) == 3) {
            if (this.columnsLength < 4) this.columnsLength = 4;
            return this.getToyCategoryListItem(item, ['putArea', 'toyCategory', 'developmentGoals', 'diversityLabels'])
            // 4 => 固定（一、发展、三、多）
          } else if (item.type != null && Number(item.type) == 4) {
            if (this.columnsLength < 4) this.columnsLength = 4;
            return this.getToyCategoryListItem(item, ['putArea', 'developmentGoals', 'detailCategory', 'diversityLabels'])
          } else {
            return null;
          }
        }).filter(item => !!item)
        return list;
      } else {
        return []
      }
    },
    //获取type分类的item子类
    getToyCategoryListItem(item, columns) {
      let list = []
      columns.forEach(ditem => {
        if (item[ditem + 'Name']) {
          list.push({
            title: ditem == 'putArea' ? item[ditem + 'Name'].split('区').join('玩具') : item[ditem + 'Name'],
            key: ditem,
            code: item[ditem + 'Code'],
          })
        }
      });
      return list
    },
  }
}
</script>

<style lang="scss" scoped>
.scroll-x {
  flex: 1;
  overflow-x: auto;
  max-width: 100%;
  border-left: 1px solid #ededed;
  border-right: 1px solid #ededed;

  &::-webkit-scrollbar-track-piece {
    background: #f7f7f7;
  }

  &::-webkit-scrollbar {
    height:8px;
    transition: opacity 120ms ease-out;
  }

  &::-webkit-scrollbar-thumb {
    // background: #99a9bf;
    background-color: rgba(144,147,153,.3);
    border-radius: 4px;
  }
}


.table-box {
  max-width: calc(100% - 40px);
  border-top: 1px solid #ededed;
  border-bottom: 1px solid #ededed;
  border-collapse: collapse;

  .table-row-box {

    .table-columns-box {
      min-width: 100%;
      min-height: 40px;
      font-size: 13px;
      padding: 8px 30px;
    }

  }

  .table-row-box:not(:first-child) {
    border-top: 1px solid #ededed;
  }
}
</style>
