<template>
  <view class="con-body">
    <view class="con-bg">
      <!-- 头部 -->
      <customHeader ref="customHeaderRef" :title="'查看主归属人变更详细信息'" :leftFlag="true"
                    :rightFlag="false"></customHeader>
      <!-- 高度来避免头部遮挡 -->
      <view class="top-height" :style="{ paddingTop: navBarPaddingTop + 'px' }"></view>
      <view class="all-body">
        <!-- 分页部分  -->

        <view class="white-bg margin-bottom20"
              @click="showDetail(item)">
          <view>
            <view class="report-list">
              <view class="title">客户公司名称：{{ detailInfo.cusName }}</view>
              <view class="border-bottom"></view>
              <view class="r-list">
                <view class="r-left">客户人员名称</view>
                <view class="r-right">{{ detailInfo.userName }}</view>
              </view>
              <view class="border-bottom"></view>
              <view class="r-list">
                <view class="r-left">性别</view>
                <view class="r-right">{{ detailInfo.sex }}</view>
              </view>
              <view class="border-bottom"></view>
              <view class="r-list">
                <view class="r-left">手机号</view>
                <view class="r-right">{{ detailInfo.mobilePhone }}</view>
              </view>
              <view class="border-bottom"></view>
              <view class="r-list">
                <view class="r-left">部门</view>
                <view class="r-right">{{ detailInfo.userDept }}</view>
              </view>
              <view class="border-bottom"></view>
              <view class="r-list">
                <view class="r-left title">业务员认定等级</view>
                <view class="r-right title">{{ detailInfo.salesmanThinkLevel }}</view>
              </view>
            </view>
          </view>
        </view>



        <view class="tezt">
          <qianjue-step :list="list"></qianjue-step>
        </view>

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

</template>

<script setup>
import customHeader from "../../../../../components/customHeader.vue";
import {onMounted, reactive, ref} from "vue";
import {onLoad, onShow} from "@dcloudio/uni-app";
import {queryViewMainOwnerDetail, queryViewMainOwnerList} from "../../../../../api/crm/mainOwner/mainOwner";
import QianjueStep from "./components/qianjue-step.vue";
import {getNavBarPaddingTop} from "../../../../../utils/system";


let userId = ref()
let detailInfo = reactive({})
let list = ref([])

// 获取导航栏高度用于内容区域padding
let navBarPaddingTop = ref(0);
onMounted(() => {
  navBarPaddingTop.value = getNavBarPaddingTop() * 2;
})

onLoad(option => {
  userId.value = option.userId
})

onMounted(() => {
  getDetails()
  getCrmCusUserNewChangeOwnerList()
})

function getDetails() {
  let data = {
    userId: userId.value
  };
  queryViewMainOwnerList(data).then(
      res => {
        if (res.code === 200) {
          const targetUserId = userId.value;
          const matchedItem = res.rows.find(item => item.userId == targetUserId);
          if (matchedItem) {
            Object.assign(detailInfo, matchedItem);
          } else {
            console.warn('没有找到匹配 userId 的数据');
          }
        } else {
          uni.showToast({
            title: res.msg,
            icon: 'none',
          });
        }
      },
      rej => {
      }
  );
}


function getCrmCusUserNewChangeOwnerList() {
  let data = {
    userId: userId.value
  };
  queryViewMainOwnerDetail(data).then(
      res => {
        if (res.code == 200) {
          list.value = res.rows
        } else {
          uni.showToast({
            title: res.msg,
            icon: 'none',
          });
        }
      },
      rej => {
      }
  );
}

</script>

<style scoped>
.con-bg{
  background: white;
/*  min-height: 100vh; */
}

.all-body {
  /* #ifdef APP-PLUS */
  top: 160rpx;
  height: calc(100vh - 160rpx);
  /* #endif */
  /* #ifndef APP-PLUS */
  top: 116rpx;
  height: calc(100vh - 116rpx);
  /* #endif */
  overflow-y: auto;
}

.white-bg {
  padding-bottom: 10rpx;
}

.tezt {
  padding-top: 50rpx;
}

</style>
