<template>
  <div class="view-setting" app-border dir-left>
    <div class="ui-title">初始场景</div>
    <div class="preview">
      <img v-if="info.firstScene" :src="info.firstScene.icon" alt="" />
      <div class="tips" v-else>
        <i class="iconfont iconphotoview" style="font-size: 40px"></i>
      </div>
    </div>
    <div class="setinit" v-if="info.firstScene">
      <button class="ui-button" @click="deleteIndexInfo">删除场景</button>
      <button @click="showInitScene = true" class="ui-button submit" :class="{ disable: false }">
        修改场景
      </button>
    </div>

    <template v-else>
      <div class="setinit">
        <button style="width:100%" @click="showInitScene = true" class="ui-button submit" :class="{ disable: false }">
          设置初始场景
        </button>
      </div>
      <div class="ui-remark">初始场景为查看链接时进入的第一个场景，未设置时，不固定从某一场景打开</div>
    </template>

    <div class="daolancon" app-border dir-top>
      <div class="ui-title">自动导览</div>
      <div class="dlbody">
        <p class="ui-remark">片段原地停留时间（秒）</p>
        <input
          type="text"
          class="ui-input"
          placeholder="请填写片段停留秒数"
          onkeyup="value=value.replace(/[^\d]/g,'')"
          :maxlength="4"
          v-model="info.guideDefaultTime"
        />
        <p class="ui-remark">注：有音频的片段以音频时长来分配时间，不以此项</p>
        <p class="ui-remark">导览顺序依照分组顺序播放</p>
      </div>
      
    </div>

    <div class="dialog" style="z-index: 2000" v-if="showInitScene">
      <Select @cancle="showInitScene = false" :selected="info.firstScene" :title="'选择素材'" @submit="handleSelect"> </Select>
    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import Select from "@/components/select";

export default {
  components: { Select },
  data() {
    return {
      showInitScene: false,
    };
  },
  methods: {
    deleteIndexInfo() {
      this.$confirm({
        content: "是否删除？",
        ok: () => {
          this.info.firstScene = "";
          this.$store.commit("SetInfo", this.info);
          this.$msg.success("删除成功");
        },
      });
    },
    handleSelect(data) {
      this.info.firstScene = data;
      this.$store.commit("SetInfo", this.info);
      console.log(this.info.firstScene);
      this.showInitScene = false;
    },
  },
  computed: {
    ...mapGetters({
      info: "info",
      backupInfo: "backupInfo",
    }),
  },
  mounted() {},
};
</script>

<style lang="less" scoped>
.dialog {
  position: fixed;
  z-index: 30;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
}
.view-setting {
  padding: 10px;
  width: 100%;
}
.preview {
  width: 100%;
  height: 102px;
  overflow: hidden;
  > img {
    width: 100%;
    height: 100%;
  }
}
.setinit {
  width: 100%;
  margin: 15px 0;
  display: flex;
  justify-content: space-between;
  .ui-button {
    width: 48%;
  }
}

.daolancon{
  margin-top: 20px;
  padding-top: 20px;
  .dlbody{
    background: #313131;
    padding: 18px 12px;
    >p{
      margin: 10px 0;
      &:first-of-type{
        margin-top: 0;
      }
      &:last-of-type{
        margin-bottom: 0;
      }
    }
  }
}
</style>
