<template>
  <div class="container">
    <item
      v-for="(item, index) in dataList"
      :key="index"
      :item="item.item"
      :title="item.title"
      @handlerClick="handlerClick"
    />
    <div
      v-if="showLogout"
      class="out"
      hover-class="cell-hover"
      :hover-stay-time="50"
      @click="handleLoingOut"
    >
      <span class="cell-tit">退出登录</span>
    </div>
  </div>
</template>

<script>
import store from '@/store';
import { logout, getContract } from '@/api/user.api';
import { clearLoginInfo } from '@/service/utils.service';
import { createItem } from '@/views/set/components/listAdapter';
// 导入Item组件
import Item from '@/views/set/components/Item.vue';
export default {
  components: {
    Item
  },
  data() {
    return {
      childPrivacy: {
        url: '',
        label: '羊小咩儿童个人信息保护规则'
      },
      dataList: [],
      showLogout: false
    };
  },
  async created() {
    this.dataList = createItem();
    const [res] = await getContract();
    if (res) {
      this.showLogout = res.showLogout;
      this.childPrivacy.url = res.childrenPersonalInfoProtect || '';
    }
  },
  methods: {
    async handleLoingOut() {
      const that = this;
      this.$dialog({
        message: '是否退出羊小咩',
        onCancel: function() {
          console.log('点击取消按钮后的回调函数！！');
        },
        onConfirm: async function() {
          await logout();
          clearLoginInfo();
          store.commit('DEL_USERINFO');
          location.replace('/');
          that.$toast.success('退出成功');
        }
      });
    },
    handlerClick(item) {
      if (item.url) {
        this.handleToRouter(item.url);
      }
    },
    handleToRouter(url) {
      window.location.href = url;
    }
  }
};
</script>

<style lang="less" scoped>
.container {
  padding-top: 8px;
}
.out {
  margin-top: 12px;
  height: 44px;
  background-color: #fff;
  text-align: center;
  font-size: 14px;
  color: #303030;
  line-height: 44px;
}
</style>
