<template>
  <div>
    <div class="medias">
    <div class="btn-push">
      <span v-if="!selected.icon">选择场景</span>
      <div class="scene-con" v-else>
        <i class="iconfont iconedit_type_3d"
                    :class="{'iconedit_type_panorama':selected.type!=='4dkk'}"></i>
        <img class="icon" :src="selected.icon||$thumb" alt="">
        <span class="shenglve">{{selected.sceneTitle||'名字'}}</span>
        <i @click="del" class="iconfont iconedit_case_delete"></i>
      </div>
    </div>
  </div>
  <button class="ui-button submit" @click="showScene = true">选择场景</button>
  <div class="dialog" style="z-index: 2000" v-if="showScene">
      <Select
        @cancle="showScene = false"
        :selected='selected'
        :title="'选择素材'"
        @submit="handleSelect"
      >
      </Select>
    </div>
  </div>
</template>

<script>
import Select from "@/components/select";

export default {
  props:['scene'],
  components:{Select},
  data(){
    return {
      showScene:false,
      selected:{...this.scene}
    }
  },
  methods:{
    handleSelect(data){
      this.$emit('sceneSelect',data)
      this.selected = data
      this.showScene =false
    },
    del(){
      this.selected = ''
      this.$emit('sceneSelect','')
    }
  }
}
</script>

<style lang="less" src="./style.less"></style>

<style lang="less" scoped>
.ui-button{
  width: 100%;
  margin-top: 10px;
}
.medias{
  height: 122px;
  cursor: auto;
}
.scene-con{
  display: flex;
  justify-content: space-between;
  padding: 10px;
  width: 100%;
  height: 100%;
  position: relative;
  .iconfont{
    position: absolute;
    left: 18px;
    top: 18px;
    color: #fff;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 2px;
    padding: 8px;
  }
  .icon{
    width: 102px;
    height: 102px;
  }
  >span{
    flex: 1;
    text-align: left;
    padding-left: 10px;
    white-space: break-spaces;
  }
  .iconedit_case_delete{
    left: auto;
    top: auto;
    right: 10px;
    bottom: 10px;
    border-radius: 50%;
    cursor: pointer;
  }
}
</style>
