<template>
    <LayoutContent :breads="[{url: 'resource-list.html', title: '资源位列表'}, {title: '资源位编辑'}]">
        <div class="main">
            <div class="editor-container">
                <i-card>
                    <p slot="title">{{title}}</p>
                    <template v-for="(i, index) in floorList">
                        <div class="floor-item">
                            <div class="floor-image" v-if="i.template_name === 'singleImage'">
                                <img style="width: 100%" :src="i.data[0].src.split('?')[0] || require('assets/banner-img.png')">
                                <div class="floor-mask">
                                    <div class="floor-edit-buttons">
                                        <a href="javascript:void(0)"
                                           @click="showModal('singleImage', i, index)">编 辑</a>
                                        <a style="background-color: red" href="javascript:void(0)"
                                           @click="showDeleteModal(index)">删 除</a>
                                    </div>
                                </div>
                            </div>
                            <div class="floor-image" v-if="i.template_name === 'twoPicture'">
                                <img style="width: 50%; height: 120px;" :src="i.data[0].src.split('?')[0] || require('assets/banner-img.png')">
                                <img style="width: 50%; height: 120px;" :src="i.data[1].src.split('?')[0] || require('assets/banner-img.png')">
                                <div class="floor-mask">
                                    <div class="floor-edit-buttons">
                                        <a href="javascript:void(0)"
                                           @click="showModal('twoPicture', i, index)">编 辑</a>
                                        <a style="background-color: red" href="javascript:void(0)"
                                           @click="showDeleteModal(index)">删 除</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <divide></divide>
                    </template>
                </i-card>
            </div>
            <div class="button-container">
                <i-button type="primary" @click="showModal('singleImage', singleData, -1)">一张图</i-button>
                <i-button type="primary" @click="showModal('twoPicture', twoData, -1)">两张图</i-button>
            </div>


            <Modal v-model="show" @on-ok="onOk" @on-cancel="onCancel" :title="modalInfo.modalTitle" width="650">
                <banner-editor ref="addEditor" v-model="modalData" :hideAddButton="true"
                               :hideDeleteButton="true"></banner-editor>
            </Modal>
        </div>
    </LayoutContent>
</template>

<script>
  import util from '@/libs/util';
  import ResourceService from '../../service/resource-service';
  import bannerEditor from '../../components/banner-editor';
  import SmartFloor from '../../components/smart-floor';
  import Divide from '../../components/divide';

  export default {
    name: 'resourceEditNew',
    components: {
      Divide,
      bannerEditor,
      SmartFloor
    },
    data() {
      return {
        title: '',
        list: [],
        floorList: [],
        modalInfo: { // 用于保存一些当前正在处理的数据
          modalType: 0, // 3: 一张图 4: 两张图
          modalTitle: '', // Modal的标题,
          resContentId: 0,
          floorIndex: -1, // 当前编辑的楼层
          template_intro: '',
          template_name: ''
        }, // 当前正在编辑的数据
        singleData: {
          data: {
            '0': {
              alt: '',
              bgColor: '',
              imgId: '0',
              src: '',
              url: {
                action: 'go.h5',
                url: ''
              }
            }
          },
          type: 3,
          template_intro: '一张图',
          template_name: 'singleImage',
          resContentId: 0
        }, // 一张图的基础数据
        twoData: {
          data: {
            '0': {
              alt: '',
              bgColor: '',
              imgId: '0',
              src: '',
              url: {
                action: 'go.h5',
                url: ''
              }
            },
            '1': {
              alt: '',
              bgColor: '',
              imgId: '0',
              src: '',
              url: {
                action: 'go.h5',
                url: ''
              }
            }
          },
          type: 4,
          template_intro: '两张图',
          template_name: 'twoPicture',
          resContentId: 0
        }, // 两张图的基础数据
        resId: null,
        bg: '',
        show: false, // 显示Modal
        modalData: [], // 传递给Modal用于处理的data
        uploadData: {
          id: util.getQueryString('id'),
          items: []
        } // 最终上传给服务器的data
      };
    },
    mounted() {
      this.resId = util.getQueryString('id');
      this.title = util.getQueryString('name');
      this.resourceService = new ResourceService();
      this.getResourceDetailList();
    },
    methods: {
      getResourceDetailList() {
        this.resourceService.info(this.resId).then(result => {
          console.log(result);
          this.list = result;
          this.manageAllData(result);
          this.manageFloorList(result);
        });
      },
      manageAllData(data) {
        this.uploadData.items = [];
        for (let i = 0; i < data.length; i++) {
          let item = {
            id: data[i].resContentId,
            contentName: data[i].name,
            templateKey: '123',
            contentData: data[i].data,
            type: data[i].type
          };
          this.uploadData.items.push(item);
        }
      },
      manageFloorList(data) {
        this.floorList = [];
        for (let i = 0; i < data.length; i++) {
          let item = JSON.parse(data[i].data);
          item.resContentId = data[i].resContentId;
          item.type = data[i].type;
          this.floorList.push(item);
          console.log('floorList:', this.floorList);
        }
      },
      showModal(type, data, index) {

        console.log(data, index);
        let modalType = 0;
        let modalTitle = '';

        for (let i in data.data) {
          let itemData = data.data[i];
          this.modalData.push(itemData);
        }

        console.log('modalData:', this.modalData);

        switch (type) {
          case 'singleImage':
            modalType = 3;
            modalTitle = '一张图';
            break;
          case 'twoPicture':
            modalType = 4;
            modalTitle = '两张图';
            break;
          default:
            break;
        }

        if (modalType) {
          this.modalInfo.modalType = modalType;
          this.modalInfo.modalTitle = modalTitle;
          this.modalInfo.resContentId = data.resContentId;
          this.modalInfo.template_intro = data.template_intro;
          this.modalInfo.template_name = data.template_name;
          this.modalInfo.floorIndex = index;
          this.show = true;
        }
        console.log('ModalInfo:', this.modalInfo);
      },
      showDeleteModal(index) { // 确认删除对话框
        this.$Modal.confirm({
          title: '删除确认！',
          content: '<p style="color: red">是否确认删除该楼层？</p>',
          width: 300,
          onOk: () => {
            this.uploadData.items.splice(index, 1);
            this.resourceService.addOrUpdateResourceDetail(this.uploadData).then(res => {
              if (res && res.code === 200) {
                this.$Message.success(res.message || '修改成功！');
                this.getResourceDetailList();
                this.modalData = [];
                this.modalInfo = {
                  modalType: 0,
                  modalTitle: '',
                  resContentId: 0,
                  floorIndex: -1,
                  template_intro: '',
                  template_name: ''
                };
              } else {
                console.log(res);
                this.$Message.error(res.message || '修改失败！');
              }
            });
          }
        });
      },
      onOk() { // 对话框点击确认时，保存数据
        let modalValue = this.$refs.addEditor.getValue();
        for(let key in modalValue) {
          if (modalValue[key].url.url === '') {
            this.modalData = [];
            this.$Message.error('请勿提交空数据');
            return;
          }
        }
        let data = {
          id: this.modalInfo.resContentId,
          contentName: '楼层' + (this.floorList.length + 1),
          templateKey: '123',
          contentData: JSON.stringify({
            template_name: this.modalInfo.template_name,
            template_intro: this.modalInfo.template_intro,
            data: modalValue
          }),
          type: this.modalInfo.modalType
        };
        if (this.modalInfo.floorIndex === -1) { // floorIndex=0时为新增，其他情况则替换相应楼层的数据
          this.uploadData.items.push(data);
        } else {
          data = Object.assign(data, {contentName: this.uploadData.items[this.modalInfo.floorIndex].contentName});
          this.uploadData.items[this.modalInfo.floorIndex] = data;
        }

        console.log('uploadData:', this.uploadData);
        this.resourceService.addOrUpdateResourceDetail(this.uploadData).then(res => {
          console.log(res);
          if (res && res.code === 200) {
            this.$Message.success(res.message || '修改成功！');
            this.getResourceDetailList();
            this.modalData = [];
            this.modalInfo = {
              modalType: 0,
              modalTitle: '',
              resContentId: 0,
              floorIndex: -1,
              template_intro: '',
              template_name: ''
            };
            this.show = false;
          } else {
            console.log(res);
            this.$Message.error(res.message || '修改失败！');
          }
        });
      },
      onCancel() {
        this.modalData = [];
        this.modalInfo = {
          modalType: 0,
          modalTitle: '',
          resContentId: 0,
          floorIndex: -1,
          template_intro: '',
          template_name: ''
        };
        this.show = false;
      }
    }
  };
</script>

<style>
    .main {
        display: flex;
        width: 100%;
        height: 100%;
        flex-direction: row;
        align-items: flex-start;
        justify-content: flex-start;
    }

    .ivu-card-head p {
        text-align: center;
    }

    .editor-container {
        width: 500px;
        height: 100%;
        flex-shrink: 0;
        border-right: 1px solid #e4e4e4;
        overflow-x: hidden;
        overflow-y: scroll;
    }

    .button-container {
        width: 50%;
        flex-grow: 1;
    }

    .button-container button {
        margin: 10px;
    }

    .floor-item {
        position: relative;
        width: 100%;
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        justify-content: flex-start;
        overflow: hidden;
    }

    .floor-image {
        width: 100%;
    }

    .floor-image img {
        width: 100%;
        float: left;
    }

    .floor-item:hover .floor-mask {
        display: block;
    }

    .floor-mask {
        display: none;
        position: absolute;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.6);
        left: 0;
        top: 0;
        z-index: 19;
    }

    .floor-mask .floor-edit-buttons {
        position: absolute;
        width: 100px;
        right: 0;
        top: 0;
        z-index: 20;

    }

    .floor-mask .floor-edit-buttons a {
        display: inline-block;
        width: 40px;
        box-sizing: border-box;
        background-color: gray;
        color: #fff;
        margin: 0 5px;
        float: left;
        text-align: center;
    }
</style>