<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)//璺宠浆鍒扮洃绠″綊灞瀒frame椤甸潰
    },
    onOkinfoCompleted() {
      let url = `${location.origin}${this.infoCompletedUrl}`
      window.open(url)//璺宠浆鍒颁粠涓氬崟浣峣frame椤甸潰
    },
    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>