<template>
  <div>
    <setting ></setting>
    <toolbar @rename="onRename"></toolbar>

    <popup v-show="showRename" :can-close="false">
      <div class="ui-message ui-message-confirm dark" style="width: 400px">
        <div class="ui-message-header">
          <span>重命名</span>
          <span @click="showRename = false">
            <i class="iconfont icon_close"></i>
          </span>
        </div>
        <div class="ui-message-main re-name">
          <div>
            <input
              class="ui-input"
              type="text"
              maxlength="15"
              placeholder="输入名字"
              v-model="reNameItem.reName"
            />
          </div>
        </div>

        <div class="ui-message-footer">
          <button class="ui-button cancel" @click="showRename = false">
            取消
          </button>
          <button :class="`ui-button submit`" @click="handleRename()">
            确定
          </button>
        </div>
      </div>
    </popup>

  </div>
</template>
<script>
import Setting from "./Setting";
import Toolbar from "./Toolbar";
import Popup from "@/components/shared/popup";

import {
  saveSomeData
} from "@/api";


export default {
  name: "home",
  components: {
    Setting,
    Toolbar,
    Popup
  },
  data() {
    return {
      showRename: false,
      reNameItem: {
        id: "",
        reName: "",
      }
    };
  },
 
  methods: {
   
    onRename(data) {
      this.reNameItem.id = data.id;
      this.reNameItem.reName = data.sceneTitle;
      this.showRename = true;
    },
    handleRename() {
      if (!this.reNameItem) {
        return this.$alert({ content: "请输入名字" });
      }
      saveSomeData(
        {
          id: this.reNameItem.id,
          sceneTitle: this.reNameItem.reName,
        },
        () => {
          this.$tips({ content: "重命名成功", icon: "ok" });
          this.showRename = false;
          this.$bus.emit("refresh");
        }
      );
    },
 
  },
};
</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);
}
.pano-con {
  height: auto;
  background: none;
  padding: 10px 0;
  .ui-remark {
    padding-left: 10px;
  }
  > ul {
    > li {
      cursor: pointer;
    }
  }
}
.re-name {
  width: 80%;
  margin: 40px auto;
}
.add-vr {
  text-align: left;
  .ui-remark {
    margin: 10px 0;
  }
}
</style>
