<template>
  <div>
    <select-comp :cb="onClick">
      <img :src="imgUrl" alt="" srcset="" width="100%">
    </select-comp>

    <Modal
      v-model="show"
      @on-ok="onOk"
      @on-cancel="onCancel"
      title="轮播图资源位"
    >
      <banner-editor ref="editor" v-model="list"></banner-editor>
    </Modal>
  </div>
</template>

<script>
import selectComp from './select-comp';
import bannerEditor from './banner-editor';

import ResourceService from '@/service/resource-service';

export default {
  props: ['data', 'resContentDataId'],
  data() {
    let allData = JSON.parse(this.data);
    return {
      imgUrl: require('assets/banner-img.png'),
      show: false,
      list: allData.data,
      allData
    }
  },
  mounted() {
    this.resourceService = new ResourceService();
  },
  methods: {
    onClick() {
      this.show = true;
    },
    onOk() {
      this.allData.data = this.$refs.editor.getValue();

      this.resourceService.editResource({
        id: this.resContentDataId,
        contentData: JSON.stringify(this.allData)
      }).then(() => {
        this.$bus.$emit('updated');
      }).catch(() => {
        this.$bus.$emit('updated');
      })
    },
    onCancel() {
      this.allData = JSON.parse(this.data);
      this.list = this.allData.data;
      this.$bus.$emit('updated');
    }
  },
  components: {
    selectComp,
    bannerEditor
  }
}
</script>

<style>

</style>