<template>
  <div class="short-box" @click="createShortcut" style="{{getStyle()}}">
    <div class="short-container">
      <image class="add-short-image" src="../../assets/imgs/sign_banner.png"></image>
    </div>
  </div>
</template>
<script>
import shortcut from '@system.shortcut';
import prompt from '@system.prompt';
import { userAddDsktop } from '../../api/index.js';
import it from "../../helper/interface.js";
export default {
	data: {
		display: false,
		icon: "",
		app_name: "",
		title: "添加桌面免费领取100书币",
		desc: "海量优质好书等你读",
		bottom:0,
	},props: ["bottom"],
	onInit() {
		let info = it.getAppInfo();
		this.icon = info.icon;
		this.app_name = info.name;
	},
	createShortcut() {
		// 创建快捷方式
    let msg = ` 添加【${this.app_name}】到桌面，方便下次阅读`;
		shortcut.hasInstalled({
			success: (ret) => {
				if (!ret) {
					shortcut.install({
						message: msg,
						success: () => {
							this.$emit("addshort", { installed: true });
							if (this.$app.$def.data.backClickCount === 0) {
								this.$app.$def.data.backClickCount++;
								return true;
							}
							userAddDsktop(1).then(res => {
								//TODO 加桌后统计上报
							}).catch(r => {
								//TODO 失败后统计上报
							});
						},
						fail: (code) => {
							console.log(code);
							this.$emit("addshort", { installed: false, msg: code });
						}
					})
				}
			}
		})
	},getStyle(){
		if(this.bottom){
			return "bottom:"+this.bottom+"px;";
		}
		return "";
	}
}
</script>


<style lang="less" scoped>
.short-box {
  width: 100%;
  bottom: 150px;
  z-index: 1;
  position: fixed;
  justify-content: center;
}
.short-container {
  flex-direction: row;
  border-radius: 10px;
  padding:  0px 22px;
  justify-content: space-between;
}
.add-short-image{
  width: 690px;
  height: 136px;
  object-fit: fill;
}
.icon-box {
  width: 87px;
  height: 87px;
  margin: 20px;
  border-radius: 6px;
}
.icon-image{
   width: 87px;
  height: 87px;
  border-radius: 6px;
  object-fit: fill;
}
.info-box {
  width: 332px;
  justify-content: flex-start;
  flex-direction: column;
  margin-right: 90px;
  border-radius: 10px;
}
.info-title {
  margin-top: 20px;
  width: 332px;
  height: 45px;
  font-size: 28px;
  font-family: PingFangSC-Semibold, PingFang SC;
  font-weight: 600;
  color: #ffffff;
  line-height: 40px;
}
.info-desc {
  height: 33px;
  font-size: 24px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #ffffff;
  line-height: 33px;
  margin: 5px 0px 27px 0px;
}
.btn-txt {
  font-size: 24px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #ffffff;
  line-height: 33px;
  text-align: center;
}
.btn-box {
	margin: 38px 20px 0px 20px;
  width: 136px;
  height: 46px;
  background-color: #3AACFF;
  border-radius: 30px;
  justify-content: center;
}

</style>
