<!--
 * @Date: 2022-09-29 16:32:03
 * @LastEditors: hookehuyr hookehuyr@gmail.com
 * @LastEditTime: 2022-11-15 15:50:00
 * @FilePath: /swx/src/pages/userInfo/index.vue
 * @Description: 用户资料
-->
<template>
  <view class="user-info-page">
    <view id="top-header" class="bg-header">
      <view style="height: 4rem; padding: 1rem;">
        <van-row>
          <van-col span="17">
            <view style="position: relative;">
              <van-image :round="true" width="4rem" height="4rem" :src="avatar" />
              <view style="display: inline-block; position: absolute; top: 30%; left: 30%;">
                <text style="font-size: 1.15rem;">{{ name }}</text>
                <!-- <van-icon :name="icon_vip" size="1rem" color="" class="vip-icon" /> -->
              </view>
            </view>
          </van-col>
          <van-col span="7">
            <view @tap="editInfo()" style="background-color: #DABE73; color: white; padding: 0.5rem 0; border-radius: 1rem; text-align: center; font-size: 0.9rem;margin-top: 1rem;">修改资料</view>
          </van-col>
        </van-row>
      </view>
      <view style="background-color: white; margin: 1rem; padding: 1rem; border-radius: 1rem;">
        <view class="header-info">
          <view class="activity">
            <view><text style="font-size: 1.25rem;">{{ reg_count }}</text>次</view>
            <view>
              <van-icon :name="icon_join" size="1.5rem" color="" style="vertical-align: sub;" />
              <text style="font-size: 0.9rem; color: #999999;">参加活动</text>
            </view>
          </view>
          <view class="job">
            <text style="font-size: 1.25rem;">{{ age_group }}</text>
            <view>
              <text style="font-size: 0.9rem; color: #999999;">年龄</text>
            </view>
          </view>
          <view class="sign">
            <view><text style="font-size: 1.25rem;">{{ gender }}</text></view>
            <view>
              <text style="font-size: 0.9rem; color: #999999;">性别</text>
            </view>
          </view>
        </view>
      </view>
    </view>
    <view class="list-wrapper" style="margin: 1rem;">
      <view id="list-header" style="background-color: white; border-radius: 0.65rem; padding: 1rem;overflow: auto; margin-bottom: 1px;">
        <view style="display: inline-block; margin-right: 1rem; line-height: 60rpx;">
          <view class="bg-gradient" style="font-size: 1.15rem;">陪伴记录</view>
        </view>
        <view @tap="show_partner_popup=true" style="float: right; color: #FFFFFF; font-size: 0.9rem; border-radius: 1rem; padding: 0.3rem 1rem 0.3rem 1rem; background-color: #199A74;">
          &nbsp;{{ partner === '' ? '全部' : partner }}&nbsp;&nbsp;
          <van-icon :name="icon_sel3" size="0.8rem" color="" style="vertical-align: middle;" />
        </view>
        <view style="float: right; margin-top: 0.25rem;">
          记录人：
        </view>
      </view>
      <view id="partner-list">
        <view v-if="partner_list.length">
          <view v-for="(item, index) in partner_list" :key="index" style="background-color: white; padding: 1rem; border-radius: 1rem; margin-bottom: 1rem;">
            <view style="overflow: auto;">
              <view style="float: left; font-size: 1.15rem;">
                <text style="color: #999999;">状态：</text><text style="color: #199A74;">{{ item.status }}</text>
              </view>
              <view style="float: right; margin-top: 0.2rem; font-size: 0.9rem; color: #222222;">
                {{ item.created_by_name }} {{ formatDate(item.created_time) }}
              </view>
            </view>
            <view style="margin-top: 1rem;">
              {{ item.note }}
            </view>
          </view>
        </view>
        <!-- TODO: 缺省页 -->
        <van-empty v-else description="暂无陪伴记录" class="custom-image" :image="icon_no_partner_join" />
      </view>
      <view style="height: 6rem;"></view>
    </view>
    <bottom-button @on-submit="onSubmit">添加记录</bottom-button>

  </view>

  <!-- 切换状态弹出框 -->
  <van-popup :show="show_partner_popup" position="bottom" custom-style="height: 50%;" :lock-scroll="true">
    <van-picker :show-toolbar="true" title="" confirm-button-text="确定" :columns="partner_columns"
      :default-index="partner_index"
      toolbar-class="picker-toolbar" @confirm="onPartnerConfirm" @cancel="onPartnerCancel" />
  </van-popup>
</template>

<script setup>
import { ref, getCurrentInstance, onMounted } from "vue";
import icon_vip from '@/images/icon/vip@2x.png'
import Taro from '@tarojs/taro'
import { AtAvatar } from 'taro-ui-vue3'
import "taro-ui-vue3/dist/style/components/avatar.scss"
import icon_join from '@/images/icon/baoming@2x.png'
import icon_sel3 from '@/images/icon/sel03@2x.png'
import icon_no_partner_join from '@/images/icon/no-jilu@2x.png'
import bottomButton from "@/components/bottom-button";

const internalInstance = getCurrentInstance();
const editInfo = (val) => {
  Taro.navigateTo({
    url: '../editInfo/index?member_id=' + getCurrentPageParam().member_id + '&host_id=' + internalInstance.data.host_id
  })
}

const onSubmit = (val) => {
  Taro.navigateTo({
    url: '../addRecord/index?id=' + internalInstance.data.id + '&host_id=' + internalInstance.data.host_id + '&name=' + JSON.stringify(internalInstance.data.name)
  })
}
</script>

<script>
import "./index.less";
import { infoMemberAPI } from '@/api/Member/index';
import { getCurrentPageParam } from "@/utils/weapp";
import mixin from '@/utils/mixin';
import { formatDate } from '@/utils/tools.js'

export default {
  name: "userInfoPage",
  mixins: [mixin.init],
  data () {
    return {
      avatar: '',
      name: '',
      reg_count: '',
      age_group: '',
      gender: '',
      id: '',
      host_id: '',
      phone: '',
      partner_list: [],
      partner_user_list: [],
      show_partner_popup: false,
      partner: '',
      partner_id: '',
      partner_columns: [],
      partner_index: 0
    }
  },
  async onShow () {
    const { code, data } = await infoMemberAPI({ i: getCurrentPageParam().member_id });
    if (code) {
      this.name = data.member.name;
      this.avatar = data.member.avatar ? data.member.avatar : 'http://gyzs.onwall.cn/tou%402x.png';
      this.reg_count = data.reg_count;
      this.age_group = data.member.age_group;
      this.gender = data.member.gender === 'man' ?  '男士' : '女士';
      this.id = data.member.id;
      this.host_id = data.member.host_id;
      this.phone = data.member.phone;
      this.partner_list = data.partner_list;
      // 生成陪伴者显示列表
      const user_list = [];
      data.partner_user_list.forEach(item => {
        user_list.push({
          text: item.name,
          key: item.user_id,
        })
      });
      this.partner_columns = [{ text: '全部', key: '' }, ...user_list];
    }
  },
  methods: {
    async onPartnerConfirm (event) {
      const { picker, value, index } = event.detail;
      this.show_partner_popup = false;
      this.partner_id = value.key;
      this.partner = value.text;
      //
      const { code, data } = await infoMemberAPI({ i: getCurrentPageParam().member_id, created_by: this.partner_id });
      if (code) {
        this.partner_list = data.partner_list;
      }
    },
    onPartnerCancel (event) {
      this.show_partner_popup = false;
    }
  }
};
</script>