<template>
  <div>
  <select-comp :cb="onClick">
    <img src="~assets/sort_item.png" alt="" srcset="" width="100%">
  </select-comp>

  <Modal v-model="show" title="品类资源位" @on-ok="onOk" @on-cancel="onCancel">
    <sort-tab-editor ref="editor" :value="list"></sort-tab-editor>
  </Modal>
  </div>
</template>

<script>
import selectComp from './select-comp';
import sortTabEditor from './sortTab-editor'
import ResourceService from '@/service/resource-service';

export default {
  props: ['data', 'resContentDataId'],
  data() {
    let allData = JSON.parse(this.data);
    let vm = this;

    return {
      show: false,
      idStart: 1,
      list: vm.addId(allData.data),
      allData,
    }
  },
  mounted() {
    this.resourceService = new ResourceService();
  },
  methods: {
    onClick() {
      this.show = true;
    },
    addId(m) {
      m.forEach(i => {
        i.id = this.$bus.genId();
      })

      return m
    },
    onOk() {
      this.allData.data = this.$refs.editor.getValue();

      this.resourceService.editResource({
        id: this.resContentDataId,
        contentData: JSON.stringify(this.allData)
      }).then((result) => {
        this.$bus.$emit('updated');
        if (result.code !== 200) {
          this.$Message.error('保存失败')
          return;
        }
        this.$Message.success('保存成功')
      }).catch(() => {
        this.$bus.$emit('updated');
      })
    },
    onCancel() {
      this.$refs.editor.setValue(this.addId(JSON.parse(this.data).data))
      this.$bus.$emit('updated');
    }
  },
  components: {
    selectComp,
    sortTabEditor
  }
}
</script>

<style>

</style>