<template>
  <div>
    <select-comp :cb="onClick" :del="onDelete" :showDelete="showDelete">
      <template v-for="item in imgUrl">
        <img :src="item" alt="" srcset="" width="50%" height="120px" style="-webkit-box-sizing: border-box;box-sizing: border-box;">
      </template>

    </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: [],
      show: false,
      list: allData.data,
      allData,
      showDelete: true
    };
  },
  mounted() {
    this.resourceService = new ResourceService();
    for(let i in this.allData.data) {
      let img = this.allData.data[i].src.split('?')[0];
      this.imgUrl.push(img);
    }
  },
  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>