<template>
  <CommonStack title="商品属性" :query="query">
    <template v-slot:default="{ stackQuery }">
      <CommonFilter ref="filter" action="getAttributeMainList" />
      <CommonWrapper name="attribute-main">
        <CommonDetail
          name="attribute-main"
          :query="stackQuery"
          resetAction="getAttributeMain"
          submitAction="editAttributeMain"
          @on-save="onMainSave" />
      </CommonWrapper>
      <CommonWrapper name="attribute-list">
        <AttributeList
          :query="stackQuery"
          name="attribute-list"
          @on-save="init" />
      </CommonWrapper>
    </template>
  </CommonStack>
</template>

<script>
import AttributeList from './AttributeList'

export default {
  name: 'attribute',
  components: {
    AttributeList,
  },
  props: {
    query: {
      type: Object,
      required: false,
      default () {
        return {}
      },
    },
  },
  methods: {
    init () {
      this.$refs.filter.request()
    },
    onMainSave () {
      this.$stack.go()
      this.init()
    },
  },
}
</script>
