<template>
  <view class="job-list">
    <view class="top_box_bg">
      <u-image src="@/static/images/top.png" width="750rpx" height="496rpx" />
    </view>
    <view class="job-list__navbar">
      <div class="navbar">
        <view class="navbar-left" @click="goBack">
          <uni-icons name="back" color="#fff" size="36"></uni-icons>
        </view>
        <view class="navbar-title" style="color: #fff">服务详情</view>
        <view class="navbar-right">
          <uni-icons
            v-show="$store.getters.roles.includes('shequn')"
            @tap="$store.commit('SET_SHOWEXITPOPUP', true)"
            name="list"
            size="44rpx"
            color="#fff"
          ></uni-icons>
        </view>
      </div>
    </view>
    <view class="job-list__content">
      <img
        class="top_box_bg_service"
        src="@/static/images/person/serviceFrequency.png"
        width="360rpx"
        height="50rpx"
        alt=""
      />
      <view class="serviceFrequency"     @tap="
            $tab.navigateTo(
              `/pages/community/serviceRecord?userId=${form.userId}`
            )
          ">
        <view>服务次数 {{ serviceTotal }}</view>
        <view
      
          style="font-size: 28rpx; font-weight: normal"
          >查看></view
        >
      </view>
      <view class="content">
        <view
          class="personnelInformation"
          @tap="
            $tab.navigateTo(
              `/pages/community/personEdit?id=${form.id}&type=edit`
            )
          "
        >
          <view class="left">
            <view class="left_name">{{ form.name }}</view>
            <view style="margin-top: 10rpx">
              <text v-if="form.gender == 0">男</text>
              <text v-if="form.gender == 1">女</text>
              <text style="margin: 10rpx">· </text>
              <text>{{ calculateAge(form.cardNumber) }}岁</text>
            </view>
            <view style="margin-top: 20rpx; color: #9fa0a6">
              {{ form.phone }}
            </view>
          </view>
          <view>
            <img
              src="@/static/images/person/malepng.png"
              v-if="form.gender == 0"
              width="70rpx"
              alt=""
            />
            <img
              src="@/static/images/person/femalepng.png"
              v-if="form.gender == 1"
              width="70rpx"
              alt=""
            />
          </view>
        </view>
        <view class="visitAndInvestigate" @click="goAddServices">
          <view class="text">服务</view>
          <img
            src="@/static/images/person/fillInRecords.png"
            width="140rpx"
            height="40rpx"
            alt=""
            srcset=""
          />
        </view>
        
			<view class="xuqiushu-box">
				<view style="width: 100%;display: flex;justify-content: space-between;">
					<view class="xuqiushu-box-item" @click="activeType = 1">
						<view class="xuqiushu-box-item-title">
							<view :style="{color: activeType == 1 ? '#1A62CE' : '#3d3d3d'}">求职需求数2</view>
							<!-- <view style="color: #3D3D3D;">需求数</view> -->
						</view>
						<view class="xuqiushu-box-item-num">{{ jobSearchList.length }}</view>
					</view>
					<view class="xuqiushu-box-item" @click="activeType = 2">
						<view class="xuqiushu-box-item-title">
							<view :style="{color: activeType == 2 ? '#16ACB7' : '#3d3d3d'}">创业需求数</view>
							<!-- <view style="color: #3D3D3D;">需求数</view> -->
						</view>
						<view class="xuqiushu-box-item-num">{{ listOfEntrepreneurialNeeds.length }}</view>
					</view>
					<view class="xuqiushu-box-item" @click="activeType = 3">
						<view class="xuqiushu-box-item-title">
							<view :style="{color: activeType == 3 ? '#6A57D1' : '#3d3d3d'}">培训需求数</view>
							<!-- <view style="color: #3D3D3D;">需求数</view> -->
						</view>
						<view class="xuqiushu-box-item-num">{{ trainingList.length }}</view>
					</view>
					<view class="xuqiushu-box-item" @click="activeType = 4">
						<view class="xuqiushu-box-item-title">
							<view :style="{color: activeType == 4 ? '#1890ff' : '#3d3d3d'}">其他需求数</view>
							<!-- <view style="color: #3D3D3D;">需求数</view> -->
						</view>
						<view class="xuqiushu-box-item-num">{{ otherList.length }}</view>
					</view>
				</view>
			</view>
        <!-- <view class="requirementTitle">
          <text>求职需求</text>
          <text class="text"
            >共有<text style="color: #1a62ce">{{ jobSearchList.length }}</text
            >条求职需求</text
          >
        </view> -->
        <u-swipe-action v-show="activeType == 1">
          <u-swipe-action-item
            :options="[{ text: '删除' }]"
            class="jobSearchListview"
            v-for="item in jobSearchList"
            :key="item.id"
            @click="removeRowData(item)"
          >
            <view style="padding: 30rpx;" @click="goNeedsDetail(item, 1)">
              <view class="jobSearchListview_name">{{
                getJobWorkTypeName(item.jobWorkType)
              }}</view>
              <view class="salaryExpectation">
                <text style="color: #8e8e8e">期望薪资：</text>
                <view class="salary">
                  {{ item.minRecruitmentSalary}}-
                  {{ item.highRecruitmentSalary}}
                  /月
                </view>
              </view>
              <view class="salaryExpectation">
                <text style="color: #8e8e8e">希望工作地点：</text>
                <text>{{ item.addressDesc }}</text>
              </view>
              <view class="jobSearchListview_currentStatus">
                <text style="color: #e0a61f" v-if="item.currentStatus == 1"
                  >待处理</text
                >
                <text style="color: #288ae6" v-if="item.currentStatus == 2"
                  >处理中</text
                >
                <text style="color: #1ac88b" v-if="item.currentStatus == 3"
                  >已完成</text
                >
              </view>
              <view v-if="item.currentStatus == 3" class="job-list__item-btn">
                <u-button
                  type="primary"
                  :plain="true"
                  color="#1A62CE"
                  text="服务追溯"
                  @click.native.stop="serviceTraceButton(item, 1)"
                  :customStyle="{ border: 'none' }"
                ></u-button>
              </view>
              <view class="job-list__item-btn" v-else>
                <view
                  class="btn"
                  @click.native.stop="requirementTraining(item, 1)"
                  >推荐</view
                >
                <view
                  class="btn"
                  @click.native.stop="requirementHandling(item, 1)"
                  >办结</view
                >
              </view>
            </view>
          </u-swipe-action-item>
        </u-swipe-action>
        <!-- <view class="requirementTitle">
          <text>创业需求</text>
          <text class="text"
            >共有<text style="color: #1a62ce">{{
              listOfEntrepreneurialNeeds.length
            }}</text
            >条求职需求</text
          >
        </view> -->
        <u-swipe-action v-show="activeType == 2">
          <u-swipe-action-item
            :options="[{ text: '删除' }]"
            @click="removeRowData(item)"
            class="entrepreneurialNeeds"
            v-for="item in listOfEntrepreneurialNeeds"
            :key="item.id"
          >
            <view style="padding: 30rpx" @click="goNeedsDetail(item, 3)">
              <view class="entrepreneurialNeeds_name">
                {{ item.personName }}的创业需求
              </view>
              <view class="entrepreneurialNeeds_row">
                <text style="color: #8e8e8e">是否意有场地需求：</text>
                <text>{{ item.ywcdxq }}</text>
              </view>
              <view class="entrepreneurialNeeds_row">
                <text style="color: #8e8e8e">是否意向参加创业培训：</text>
                <text>{{ item.ywcypxxq }}</text>
              </view>
              <view class="entrepreneurialNeeds_row">
                <text style="color: #8e8e8e">是否有资金需求：</text>
                <text>{{ item.ywzjxq }}</text>
              </view>
              <view class="jobSearchListview_currentStatus">
                <text style="color: #e0a61f" v-if="item.currentStatus == 1"
                  >待处理</text
                >
                <text style="color: #288ae6" v-if="item.currentStatus == 2"
                  >处理中</text
                >
                <text style="color: #1ac88b" v-if="item.currentStatus == 3"
                  >已完成</text
                >
              </view>
              <view v-if="item.currentStatus == 3" class="job-list__item-btn">
                <u-button
                  type="primary"
                  :plain="true"
                  color="#1A62CE"
                  text="服务追溯"
                  @click.native.stop="serviceTraceButton(item, 3)"
                  :customStyle="{ border: 'none' }"
                ></u-button>
              </view>
              <view class="job-list__item-btn" v-else>
                <view
                  class="btn"
                  style="width: 100%"
                  @click.native.stop="requirementHandling(item, 3)"
                  >办理</view
                >
              </view>
            </view>
          </u-swipe-action-item>
        </u-swipe-action>
        <!-- <view class="requirementTitle">
          <text>培训需求</text>
          <text class="text"
            >共有<text style="color: #1a62ce">{{ trainingList.length }}</text
            >条求职需求</text
          >
        </view> -->
        <u-swipe-action v-show="activeType == 3">
          <u-swipe-action-item
            :options="[{ text: '删除' }]"
            @click="removeRowData(item)"
            class="entrepreneurialNeeds"
            v-for="item in trainingList"
            :key="item.id"
          >
            <view style="padding: 30rpx" @click="goNeedsDetail(item, 4)">
              <view class="entrepreneurialNeeds_name">
                {{ item.personName }}的培训需求
              </view>
              <view class="entrepreneurialNeeds_row">
                <text style="color: #8e8e8e">培训意愿工种：</text>
                <text>{{ getJobWorkTypeName(item.qwpxgz) }}</text>
              </view>
              <view class="entrepreneurialNeeds_row">
                <text style="color: #8e8e8e">期望培训时间：</text>
                <text>{{ item.qwpxsj }}</text>
              </view>

              <view class="jobSearchListview_currentStatus">
                <text style="color: #e0a61f" v-if="item.currentStatus == 1"
                  >待处理</text
                >
                <text style="color: #288ae6" v-if="item.currentStatus == 2"
                  >处理中</text
                >
                <text style="color: #1ac88b" v-if="item.currentStatus == 3"
                  >已完成</text
                >
              </view>
              <view v-if="item.currentStatus == 3" class="job-list__item-btn">
                <u-button
                  type="primary"
                  :plain="true"
                  color="#1A62CE"
                  text="服务追溯"
                  @click.native.stop="serviceTraceButton(item, 4)"
                  :customStyle="{ border: 'none' }"
                ></u-button>
              </view>
              <view class="job-list__item-btn" v-else>
                <!-- <view
                  class="btn"
                  @click.native.stop="requirementTraining(item, 4)"
                  >推荐</view
                > -->
                <view
                  style="width: 100%"
                  class="btn"
                  @click.native.stop="requirementHandling(item, 4)"
                  >办理</view
                >
              </view>
            </view>
          </u-swipe-action-item>
        </u-swipe-action>
        <!-- <view class="requirementTitle">
          <text>其他需求</text>
          <text class="text"
            >共有<text style="color: #1a62ce">{{ otherList.length }}</text
            >条其他需求</text
          >
        </view> -->
        <u-swipe-action v-show="activeType == 4">
          <u-swipe-action-item
            :options="[{ text: '删除' }]"
            @click="removeRowData(item)"
            class="entrepreneurialNeeds"
            v-for="item in otherList"
            :key="item.id"
          >
            <view style="padding: 30rpx" @click="goNeedsDetail(item, 5)">
              <view class="entrepreneurialNeeds_name">
                {{ item.personName }}的其他需求
              </view>

              <view class="entrepreneurialNeeds_row">
                <text style="color: #8e8e8e">需求说明：</text>
                <text>{{ item.jobDescription }}</text>
              </view>

              <view class="jobSearchListview_currentStatus">
                <text style="color: #e0a61f" v-if="item.currentStatus == 1"
                  >待处理</text
                >
                <text style="color: #288ae6" v-if="item.currentStatus == 2"
                  >处理中</text
                >
                <text style="color: #1ac88b" v-if="item.currentStatus == 3"
                  >已完成</text
                >
              </view>
              <view v-if="item.currentStatus == 3" class="job-list__item-btn">
                <u-button
                  type="primary"
                  :plain="true"
                  color="#1A62CE"
                  text="服务追溯"
                  @click.native.stop="serviceTraceButton(item, 4)"
                  :customStyle="{ border: 'none' }"
                ></u-button>
              </view>
              <view class="job-list__item-btn" v-else>
                <!-- <view
                  class="btn"
                  @click.native.stop="requirementTraining(item, 4)"
                  >推荐</view
                > -->
                <view
                  style="width: 100%"
                  class="btn"
                  @click.native.stop="requirementHandling(item, 4)"
                  >办理</view
                >
              </view>
            </view>
          </u-swipe-action-item>
        </u-swipe-action>
      </view>
    </view>
    <view class="addNeeds" @click="goAddNeeds">
      <img src="@/static/images/person/addNeeds1.png" />
    </view>
    <u-popup
      :show="openDeal"
      style="position: relative; z-index: 100"
      closeOnClickOverlay
      @close="openDeal = false"
    >
      <div class="self-form">
        <div class="form-item required">
          <div class="form-label">实际解决时间</div>
          <div class="form-content">
            <view
              class="bordered"
              style="width: 100%"
              @click="showTime = true"
              :class="{ noValue: !formData.actualSolveDate }"
              >{{ formData.actualSolveDate || "请选择" }}</view
            >
            <uni-icons name="arrow-down" color="#A6A6A6" size="24"></uni-icons>
          </div>
        </div>
        <div class="form-item required">
          <div class="form-label">经办人</div>
          <div class="form-content">
            <input
              v-model="formData.agentUserName"
              class="form-input"
              placeholder="请输入"
            />
            <uni-icons name="edit" color="#A6A6A6" size="24"></uni-icons>
          </div>
        </div>
        <div class="form-item required">
          <div class="form-label">人员状态</div>
          <div class="form-content">
            <view class="person-status-select" @click="showPersonStatusPicker = true"
                  :class="{noValue: !formData.personStatus}">
              {{ getDictLabel(formData.personStatus, dict.personStatusList) || '请选择' }}
            </view>
            <!-- 自定义picker弹出层 -->
            <uni-popup v-model="showPersonStatusPicker" mode="bottom">
              <view class="picker-container">
                <view class="picker-header">
                  <view @click="showPersonStatusPicker = false">取消</view>
                  <view>人员状态</view>
                  <view @click="onPersonStatusConfirm">确定</view>
                </view>
                <view class="picker-content">
                  <view v-for="item in dict.personStatusList" :key="item.dictValue" 
                        class="picker-item" @click="selectPersonStatus(item)">
                    {{ item.dictLabel }}
                  </view>
                </view>
              </view>
            </uni-popup>
          </div>
        </div>
        <div class="form-item">
          <div class="form-label">附件</div>
          <div class="form-content">
            <ImageUpload
              :disabled="disabled"
              :fileList="fileList"
              @update="changeFile"
              :maxCount="6"
            />
          </div>
        </div>

        <div class="form-item required">
          <div class="form-label">解决说明</div>
          <div class="form-content">
            <textarea
              v-model="formData.solveDesc"
              class="form-textarea"
              placeholder="请输入"
            ></textarea>
            <uni-icons name="edit" color="#A6A6A6" size="24"></uni-icons>
          </div>
        </div>
      </div>
      <view class="button-area">
        <view class="btn" @click="openDeal = false">取消</view>
        <view
          class="btn reset"
          @click="
            formData.actualSolveDate = '';
            formData.solveDesc = '';
          "
          >重置</view
        >
        <view class="btn save" @click="finishJobRecommend(needsType)"
          >办结</view
        >
      </view>
    </u-popup>
   <u-popup :show="show" @close="close" @open="open">
      <view class="dialog_div">
        <view class="dialog_div_item" @click="goAddNeeds(1)">
          <img
            src="@/static/images/person/entrepreneurialIcon.png"
            style="margin-right: 10rpx"
            width="18rpx"
            alt=""
            srcset=""
          />
          求职需求
        </view>
        <view class="dialog_div_item" @click="goAddNeeds(3)">
          <img
            src="@/static/images/person/jobSeekingIcon.png"
            style="margin-right: 10rpx"
            width="18rpx"
            alt=""
            srcset=""
          />
          创业需求
        </view>
        <view class="dialog_div_item" @click="goAddNeeds(4)">
          <img
            src="@/static/images/person/trainingIcon.png"
            style="margin-right: 10rpx"
            width="18rpx"
            alt=""
            srcset=""
          />
          培训需求
        </view>
        <view class="dialog_div_item" @click="goAddNeeds(5)">
          <img
            src="@/static/images/selected.png"
            style="margin-right: 10rpx"
            width="18rpx"
            alt=""
            srcset=""
          />
          其他需求
        </view>
        <view class="dialog_div_btn" @click="show = false"> 取 消 </view>
      </view>
    </u-popup>
    <u-datetime-picker
      style="position: relative; z-index: 100"
      :show="showTime"
      v-model="hopeSolveDate"
      mode="datetime"
      closeOnClickOverlay
      @confirm="confirmDate"
      @cancel="showTime = false"
      @close="showTime = false"
    ></u-datetime-picker>
    <!-- 社区端 - 显示隐藏退出组件 -->
    <exitPopup />
  </view>
</template>

<script>

import { getPersonInfo } from "../../api/company/index.js";
   //   import { listJobService, serviceTraceability } from "@/api/needs/jobService";
       import { listPersonDemand, delPersonDemand } from "../../api/needs/personDemand";
    //   import { requirementCompletion } from "@/api/company";
    //   import { listEntrepreneurshipService } from "@/api/needs/entrepreneurshipService";
      // import { listTrainService, delTrainService } from "@/api/needs/trainService";
     //  import { listJobType } from "@/api/jobType/index";
     //  import ImageUpload from "@/components/ImageUpload";
export default {
  name: "serviceDetails",
  components: {
    //ImageUpload,
  },

  data() {
    return {
      form: {},
      formData: {},
      fileList: [],
      showTime: false,
      jobTypeList: [],
      otherList: [],
      jobSearchList: [],
      listOfEntrepreneurialNeeds: [],
      listOfEntrepreneurialNeedsTotal: 0,
      trainingList: [],
      trainingTotal: 0,
      jobTotal: 0,
      serviceTotal: 0,
      dict: {
        personStatusList: []
      },
      show: false,
      hopeSolveDate: Number(new Date()),
      needsType: "",
      rules: {
        actualSolveDate: [
          {
            required: true,
            message: "请选择实际解决时间",
            trigger: ["blur", "change"],
          },
        ],
        agentUserName: [
          {
            required: true,
            message: "请填写经办人",
            trigger: ["blur", "change"],
          },
        ],
        solveDesc: [
          {
            required: true,
            message: "请填写解决说明",
            trigger: ["blur", "change"],
          },
        ],
      },
      openDeal: false,
      activeType: 1,
      disabled: false,
      showPersonStatusPicker: false,
      personStatusLabel: '',
    };
  },
  onLoad(options) {
    this.form.id = options.id;
    this.form.userId = options.userId;

    this.getPersonInfo11();
  },
  onShow() {
    // 移除show重置，避免影响弹窗显示
    this.getListPersonDemand();
//    this.serviceTraceability();
  },
  mounted() {
     this.getPersonInfo11();
    let arr = [
      {
        key: "qcjy_zgzpgz",
        prop: "highRecruitmentSalary",
      },
      {
        key: "qcjy_zgzpgz",
        prop: "minRecruitmentSalary",
      },
      {
        key: "qcjy_ryzt",
        prop: "personStatusList",
      },
    ];
    arr.forEach((ele, index) => {
      this.getDicts(ele.key).then((res) => {
        this.dict[ele.prop] = res.data;
        this.$forceUpdate();
      });
    });
    this.workTypeRemoteMethod();
    // this.getListPersonDemand();
    // this.getJobSearchList();
    // this.getListOfEntrepreneurialNeeds();
    // this.getTrainingList();
  },

  methods: {
    // 返回上一页
    goBack() {
      uni.navigateBack();
    },
    
    // 选择人员状态
    selectPersonStatus(item) {
      this.formData.personStatus = item.dictValue;
      this.showPersonStatusPicker = false;
    },
    
    // 确认人员状态选择
    onPersonStatusConfirm() {
      // 已在selectPersonStatus中处理
    },
    
    getJobWorkTypeName(data) {
      if (data) {
        let arr = this.jobTypeList.filter((ele) => ele.id == data);
        return arr[0].workTypeName;
      }
    },
    workTypeRemoteMethod(key) {
      listJobType({
        workTypeName: key,
        pageNum: 1,
        pageSize: 50,
      }).then((res) => {
        this.jobTypeList = res.rows;
      });
    },
    open() {
      // console.log('open');
    },
    close() {
      this.show = false;
      // console.log('close');
    },

    goAddServices() {
     
      uni.navigateTo({
        url:`/packageRc/pages/daiban/addbangfu?id=${this.form.userId}&name=${this.form.name}`
      })


    },
    goRecommend() {
      this.$tab.navigateTo(
        `/pages/services/serviceDetail?activeType=2&showTab=1&userId=${this.form.userId}&name=${this.form.name}`
      );
    },
    goPush() {
      this.$tab.navigateTo(
        `/pages/services/serviceDetail?activeType=3&showTab=1&userId=${this.form.userId}&name=${this.form.name}`
      );
    },
    goNeedsDetail(item, needsType) {
      uni.navigateTo({
        url: `/pages/needs/needDetail?id=${item.id}&type=${needsType}&showTab=1`,
      });
    },
    calculateAge(data) {
      if (data) {
        // 根据身份号计算年龄
        let birthday = data.substr(6, 8);
        let year = birthday.substr(0, 4);
        let month = birthday.substr(4, 2);
        let day = birthday.substr(6, 2);
        let now = new Date();
        let nowYear = now.getFullYear();
        let nowMonth = now.getMonth() + 1;
        let nowDay = now.getDate();
        if (nowMonth > month) {
          return nowYear - year;
        } else if (nowMonth == month) {
          if (nowDay >= day) {
            return nowYear - year;
          } else {
            return nowYear - year - 1;
          }
        } else {
          return nowYear - year - 1;
        }
      }
    },
    confirmDate(e) {
      this.showTime = false;
      // 获取选中的日期
      const date = e.value;
      // 使用 uView 的 uTime 方法格式化日期，包含时分秒
      const formattedDateTime = uni.$u.timeFormat(date, "yyyy-mm-dd hh:MM:ss");
      // 设置表单数据
      this.formData.actualSolveDate = formattedDateTime;
    },
    removeRowData(data) {
      //确实要删除的提示
      uni.showModal({
        title: "提示",
        content: "你确定要删除吗",
        success: (res) => {
          delPersonDemand(data.id).then((res) => {
            if (res.code == 200) {
              uni.showToast({
                title: "删除成功",
                icon: "none",
              });
              //刷新列表
              this.getListPersonDemand();
            } else {
              uni.showToast({
                title: "删除失败",
                icon: "none",
              });
            }
          });
        },
      });
    },
    goAddNeeds(needsType) {
    

       uni.navigateTo({
        
    url: `/packageRc/pages/demand/demandail?activeType=${1}&id=${this.form.userId}&name=${this.form.name}`,
    success: function() {
      console.log('导航成功');
    },
    fail: function(err) {
      console.error('导航失败:', err);
    }
  });


    },
    getDictLabel(value, list) {
      if (list) {
        let arr = list.filter((ele) => ele.dictValue == value);
        if (arr.length) {
          return arr[0].dictLabel;
        } else {
          return "--";
        }
      }
    },
    // 服务追溯
    serviceTraceButton(item, needsType) {
      // 定义需求类型与对应的字符串映射
      const demandTypeMap = {
        1: "job", // 求职需求
        2: "assist", // 援助需求
        3: "entrepreneurship", // 创业需求
        4: "train", // 培训需求
        5: "other", // 其他需求
      };
      // 获取当前的需求类型字符串
      const demandType = demandTypeMap[needsType] || "other";
      // 使用映射后的字符串构建URL并导航
      this.$tab.navigateTo(
        `/pages/services/serviceTraceability?id=${item.id}&demandType=${demandType}`
      );
    },
    // 办结按钮
    async finishJobRecommend(needsType) {
      try {
        // 先进行表单校验
        await this.$refs.uForm.validate();

        // 校验通过后再走后续逻辑
        this.$showLoading();
        const url = "/manage/personDemand/demandDone";
        if (!url) {
          throw new Error("无效的需求类型");
        }
        const { code, msg } = await requirementCompletion(url, this.formData);

        if (code === 200) {
          this.$u.toast('办结成功');
          this.openDeal = false;
          this.getListPersonDemand();
          this.serviceTraceability();
        }
      } catch (error) {
        let msg = '';
        if (error && error[0] && error[0].message) {
          msg = error[0].message;
        } else if (error && error.message) {
          msg = error.message;
        } else if (typeof error === 'string') {
          msg = error;
        } else {
          msg = '请检查必填项填写';
        }
        this.$u.toast(msg);
      } finally {
        this.$hideLoading();
      }
    },
    // 需求推荐/培训
    requirementTraining(item, index) {
      if (index == 1) {
        this.$tab.navigateTo(
          `/pages/services/serviceDetail?personName=${item.personName}&personId=${item.personId}&jobDemandInfoId=${item.id}&jobWorkType=${item.jobWorkType}&type=3&showTab=1`
        );
      } else {
        this.$tab.navigateTo(
          `/pages/services/serviceDetail?personName=${item.personName}&personId=${item.personId}&skillTrainingId=${item.id}&personStatus=${item.personStatus}&type=4&showTab=1`
        );
      }
    },
    changeFile(e) {
      // 清空当前的 fileUrl 数组
      this.formData.fileUrl = [];
      // 如果 e 有长度（即用户选择了文件）
      if (e.length) {
        // 遍历每个文件对象并获取其 url
        for (let data of e) {
          const url = data.data ? data.data.url : data.url;
          this.formData.fileUrl.push(url);
        }
      }
      this.formData.fileUrl = this.$arrayToString(this.formData.fileUrl);
    },
    // 需求办结
    requirementHandling(item, needsType) {
  this.openDeal = true;
  this.needsType = needsType;
  this.formData = {
    id: item.id,
    currentStatus: "3",
    userId: item.userId,
    personStatus: item.personStatus || (this.dict.personStatusList[0] && this.dict.personStatusList[0].dictValue),
  };
  console.log("item",item)
  this.$nextTick(() => {
    this.$forceUpdate();
  });
},
    onPersonStatusConfirm(e) {
      const item = e.value[0];
      this.formData.personStatus = item.dictValue;
      this.showPersonStatusPicker = false;
    },
    getListPersonDemand() {
      this.jobSearchList = [];
      this.listOfEntrepreneurialNeeds = [];
      this.trainingList = [];
      this.otherList = [];

      listPersonDemand({
        page: 1,
        limit: 1000,
        userId: this.form.userId,
      }).then((res) => {
        if (res.code == 200) {
          res.rows.forEach((element) => {
            if (element.demandType == 1) {
              this.jobSearchList.push(element);
            }
            if (element.demandType == 2) {
              this.listOfEntrepreneurialNeeds.push(element);
            }
            if (element.demandType == 3) {
              this.trainingList.push(element);
            }
            if (element.demandType == 9) {
              this.otherList.push(element);
            }
          });
        }
      });
    },

    getPersonInfo11() {
      getPersonInfo(this.form.id).then((res) => {
        if (res.code == 200) {
          this.form = res.data;
          console.log("res.data",res.data)
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
/* 表单样式 */
.self-form {
  padding: 20rpx;
}

.form-item {
  margin-bottom: 30rpx;
}

.form-item.required .form-label::after {
  content: '*';
  color: #ff4d4f;
  margin-left: 4rpx;
}

.form-label {
  font-size: 28rpx;
  color: #333;
  margin-bottom: 12rpx;
}

.form-content {
  position: relative;
}

.form-input {
  width: 100%;
  padding: 20rpx;
  border: 1rpx solid #d9d9d9;
  border-radius: 8rpx;
  font-size: 28rpx;
  background-color: #fff;
}

.form-textarea {
  width: 100%;
  min-height: 200rpx;
  padding: 20rpx;
  border: 1rpx solid #d9d9d9;
  border-radius: 8rpx;
  font-size: 28rpx;
  background-color: #fff;
  resize: none;
}

/* 导航栏样式 */
.navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20rpx 30rpx;
  width: 100%;
  box-sizing: border-box;
  position: relative;
}

.navbar-left,
.navbar-right {
  width: 60rpx;
  text-align: center;
}

.navbar-title {
  flex: 1;
  text-align: center;
  font-size: 36rpx;
  font-weight: 500;
}

/* 自定义picker样式 */
.picker-container {
  background-color: #fff;
  border-radius: 20rpx 20rpx 0 0;
  padding-bottom: 30rpx;
}

.picker-header {
  display: flex;
  justify-content: space-between;
  padding: 20rpx 30rpx;
  border-bottom: 1rpx solid #f0f0f0;
}

.picker-header > view {
  font-size: 32rpx;
  color: #333;
}

.picker-header > view:first-child {
  color: #999;
}

.picker-header > view:last-child {
  color: #1A62CE;
}

.picker-content {
  max-height: 500rpx;
  overflow-y: auto;
}

.picker-item {
  padding: 24rpx 30rpx;
  font-size: 30rpx;
  color: #333;
  border-bottom: 1rpx solid #f5f5f5;
}

.picker-item:active {
  background-color: #f5f5f5;
}

.job-list {
  &__navbar {
    height: 80rpx;
  }

  &__content {
    position: relative;
    padding: 32rpx;
    z-index: 10;
    background-color: #d0dcee;
    border-radius: 32rpx 32rpx 0 0;
    border: 1px solid #fff;
  }

  &__scroll {
    margin-top: 10rpx;
    height: calc(100vh - 320rpx);
  }

  &__item {
    position: relative;
    padding: 32rpx;
    background-color: #fff;
    border-radius: 16rpx;
    font-size: 28rpx;

    .tips {
      position: absolute;
      right: 0;
      top: 0;
      min-width: 40rpx;
      padding: 0 24rpx;
      height: 40rpx;
      line-height: 40rpx;
      color: #1ace62;
      border-radius: 0px 16rpx 0px 16rpx;
      background-color: #d9f9ed;
      border: 1px solid #58e6a2;
    }
  }

  &__item-detail {
    margin-top: 20rpx;
    color: #8e8e8e;

    view,
    text:last-child {
      margin-left: 10rpx;
      color: #333;
    }
  }

  .tab_list {
    margin-top: 30rpx;
    height: 86rpx;
    color: #ce6b1a;
    border-top: 1px solid #eff2f6;
  }

  .items {
    margin-top: 30rpx;
    border-top: 1px solid #d0dcee;
  }

  .post_job_btn {
    position: fixed;
    bottom: 120rpx;
    right: 16rpx;
    width: 150rpx;
    height: 150rpx;
    border-radius: 50%;
    z-index: 20;
    background: url("@/static/images/addPersonnel.png") no-repeat;
    background-size: 100% 100%;
  }

  .dialog_form {
    padding: 30rpx;
    width: 80vw;

    .tadio {
      height: 100rpx;
    }

    .btn {
      margin-top: 100rpx;
    }
  }
}

.job-list__content {
  background-color: transparent;
  border: 0px solid #fff;
  position: relative;
  padding: 1rpx;
  .content {
    padding: 17px;
    margin-top: 110rpx;
    height: calc(100vh - 264rpx);
    overflow: auto;
    z-index: 10;
    background-color: #d0dcee;
    border-radius: 17px 17px 0 0;
    border: 3px solid #fff !important;
  }
}
.top_box_bg_service {
  position: absolute;
  top: 20rpx;
  left: 40rpx;
}
.serviceFrequency {
  position: absolute;
  left: 260rpx;
  top: 50rpx;
  display: flex;
  justify-content: space-between;
  width: 55%;
  color: #ffffff;
  font-family: Source Han Sans;
  font-size: 36rpx;
  font-weight: bold;
  line-height: 32rpx;
}
.visitAndInvestigate {
  margin-top: 40rpx;
  width: 100%;
  height: 140rpx;
  border-radius: 8px;
  background: #ffffff;
  padding: 0 30rpx;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .text {
    font-size: 38rpx;
    color: #282828;
    font-weight: bold;
  }
}
.visitAndInvestigate-vertical {
  margin-top: 32rpx;
  display: flex;
  background: #fff;
  border-radius: 8px;
  padding: 30rpx;
  align-items: center; // 让“服务”上下居中
  .left {
    min-width: 70rpx;
    .text {
      font-size: 38rpx;
      color: #282828;
      font-weight: bold;
      margin-top: 8rpx;
    }
  }
  .right {
    display: flex;
    flex-direction: column;
    gap: 20rpx;
    margin-left: 80rpx;
    flex: 1;
    align-items: flex-end;
    .service-btn-img {
      width: 200rpx;   // 更大
      height: 60rpx;
      cursor: pointer;
      display: block;
    }
  }
}
.visitAndInvestigate-row {
  display: flex;
  justify-content: space-between; // 两端对齐
  align-items: center;
  background: #fff;
  border-radius: 16px;
  padding: 30rpx 40rpx; // 上下30，左右40
  margin-top: 32rpx;
  gap: 32rpx; // 两个按钮之间的间距
  .btn-col {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .service-btn-img {
    width: 100%;
    height: 80rpx; // 按需调整高度
    object-fit: contain; // 保证图片不变形
    cursor: pointer;
    display: block;
  }
}
.personnelInformation {
  width: 100%;
  height: 205rpx;
  border-radius: 8px;
  background: #ffffff;
  padding: 30rpx;
  box-sizing: border-box;
  display: flex;
  .left {
    flex: 1;
    .left_name {
      color: #282828;
      font-size: 38rpx;
      font-weight: bold;
    }
  }
}
.requirementTitle {
  padding-left: 12rpx;
  height: 38rpx;
  font-weight: 700;
  font-size: 38rpx;
  justify-content: space-between;
  color: #3d3d3d;
  border-left: 10rpx solid #1a62ce;
  display: flex;
  align-items: center;
  margin-top: 40rpx;
  .text {
    font-size: 26rpx;
    color: #282828;
    font-weight: 500;
  }
}
.trainingNeeds {
  margin-top: 40rpx;
  width: 100%;
  border-radius: 8px;
  background: #ffffff;
  padding: 30rpx;
  box-sizing: border-box;
  position: relative;
}
.entrepreneurialNeeds {
  margin-top: 40rpx;
  width: 100%;
  border-radius: 8px;
  background: #ffffff;
  box-sizing: border-box;
  position: relative;
  .jobSearchListview_currentStatus {
    position: absolute;
    right: 40rpx;
    top: 40rpx;
  }
  .entrepreneurialNeeds_row {
    margin-top: 20rpx;
  }
  .entrepreneurialNeeds_name {
    font-weight: 700;
    font-size: 38rpx;
    width: 80%;
    //超过一行隐藏
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}
.jobSearchListview {
  margin-top: 40rpx;
  width: 100%;
  border-radius: 8px;
  background: #ffffff;
  
  //   padding: 30rpx;
  box-sizing: border-box;
  position: relative;
  .jobSearchListview_currentStatus {
    position: absolute;
    right: 40rpx;
    top: 40rpx;
  }
  .jobSearchListview_name {
    font-size: 38rpx;
    font-weight: bold;
    color: #282828;
  }
  .salaryExpectation {
    margin-top: 20rpx;
    display: flex;
    align-items: center;
    .salary {
      font-size: 38rpx;
      font-weight: bold;
      color: #fa6553;
    }
  }
}
.job-list__item-btn {
  height: 60rpx;
  margin-top: 40rpx;
  border-top: 1px solid #eee;
  display: flex;
  justify-content: space-between;
  color: #1a62ce;
  font-size: 26rpx;
  .btn {
    width: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    margin-top: 10rpx;
  }
}
.self-form {
  padding: 32rpx;

  .bordered {
    border: 1rpx solid #dadbde;
    padding: 9px;
    border-radius: 4px;
  }
}
.button-area {
  padding: 24rpx 32rpx 68rpx;
  background: #fff;
  display: flex;
  box-sizing: border-box;
  border-radius: 16px 16px 0px 0px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);

  .btn {
    line-height: 72rpx;
    width: 176rpx;
    margin-right: 16rpx;
    font-size: 28rpx;
    border: 1px solid #b8c5d4;
    color: #282828;
    text-align: center;
    border-radius: 8rpx;
  }

  .reset {
    background: #dce2e9;
  }

  .save {
    background: linear-gradient(103deg, #1d64cf 0%, #1590d4 99%);
    color: #fff;
    border: 0;
    flex-grow: 1;
  }
}

.addNeeds {
  position: fixed;
  right: 0;
  bottom: 150rpx;
  width: 150rpx;
  overflow: hidden;
  z-index: 10;
  border-radius: 44rpx;
  border-radius: 75rpx;

  img {
    display: block;
    width: 100%;
  }
}
.dialog_div {
  .dialog_div_item {
    height: 96rpx;
    margin: 30rpx;
    border: 1px solid #e6e6e6;
    background: #f2f4f7;
    display: flex;
    justify-content: center;
    font-size: 28rpx;
    color: #282828;
    align-items: center;
  }

  .dialog_div_btn {
    display: flex;
    margin: 40rpx;
    border-top: 1px solid #e6e6e6;
    height: 60rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 20rpx;
    color: #1a62ce;
  }
}

.xuqiushu-box {
			color: #3D3D3D;
			position: relative;
			z-index: 10;
			border-radius: 24rpx;
			padding: 32rpx 40rpx;
			border: 3rpx solid #FFFFFF;
			background: linear-gradient(180deg, #FFFFFF 0%, #EDF4FF 100%);
			margin-top: 24rpx;
		}
		.xuqiushu-box-item {
			display: flex;
			flex-direction: column;
			align-items: center;
			.xuqiushu-box-item-title {
				display: flex;
				margin-bottom: 16rpx;
			}
			.xuqiushu-box-item-num {
				font-size: 40rpx;
				font-weight: 700;
			}
		}
.person-status-select {
  width: 100%;
  border: 1rpx solid #dadbde;
  border-radius: 4px;
  padding: 9px 12px;
  min-height: 40rpx;
  background: #fff;
  box-sizing: border-box;
  font-size: 28rpx;
  margin-bottom: 0;
}
</style>
