<template>
  <div class="protocol">
    <div class="agreeProtocol" v-show="isProtocol">
      <slot>
        <van-checkbox @click="onChange" :checked-color="checkedColor" v-model="checked" v-if="!exists">
          <template #icon="props">
            <!-- {{ props.checked }} -->
            <img :src="props.checked ? activeButtonIcon : inactiveButtonIcon" />
          </template>
        </van-checkbox>
        <i :style="leftStyle" @click="onClick" v-if="!exists">{{ leftString }}</i>
        <i :style="leftStyle" v-if="exists">查看</i>
        <span @click="onPopupClose" :style="rightStyle">《{{ rightString }}》</span>
      </slot>
    </div>

    <!-- 协议 -->
    <van-popup id="protocolPopup" v-model="popupStatus" position="bottom">
      <m-protocol :protocolHTML="protocolHTML" :popupStatus="popupStatus" :checked="checked" :tenantId="tenantId" @onClose="onPopupClose" @onPopupSure="onPopupSure" />
    </van-popup>
  </div>
</template>

<script>
import MProtocol from "./MProtocol";
import { queryProduceContract, getContract } from "@/api/smallWeb";
// import setLoading from '@/utils/loading'
export default {
  name: "mheader",
  components: {
    MProtocol,
  },
  props: {
    value: {
      type: Boolean,
      default() {
        return false;
      },
    },
    tenantId: [String, Number], // 机构签署协议
    type: {
      type: [String, Number],
      default: 0,
    },
    musicGroupId: String,
    checkedColor: String,
    userId: String,
    activeIcon: String,
    inactiveIcon: String,
    leftStyle: String,
    leftString: {
      type: String,
      default() {
        return "我已阅读并同意";
      },
    },
    rightStyle: String,
    rightString: {
      type: String,
      default() {
        return "产品及服务协议";
      },
    },
  },
  data() {
    return {
      popupStatus: false,
      checked: this.value,
      exists: true, // 是否已经生成过协议
      protocolHTML: null, // 协议内容
      fullPath: null, //保存
      isProtocol: false, // 是否有协议内容
    };
  },
  mounted() {
    this.__init();
    // window.onhashchange = () => {
    // 	this.popupStatus = false
    // }
    window.addEventListener("hashchange", this.onHash, false);
  },
  methods: {
    onHash() {
      this.popupStatus = false;
    },
    async __init() {
      if (this.tenantId) {
        try {
          const res = await getContract({ id: this.tenantId, type: this.type });
          this.protocolHTML = res.data;
          this.isProtocol = this.protocolHTML ? true : false;
          this.exists = false;
          this.checked = false;
          this.$emit("input", this.exists);
        } catch (e) {
          //
        }
      } else {
        let params = {
          userId: this.userId ? this.userId : null,
          musicGroupId: this.musicGroupId ? this.musicGroupId : null,
        };
        const token = sessionStorage.getItem("token");
        if (token) {
          localStorage.setItem("Authorization", token);
          localStorage.setItem("userInfo", token);
        }

        await queryProduceContract(params).then((res) => {
          let result = res.data;
          this.protocolHTML = ""; // 重置协议
          if (result.code == 200) {
            this.protocolHTML = result.data.productContract;
            this.isProtocol = this.protocolHTML ? true : false;
            this.exists = result.data.exists;
            this.checked = this.exists;
            this.$emit("input", this.exists);
          }
        });
      }
      // 如果没有协议内容则不 显示协议
      if (!this.protocolHTML) {
        this.isProtocol = this.protocolHTML ? true : false;
        this.checked = true; // 默认选中，学生端则不用默认选中
        this.$emit("input", this.checked || this.exists);
      }
    },
    // onChange() {
    // 	this.$emit('input', this.checked)
    // },
    // onClick() {
    // 	this.checked = !this.checked
    // 	this.$emit('input', this.checked)
    // },
    onChange() {
      if (this.tenantId) {
        if (this.checked) {
          this.checked = false;
          this.onPopupClose();
        } else {
          this.$emit("input", false);
        }
      } else {
        this.$emit("input", this.checked);
      }
    },
    onClick() {
      if (this.tenantId) {
        if (this.checked) {
          this.checked = false;
          this.$emit("input", false);
        } else {
          this.onPopupClose();
        }
      } else {
        this.checked = !this.checked;
        this.$emit("input", this.checked);
      }
    },
    onPopupSure() {
      this.$emit("input", true);
      this.checked = true;
      this.onPopupClose();
    },
    onPopupClose() {
      // 判断是否有协议内容
      if (!this.protocolHTML) {
        return;
      }
      this.popupStatus = !this.popupStatus;
      // 打开弹窗
      if (this.popupStatus) {
        const route = this.$route;
        let times = 0;
        /* eslint-disable */
        for (let i in route.query) {
          times += 1;
        }
        let fullPath = route.fullPath;
        const origin = window.location.origin + +location.pathname;
        const url = times > 0 ? "&pto=1" : "?pto=1";
        history.pushState("", "", `${origin}#${fullPath}${url}`);
      } else {
        window.history.go(-1);
      }
      let popup = document.querySelector("#protocolPopup");
      if (popup) {
        popup.scrollTop = 0;
      }
    },
  },
  watch: {
    popupStatus(newValue) {
      this.$emit("changeCheck", newValue);
    },
    value(nowValue) {
      if (nowValue) {
        this.checked = nowValue;
      }
    },
  },
  destroyed() {
    window.removeEventListener("hashchange", this.onHash);
  },
};
</script>

<style lang="less" scoped>
.agreeProtocol {
  display: flex;
  align-items: center;
  color: #333333;
  padding: 0.1rem 0.16rem;
  font-size: 0.14rem;
  line-height: 1;
  i {
    font-style: normal;
  }
  .van-checkbox {
    padding-right: 0.08rem;
    img {
      width: 20px;
      height: 20px;
    }
  }

  /deep/.van-checkbox__icon .van-icon {
    border-color: #e9eaef;
    background-color: #fff;
  }

  /deep/.van-checkbox__icon--checked .van-icon {
    color: #fff;
    background-color: #f85043;
    border-color: #f85043;
  }

  span {
    color: #01c1b5;
  }
}

@media screen and (max-width: 320px) {
  .agreeProtocol .van-checkbox img {
    width: 20px;
    height: 20px;
  }
}
</style>
