<template>
  <com-dialog
    title="上线"
    :show="show"
    @submit="enter"
    @update:show="val => $emit('update:show', val)">

    <div class="share-layer" v-if="initItems.length">
      <h3>初始场景</h3>
      <div class="radio content">
        <div v-for="item in initItems" :key="item.id" class="radio-item">
          <el-radio :modelValue="modelValue.init" @update:modelValue="v => $emit('update:modelValue', {...modelValue, init: v})" :label="item.id" class="radio-input"> &nbsp;</el-radio>
          <previewItem :item="normalize(item)" class="radio-content" />
        </div>
      </div>

      <h3>户型VR</h3>
      <el-checkbox-group  :modelValue="modelValue.vrList" @update:modelValue="v => $emit('update:modelValue', {...modelValue, vrList: v})" class="checkbox content">
        <div class="cb-item" v-for="item in vrItems" :key="item.id">
          <a :href="item.webSite" target="_blank">
            <img :src="item.icon">
          </a>
          <el-checkbox :label="item.id" class="input">{{item.type === 'house' ? item.roomName : item.sceneTitle}}</el-checkbox>
        </div>
      </el-checkbox-group>

      <p class="mk">注：初始场景将展示再楼盘详情页顶部banner位置，户型VR将展示再户型详情页顶部banner位置</p>
    </div>

    <p v-else style="text-align:center;margin-top: 50px">
      暂无预览链接，请先设置初始场景。
    </p>
  </com-dialog>
</template>

<script>
import comDialog from "@/components/dialog";
import previewItem from "@/components/previewItem";
import { computed } from '@vue/runtime-core';

export default {
  props: ['show', 'items', 'modelValue'],
  setup(props) {
    const initItems = computed(
      () => props.items.filter(({isInit}) => isInit)
    )
    const vrItems = computed(
      () => props.items.filter(({isInit, type, byType}) => 
        isInit 
          ? type === 'house' && byType === '0'
          : type === 'house' && byType !== 'garden'
        )
    )

    return {
      initItems,
      vrItems
    }
  },
  methods: {
    normalize(item) {
      return {
        ...item,
        type: item.type === 'garden' && item. byType === '0' ? 'building' : item.type,
        QrCode: item.icon + '?m=' + Date.now(),
        link: process.env.VUE_APP_DOMAIN + item.webSite,
        title: item.type === 'house' ? item.roomName : item.sceneTitle,
      }
    },
    enter() {
      if (!this.modelValue.init) {
        this.$alert('未添加初始场景无法保存!', '提示')
      } else {
        this.$emit('online')
      }
    }
  },
  mounted() {
    console.log(this.initItems, this.vrItems)
    this.$emit('update:modelValue', {
      init: this.initItems[0] && this.initItems[0].id,
      vrList: this.vrItems.map(({id}) => id)
    })
  },
  components: {
    "com-dialog": comDialog,
    previewItem
  }
}
</script>

<style lang="less" scoped>

.share-layer {
  margin-left: 10px;

  h3 {
    margin-bottom: 20px;
    display: flex;
    align-items: center;
  }
}

.content {
  margin: 0 16px 0 0;
  padding-right: 55px;
  overflow-y: auto;
  max-height: 448px;
  padding-bottom: 20px;
}

.radio-item {
  display: flex;
  align-items: center;

  .radio-input {
    flex: none;
    margin-right: 0;
  }

  .radio-content {
    flex: 1;
  }
}

.checkbox {
  display: flex;
}

.cb-item {
  width: 126px;
  flex: none;
  margin-right: 20px;

  img {
    display: block;
    width: 100%;
    height: 126px;
  }
  
  .input {
    margin-top: 10px;
  }
}

.mk {
  color: #909399;
  font-size: 12px;
  margin: 20px;
}
</style>