<template>
  <div class="app-view-toolbar app-view-full-toolbar">
    <div class="main" :class="{disable:$justview}">
      <div class="ui-title-big">基础设置</div>
      <div class="ui-title"><span class="require">封面</span></div>
      <div class="upload-con">
        <div class="uc-l">
          <div class="preview">
            <img :src="baseIcon||info.coverImagUrl" v-if="info.coverImagUrl" alt="" />
            <div class="tips" v-else>
              <i class="iconfont iconphotoview" style="font-size:40px"></i>
            </div>
          </div>
          <div class="upload-btn">
            <span class="ui-remark">建议512*512px<br />支持jpg/png格式</span>
            <button :class="{disable:!info}" class="ui-button submit" @click="$refs.upload.click()">
              上传
              <upload
                ref="upload"
                media-type="image"
                @file-change="onFileChange"
              ></upload>
            </button>
          </div>
        </div>
        <div class="uc-r">
          <div class="ui-title">
            <span class="require">标题</span>
            <div class="guide">
              <i class="iconfont iconmod_guide"></i>
              <div>
                <div class="remark strong">VR楼盘项目标题命名规范</div>
                <div class="line"></div>
                <div class="remark">
                  1.新房：建议包含楼盘房源名称，如恒大城-三房两厅；
                </div>
                <div class="remark">
                  2.二手房楼盘全景：建议楼盘全景名称，如恒大城楼盘全景。
                </div>
              </div>
            </div>
          </div>
          <div :class="{ 'ui-warning': false }">
            <input
              v-model="info.houseTitle"
              @blur="$store.commit('SetInfo',info)"
              type="text"
              class="ui-input"
              maxlength="50"
              placeholder="VR楼盘项目标题限50字"
            />
          </div>
          <div class="ui-title" style="margin-top:10px"><span>简介</span></div>
          <div :class="{ 'ui-warning': false }">
            <textarea
              v-model="info.shareDesc"
              @blur="$store.commit('SetInfo',info)"
              style="height:110px;"
              maxlength="200"
              placeholder="请填写简介限200字"
              type="text"
              class="ui-input ui-textarea"
            />
          </div>
        </div>
      </div>
    </div>
    <image-cropper
      :title="'封面'"
      :src="dataURL"
      :radius="15"
      :options="options"
      :compress="true"
      @crop-blob="onCropData"
      @close="onCropClose"
    ></image-cropper>
  </div>
</template>

<script>
import { uploadCover} from "@/api";
import ImageCropper from "@/components/shared/ImageCropper";
import Upload from "@/components/shared/uploads/Upload";
import { mapGetters } from "vuex";

export default {
  components: {
    ImageCropper,
    Upload,
  },
  data() {
    return {
      canLoad:false,
      dataURL: "",
      baseIcon:'',
      options: {
        minContainerSize: { width: 512, height: 512 },
        containerStyle: {
          width: "512px",
          height: "512px",
        },
      },
    };
  },
   computed: {
    ...mapGetters({
      info:'info'
    })
  },
  mounted(){
    this.$bus.on('canLoad',(data)=>{
      this.canLoad = data
    })
  },
  methods: {
    onFileChange(file) {
      this.dataURL = file.dataURL;
    },
    onCropData(blob, base64) {
      uploadCover(
        { file: base64, filename: "image.jpg" },
        (data) => {
            this.baseIcon = base64 || data.data;
            this.info.coverImagUrl = data.data;
        },
        () => {
          this.$alert({
            content: "上传失败",
          });
        }
      );
    },
    onCropClose() {
      this.dataURL = "";
      this.$refs.upload.clear();
    },
  },
};
</script>

<style lang="less" scoped>
.main {
  position: fixed;
  width: 800px;
  top: 20%;
  left: 50%;
  transform: translateX(-50%);
}

.upload-con {
  display: flex;
}

.uc-r {
  width: 100%;
}

.upload-btn {
  display: flex;
  width: 216px;
  justify-content: space-between;
  align-items: center;
  margin-top: 10px;
  .ui-button {
    min-width: 64px;
  }
}

.guide {
  cursor: pointer;
  position: relative;
  &:hover {
    > div {
      display: block;
    }
  }
  i {
    color: #ababab;
  }
  > div {
    cursor: default;
    padding: 10px 18px;
    display: none;
    z-index: 10000;
    position: fixed;
    right: 0;
    top: -90px;
    width: 500px;
    background: #161a1a;
    box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
    border-radius: 5px;
    overflow: hidden;
    color: rgba(255, 255, 255, 0.5);
    .remark {
      line-height: 2.5;
    }

    .strong {
      color: #fff;
    }

    .line {
      width: 100%;
      height: 1px;
      background: rgba(255, 255, 255, 0.16);
      margin: 10px 0;
    }
  }
}

.preview {
  img {
    width: 100%;
    height: 100%;
  }
}
</style>
