<template>
  <section class="supervisionSection" v-if="dialogPopVisible">
    <div class="supervisionMain">
      <div class="supertitle">关于完善入驻企业信息的通知</div>
      <div class="supercontent">
        <div class="contentH2">根据有关监管部门要求，入驻系统的保安从业单位需要如实填报本企业的相关信息，请您提前准备以下信息和材料：</div>
        <div class="contentDetail">
          <span class="contenttitle">| 基本信息</span>
          <span class="contentdesc">包括：公司名称、联系电话、传真号、注册地址、经营地址等；</span>
          <span class="contenttitle">| 法人或负责人信息</span>
          <span class="contentdesc">包括：法人/负责人姓名、法人/负责人手机号码、法人/负责人证件号码、国籍信息等；</span>
          <span class="contenttitle">| 企业注册信息</span>
          <span class="contentdesc">包括：需上传企业注册证件（扫描件）、填报注册信息（如注册资金、固定资产、年营业额、年利税）等；</span>
          <span class="contenttitle">| 企业资质信息</span>
          <span class="contentdesc">包括：需上传从业服务许可证（扫描件）、填报许可证相关信息等。</span>
        </div>
      </div>
      <div class="superbottom">
        <button class="btnprimary" @click="onOkisSupervised"
          v-if="!(isSupervisedInfoCompletedData.superviseCompleted)">已了解，前往填报
          "监管归属"</button>
        <button class="btnprimary" @click="onOkinfoCompleted"
          v-if="!(isSupervisedInfoCompletedData.infoCompleted)">已了解，前往填报 "单位信息"</button>
        <button class="btndefault" @click="onBack">返回登录页</button>
      </div>
    </div>
  </section>
</template>
<script>
export default {
  props: ['supervisionDialogVisible', 'isSupervisedInfoCompletedData'],
  data() {
    return {
      dialogPopVisible: this.supervisionDialogVisible,
      superviseCompletedUrl: `/static/portal/vue/index.html#/open?appId=__DXZvc8mnEmDqMARhK7G&actionContent=__DRWRVHekZL0pUfzfTwb&opentarget=detail&linkType=00`,//从业单位--监管归属url
      infoCompletedUrl: `/static/portal/vue/index.html#/open?appId=__DXZvc8mnEmDqMARhK7G&actionContent=__AOkTvsah9VLicJhQ1FO&opentarget=detail&linkType=00&isAllEdit=true`,//从业单位--单位信息url
    }
  },
  watch: {
    supervisionDialogVisible() {
      this.dialogPopVisible = this.supervisionDialogVisible;
    }
  },
  methods: {
    onOkisSupervised() {
      let url = `${location.origin}${this.superviseCompletedUrl}`
      window.open(url)//跳转到监管归属iframe页面
    },
    onOkinfoCompleted() {
      let url = `${location.origin}${this.infoCompletedUrl}`
      window.open(url)//跳转到从业单位iframe页面
    },
    onBack() {
      // this.$emit('isSupervisedData')//发送到Home.vue请求判断是否已填写好监管归属，如果填好，直接关闭监管归属窗口
      let url = `${location.origin}/static/signon/`
      window.open(url)//返回登录页
    }
  }
}
</script>
<style lang="scss" scoped>
.supervisionSection {
  position: fixed;
  top: 0%;
  bottom: 0%;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.3);
  z-index: 777777; //层级级别999990

  .supervisionMain {
    width: 850px;
    height: 450px;
    position: absolute;
    top: 20%;
    bottom: 20%;
    margin-left: 50%;
    transform: translateX(-50%);
    z-index: 777778; //层级级别999990
    background: #fff;
    border-radius: 5px;
    display: flex;
    flex-direction: column;
    padding: 0 40px;

    .supertitle {
      font-size: 22px;
      font-weight: 700;
      color: #3C4766;
      text-align: center;
      padding: 30px 0;
    }

    .supercontent {
      display: flex;
      flex-direction: column;
      overflow: auto;

      .contentH2 {
        color: #FF0000;
        font-weight: 400;
        font-style: normal;
        font-size: 13px;
        text-align: center;
        border-bottom: 1px solid #ccc;
        padding-bottom: 15px;
      }

      .contentDetail {
        display: flex;
        flex-direction: column;
        padding-top: 20px;
        margin-left: 7%;

        .contenttitle {
          color: #3C4766;
          font-size: 13px;
          font-weight: 700;
          font-style: normal;
          line-height: 25px;
        }

        .contentdesc {
          color: #444444;
          font-weight: 400;
          font-size: 13px;
          line-height: 25px;
        }
      }
    }

    .superbottom {
      margin: 30px auto;

      .btnprimary {
        background: rgba(15, 113, 255, 1);
        padding: 10px 15px;
        border: 1px solid rgba(15, 113, 255, 1);
        color: #fff;
        text-align: center;
        border-radius: 5px;
        margin-right: 20px;
      }

      .btndefault {
        background: #fff;
        padding: 10px 15px;
        border: 1px solid rgba(164, 164, 164, 1);
        color: #666666;
        text-align: center;
        border-radius: 5px;
      }
    }
  }
}
</style>