<template>
  <el-dialog
    class="form-editor-dialog"
    fullscreen
    destroy-on-close
    :visible.sync="dialogVisible"
    v-if="dialogVisible"
  >
    <el-container>
      <el-header class="mobile-header" v-if="layoutType === 1">
        <i @click="close" class="el-icon-close mobile-header-icon"></i>
      </el-header>
      <el-header class="header" style="height: 45px" v-else>
        <div class="navbar-default box-shadow flex">
          <span>布局预览</span>
          <div>
            <el-button type="danger" @click="close">关闭</el-button>
          </div>
        </div>
      </el-header>
      <el-main
        v-if="dialogVisible && gridList && gridList.length > 0"
        :class="{'preview-main': layoutType === 1}"
      >
        <div :class="{'preview-main__sub': layoutType === 1}">
          <template v-if="currentColumnHref">
            <div class="mobile-design__header">
              <img :src="mobileHeaderImg" class="mobile-design__img" />
            </div>
            <div class="preview-main__content">
              <iframe
                v-if="currentColumnHref"
                :src="currentColumnHref"
                style="height:100%;width:100%;border:0px;border-radius:10px"
              ></iframe>
            </div>
          </template>
          <template v-else>
            <template v-if="layoutType === 1">
              <div class="mobile-design__header">
                <div
                  class="mobile-design__status"
                  :class="[isShowCarousel ? 'showCarousel__status' : '']"
                >
                  <img :src="mobileStatusBarImg" class="mobile-design__img " />
                </div>
                <HtSwipeSlide
                  v-if="isShowCarousel"
                  :showData="showRow.bannerTypeIds"
                  :isRadius="false"
                  :height="230"
                  v-cloak
                  :showTitle="false"
                  :isPublic="1"
                  style="pointer-events: none;"
                ></HtSwipeSlide>
                <div class="mobile-design__white" v-else>
                  <span class="text">首页</span>
                </div>
              </div>
            </template>
            <div :class="{'preview-main__content': layoutType === 1}">
              <el-row
                v-for="(grid, i) in gridList"
                :key="i"
                :gutter="grid.options && grid.options.gutter"
              >
                <div v-if="grid.type == 'grid'">
                  <el-col
                    v-for="(columns, j) in grid.columns"
                    :Key="j"
                    :span="columns.span"
                  >
                    <ht-column
                      v-for="(cl, k) in columns.list"
                      :key="k"
                      :column-alias="cl.alias"
                      :fromPreview="true"
                      :isMobile="isMobile"
                    ></ht-column>
                  </el-col>
                </div>
                <div v-if="grid.type == 'tab'">
                  <el-col :span="24">
                    <ht-tabs-column :grid="grid"></ht-tabs-column>
                  </el-col>
                </div>
                <div v-if="!grid.type">
                  <el-col :span="24">
                    <ht-column
                      :column-alias="grid.alias"
                      :fromPreview="true"
                      :isMobile="isMobile"
                    ></ht-column>
                  </el-col>
                </div>
              </el-row>
            </div>
          </template>
        </div>
      </el-main>
      <div class="new-layout__content" v-else>
        <ht-portal
          ref="htPortal"
          :column-layout-alias="currentLayoutAlias"
          :isShowDelete="false"
          :currentUser="currentUser"
          :isDrag="false"
        >
          <template #empty>
            <el-empty
              :image="noDataImg"
              :image-size="380"
              description="暂无栏目"
            ></el-empty>
          </template>
        </ht-portal>
      </div>
    </el-container>
  </el-dialog>
</template>
<script>
import portal from '@/api/portal.js'
let Base64 = require('js-base64').Base64
import HtColumn from '@/components/common/HtColumn.vue'
import HtTabsColumn from '@/components/common/HtTabsColumn.vue'
import {mapState} from 'vuex'
export default {
  components: {HtColumn, HtTabsColumn},
  data() {
    return {
      layoutType: null,
      layout: {},
      gridList: [],
      dialogVisible: false,
      newLayout: {
        header: [],
        main: {
          left: [],
          center: [],
          right: []
        },
        bottom: []
      },
      mainLayout: {
        left: [],
        center: [],
        right: []
      },
      spanMap: {
        two: {
          left: 16,
          right: 8
        },
        three: {
          left: 8,
          center: 8,
          right: 8
        },
        'equal-two': {
          left: 12,
          right: 12
        }
      },
      currentLayoutAlias: '',
      isMobile: false,
      noDataImg: require('@/assets/nodata_images/no-data.png'),
      showRow: {},
      currentColumnHref: '',
      timer: null
    }
  },
  computed: {
    ...mapState('login', ['currentUser']),
    colSpan() {
      const layoutCol = this.newLayout.main.layoutCol || 'two'
      return key => {
        return this.spanMap[layoutCol][key]
      }
    },
    mobileStatusBarImg() {
      if (this.isShowCarousel) {
        return require('@/assets/img/mobile-white-status-bar.png')
      } else {
        return require('@/assets/img/mobile-status-bar.png')
      }
    },
    isShowCarousel() {
      return (
        this.showRow.bannerTypeIds && this.showRow.bannerTypeIds.length != 0
      )
    },
    mobileHeaderImg() {
      return require('@/assets/img/mobile-design-banner.png')
    }
  },
  methods: {
    async showDialog(row, layoutType, href) {
      this.showRow = row
      this.isMobile = row.layoutType === 1
      this.currentLayoutAlias = row.alias
      this.dialogVisible = true
      this.layoutType = row.layoutType
      if (!href) {
        this.loadData(row.id)
      } else {
        this.gridList = ['temp']
        this.currentColumnHref = href
      }
    },
    loadData(layoutId) {
      portal.getLayoutMngById(layoutId).then(data => {
        this.layout = JSON.parse(Base64.decode(data.designHtml) || '{}')
        if (this.layout.main && Object.keys(this.layout.main).length > 0) {
          const {left, center, right} = this.layout.main || {}
          this.newLayout = this.layout
          this.mainLayout = {
            left: left,
            center: center,
            right: right
          }
          this.layout.main.layoutCol !== 'three' &&
            delete this.mainLayout.center
          if (this.isMobile) {
            this.gridList = this.layout.mobileList
          }
        } else {
          this.gridList = this.isMobile
            ? this.layout.mobileList
            : this.layout.list
        }
      })
    },
    close() {
      this.dialogVisible = false
      this.layout = {}
      this.gridList = []
    }
  }
}
</script>
<style lang="scss" scoped>
.col-layout {
  width: 100%;
  display: flex;
  .layout-left {
    flex: 1;
    min-width: 550px;
    overflow: hidden;
  }
  .layout-right {
    min-width: 450px;
    max-width: 450px;
  }
  .center,
  .right,
  .layout-col_left-three,
  .layout-col_left-equal-two {
    flex: 1;
  }
  .layout-col_left-three {
    flex: 1;
  }
  .layout-col_left-two {
    flex: 2;
  }
  .col-group {
    div {
      min-height: 50px;
    }
    .col-item {
      margin-bottom: 16px;
      background: #fff;

      ::v-deep .todo-subject {
        color: #409eff;
        cursor: pointer;
      }
    }
  }
}
::v-deep {
  .layout-row {
    margin: 0 !important;
    .el-col {
      &:first-child {
        padding-left: 0 !important;
      }
      &:last-child {
        padding-right: 0 !important;
      }
    }
  }
}
.navbar-default {
  height: 100%;
  background-image: none;
  background: #fff;
  border-radius: 0px;
  box-shadow: 0px 2px 5px rgba(86, 96, 117, 0.15);
  border-bottom: 1px solid #ededed;
  justify-content: space-between;
}

.navbar-default span {
  color: #666;
  font-size: 14px;
  line-height: 48px;
  font-weight: bold;
  margin-left: 20px;
}

.navbar-default button {
  margin-right: 10px;
}
.header {
  padding: 0;
  background: #fff;
  z-index: 7;
}
.mobile-header {
  display: flex;
  justify-content: flex-end;
  padding: 3px 8px;
  height: 24px !important;
  &-icon {
    font-size: 18px;
    cursor: pointer;
  }
}

.controler-container {
  margin-right: 3px;
  box-shadow: 2px 0 5px #ededed;
}

.property-container {
  margin-left: 3px;
  box-shadow: -2px 0 5px #ededed;
}

.widget-form-container {
  background: #fafafa;
  position: relative;
  padding: 0 5px;
  margin-top: 1px;
}

.footer-container {
  border-top: 1px solid #ededed;
}
.form-editor-dialog >>> .el-dialog__header {
  display: none;
}

.form-editor-dialog {
  ::v-deep {
    .el-dialog__body {
      padding: 0;
      height: 100%;
      background: #f5f5f5;
      .new-layout__content {
        padding: 24px;
        background: #f5f5f5;
      }
    }
  }
}
.widget-col {
  margin-bottom: 20px;
}
/deep/ .el-container {
  height: 100%;
}
.preview-main {
  background-image: url('../../assets/img/mobile-android.png');
  background-repeat: no-repeat;
  background-position: center;
  background-size: 445px 100%;
  overflow: hidden;
  &__sub {
    width: 409px;
    height: calc(100% - 10px);
    margin: 0px auto;
    margin-top: 10px;
    overflow-y: auto;
    overflow-x: hidden;
    border-radius: 30px;
    position: relative;
    // border:1px solid red;
    // 隐藏滚动条
    &::-webkit-scrollbar {
      width: 0;
      background-color: transparent;
    }
    -ms-overflow-style: none; /*这将影响IE10+*/
    scrollbar-width: none; /*这将影响Firefox*/
  }
  .preview-main__content {
    width: 375px;
    // margin: 28px auto;
    height: calc(100% - 48px);
    // overflow: auto;
    border-radius: 0 0 40px 40px;
    position: absolute;
    top: 200px;
    left: 50%;
    transform: translateX(-50%);
    ::v-deep {
      .el-card {
        border-radius: 15px;
        overflow: hidden;
      }
      .ht-data-sheets {
        .no-tabs {
          padding: 16px 12px !important;
        }
        .form-list--header {
          display: none;
        }
        .template-preview-container {
          .template-content {
            display: block;
          }
          .field-wrap {
            padding: 12px;
          }
          .footer-wrap,
          .form-list--footer {
            display: none !important;
          }
          .van-cell__value {
            background: #f9f9f9;
            border-radius: 8px 8px 8px 8px;
          }
          .field-item--title,
          .field-content {
            padding: 0 !important;
          }

          .field-item--title {
            width: 100% !important;
          }
          .form-list--content {
            height: 100% !important;
            min-height: 150px;
            overflow-y: hidden !important;
          }
          .van-cell {
            padding: 0 !important;
          }
          .van-list > div:nth-last-of-type(2) {
            margin-bottom: 0 !important;
          }

          .van-cell:nth-last-of-type(1) {
          }
        }
      }
    }
    // 隐藏滚动条
    &::-webkit-scrollbar {
      width: 0;
      background-color: transparent;
    }
    -ms-overflow-style: none; /*这将影响IE10+*/
    scrollbar-width: none; /*这将影响Firefox*/
  }
  // ::-webkit-scrollbar {
  //   /*改变纵向滚动条宽度*/
  //   width: 6px;
  // }
  // ::-webkit-scrollbar-thumb {
  //   /*改变滚动条滑轨相关的样式*/
  //   border-radius: 10px;
  //   background-color: #ccc;
  // }
}
.mobile-design {
  &__img {
    width: 100% !important;
    height: auto;
  }
  &__status {
    width: 100%;
    background-color: #fff;
    padding: 13px 28px;
    box-sizing: border-box;
    // position: absolute;
    // top:0;
    // left: 0;
    // z-index: 99;
  }
  &__slide {
    // width:100%;
    // position: absolute;
    // top:0;
    // left:0;
  }
  &__white {
    width: 100%;
    height: 44px;
    background-color: #fff;
    text-align: center;
    line-height: 44px;
    .text {
      font-size: 17px;
      font-weight: 800;
      color: #222222;
    }
  }
  .mobile-draggable {
    height: calc(100% - 184px);
    width: 100%;
    position: absolute;
    top: 180px;
    left: 0;
  }

  .widget-form-list {
    background: none;
    height: calc(100% - 40px);
    // overflow: auto;

    .draggable-content__header {
      margin-bottom: 16px;
      background: #fff;
      border: none;
      border-radius: 10px;
      padding: 0 10px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
}
.showCarousel__status {
  position: absolute !important;
  z-index: 20 !important;
  background: transparent !important;
}
.mobile-design__header {
  text-align: center;
  position: relative;
  // .el-image {
  //   width: 350px;
  //   border-radius: 26px 26px 0 0;
  // }
  margin-bottom: 10px;
  // border-radius: 10px;
}
</style>
