<template>
  <div>
    <a-drawer :width="800" :open="drawerShow" :body-style="{ paddingBottom: orderType == 1 ? '':'80px' }" :footer-style="{ textAlign: 'right' }" @close="hideDrawerShow " class="detailDrawer">
      <template #title>
        <div class="g_flex_row_between">
          <div class="g_fs_16 g_fw_600 g_flex_column_center" style="color: rgba(0, 0, 0, 0.88);line-height: 1.5;">工单详情</div>
          <div class="g_flex_row_end" v-if="dateObj.statusStr == '待确认'">
            <a-button class="g_mr_16" @click="handleCanelAdd">取消报名</a-button>
            <a-button type="primary" class="g_mr_0" @click="handleConfirmAdd">确认报名</a-button>
          </div>
        </div>
      </template>
      <a-form :selfUpdate="true">
        <div class="userInfo g_flex_row_between">
          <div class="left" style="justify-content: flex-start;">
            <div class="g_fs_16 g_mb_4">
              <span class="g_fw_600" v-show="currentBillInfo.userName">{{ currentBillInfo.userName }}</span>
              <span class="g_fw_600" v-show="currentBillInfo.gender">/{{ currentBillInfo.gender }}</span>
              <span class="g_fw_600" v-show="currentBillInfo.age">/{{ currentBillInfo.age }}岁</span>
              <span class="g_fw_600" v-show="currentBillInfo.nation">/{{ currentBillInfo.nation }}</span>
              <span class="g_fw_600" v-show="currentBillInfo.storeJobName">- {{ currentBillInfo.storeJobName }}</span>

              <span @click="showEditUser" class="iconfont icon-bianji g_ml_6 g_cursor_point" style="font-size:14px"></span>
            </div>
            <div>
              <div>
                <i :style="{  marginRight: '4px',  color: currentBillInfo.idCardImageUrl ? '#1890ff' : '', }" class="iconfont icon-shenfenzheng" @click="showIdCardImage"></i>
                <span style="padding-left:4px">{{ currentBillInfo.idCard != '' && currentBillInfo.idCard != 'undefined' ? currentBillInfo.idCard : "暂无身份证号" }}</span>
                <a-input :value="currentBillInfo.idCard" style="display:none;width:160px;" />
              </div>
              <div>
                <i :style="{  marginRight: '4px',  color: currentBillInfo.tel ? '#1890ff' : '',  }" class="iconfont icon-dianhua1"></i>
                <span style="padding-left:4px">{{ currentBillInfo.tel ? currentBillInfo.tel : "暂无手机号" }}</span>
                <a-input :value="currentBillInfo.tel" style="display:none;width:120px" />
              </div>
              <!-- <a-modal v-model="idCardImageVisible" title footer @cancel="closeIdCardImage">
                <img :src="currentBillInfo.idCardImageUrl" alt style="width:100%;margin-top:20px" />
              </a-modal>-->
            </div>
            <div style class="g_mb_4 g_flex_row_start">
              家庭住址：
              <a-popover :title="null">
                <template #content>
                  <p>{{ currentBillInfo.address }}</p>
                </template>
                <div style="padding-left:4px;max-width:260px" class="g_ell_1">{{ currentBillInfo.address ? currentBillInfo.address : "暂无家庭住址" }}</div>
              </a-popover>
            </div>
            <div class="g_mb_4">
              创建时间：
              <span>{{ commonJS.getPointTime(currentBillInfo.createTime, 'YY--MM--DD HH:MM') }}</span>
            </div>
          </div>
          <div v-if="speed > 0">
            <userPicturePanel @closeModel="getBillDetail()" :list="editDetail.imageArray" :userid=" currentBillInfo.userId" />
          </div>
          <div v-if="speed == 0">
            <a-spin />
          </div>
          <!-- <imgPreview :fileList="fileList" @getfile="getfile($event)" /> -->
        </div>
        <a-divider style="background-color: #eee" class="g_mb_10" />
        <div class="applyinfo" v-if="infoShow">
          <a-descriptions bordered size="small" :column="1" class="leftDesc">
            <a-descriptions-item label="状态">
              <div id="status" class="g_flex_row_between g_pr_12" style>
                <span class="detailContent" style="color:#faad14;">{{ currentBillInfo.statusTextNew }}</span>
                <div>
                  <div v-if="dateObj.statusStr == '已取消' || dateObj.statusStr == '官方审核中' || dateObj.statusStr == '审核不通过'"></div>
                  <div v-else @click="showStatusModal('status')" class="iconfont icon-bianji g_cursor_point g_mt_2" style="font-size:14px"></div>
                </div>
                <a-modal :open="statusVisible" title="状态" class="statusModal" :footer="null" @cancel="[ (statusVisible = false)]">
                  <a-form :selfUpdate="true" class="g_mt_18" :form="statusForm">
                    <!-- <a-form-item>
                      <span slot="label" class="g_text_r" style="min-width:120px;display:inline-block;margin-right:12px">{{'状态:'}}</span>
                      {{dateObj.statusStr}}
                    </a-form-item>-->
                    <a-form-item :rules="[{ required: true, message: '请输入职位名称'}]">
                      <span slot="label" class="g_text_r" style="min-width:120px;display:inline-block;margin-right:12px">{{'状态:'}}</span>
                      <a-select v-model:value=" dateObj.statusStr" style="width:260px">
                        <a-select-option :value="item.name" v-for="item in statusList" :key="item.id" @click="setStoreStatus(item)">{{ item.name }}</a-select-option>
                      </a-select>
                    </a-form-item>
                    <a-form-item v-show="dateObj.isTimeShow" :rules="[{ required: true, message: '请输入职位名称'}]">
                      <span slot="label" class="g_text_r" style="min-width:120px;display:inline-block;margin-right:12px">{{ dateObj.statusTimeInfo + ':'}}</span>
                      <a-date-picker v-model:value="dateObj.statusShowTime" :allowClear="false" @ok="statusTimeChange($event,dateObj.statusTimeInfo,dateObj.statusShowTime)" style="width:260px" show-time format="YYYY-MM-DD HH:mm" :minuteStep="30" :disabled-time="disabledTime" :show-mow="false" />
                    </a-form-item>
                    <a-form-item v-if="dateObj.isTimeShow2 && ifTimeShow" :rules="[{ required: true, message: '请输入职位名称'}]">
                      <span slot="label" class="g_text_r" style="min-width:120px;display:inline-block;margin-right:12px">{{ dateObj.statusTimeInfo2 + ':'}}</span>
                      <a-date-picker v-model:value="dateObj.statusShowTime2" :allowClear="false" @ok="statusTimeChange($event,dateObj.statusTimeInfo,dateObj.statusShowTime2)" style="width:260px" @change="statusTime($event)" show-time format="YYYY-MM-DD HH:mm" :minuteStep="30" :disabled-time="disabledTime" :show-mow="false" />
                    </a-form-item>

                    <a-form-item v-if="dateObj.isTimeShow2 && !ifTimeShow">
                      <span slot="label" class="g_text_r" style="min-width:120px;display:inline-block;margin-right:12px">{{ dateObj.statusTimeInfo2 + ':'}}</span>
                      <a-date-picker v-model:value="dateObj.statusShowTime2" :allowClear="false" @ok="statusTimeChange($event,dateObj.statusTimeInfo,dateObj.statusShowTime2)" style="width:260px" @change="statusTime($event)" show-time format="YYYY-MM-DD HH:mm" :minuteStep="30" :disabled-time="disabledTime" :show-mow="false" />
                    </a-form-item>
                    <a-form-item>
                      <div class="g_flex_row_start">
                        <span slot="label" class="g_text_r" style="min-width:120px;display:inline-block;margin-right:12px;line-height:32px">{{'工单备注:'}}</span>
                        <!-- 绑定到查询 -->
                        <a-textarea placeholder="请添加备注" style="width:260px" :auto-size="{   minRows: 1,   maxRows: 10,  }" v-model:value="dateObj.desp" />
                      </div>
                    </a-form-item>
                    <a-form-item class="buttonbox g_text_r g_mb_0 g_mt_32">
                      <a-button class="g_mr_12" @click="[(statusVisible = false)]">取消</a-button>
                      <a-button class="submit" type="primary" @click.prevent="pushFormdata('status')">确定</a-button>
                    </a-form-item>
                  </a-form>
                </a-modal>
              </div>
            </a-descriptions-item>
            <a-descriptions-item label="报名企业" class="test1">
              <span class="detailContent">{{currentBillInfo.storeId}}{{ currentBillInfo.storeName ? currentBillInfo.storeName : "-" }}</span>
            </a-descriptions-item>
            <a-descriptions-item label="企业地址">
              <span class="detailContent">{{ currentBillInfo.jobInfoStr.storeAddr ? currentBillInfo.jobInfoStr.storeAddr : "-" }}</span>
            </a-descriptions-item>
            <a-descriptions-item label="报名职位">
              <span class="detailContent">{{ currentBillInfo.storeJobName ? currentBillInfo.storeJobName : "-" }}</span>
            </a-descriptions-item>
            <a-descriptions-item :label="orderType == 1 ? '发单号':'粉丝'">
              <span class="detailContent">{{ currentBillInfo.agencyName ? currentBillInfo.agencyName : "-" }}</span>
            </a-descriptions-item>
            <a-descriptions-item label="报名人" v-if="orderType == 1">
              <!-- <span slot="label" class></span> -->
              <span class="g_mt_2 g_pl_10 g_flex_row_between" style v-if="!editApply">
                {{currentBillInfo.applyUserName}}
                <i class="iconfont icon-bianji g_ml_6 g_cursor_point g_fsi_14 g_pr_12" @click="editApply = true"></i>
              </span>
              <a-form-item @click.stop="editApply = false" v-else>
                <a-select auto-focus mode="combobox" @click.stop style="width: calc(100% - 250px);" v-model:value="currentBillInfo.applyUserId" @blur="editApply = false">
                  <a-select-option v-for="i in memberList" :key="i.id + ''" :value="i.id" @click="changeApply(i)">{{ i.aliasName }}</a-select-option>
                </a-select>
              </a-form-item>
            </a-descriptions-item>
            <a-descriptions-item label="驻场信息">
              <span class="g_mt_2 g_pl_10 g_flex_row_between flex_center" style>
                <span class data-_isarea="textarea" style="white-space:pre-wrap;word-break: break-all">{{ currentBillInfo.onSiteInfo ? currentBillInfo.onSiteInfo : "-" }}</span>
                <i class="iconfont icon-bianji g_ml_6 g_cursor_point g_fsi_14 g_pr_12" v-if="orderType == 2" @click="editOnsite = true"></i>
              </span>
              <a-modal title="信息" :open="editOnsite" width="640px" @ok="changeOnsite" @cancel="editOnsite = false">
                <div style="min-height:140px">
                  <div class="g_flex_row_start flex_center g_pl_16 g_pr_16 g_mt_60">
                    <div class="g_mr_8">驻场信息:</div>
                    <a-select v-model:value="currentBillInfo.onSiteUserId" mode="multiple" class="g_flex_1" placeholder="请选择驻场" option-label-prop="onsiteChildren" @change="onSiteChange">
                      <a-select-option v-for="item in onsiteList" :disabled="(currentBillInfo.onSiteUserId ? (currentBillInfo.onSiteUserId.length >= 3 ? true : false) :false) && item.disabled" :value="item.userName + item.tel" :title="item.userId">{{item.userName}}</a-select-option>
                    </a-select>
                  </div>
                </div>
              </a-modal>
            </a-descriptions-item>
            <a-descriptions-item label="职位描述">
              <span class="detailContent" style="white-space:pre-wrap;word-break: break-all;width:100%">{{ currentBillInfo.jobInfoStr.jobInfo ? currentBillInfo.jobInfoStr.jobInfo : "-" }}</span>
            </a-descriptions-item>
            <a-descriptions-item label="工单备注">
              <div data-_isarea="textarea" style="white-space:pre-wrap;word-break: break-all;width:100%" class="detailContent">{{ currentBillInfo.desp ? currentBillInfo.desp : "-" }}</div>
            </a-descriptions-item>
          </a-descriptions>
        </div>
      </a-form>
      <div id="progressinfo" :style=" {marginBottom: orderType == 1 ? '':'155px'}">
        <template v-for="(group,key) in records">
          <div class="titleMain">
            <div class="titleText" v-if="spliceStr(key) == '1'">
              <img class="titleImg" src="http://matripeweb.oss-cn-hangzhou.aliyuncs.com/imgs/shz.svg" alt />
              报名审核中
            </div>
            <div class="titleText" v-if="spliceStr(key) == '2'">
              <img class="titleImg" src="http://matripeweb.oss-cn-hangzhou.aliyuncs.com/imgs/bmcg.svg" alt />报名成功
            </div>
            <div class="titleText" v-if="spliceStr(key) == '3'">
              <img class="titleImg" src="http://matripeweb.oss-cn-hangzhou.aliyuncs.com/imgs/mstg.svg" alt />待入职
            </div>
            <div class="titleText" v-if="spliceStr(key) == '4'">
              <img class="titleImg" src="http://matripeweb.oss-cn-hangzhou.aliyuncs.com/imgs/rzcg.svg" alt />在职中
            </div>
            <div class="titleText" v-if="spliceStr(key) == '5'">
              <img class="titleImg" src="http://matripeweb.oss-cn-hangzhou.aliyuncs.com/imgs/ylz.svg" alt />已离职
            </div>
            <div class="titleText" v-if="spliceStr(key) == '6'">
              <img class="titleImg" src="http://matripeweb.oss-cn-hangzhou.aliyuncs.com/imgs/bmcg.svg" alt />已完成
            </div>
            <div class="titleText" v-if="spliceStr(key) == '9'">
              <img class="titleImg" src="http://matripeweb.oss-cn-hangzhou.aliyuncs.com/imgs/yylz.svg" alt />约离职
            </div>
            <div class="titleText" v-if="spliceStr(key) == '11'">
              <img class="titleImg" src="http://matripeweb.oss-cn-hangzhou.aliyuncs.com/imgs/wei.svg" alt />报名失败
            </div>
            <div class="titleText" v-if="spliceStr(key) == '12'">
              <img class="titleImg" src="http://matripeweb.oss-cn-hangzhou.aliyuncs.com/imgs/yjd.svg" alt />已接到
            </div>
            <div class="titleText" v-if="spliceStr(key) == '13'">
              <img class="titleImg" src="http://matripeweb.oss-cn-hangzhou.aliyuncs.com/imgs/wei.svg" alt />未接到
            </div>
            <div class="titleText" v-if="spliceStr(key) == '14'">
              <img class="titleImg" src="http://matripeweb.oss-cn-hangzhou.aliyuncs.com/imgs/wei.svg" alt />面试未通过
            </div>
            <div class="titleText" v-if="spliceStr(key) == '15'">
              <img class="titleImg" src="http://matripeweb.oss-cn-hangzhou.aliyuncs.com/imgs/wei.svg" alt />未入职
            </div>
          </div>
          <div v-for="(item,index) in group" class="ui-step-one">
            <div class="cb-cricle"></div>
            <div class="ui-list-info g_fs_12">
              <div class="c6" v-if="item.desp != ''">
                {{item.desp}}
                <template v-if="item.policy">
                  <span class="g_ml_12" style="color:#1890ff;cursor: pointer;" @click="showInfo2(item.policy)">详情</span>
                </template>
              </div>
              <div class="g_c_9 g_mt_8">
                {{item.creator}}
                <span class="g_ml_8">{{ getPointTime(item.createTime,'YY--MM--DD HH:MM') }}</span>
              </div>
            </div>
          </div>
        </template>
        <a-modal title="报名信息" :open="policyInfo.previewPolicy" @cancel="policyInfo.previewPolicy = false">
          <div class="g_fs_16 g_mt_16 g_mb_8 g_flex_row_start">
            <span style="min-width:90px" class="dib g_text_r">姓名：</span>
            <span class>
              <span class="fwb g_fw_600" v-if="policyInfo.value.userName">{{policyInfo.value.userName}}</span>
              <span class="fwb g_fw_600" v-if="policyInfo.value.sex">/{{policyInfo.value.sex == '1' || policyInfo.value.sex == '男' ? '男' : '女'}}</span>
              <span class="fwb g_fw_600" v-if="policyInfo.value.age">/{{policyInfo.value.age}}岁</span>
              <span class="fwb g_fw_600" v-if="policyInfo.value.nation && policyInfo.value.nation!='族'">/{{policyInfo.value.nation}}</span>
            </span>
          </div>
          <div class="g_fs_16 g_mb_8 g_flex_row_start">
            <span style="min-width:90px" class="dib g_text_r">电话：</span>
            <span style="color:#576B95;">{{policyInfo.value.tel == '' || policyInfo.value.tel == null || policyInfo.value.tel == 'undefined' ? '-' : policyInfo.value.tel}}</span>
          </div>
          <div class="g_fs_16 g_mb_8 g_flex_row_start">
            <span style="min-width:90px" class="dib g_text_r">身份证号：</span>
            <span>{{policyInfo.value.idCard == '' || policyInfo.value.idCard == null || policyInfo.value.idCard == 'undefined' ? '-' : policyInfo.value.idCard}}</span>
          </div>
          <div class="g_fs_16 g_mb_8 g_flex_row_start">
            <span style="min-width:90px" class="dib g_text_r">家庭住址：</span>
            <span>{{policyInfo.value.address == '' || policyInfo.value.address == null || policyInfo.value.address == 'undefined' ? '-' : policyInfo.value.address}}</span>
          </div>
          <div style="border-top: 1px dashed #eeeeee;margin-top: 10px;margin-bottom: 10px;"></div>
          <div class="g_fs_16 g_mb_8 g_flex_row_start">
            <span style="min-width:90px" class="dib g_text_r">报名岗位：</span>
            <span class="fwb g_fw_600">{{policyInfo.value.storeJobName || '-'}}</span>
          </div>
          <template #footer>
            <div class>
              <a-button style="marginRight: 8px" @click="handleCancel">复制文本</a-button>
              <a-button type="primary" @click="policyInfo.previewPolicy = false">确定</a-button>
            </div>
          </template>
        </a-modal>
      </div>
      <div class="remarkInput" v-if="orderType == 2">
        <div class="title">备注</div>
        <div class="textarea">
          <a-textarea :auto-size="{ minrows: 1, maxrows: 10 }" placeholder="请输入备注" v-model:value="remarkInfo"></a-textarea>
        </div>
        <div class="buttonBox">
          <a-button type="primary" @click="pushFormdata('desp')">提交</a-button>
        </div>
      </div>
      <!-- 编辑 -->
      <a-modal v-model:open="editDetail.isShow" title="老乡信息" okText="确定" cancelText="取消" width="640px" centered :footer="false" :destroyOnClose="true" :forceRender="true" @cancel="editDetail.isShow = false">
        <div class="g_pt_40">
          <a-form :model="editDetail" name="basic" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }" autocomplete="off">
            <div class="g_flex_row_center">
              <a-form-item class="g_mr_32" label="姓名" name="name" :rules="[{ required: true, message: '请输入姓名' }]">
                <a-input placeholder="请输入姓名" v-model:value="editDetail.name" class="g_w_150" />
              </a-form-item>
              <a-form-item label="性别" name="sex" :rules="[{ required: true, message: '请选择性别' }]">
                <a-radio-group v-model:value="editDetail.sex" name="sex" class="g_ml_16">
                  <a-radio :value="1">男</a-radio>
                  <a-radio :value="2">女</a-radio>
                </a-radio-group>
              </a-form-item>
            </div>
            <div class="g_flex_row_start g_ml_94">
              <a-form-item label="年龄" name="age" :rules="[{ required: true, message: '请输入年龄' }]" class="g_mr_45">
                <a-input placeholder="请输入年龄" v-model:value="editDetail.age" class="g_w_150" />
              </a-form-item>
              <a-form-item label="民族" name="nation">
                <a-select v-model:value="editDetail.nation" class="g_ml_16">
                  <a-select-option :value="item.name" v-for="(item,index) in nationArray" :key="index">{{item.name}}</a-select-option>
                </a-select>
              </a-form-item>
            </div>

            <a-form-item label="电话" name="tel">
              <a-input placeholder="请输入电话" v-model:value="editDetail.tel" class="g_w_338" />
            </a-form-item>
            <a-form-item label="身份证号" name="idcard">
              <a-input placeholder="请输入身份证号" v-model:value="editDetail.idcard" class="g_w_338" />
            </a-form-item>
            <a-form-item label="家庭住址" name="address">
              <a-input placeholder="请输入家庭住址" v-model:value="editDetail.address" class="g_w_338" />
            </a-form-item>
            <div class="m-submit g_flex_row_end">
              <a-button class="g_mr_16" @click="editDetail.isShow = false">取消</a-button>
              <a-button type="primary" html-type="submit" @click="updateTownsmanInfo">确定</a-button>
            </div>
          </a-form>
        </div>
      </a-modal>
    </a-drawer>
  </div>
</template>


<script setup>
import { ref, reactive, onMounted, getCurrentInstance, watch, defineEmits, defineProps } from 'vue'
import { message } from 'ant-design-vue'
import { isNotEmptyCheck, userApplyOrderStatusArrayModel, changeUserApplyOrderStatusArray } from '../../../utils/commonMethod.js'
import dayjs from 'dayjs'
const commonJS = getCurrentInstance().appContext.app.config.globalProperties.G
import { getOrderDetail, getMemberListApi, updateApplyAndStatisticApi, updateStatusTimeApi, updateRecordStatus, updateOnsiteStatus } from '../../../api/manage/billList'
import { getOnsiteListApi } from '../../../api/manage/onsite.js'

import { townsmanEdit, townsmanListGetImage } from '../../../api/manage/townsmanList.js'
import userPicturePanel from '../image/userPicture.vue'
import data from '../../../utils/common.js'
onMounted(() => {
  console.log(props)
  console.log()
})

const props = defineProps({
  drawerShow: {
    type: Boolean,
    default: false,
  },
  currentRecordId: {
    type: Number,
    default: 0,
  },
  orderType: {
    type: Number,
    default: 1,
  },
})
const emits = defineEmits(['update:drawerShow', 'changedrawerShow', 'updateList'])
const editApply = ref(false)
const editOnsite = ref(false)

const infoShow = ref(false)
watch(
  () => props.currentRecordId,
  (val) => {
    console.log(val)
    if (val) {
      infoShow.value = false
      getOnsiteList()
      getBillDetail(props.currentRecordId).then(() => {
        speed.value = 0
        getTownsmanImg()
      })

      getMemberList()
    }
  }
)
// 状态切换相关

const newStatusList = ref([])
const ifTimeShow = ref(true)
const statusForm = ref(true)

const setStoreStatus = (item) => {
  console.log(item)
  storeStatus.value = item.id
  setStatusTime(item.id)
}
let disabledTime = () => {
  return {
    disabledHours: () => [0, 1, 2, 3, 4, 5, 6, 7, 19, 20, 21, 22, 23],
  }
}

const statusTimeChange = (e, e1, e2) => {
  console.log(dayjs(e).format('YYYY-MM-DD HH:mm'))
  console.log(e1)
  console.log(e2)
}
const statusTime = (e) => {
  console.log(e)
}

/**
 * 获取报名人列表
 */
const getMemberList = () => {
  getMemberListApi()
    .then((res) => {
      console.log(res)
      if (res.code == 200) {
        memberList.value = res.data.recordList
      }
    })
    .catch((error) => {
      console.log(error)
    })
}

// 工单详情
let currentBillInfo = ref({})
// 跟单记录
let records = ref({})
/**
 * 获取工单详情
 */
const getBillDetail = (id = currentBillInfo.value.id) => {
  return getOrderDetail(id, props.orderType).then((response) => {
    console.log(response)
    if (response.code === 200) {
      currentBillInfo.value = response.data
      // console.log('mock模拟 ', '100 待确认', ' 101 已取消', ' 102 官方审核中', ' 103 审核不通过')
      // currentBillInfo.value.status = 100;
      records.value = response.data.serveRecords

      currentBillInfo.value.jobInfoStr = JSON.parse(response.data.jobInfo)
      // 格式化驻场信息
      let middleOnsite = []
      currentBillInfo.value.onSiteUsers.forEach((item) => {
        middleOnsite.push(item.userName + ' ' + item.tel)
      })
      currentBillInfo.value.onSiteInfo = middleOnsite.join('\n')
      currentBillInfo.value.onSiteUserId = setOnsite(currentBillInfo.value.onSiteUsers)

      infoShow.value = true
      // console.log(currentBillInfo.value)
      if (isNotEmptyCheck(currentBillInfo.value.supplierName)) {
        currentBillInfo.value.storeName2 = currentBillInfo.value.storeName
        currentBillInfo.value.storeName = currentBillInfo.value.storeName + '（' + currentBillInfo.value.supplierName + '）'
      }
      // hasTel = currentBillInfo.value.tel ? false : true
      if (currentBillInfo.value.sex === 1) {
        currentBillInfo.value.gender = '男'
      } else if (currentBillInfo.value.sex === 2) {
        currentBillInfo.value.gender = '女'
      } else {
        currentBillInfo.value.gender = '未知'
      }
      console.log(currentBillInfo.value)
      currentBillInfo.value.interviewTime = commonJS.getPointTime(currentBillInfo.value.interviewTime, 'YY--MM--DD HH:MM') // 截取时间的时分
      currentBillInfo.value.leaveTime = commonJS.getPointTime(currentBillInfo.value.leaveTime, 'YY--MM--DD HH:MM') // 截取时间的时分
      currentBillInfo.value.entryTime = commonJS.getPointTime(currentBillInfo.value.entryTime, 'YY--MM--DD HH:MM') // 截取时间的时分
      currentBillInfo.value.receptionTime = commonJS.getPointTime(currentBillInfo.value.receptionTime, 'YY--MM--DD HH:MM') // 截取时间的时分

      currentBillInfo.value.willLeaveTime = commonJS.getPointTime(currentBillInfo.value.willLeaveTime, 'YY--MM--DD HH:MM') // 截取时间的时分

      currentBillInfo.value.willEntryTime = commonJS.getPointTime(currentBillInfo.value.willEntryTime, 'YY--MM--DD HH:MM') // 截取时间的时分

      let newStatus = currentBillInfo.value.status // 获取一下状态id
      userApplyOrderStatusArrayModel().forEach((item) => {
        currentBillInfo.value.statusId = newStatus

        if (item.id == currentBillInfo.value.status) {
          currentBillInfo.value.status = item.name
        }
      })
      // console.log(currentBillInfo.value)
      let itemName = ''
      userApplyOrderStatusArrayModel().forEach((item) => {
        // console.log('弹窗中数据：', item, ' ', currentBillInfo.value)
        if (item.id == currentBillInfo.value.statusId) {
          itemName = item.name
        }
      })
      // console.log(itemName)
      dateObj.value.status = currentBillInfo.value.status
      dateObj.value.statusStr = itemName
      if (currentBillInfo.value.statusId == 10 || currentBillInfo.value.statusId == 20 || currentBillInfo.value.statusId == 21 || currentBillInfo.value.statusId == 26) {
        currentBillInfo.value.statusTextNew = `${itemName}(接待时间:${currentBillInfo.value.receptionTime};面试时间:${currentBillInfo.value.interviewTime}）`
      }

      if (currentBillInfo.value.statusId == 25 || currentBillInfo.value.statusId == 35) {
        currentBillInfo.value.statusTextNew = `${itemName}(面试时间:${currentBillInfo.value.interviewTime}）`
      }

      if (currentBillInfo.value.statusId == 30) {
        currentBillInfo.value.statusTextNew = `${itemName}(面试时间:${currentBillInfo.value.interviewTime};约入职时间:${currentBillInfo.value.willEntryTime}）`
      }

      if (currentBillInfo.value.statusId == 35) {
        currentBillInfo.value.statusTextNew = `${itemName}(面试时间:${currentBillInfo.value.interviewTime}）`
      }
      if (currentBillInfo.value.statusId == 45) {
        currentBillInfo.value.statusTextNew = `${itemName}(面试时间:${currentBillInfo.value.interviewTime};约入职时间:${currentBillInfo.value.willEntryTime}）`
      }

      if (currentBillInfo.value.statusId == 40) {
        currentBillInfo.value.statusTextNew = `${itemName}(入职时间:${currentBillInfo.value.entryTime};）`
      }

      if (currentBillInfo.value.statusId == 48) {
        currentBillInfo.value.statusTextNew = `${itemName}(入职时间:${currentBillInfo.value.entryTime};约离职时间:${currentBillInfo.value.willLeaveTime}）`
      }
      if (currentBillInfo.value.statusId == 50) {
        currentBillInfo.value.statusTextNew = `${itemName}(离职时间:${currentBillInfo.value.leaveTime}）`
      }

      setTimeout(() => {
        storeStatus.value = currentBillInfo.value.statusId
        setStatusTime(currentBillInfo.value.statusId)
      }, 100)
    }
    console.log(response)
  })
}

/**
 **************************** 驻场相关
 */
const onsiteList = ref([])
const agencyId = ref(localStorage.getItem('DAOTIAN_userinfo_agencyid'))
/**
 * 获取驻场列表
 */
const getOnsiteList = () => {
  let subInfo = {
    agencyId: agencyId.value,
    pageSize: 10000,
    pageNum: 1,
  }
  getOnsiteListApi(subInfo).then((res) => {
    console.log(res)
    onsiteList.value = res.data.recordList
  })
}
const setOnsite = (list) => {
  // 回显驻场信息 特殊处理
  console.log(list)
  let onsite = []
  list.forEach((i) => {
    console.log(i)
    // 添加title属性, 匹配选择框的title属性
    i.title = i.userId
    // 驻场的被选中列表 只添加userName属性 匹配选择框的value属性
    onsite.push(i.userName + i.tel)
  })
  onSiteChange('', list)

  return onsite
}
/**
 * 驻场选择变化
 */
const onSiteChange = (e, e1) => {
  console.log(e)
  console.log(e1)
  console.log(onsiteList.value)
  let newArr = []
  // 设置列表禁用
  onsiteList.value.forEach((item) => {
    if (e1.findIndex((i1) => i1.title == item.userId) > -1) {
      item.disabled = false
      newArr.push(item.userId)
    } else {
      item.disabled = true
    }
  })
  console.log(newArr)
  currentBillInfo.value.onSiteUserIds = newArr.join()
  // console.log(jobForm.value)
}
/**
 * 更改驻场状态
 */
const changeOnsite = () => {
  console.log(currentBillInfo.value)
  if (!currentBillInfo.value.onSiteUserIds) {
    message.warning('请至少选择一个驻场')
  } else {
    updateOnsiteStatus({ onSiteUserIds: currentBillInfo.value.onSiteUserIds, orderId: currentBillInfo.value.id }).then((res) => {
      console.log(res)
      editOnsite.value = false
      getBillDetail()
    })
  }
}
// 报名人列表
let memberList = ref([])
// 检查必填项，当必填项无内容时，表格设置为编辑状态
const handleConfirmAdd = () => {
  showStatusModal('application')
}
const modalStatus = ref('')
const statusList = ref([])
const showStatusModal = ($type) => {
  modalStatus.value = $type
  let newStatusList = []
  changeUserApplyOrderStatusArray().forEach((item) => {
    console.log(item)
    if (currentBillInfo.value.statusId == 10) {
      if (item.id == 20 || item.id == 21) {
        newStatusList.push(item)
      }
    } else if (currentBillInfo.value.statusId == 20) {
      if (item.id == 25 || item.id == 26) {
        newStatusList.push(item)
      }
    } else if (currentBillInfo.value.statusId == 25) {
      if (item.id == 30 || item.id == 35) {
        newStatusList.push(item)
      }
    } else if (currentBillInfo.value.statusId == 30) {
      if (item.id == 40 || item.id == 45) {
        newStatusList.push(item)
      }
    } else if (currentBillInfo.value.statusId == 40 || currentBillInfo.value.statusId == 48) {
      if (item.id == 48 || item.id == 40 || item.id == 50) {
        newStatusList.push(item)
      }
    }
  })
  statusList.value = changeUserApplyOrderStatusArray()
  // statusList.value = newStatusList
  console.log(statusList.value)
  statusVisible.value = true
}
const spliceStr = (str) => {
  return str.split('_')[1]
}
// 工单详情状态切换弹框
let statusVisible = ref(false)
// 状态备注信息
let remarkInfo = ref('')
/**
 * 信息提交
 */
const pushFormdata = (type) => {
  let subInfo = {
    recordId: currentBillInfo.value.id,
  }
  console.log(dateObj.value)
  // return
  if (type == 'status') {
    let current = new Date().getTime()
    let interview1 = new Date(currentBillInfo.value.interviewTime).getTime() // 面试时间
    let reception1 = new Date(currentBillInfo.value.receptionTime).getTime() // 接待时间
    let willEntry1 = new Date(currentBillInfo.value.willEntryTime).getTime() // 约入职时间
    let entry1 = new Date(currentBillInfo.value.entryTime).getTime() // 入职时间
    let willLeave1 = new Date(currentBillInfo.value.willLeaveTime).getTime() // 约离职时间
    let leave1 = new Date(currentBillInfo.value.leaveTime).getTime() // 离职时间

    let interview // 面试时间
    let reception // 接待时间
    let willEntry // 约入职时间
    let entry // 入职时间
    let willLeave // 约离职时间
    let leave // 离职时间
    //待审核 审核通过 审核未通过

    if (storeStatus.value == 10 || storeStatus.value == 20 || storeStatus.value == 21) {
      interview = dayjs(dateObj.value.statusShowTime).format('YYYY-MM-DD HH:mm')
      reception = dayjs(dateObj.value.statusShowTime2).format('YYYY-MM-DD HH:mm')
      if (interview < reception) {
        message.warning('面试时间不能早于接待时间')
        return
      }
      subInfo.interviewTime = interview
      subInfo.receptionTime = reception
      console.log(subInfo.receptionTime)
    }
    //已接到 未接到   面试未通过
    if (storeStatus.value == 25 || storeStatus.value == 26 || storeStatus.value == 35) {
      console.log()
      interview = dayjs(dateObj.value.statusShowTime).format('YYYY-MM-DD HH:mm')

      if (interview < reception1) {
        message.warning('面试时间不能早于接待时间')
        return
      }
      subInfo.interviewTime = interview
    }
    //面试通过 通过未入职

    if (storeStatus.value == 30 || storeStatus.value == 45) {
      willEntry = dayjs(dateObj.value.statusShowTime).format('YYYY-MM-DD HH:mm')
      if (willEntry < interview1) {
        message.warning('约入职时间不能早于面试时间')
        return
      }
      subInfo.willEntryTime = willEntry
    }
    //已入职
    if (storeStatus.value == 40) {
      entry = dayjs(dateObj.value.statusShowTime).format('YYYY-MM-DD HH:mm')
      if (entry < willEntry1) {
        message.warning('入职时间不能早于约入职时间')
        return
      }
      subInfo.entryTime = entry
    }
    //约离职
    if (storeStatus.value == 48) {
      willLeave = dayjs(dateObj.value.statusShowTime).format('YYYY-MM-DD HH:mm')
      if (willLeave < entry1) {
        message.warning('约离职时间不能早于入职时间')
        return
      }
      subInfo.willLeaveTime = willLeave
    }
    //已离职
    if (storeStatus.value == 50) {
      leave = dayjs(dateObj.value.statusShowTime).format('YYYY-MM-DD HH:mm')
      if (leave < entry1 || leave > current) {
        if (leave < entry1) {
          message.warning('离职时间不能早于入职时间')
        } else {
          message.warning('离职时间不能晚于当前时间')
        }
        return
      }
      subInfo.leaveTime = leave
    }

    subInfo.status = storeStatus.value
    updateRecordStatus(subInfo).then((res) => {
      console.log(res)
      statusVisible.value = false
      getBillDetail()
    })
  } else if (type == 'desp') {
    console.log(remarkInfo.value)
    if (remarkInfo.value.trim() != '') {
      subInfo['desp'] = remarkInfo.value.trim()
    }
    updateStatusTimeApi(subInfo).then((res) => {
      console.log(res)
      if (res.code == 200) {
        // remarkInfo.value = ''
        statusVisible.value = false
        dateObj.value.desp = ''
        remarkInfo.value = ''
        if (type == 'desp') {
          message.success('添加成功')
        } else {
          message.success('修改成功')
        }
        getBillDetail()
      }
    })
  }
}
// 工单状态
let storeStatus = ref('')

/**
 * 切换状态时不同状态时间显示
 */
let setStatusTime = (statusinfo) => {
  //待审核 审核未通过 待接待
  if (storeStatus.value == 10 || storeStatus.value == 20 || storeStatus.value == 21) {
    dateObj.value.isTimeShow2 = true
    dateObj.value.statusTimeInfo = '面试时间'
    dateObj.value.oneTime = 'interviewTime'
    dateObj.value.statusShowTime = dayjs(currentBillInfo.value.interviewTime)
    dateObj.value.twoTime = 'receptionTime'
    dateObj.value.statusTimeInfo2 = '接待时间'
    dateObj.value.statusShowTime2 = dayjs(currentBillInfo.value.receptionTime)
  }
  //已接到 未接到    面试未通过
  if (storeStatus.value == 25 || storeStatus.value == 26 || storeStatus.value == 35) {
    dateObj.value.isTimeShow2 = false
    dateObj.value.statusTimeInfo = '面试时间'
    dateObj.value.oneTime = 'interviewTime'
    dateObj.value.statusShowTime = dayjs(currentBillInfo.value.interviewTime)
  }

  //面试通过 通过未入职
  if (storeStatus.value == 30 || storeStatus.value == 45) {
    dateObj.value.isTimeShow2 = false
    dateObj.value.statusTimeInfo = '约入职时间'
    dateObj.value.oneTime = 'willEntryTime'
    dateObj.value.statusShowTime = dayjs(currentBillInfo.value.willEntryTime)
  }

  if (storeStatus.value == 40) {
    dateObj.value.isTimeShow2 = false
    dateObj.value.statusTimeInfo = '入职时间'
    dateObj.value.oneTime = 'entryTime'
    dateObj.value.statusShowTime = dayjs(currentBillInfo.value.entryTime)
  }

  if (storeStatus.value == 48) {
    dateObj.value.isTimeShow2 = false
    dateObj.value.statusTimeInfo = '约离职时间'
    dateObj.value.oneTime = 'willLeaveTime'
    dateObj.value.statusShowTime = dayjs(currentBillInfo.value.willLeaveTime)
  }
  if (storeStatus.value == 50) {
    dateObj.value.isTimeShow2 = false
    dateObj.value.statusTimeInfo = '离职时间'
    dateObj.value.oneTime = 'leaveTime'
    dateObj.value.statusShowTime = dayjs(currentBillInfo.value.leaveTime)
  }
  // if (storeStatus.value == 100) {
  //   dateObj.value.isTimeShow2 = true
  //   dateObj.value.statusTimeInfo = '面试时间'
  //   dateObj.value.oneTime = 'interviewTime'
  //   dateObj.value.statusShowTime = dayjs(currentBillInfo.value.interviewTime)
  //   dateObj.value.twoTime = 'receptionTime'
  //   dateObj.value.statusTimeInfo2 = '接待时间'
  //   dateObj.value.statusShowTime2 = dayjs(currentBillInfo.value.receptionTime)
  // }
}
// 状态切换选项
let dateObj = ref({
  isShow2: false,
  status: '',
  statusStr: '',
  isTimeShow: true,
  isTimeShow2: false,
  statusTimeInfo: '',
  oneTime: '',
  statusShowTime: '',
  twoTime: '',
  statusTimeInfo2: '',
  statusShowTime2: '',
  desp: '',
})
const getPointTime = (date, type) => {
  let data = new Date(date).getTime()
  return commonJS.getPointTime(data, type)
}
/**
 * 关闭抽屉
 */
const hideDrawerShow = () => {
  emits('changedrawerShow', false)
  // props.drawerShow = false
  dateObj.value = { isShow2: false, statusStr: '', isTimeShow: true, isTimeShow2: false, statusTimeInfo: '', oneTime: '', statusShowTime: '', twoTime: '', statusTimeInfo2: '', statusShowTime2: '' }
}
const speed = ref(0)
/**
 * 获取老乡图片信息
 */
let getTownsmanImg = () => {
  townsmanListGetImage(currentBillInfo.value.userId).then((res) => {
    speed.value = 1
    editDetail.value.imageArray = res.data.userImgs.map((item) => {
      return {
        id: item.id,
        name: item.title,
        url: item.url,
        thumbUrl: item.miniUrl,
      }
    })
  })
}
// 老乡信息
let editDetail = ref({
  isShow: false,
  name: '',
  sex: 1,
  age: '',
  nation: '',
  tel: '',
  idcard: '',
  address: '',
  time: '',
  imageArray: [],
  fileList: [],
  headers: {},
})
/**
 * 修改老乡信息
 */
const updateTownsmanInfo = () => {
  if (editDetail.value.name == '') {
    return false
  }
  if (editDetail.value.age == '') {
    return false
  }
  townsmanEdit({
    name: editDetail.value.name,
    sex: editDetail.value.sex,
    age: editDetail.value.age,
    nation: editDetail.value.nation,
    tel: editDetail.value.tel,
    idCard: editDetail.value.idcard,
    address: editDetail.value.address,
    imgs: '',
    userName: editDetail.value.name,
    userId: editDetail.value.id,
  }).then(() => {
    message.success('编辑成功')
    editDetail.value.isShow = false
    emits('updateList', false)

    getBillDetail()
  })
}

/**
 * 显示老乡信息编辑
 */
const showEditUser = () => {
  console.log(currentBillInfo.value)
  editDetail.value = {
    isShow: true,
    id: currentBillInfo.value.userId,
    name: currentBillInfo.value.userName,
    sex: currentBillInfo.value.sex,
    age: currentBillInfo.value.age,
    nation: currentBillInfo.value.nation ? currentBillInfo.value.nation : '汉族',
    tel: currentBillInfo.value.tel,
    idcard: currentBillInfo.value.idCard,
    address: currentBillInfo.value.address,
    // imageArray: editDetail.value.imageArray,
    time: '',
    fileList: [],
    headers: {},
  }
}

/**
 * 修改报名人
 */
const changeApply = (e) => {
  console.log(e)
  submitBillInfo()
}
/**
 * 提交报名人和是否参与统计
 */
const submitBillInfo = () => {
  console.log(currentBillInfo.value)
  let update = {
    userApplyOrderId: currentBillInfo.value.id,
    userId: currentBillInfo.value.applyUserId,
  }
  console.log(update)
  updateApplyAndStatisticApi(update).then((res) => {
    console.log(res)
    if (res.code == 200) {
      editApply.value = false
      message.success(`信息修改成功`)
      getBillDetail()
    } else {
      message.error(res.msg)
    }
  })
}
let policyInfo = reactive({
  value: {},
  previewPolicy: false,
})
const showInfo2 = (record) => {
  policyInfo.value = JSON.parse(record)
  policyInfo.previewPolicy = true
}
</script>

<style lang='less' scoped>
// 跟单记录抽屉通用样式
.detailDrawer {
  // 工单详情工单信息样式
  /deep/ .applyinfo {
    // margin-top: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid #e8e8e8;

    .ant-descriptions-view {
      overflow: unset;
    }

    .ant-descriptions-item-label {
      width: 100px;
      background-color: #fff;
      color: #333;
      text-align: center;
    }

    .ant-descriptions-item-content {
      position: relative;
      color: #666;
      padding: 0;
      border: none;
      padding: 0 12px !important;
      .detailContent {
        display: block;
        margin-top: 2px;
        padding-left: 10px;
      }

      .ant-form-item-control {
        color: #666;
        line-height: 24px;
      }

      .ant-form-item {
        margin: 0;

        .showText {
          // position: relative;
          // top: 0px;
          // line-height: 24px !important;
          // padding-left: 10px;
        }
      }

      .ant-select-selection__rendered {
        margin: 0;
      }

      .ant-input {
        // padding: 3px 0px;
        line-height: 24px !important;
        // border-radius: 0;
        margin: 0;
        padding: 0;
      }

      .ant-select-search__field {
        text-indent: 9px;
      }
    }

    .policy {
      .ant-form-item-children {
        margin-left: 0;
      }
    }
  }
  .userInfo {
    .left {
      max-width: 350px;
    }
  }

  .titleMain {
    &:first-of-type .titleImg {
      background-color: #1890ff;
    }
    .titleImg {
      position: absolute;
      top: 0px;
      left: -10px;
      display: inline-block;
      width: 20px;
      height: 20px;
      background-color: #ccc;
      line-height: 20px;
      border-radius: 50%;
      padding: 2px;
    }
    .titleText {
      padding-bottom: 20px;
      padding-left: 13px;
      border-left: 2px solid #cccccc;
      left: 16px;
      line-height: 20px;
      /* height: 22px; */
      font-size: 16px;
      font-weight: bold;
      color: #333333;
    }
  }
  .cg-cricle,
  .cb-cricle {
    position: absolute;
    left: -4.5px;
    top: 1px;
    background: #cccccc;
    width: 10px;
    height: 10px;
    border-radius: 100%;
  }
  .ui-list-info {
    padding-bottom: 24px;
    border-left: 2px solid #cccccc;
    padding-left: 13px;
    position: relative;
    top: -3px;
    margin-bottom: -4px;
  }
  #progressinfo {
    margin-top: 24px;
    font-size: 14px;

    .ui-step-one:last-child .ui-list-info {
      border-left: 0;
    }
    .titleMain,
    .ui-step-one {
      margin-left: 24px;
      padding-top: 0;
      padding-bottom: 0;
      padding-right: 16px;
      position: relative;
    }
    .loadmore {
      text-align: center;
      color: #1890ff;
      cursor: pointer;
    }
  }
}
</style>