<style lang="less" scoped>
@import './index.less';
</style>
<template>
  <div class="weipage" :style="style">
    <list-view
      ref="listView"
      :data="data"
      :draggable="draggable"
      :highlight-row="draggable"
      :disabled-hover="!draggable"
      :row-before-click="rowBeforeClick"
      @on-row-click="clickCurrentRow"
      @on-drag-drop="dragAndDrop"
      @on-row-delete="deleteRow"
      @on-current-change="currentRowChange"
      @on-row-dblclick="dblclickCurrentRow"
      @on-head-click="clickHead"
      @on-foot-click="clickFoot"
      @on-row-selected-change="rowSelectedChange"
    >
      <div v-if="showNavBar" slot="head" :class="[{'weipage-highlight': highlight}]">
        <nav-bar :title="title" left-arrow />
      </div>
      <!-- 底部插槽 -->
      <div slot="foot" />


      <!-- 在微页面编辑页面要实现双向绑定，这里不能直接用row，而要用data[index] -->
      <!-- 广告-->
      <template slot-scope="{ row,index }" slot="BANNER">
        <banner
          :show-placeholde="showPlaceholde"
          :list="data[index].compsDetail.imageList"
          :banner-type="data[index].compsDetail.bannerType"
          :image-style="data[index].compsDetail.bannerImageStyle"
          :radius="data[index].radius"
          :margin="data[index].margin"
          :image-margin="data[index].compsDetail.imageMargin"
        />
      </template>
      <!-- 导航-->
      <template slot-scope="{ row, index }" slot="NAVI">
        <navigation-bar
          :list="data[index].compsDetail.itemList"
          :image-style="data[index].compsDetail.navigatorImageStyle"
          :screen-count="data[index].compsDetail.screenCount"
          :font-color="data[index].compsDetail.fontColor"
          :background-color="data[index].backgroundColor"
          :border="data[index].border == 0 ? false : true"
        />
      </template>
      <!-- 商品-->
      <template slot-scope="{ row, index }" slot="PRODUCT_LIST">
        <product-list
          :show-placeholde="showPlaceholde"

          :list="data[index].compsDetail.productList"

          :show-type="data[index].compsDetail.showType"
          :product-style="data[index].compsDetail.productStyle"
          :radius="data[index].radius"
          :image-scale="data[index].compsDetail.imageScale"
          :image-fill="data[index].compsDetail.imageFill"
          :font-weight="data[index].compsDetail.fontWeight"
          :text-align="data[index].compsDetail.textAlign"
          :margin="data[index].margin"
          :product-margin="data[index].compsDetail.productMargin"
          :show-product-title="data[index].compsDetail.showProductTitle == 0 ? false : true "
          :show-product-desc="data[index].compsDetail.showProductDesc == 0 ? false : true"
          :show-product-price="data[index].compsDetail.showProductPrice == 0 ? false : true"
          :show-product-origin-price="data[index].compsDetail.showProductOriginPrice == 0 ? false : true"
          :show-buy="data[index].compsDetail.showBuy == 0 ? false : true"
          :buy-btn-name="data[index].compsDetail.buyBtnName"
          :buy-btn-style="data[index].compsDetail.buyBtnStyle"
          :show-badge="data[index].compsDetail.showBadge == 0 ? false : true"
          :background-color="backgroundColor"
        />
      </template>
      <!-- 商品分组-->
      <template slot-scope="{ row, index }" slot="PRODUCT_GROUP">
        <product-group
          :show-placeholde="showPlaceholde"

          :group-list="data[index].compsDetail.groupList"
          :menu-type="data[index].compsDetail.menuType"
          :menu-style="data[index].compsDetail.menuStyle"
          :menu-position="data[index].compsDetail.menuPosition"
          :get-product-page-function="getGroupProductPageFunction"
          :show-more-btn="data[index].compsDetail.showMoreBtn == 0 ? false : true"
          :more-btn-target="data[index].compsDetail.moreBtnTarget"

          :show-type="data[index].compsDetail.productSetting.showType"
          :product-style="data[index].compsDetail.productSetting.productStyle"
          :radius="data[index].radius"
          :image-scale="data[index].compsDetail.productSetting.imageScale"
          :image-fill="data[index].compsDetail.productSetting.imageFill"
          :font-weight="data[index].compsDetail.productSetting.fontWeight"
          :text-align="data[index].compsDetail.productSetting.textAlign"
          :margin="data[index].margin"
          :product-margin="data[index].compsDetail.productSetting.productMargin"
          :show-product-title="data[index].compsDetail.productSetting.showProductTitle == 0 ? false : true "
          :show-product-desc="data[index].compsDetail.productSetting.showProductDesc == 0 ? false : true"
          :show-product-price="data[index].compsDetail.productSetting.showProductPrice == 0 ? false : true"
          :show-product-origin-price="data[index].compsDetail.productSetting.showProductOriginPrice == 0 ? false : true"
          :show-buy="data[index].compsDetail.productSetting.showBuy == 0 ? false : true"
          :buy-btn-name="data[index].compsDetail.productSetting.buyBtnName"
          :buy-btn-style="data[index].compsDetail.productSetting.buyBtnStyle"
          :show-badge="data[index].compsDetail.productSetting.showBadge == 0 ? false : true"
          :background-color="backgroundColor"
        />
      </template>
      <!-- 团购-->
      <template slot-scope="{ row, index }" slot="GROUPON">
        <product-groupon
          :show-placeholde="showPlaceholde"

          :groupon-type="data[index].compsDetail.grouponType"
          :add-type="data[index].compsDetail.addType"
          :groupon-id-list="data[index].compsDetail.grouponIdList"

          :get-product-page-function="getGrouponProductPageFunction"
          :show-count="data[index].compsDetail.showCount"
          :show-more-btn="data[index].compsDetail.showMoreBtn == 0 ? false : true"
          :more-btn-target="data[index].compsDetail.moreBtnTarget"
          :more-jump-link="data[index].compsDetail.moreJumpLink"
          :sort-rule="data[index].compsDetail.sortRule"
          :show-count-down="data[index].compsDetail.showCountDown == 0 ? false : true "
          :show-sale-count="data[index].compsDetail.showSaleCount == 0 ? false : true "
          :show-sale-out="data[index].compsDetail.showSaleOut == 0 ? false : true "

          :show-type="data[index].compsDetail.productSetting.showType"
          :product-style="data[index].compsDetail.productSetting.productStyle"
          :radius="data[index].radius"
          :image-scale="data[index].compsDetail.productSetting.imageScale"
          :image-fill="data[index].compsDetail.productSetting.imageFill"
          :font-weight="data[index].compsDetail.productSetting.fontWeight"
          :text-align="data[index].compsDetail.productSetting.textAlign"
          :margin="data[index].margin"
          :product-margin="data[index].compsDetail.productSetting.productMargin"
          :show-product-title="data[index].compsDetail.productSetting.showProductTitle == 0 ? false : true "
          :show-product-desc="data[index].compsDetail.productSetting.showProductDesc == 0 ? false : true"
          :show-product-price="data[index].compsDetail.productSetting.showProductPrice == 0 ? false : true"
          :show-product-origin-price="data[index].compsDetail.productSetting.showProductOriginPrice == 0 ? false : true"
          :show-buy="data[index].compsDetail.productSetting.showBuy == 0 ? false : true"
          :buy-btn-name="data[index].compsDetail.productSetting.buyBtnName"
          :buy-btn-style="data[index].compsDetail.productSetting.buyBtnStyle"
          :show-badge="data[index].compsDetail.productSetting.showBadge == 0 ? false : true"
          :background-color="backgroundColor"
        />
      </template>
      <!-- 富文本框-->
      <template slot-scope="{ row,index }" slot="RICHTEXT">
        <rich-text
          :show-placeholde="showPlaceholde"
          :content="data[index].compsDetail.content"
          :full-screen="data[index].compsDetail.fullScreen == 0 ? false : true"
          :background-color="data[index].backgroundColor"
        />
      </template>
      <!-- 标题-->
      <template slot-scope="{ row, index }" slot="TITLE_TEXT">
        <title-text
          :title="data[index].compsDetail.title"
          :desc="data[index].compsDetail.descr"
          :text-align="data[index].compsDetail.textAlign"
          :title-font-size="data[index].compsDetail.titleFontSize"
          :desc-font-size="data[index].compsDetail.descFontSize"
          :desc-font-weight="data[index].compsDetail.descFontWeight"
          :title-font-weight="data[index].compsDetail.titleFontWeight"
          :title-color="data[index].compsDetail.titleColor"
          :desc-color="data[index].compsDetail.descColor"
          :background-color="data[index].backgroundColor"
          :divider="data[index].compsDetail.divider == 0 ? false : true"
          :link-more="data[index].compsDetail.linkMore == 0 ? false : true"
          :link-text="data[index].compsDetail.linkText"
          :link-type="data[index].compsDetail.linkType"
          :link="data[index].compsDetail.busiLink.jumpLink"
        />
      </template>
      <!-- 橱窗 -->
      <template slot-scope="{ row, index }" slot="SHOWCASE">
        <showcase
          :show-placeholde="showPlaceholde"
          :list="data[index].compsDetail.imageList"
          :showcase-type="data[index].compsDetail.showcaseType"
          :margin="data[index].margin"
          :image-margin="data[index].compsDetail.imageMargin"
        />
      </template>
      <!-- 辅助空白-->
      <template slot-scope="{ row, index }" slot="BLANK">
        <blank
          :line-type="data[index].compsDetail.lineType"
          :height="data[index].height"
          :line-style="data[index].compsDetail.lineStyle"
          :line-margin="data[index].compsDetail.lineMargin"
          :line-color="data[index].compsDetail.lineColor"
          :background-color="data[index].backgroundColor"
        />
      </template>
      <!-- 引用微页面-->
      <template slot-scope="{ row, index }" slot="RELATED">
        <!-- 暂且用户 -->
        <releted-w-page
          :show-placeholde="showPlaceholde"
          :data="data[index].compsDetail.compList"
          :wpage-id="data[index].compsDetail.wpageId"
          :show-nav-bar="false"
          :draggable="false"
          :background-color="data[index].compsDetail.backgroundColor"
          :get-group-product-page-function="getGroupProductPageFunction"
          :get-groupon-product-page-function="getGrouponProductPageFunction"
        />
      </template>
      <template slot-scope="{ row, index }" slot="VIEW">
        <!-- h={{ data[index].height }}
        <div> -->
        <comps-view
          :index="index"
          :show-component-panel=" currentSelectIndex === index"
          :show-placeholde="showPlaceholde"
          :data="data[index]"
          @on-delete="onDeleteRowSub"
          @on-click="onClickRowSub"
        />
        <!-- </div> -->
      </template>
    </list-view>
  </div>
</template>
<script>
import VueDragResize from 'vue-drag-resize';
import banner from '../banner/index';
import navigationBar from '../navigation-bar/index';
import productList from '../product-list/index';
import productGroup from '../product-group';
import productGroupon from '../product-groupon';
import richText from '../rich-text/index';
import titleText from '../title-text/index';
import showcase from '../showcase/index';
import listView from '../list-view/index.vue';
import blank from '../blank/index';
import ReletedWPage from './components/related-wpage';
import CompsView from './components/comps-view';

import WPageImage from './components/wpage-image';
// import listHead from '../list-view/list-head'
// import listFoot from '../list-view/list-foot'
import pageCompsFactory from './ts/wpage-comps-factory';

import navBar from '../nav-bar';

export default {
  name: 'weipage',
  components: {
    CompsView,
    ReletedWPage,
    WPageImage,
    banner,
    navigationBar,
    productList,
    productGroup,
    productGroupon,
    richText,
    showcase,
    titleText,
    listView,
    navBar,
    blank,
    VueDragResize
  },
  /**
  /**
   * 组件的属性列表
   */
  props: {

    /**
     * 是否在没有内容时显示占位图（注：目前在微页面的编辑时用到判断）
     */
    showPlaceholde: {
      type: Boolean,
      default: false
    },
    /**
     * 标题
     */
    title: String,
    /**
     * 数据集
     * wpage-comps-bean
     */
    data: {
      type: Array,
      default() {
        return [];
      }
    },
    /**
     * 是否显示顶部导航条
     */
    showNavBar: {
      type: Boolean,
      default: true
    },
    /**
     * 是否可以拖动
     */
    draggable: {
      type: Boolean,
      default: false
    },

    /**
     * 背景颜色 #fffff
     */
    backgroundColor: {
      type: String,
      default: '#fffff'
    },
    /**
     * 行点击前调用的方法，可以控制是否高亮选中，方法返回true为可以选中并高亮
     */
    rowBeforeClick: {
      type: Function,
      default() {
        return true;
      }
    },
    /**
     * 获得分组的商品列表Json回调方法
     * 参数列表如下：
     *  1.groupId| String | 分组Id
     *  2.pageNo | number |页码
     *  3.showCount| number |显示个数
     *  4.firstSort | String | 排序第一优先级 maxSerialNo:序号越大越靠前 hot:最热的排在最前
     *  5.secondSort | String | 排序第二优先级 create_late:创建越晚越靠前 create_early:创建越早越靠前 hot:最热越靠前
     *  返回结果
     * Promise类型弄
     * {
     *  pageNo:1
     *  hasMore: false, // 是否有下一页
     *  record: [{
     *   'price':0  // 价格
     *   'picUrl': '' // 显示图片
     *   'jumpLink': '' // 跳转链接
     *   'originPrice': '' // 原价
     *   'title': '商品标题' // 标题
     *   }
     *  }
     * }
     */
    getGroupProductPageFunction: {
      type: Function,
      default() {
        return null;
      }
    },
    /**
     * 获得商品拼团列表Json回调方法
     * 参数列表如下：
     * 1.addType | String |添加方式  add:手动添加  auto:自动获取
     * 2.showSaleOut | boolean | 是否显示已经卖完的
     * 3.grouponIdList | String|  业务拼团Id集
     * 4.sortRule | String | 排序规则   max_sale:销量越多越靠前   start_late:开始时间越晚越靠前  end_early:结束时间越早越靠前
     * 5.pageNo | Number | 页码
     * 6.showCount | Number | 页大小
     *  返回结果
     * Promise类型弄
     * {
     *  pageNo:1
     *  hasMore: false, // 是否有下一页
     *  record: [{
     *     price:0  // 价格
     *     picUrl: '' // 显示图片
     *     jumpLink: '' // 跳转链接
     *     originPrice': '' // 原价
     *     title: '商品标题' // 标题
     *     startTime: '2019-11-21 00:00:00',  // 拼团开始时间
     *     endTime: '2019-12-31 00:00:00',  // 拼团结束时间
     *     grouponJoinCount: 0,  // 已经参加的拼团数
     *     grouponUserCount: 3,  // 开团人数
     *     grouponStatus: 'PROCEEDING', // 拼团状态
     *   }
     *  }
     * }
     */
    getGrouponProductPageFunction: {
      type: Function,
      /**
       * @param addType
       * @param grouponIdList
       * @param sortRule
       * @param  pageNo 页码
       * @param showCount 显示条数
       */
      default(addType, grouponIdList, sortRule, pageNo, showCount) {
        return null;
      }
    }
  },

  /**
   * 组件的初始数据
   */
  data() {
    return {
      // 是否整个高亮
      highlight: false,
      /**
       * 当前选择的索引
       */
      currentSelectIndex: -1
    };
  },
  computed: {
    style() {
      const style = {};
      if (this.backgroundColor) {
        style.backgroundColor = this.backgroundColor;
      }
      return style;
    }
  },
  watch: {
    data: {
      immediate: true,
      handler(data) {
        if (data && data.length > 0) {
          data.forEach(item => {
            // 设置插槽字符
            item.slot = item.compsType;
          });
        }
      }
    }
  },
  mounted() {
    // this.$refs['listView'].highlightCurrentRow(0)
    //  this.$refs['listView'].clickCurrentRow(0)
  },
  /**
   * 组件的方法列表
   */
  methods: {
    /**
     * 当前行内容改变
     */
    currentRowChange(newData, oldData) {
      this.$emit('on-current-change', newData, oldData);
    },

    /**
     * 点击了头部
     */
    clickHead() {
      // this.selectedPlugin = {};
      this.currentSelectIndex = -1;
      this.highlight = true;
      this.$emit('on-head-click');
    },
    /**
     * 点击了底部
     */
    clickFoot() {
      // this.selectedPlugin = {};
      this.currentSelectIndex = -1;
      this.highlight = false;
      this.$emit('on-foot-click');
    },
    /**
     * 点击当前行
     */
    clickCurrentRow(row, _index) {
      console.log('-------------click---------', _index);
      this.highlight = false;
      this.currentSelectIndex = _index;
      this.$emit('on-row-click', row, _index);
    },
    /**
     * 点击
     * @param rowIndex 当前行的索引
     * @param subIndex 被点击的子组件索引
     */
    onClickRowSub(rowIndex, subIndex) {
      let row;
      if (rowIndex >= 0 && this.data && rowIndex < this.data.length) {
        row = this.data[rowIndex];
      }
      this.$emit('on-row-sub-click', row, rowIndex, subIndex);
    },
    /**
     * 双击当前行
     */
    dblclickCurrentRow(row, _index) {
      this.$emit('on-row-dblclick', row, _index);
    },
    /**
     * 删除行
     */
    deleteRow(_index) {
      this.$emit('on-row-delete', _index);
    },
    /**
     * 删除行内的组件
     * @param rowIndex 当前行的索引
     * @param subIndex 被删除的子索引
     */
    onDeleteRowSub(rowIndex, subIndex) {
      this.$emit('on-row-sub-delete', rowIndex, subIndex);
    },
    /**
     * 拖拉完成后处理
     */
    dragAndDrop(oldIndex, newIndex) {
      this.$emit('on-drag-drop', oldIndex, newIndex);
    },
    /**
     * 行选择改变事件
     */
    rowSelectedChange(oldIndex, newIndex) {
      this.currentSelectIndex = newIndex;
      this.$emit('on-row-selected-change', oldIndex, newIndex);
    },
    /**
     * 高亮当前行
     */
    clickRow(_index) {
      if (_index < 0) {
        return;
      }
      this.$refs.listView.clickCurrentRow(_index);
    },
    /**
     * 清除当前选择中行
     */
    clearCurrentRow() {
      this.$refs.listView.clearCurrentRow();
    },
    /**
     * 根据wpage-comps-factory工厂生成的model添加
     */
    addComponentWithModel(model) {
      const selectedIndex = this.currentSelectIndex + 1;
      if (this.data && model) {
        // 指定位置增加元素
        this.data.splice(selectedIndex, 0, model);
      }
      // 添加后选中
      setTimeout(() => {
        this.clickRow(selectedIndex);
      }, 500);
    },
    /**
     * 添加組件
     */
    addComponent(compType) {
      let model = {};
      if (compType === 'BANNER') { // 广告
        model = pageCompsFactory.createBanner();
      } else if (compType === 'NAVI') { // 导航
        model = pageCompsFactory.createNavigator();
      } else if (compType === 'TITLE_TEXT') { // 标题
        model = pageCompsFactory.createTitleText();
      } else if (compType === 'PRODUCT_LIST') { // 商品
        model = pageCompsFactory.createProductList();
      } else if (compType === 'PRODUCT_GROUP') { // 商品分组
        model = pageCompsFactory.createProductGroup();
      } else if (compType === 'GROUPON') { // 商品拼团
        model = pageCompsFactory.createProductGroupon();
      } else if (compType === 'SHOWCASE') { // 橱窗
        model = pageCompsFactory.createShowcase();
      } else if (compType === 'RICHTEXT') { // 富文本
        model = pageCompsFactory.createRichText();
      } else if (compType === 'BLANK') { // 空白
        model = pageCompsFactory.createBlank();
      } else if (compType === 'RELATED') { // 引用微页面
        model = pageCompsFactory.createRelated();
      } else if (compType === 'VIEW') { // 自定义视图
        model = pageCompsFactory.createView();
      }

      this.addComponentWithModel(model);
      return model;
    }
  }
};
</script>
