<script setup lang="ts" name="EmployeesChangesDetailFlow">
/* 人事异动详情 */
import { ref, reactive, computed, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { showImagePreview } from 'vant'
import { getFlowChart } from '@/api/flowEngine/flowInterface'
import { getEmployeesChanges } from '@/api/personnel/employeesChange'
import { useDict } from '@/common/utils/dict'
import { selectDictLabel } from '@/common/utils/ruoyi'
import FlowTimeline from '@/components/Flow/FlowTimeline.vue'
import UploadImage from '@/components/Upload/UploadImage.vue'
import { getDeptName, getPostName } from '@/common/utils/transcoding'

const { work_schedule, sys_job_grade, sys_job_level, employees_change_type, yes_no, sys_user_sex } =
useDict('work_schedule', 'sys_job_grade', 'sys_job_level', 'employees_change_type', 'yes_no', 'sys_user_sex')

const router = useRouter()
const props = defineProps<{
  id: string
  instanceId: string
}>()

const activeCollapse = ref('1')
const detail = ref<any>({})
const employeesDetail = ref<any>({})
const nodeData = ref<any>()

getEmployeesChanges(props.id).then(res => {
  detail.value = res.data
})
getFlowChart({ instanceId: props.instanceId }).then(res => {
  nodeData.value = res.data
})

// 预览
function onPreview() {
  router.push({ path: '/preview', query: { fileUrl: detail.value.file.url } })
}
</script>

<template>
  <div class="container__body">
    <div class="container__card flex">
      <van-collapse v-model="activeCollapse" accordion>
        <van-collapse-item title="个人信息" name="1">
          <van-cell title="姓名" :value="detail.name" />
          <van-cell title="工号" :value="detail.employeeNumber" />
          <van-cell title="性别" :value="selectDictLabel(sys_user_sex, detail.sex)" />
          <van-cell title="入职时间" :value="detail.startDate" />
          <van-cell title="异动事项" :value="selectDictLabel(employees_change_type, detail.matter)" />
          <van-cell title="是否涉薪" :value="selectDictLabel(yes_no, detail.salaryRelated)" />
          <van-cell title="调整说明" :value="detail.memo" />
        </van-collapse-item>
        <van-collapse-item title="异动前" name="2">
          <van-cell title="任职部门" :value="getDeptName(detail.previousServiceDepartmentId)" />
          <van-cell title="任职岗位" :value="getPostName(detail.previousPositionHeldId)" />
          <van-cell title="综合工资" :value="detail.previousTotalCompensation" />
          <van-cell title="职等" :value="selectDictLabel(sys_job_grade, detail.previousJobGrade)" />
          <van-cell title="职级" :value="selectDictLabel(sys_job_level, detail.previousJobLevel)" />
          <van-cell title="工作制" :value="selectDictLabel(work_schedule, detail.previousWorkTime)" />
        </van-collapse-item>
        <van-collapse-item title="异动后" name="3">
          <van-cell title="任职部门" :value="getDeptName(detail.serviceDepartmentId)" />
          <van-cell title="任职岗位" :value="getPostName(detail.positionHeldId)" />
          <van-cell title="综合工资" :value="detail.totalCompensation" />
          <van-cell title="职等" :value="selectDictLabel(sys_job_grade ,detail.jobGrade)" />
          <van-cell title="职级" :value="selectDictLabel(sys_job_level ,detail.jobLevel)" />
          <van-cell title="工作制" :value="selectDictLabel(work_schedule ,detail.workTime)" />
          <van-cell title="生效日期" :value="detail.effectiveDate" />
        </van-collapse-item>
        <van-collapse-item v-if="detail?.otherFiles?.length" title="详细说明附件" name="3">
          <van-field label="验收附件" label-align="top">
            <template #input>
              <UploadImage
                :model-value="detail.otherFiles"
                :deletable="false"
                :show-upload="false"
                name="name"
                result-type="file"
                accept="*/*"
                @click-preview="onPreview" />
            </template>
          </van-field>
        </van-collapse-item>
      </van-collapse>
      <FlowTimeline :node-data="nodeData" />
    </div>
  </div>
</template>

<style lang="less" scoped>
.grid {
  :deep(.van-image) {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 100%;
    border-radius: 0.6rem;
    box-shadow: 0.2rem 0.2rem 0.5rem rgba(0,0,0,0.5);
    overflow: hidden;
    .van-image__img {
      position: absolute;
      object-fit: cover;
    }
  }
}

:deep(.van-cell:not(.van-collapse-item__title)) {
  .van-cell__title {
    margin-right: 1rem;
    flex: none;
  }
  .van-cell__value {
    display: flex;
    justify-content: flex-end;
    color: var(--van-cell-text-color);
    overflow: hidden;
    span {
      text-align: justify;
    }
  }
}

:deep(.van-collapse-item__content) {
  padding: 0 1.2rem;
}

:deep(.tag-label) {
  font-size: 1.4rem;
}

.list {

}
</style>
