<!--我的消息-列表-->
<template>
  <view class="main_box">

    <view class="main_section">
      <view class="section_1">

<!--        <view class="item" @click="openViewSysMsgList()">-->
<!--          <view class="left">-->
<!--            <image class="pic" :src="$util.img('/uniapp_src/static/images/common/xi_tong_xiao_xi.png')"></image>-->
<!--            <view>系统消息</view>-->
<!--          </view>-->
<!--          <view class="right">-->
<!--            <view>99</view>-->
<!--            <fui-icon name="arrowright" :size="60"></fui-icon>-->
<!--          </view>-->
<!--        </view>-->

        <view
            v-for="(v,k) in contactList"
            :key="k"
            class="item"
            @click="openViewImChatInfo(v)"
        >
          <view class="left">
            <image
                v-if="(['1','2','3'].includes(String(userType)))"
                class="pic"
                :src="$util.img('/uniapp_src/static/images/common/yong_hu.png')"
                model="aspectFit"
            ></image>

            <image v-else class="pic" :src="$util.img('/uniapp_src/static/images/common/xi_tong_xiao_xi.png')"></image>

            <view>{{v.name}}</view>
          </view>
          <view class="right">
            <view>{{v.count >= 99 ? '99':v.count}}</view>
            <fui-icon name="arrowright" :size="60"></fui-icon>
          </view>
        </view>

      </view>
    </view>
  </view>
</template>

<script>
import apiRoute from '@/api/apiRoute.js';
import memberApi from '@/api/member.js';
import commonApi from '@/api/common.js';
import AQTabber from "@/components/AQ/AQTabber"


export default {
  components: {
    AQTabber,
  },
  data() {
    return {
      //筛选条件
      filteredData:{
        page:1,//当前页码
        limit:10,//每页返回数据条数
        total:10,//数据总条数
        personnel_id:'',//员工人力资源表id(两个参数2选1)
        customer_resources_id:'',//学生资源表id(两个参数2选1)
      },

      formData: {
        images_arr: [],
        images: '',
        content: '',
        mailbox: '',
      },

      //联系人列表
      contactList:[],
      userType:'',//获取用户类型|1=教练,2=销售,3=学员
      from_type: '',//发送者类型|personnel=员工,customer=学生(客户)
    }
  },
  onLoad() {
  },
  onShow() {
    this.init();
  },
  //下拉刷新
  async onPullDownRefresh() {
    //重置为第一页
    await this.resetFilteredData()
    await this.getList()
  },
  methods: {
    //初始化
    async init(){
      //获取用户类型
      this.userType = uni.getStorageSync('userType')
      //1=教练,2=销售,3=学员
      if (['1', '2'].includes(String(this.userType))) {
        this.from_type = 'personnel'//员工
        await this.getPersonnelUserInfo()
      }else{
        //获取学生用户详情
        this.from_type = 'customer'//学生
        await this.getMemberInit()
      }
      this.getContactList()
    },

    //获取员工用户详情
    async getPersonnelUserInfo(){
      let data = {}
      let res = await apiRoute.getPersonnelInfo(data);
      if (res.code != 1){
        uni.showToast({
          title: res.msg,
          icon: 'none'
        })
        return
      }

      res.data.cameus_dept_arr.forEach((v,k)=>{
        let d_arr = []
        v.dept_arr.forEach((dv,dk)=>{
          d_arr.push(dv.dept_name)
        })
        //数组转字符串
        v.dept_name_str = d_arr.join('，')
      })
      this.filteredData.personnel_id = res.data.id
    },

    //获取学员用户信息
    async getMemberInit() {
      let res = await apiRoute.xy_memberInfo({})
      if(res.code != 1){
        uni.showToast({
          title: res.msg,
          icon: 'none'
        })
        return
      }
      this.member_info = res.data
      this.filteredData.customer_resources_id = res.data.id//学生资源的id
    },

    //获取联系人列表
    async getContactList(){
      let params = {...this.filteredData}
      //判断是否还有数据
      if ((this.filteredData.page - 1) * this.filteredData.limit >= this.filteredData.total) {
        this.loading = false
        uni.showToast({
          title: '暂无更多',
          icon: 'none'
        })
        return
      }

      if(params.page == 1){
        this.contactList = []
      }

      let res
      //1=教练,2=销售,3=学员
      if (['1', '2'].includes(String(this.userType))) {
        //员工
        res = await apiRoute.xs_chatGetChatFriendsList(params)
      }else{
        //学生
        res = await apiRoute.xy_chatGetChatFriendsList(params)
      }



      this.loading = false
      this.isReachedBottom = false;
      if (res.code != 1) {
        uni.showToast({
          title: res.msg,
          icon: 'none'
        })
        return
      }

      res.data.data.forEach((v,k)=>{
        v.name = ''
        v.count = '0'
        if(this.from_type == 'personnel'){
          v.name = v.personnel_id_name
          v.count = v.unread_count_personnel
        }else{
          v.name = v.customer_resources_id_name
          v.count = v.unread_count_customer_resources
        }
      })
      console.log('列表',res.data.data)

      this.contactList = this.contactList.concat(res.data.data); // 使用 concat 方法 将新数据追加到数组中
      this.filteredData.total = res.data.total
      this.filteredData.page++
    },

    //######AQ上传文件组件相关######
    // 上传文件回调
    AQUploadSuccess(res) {
      console.log('接收AQ上传回调xxx1', res)
      // 使用 split 方法分割字符串
      let _inputValue = []
      if (res.filePathArr.length) {
        _inputValue = res.filePathArr
      }
      this.formData[res.inputName] = _inputValue
      // console.log('接收AQ上传回调xxx1',res)
      // console.log('接收AQ上传回调xxx2',this.formData.member_store_certification_arr)
    },

    async submitForm() {
      let data = {...this.formData}
      data.images = data.images_arr.join(',')
      if (!data.content) {
        //反馈内容为必填项
        uni.showToast({
          title: '反馈内容为必填项',
          icon: 'none'
        })
        return
      }
      let res = await memberApi.setFeedback(data)
      if (res.code != 1) {
        uni.showToast({
          title: res.msg,
          icon: 'none'
        })
      } else {
        uni.showToast({
          title: '提交成功',
          icon: 'none'
        })
      }
    },

    //跳转页面-系统消息列表
    openViewSysMsgList(e){
      let hair_staff_id = e.hair_staff_id//发信人id
      uni.navigateTo({
        url: `/pages-common/sys_msg_list?hair_staff_id=${hair_staff_id}`
      })
    },

    //跳转页面-聊天页面
    openViewImChatInfo(e){

      if(e.type == 1){
        //系统消息
        this.openViewSysMsgList(e)
      }else{
        let from_id = ''//发送者的id
        let to_id = ''//接收者ID
        //站内信
        if (this.from_type == 'personnel') {
          from_id = e.personnel_id
          to_id = e.customer_resources_id
        } else {
          from_id = e.customer_resources_id
          to_id = e.personnel_id
        }

        uni.navigateTo({
          url: `/pages-common/im_chat_info?from_id=${from_id}&to_id=${to_id}`
        })
      }


    },

  }
}
</script>

<style lang="less" scoped>
	.main_box {
		background: #292929;
	}

	//自定义导航栏
	.navbar_section {
		display: flex;
		justify-content: center;
		align-items: center;
		background: #29d3b4;

		.title {
			padding: 20rpx 0;
			font-size: 30rpx;
			color: #315d55;
		}
	}

	.main_section {
		min-height: 100vh;
		background: #292929 100%;
		padding: 0 0rpx;
		padding-top: 32rpx;
		padding-bottom: 150rpx;
		font-size: 28rpx;
		display: flex;
		flex-direction: column;
		gap: 20rpx;

		.section {
			background-color: #434544;
			padding: 40rpx 40rpx;
		}

    .section_1{
      padding: 0 24rpx;
      display: flex;
      flex-direction: column;
      gap: 38rpx;
      .item{
        display: flex;
        justify-content: space-between;
        align-items: center;

        padding: 40rpx 18rpx 36rpx;

        border-radius: 14rpx;
        background-color: rgba(255,255,255,1);
        border: 2rpx solid rgba(187,187,187,1);

        .left{
          display: flex;
          align-items: center;
          gap: 16rpx;
          .pic{
            width: 68rpx;
            height: 68rpx;
            border-radius: 50%;
          }
          view{
            color: #D9001B;
            font-size: 32rpx;
          }
        }
        .right{
          display: flex;
          align-items: center;
          view{
            display: flex;
            justify-content: center;
            align-items: center;
            width: 50rpx;
            height: 50rpx;
            padding: 5rpx;
            border: 1px solid #BBBBBB;
            border-radius: 50%;
            color: #D9001B;
          }
        }
      }
    }




	}

	.describe {
		color: #999999;
		padding-left: 30rpx;
	}
</style>