<template>
  <div>
  <selectComp :cb="onClick">
  <div class="hot">
    <div class="hot-title">{{name}}</div>
    <div class="hot-body">
      <img src="~assets/item_bg.png" alt="" srcset="" class="hot-image" v-for="i in list" :key="i.id">
    </div>
  </div>
  </selectComp>

  <Modal v-model="show" title="系列资源位" @on-ok="onOk" @on-cancel="onCancel">
    <hot-editor :name.sync="name" :list.sync="list"></hot-editor>
  </Modal>

  </div>

</template>

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

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

    return {
      allData,
      show: false,
      name: allData.template_intro,
      list: allData.data.split(','),
    }
  },
  mounted() {
    this.resourceService = new ResourceService();
  },
  methods: {
    onClick() {
      this.show = true;
    },
    onOk() {
      this.allData.template_intro = this.name;
      this.allData.data = this.list.join(',');

      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.name = this.allData.template_intro;
      this.list = this.allData.data.split(',');

      this.$bus.$emit('updated');
    }
  },
  components: {
    selectComp,
    hotEditor
  }
}
</script>

<style>
  .hot {
    background-color: white;
  }

  .hot-title {
      font-size: 25px;
      text-align: left;
      padding-top: 10px;
  }

  .hot-body {
      background-color: white;
      text-align: left;
  }

  .hot-image {
      margin-top: 10px;
      width: 25%;
  }

</style>