<template>
  <view class="container">
    <view class="item-content">
      <view class="item-box" @click="handlerSkipAccountSafety">
        <view class="item-l"> 账号与安全 </view>
        <view class="item-r">
          <u-icon name="arrow-right" color="#C0C0C0" size="16"></u-icon>
        </view>
      </view>
    </view>

    <view class="item-content">
      <!-- <view class="item-box">
        <view class="item-l"> 新消息通知 </view>
        <view class="item-r">
          <u-switch v-model="value" activeColor="#5992BB"></u-switch>
        </view>
      </view> -->
      <view class="item-box">
        <view class="item-l"> 隐私政策 </view>
        <view class="item-r">
          <u-icon name="arrow-right" color="#C0C0C0" :size="icon_size"></u-icon>
        </view>
      </view>
      <!-- <view class="item-box">
        <view class="item-l"> 选择语言 </view>
        <view class="item-r">
          <p>简体中文</p><u-icon name="arrow-right" color="#C0C0C0" :size="icon_size"></u-icon>
        </view>
      </view> -->
    </view>

    <view class="item-content">
      <view
        class="item-box"
        v-for="(item, index) of privacy_list"
        :key="item.id"
        @click="handlerSkipPrivacy(item)"
      >
        <view class="item-l"> {{ item.name }} </view>
        <view class="item-r">
          <u-icon name="arrow-right" color="#C0C0C0" :size="icon_size"></u-icon>
        </view>
      </view>
    </view>

    <view class="btn-box">
      <view class="u-m-b-40">
        <u-button text="切换身份" shape="circle" @click="showSwitchDialog = true"></u-button>
      </view>
      <u-button
        type="primary"
        text="退出登录"
        shape="circle"
        @click="loginOut_show = true"
      ></u-button>
    </view>
    <u-modal
      :show="showSwitchDialog"
      :showCancelButton="true"
      :title="title"
      :content="content"
      @confirm="confirmSwitch"
      @cancel="showSwitchDialog = false"
    ></u-modal>
    <u-modal
      :show="loginOut_show"
      :content="content1"
      :title="title"
      :showCancelButton="true"
      @confirm="handlerLoginOutConfirm"
      @cancel="loginOut_show = false"
    ></u-modal>
  </view>
</template>

<script>
export default {
  data() {
    return {
      value: true,
      icon_size: 18,
      loginOut_show: false,
      content: '您确定要从商家端切换到用户端吗',
      content1: '您确定要退出登录？确定将同时退出用户端哦',
      title: '温馨提示',
      privacy_list: [
        {
          name: '应用权限说明',
          id: 0,
        },
        {
          name: '个人信息收集清单',
          id: 1,
        },
        {
          name: '第三方共享个人信息清单',
          id: 2,
        },
        {
          name: '关于我们',
          id: 3,
        },
      ],
      showSwitchDialog: false,
    };
  },
  methods: {
    // 点击切换账号
    // handlerSwitchAccount(){

    // },
    confirmSwitch() {
      // 点击确认切换身份
      // 处理身份切换逻辑
      // this.$store.dispatch('SwitchIdentity', 'CUSTOMER');
      uni.switchTab({
        url: '/pages/tabbar/mine/index',
      });
      // ... 其他操作
    },
    // 跳转到账号与安全
    handlerSkipAccountSafety() {
      uni.navigateTo({
        url: `/pages/tabBar/mine/setting/accountSafety`,
      });
    },
    // 点击跳转到隐私页面
    handlerSkipPrivacy(item) {
      uni.navigateTo({
        url: `/pages/tabBar/mine/setting/privacyPolicy?type=${item.id}`,
      });
    },
    //点击退出登录
    handlerLoginOutConfirm() {
      this.loginOut_show = false;
      this.$store.dispatch('Logout').then(() => {
        uni.navigateTo({
          url: `pages/login/index`,
        });
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.container {
  background-color: #f5f5f5;
  min-height: calc(100vh - 40rpx);
  padding-top: 40rpx;

  .item-content {
    margin-bottom: 40rpx;

    .item-box {
      display: flex;
      justify-content: space-between;
      background-color: #fff;
      padding: 20rpx 40rpx;
      font-size: 30rpx;

      .item-r {
        display: flex;
        font-size: 26rpx;
        color: #b0b0b0;
      }
    }
  }
}
.btn-box {
  margin: 140rpx 40rpx;
}
::v-deep .u-modal__content__text.data-v-713d0fd3 {
  text-align: center;
}
</style>
