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

    <i-modal
      v-model="show"
      @on-ok="onOk"
      @on-cancel="onCancel"
      title="轮播图资源位"
      width="650"
    >
      <banner-editor ref="editor" v-model="list"></banner-editor>
    </i-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();
      console.log('保存:', this.allData, this.allData.data);
      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.allData = JSON.parse(this.data);
      this.list = this.allData.data;
      this.$bus.$emit('updated');
    }
  },
  components: {
    selectComp,
    bannerEditor
  }
}
</script>

<style>

</style>