<template>
  <div>
    <select-comp :cb="onClick"  :del="onDelete" :showDelete="showDelete">
      <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" :hideAddButton="true"
                     :hideDeleteButton="true"></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,
      showDelete: true
    };
  },
  mounted() {
    this.resourceService = new ResourceService();
    console.log('allData:',this.allData)
    if (this.allData.data && this.allData.data[0] && this.allData.data[0].src) {
      this.imgUrl = this.allData.data[0].src.replace(/{mode}/, 2).replace(/{width}/, 378).replace(/\/h\/{height}/, '');
    }
  },
  methods: {
    onClick() {
      this.show = true;
    },
    onDelete() {

    },
    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.allData = JSON.parse(this.data);
      this.list = this.allData.data;
      this.$bus.$emit('updated');
    },
  },
  components: {
    selectComp,
    bannerEditor
  }
}
</script>

<style>

</style>