<template>
  <div class="flex flex-col w-11/12 mx-auto py-5 text-font-white full-height overflow-y-scroll pb-24">
    <div class="flex justify-between items-center">
      <div class="w-3/12">
        <app-icon name="icon-fanhui" @click.native="handleClickClose"></app-icon>
      </div>
      <div class='text-center w-6/12' >
        一幕影链用户协议
      </div>
      <div class="w-3/12"></div>
    </div>
    <div class='flex py-6  justify-center  '>
      <img src="@/assets/img/cmp_logo.png" class="h-12" alt="" />
    </div>
    <div v-for="(i,index) in userAgreement" :key="index">
       <div class='text-lg my-3'>
           {{i.title}}
      </div>
      <div class='text-sm text-font-dark-blue'>
        {{i.content}}
      </div>
      <div v-if="i.list">
        <div v-for="(t,n) in i.list" :key="n">
          <div class=" text-sm my-1">{{t.title}}</div>
          <div class=" text-sm text-font-dark-blue">{{t.content}}</div>
          <ol v-for="(b,bIndex) in t.contents" :key="bIndex" class="list-inside bg-rose-200">
            <li class='text-sm text-font-dark-blue pl-3'> - {{b}}</li>
          </ol>
        </div>
      </div>
      <ol v-for="(k,kIndex) in i.contents" :key="kIndex" class="list-inside bg-rose-200">
          <li class='text-sm text-font-dark-blue pl-3'> - {{k}}</li>
      </ol>
    </div>
    <div v-for='(i,index) in privatePolicy' :key="i.title+index">
      <div class='text-lg my-3'>
           {{i.title}}
      </div>
            <div class='text-sm text-font-dark-blue'>
        {{i.content}}
      </div>
      <div v-if="i.list">
        <div v-for="(t,n) in i.list" :key="t+n">
          <div class=" text-sm my-1">{{t.title}}</div>
          <div class=" text-sm text-font-dark-blue">{{t.content}}</div>
          <ol v-for="(b,bIndex) in t.contents" :key="bIndex" class="list-inside bg-rose-200">
            <li class='text-sm text-font-dark-blue pl-3'> - {{b}}</li>
          </ol>
        </div>
      </div>
            <ol v-for="(k,kIndex) in i.contents" :key="kIndex" class="list-inside bg-rose-200">
          <li class='text-sm text-font-dark-blue pl-3'> - {{k}}</li>
      </ol>
    </div>
  </div>
</template>

<script lang="ts">
import Vue from "vue";
import closeIcon from '@/assets/icons/close_large.png'
// const closeIcon = require("@/assets/icons/close_large.png");
import agreement from '@/constant/agreement'
const {userAgreement, privatePolicy} =agreement()
export default Vue.extend({
  props: ["setOverlayShow"],
  data() {
    return {
      closeIcon,
      userAgreement,
      privatePolicy
    };
  },
  components: {
     'app-icon':()=>import('@/components/common/Icon.vue'),
  },
  methods: {
    handleClick() {
      console.log(123);
    },
    handleClickClose() {
      this.setOverlayShow(false);
    },
  },
});
</script>

<style>
.userAgreement {
  background: #131934;
}
</style>