<!--  -->
<template>
  <div>
    <el-form ref="formRef" :model="otherInfo" label-width="auto" disabled label-position="top">
      <div class="project-form-top">
        <el-form-item label="出差事由：" prop="tripDesc">
          <el-input v-model="otherInfo.tripDesc" />
        </el-form-item>
        <el-form-item label="交通工具" prop="trafficType">
          <el-select v-model="otherInfo.trafficType" block clearable >
            <el-option v-for="item in trafficTypeData" :label="item.dictName" :value="item.dictValue" />
          </el-select>
        </el-form-item>
        <el-form-item label="单程往返" prop="isSingletonType">
          <el-select v-model="otherInfo.isSingletonType" block clearable >
            <el-option v-for="item in wayType" :label="item.name" :value="item.key" />
          </el-select>
        </el-form-item>
        <el-form-item label="出发城市" prop="startCity">
          <el-input v-model="otherInfo.startCity"  />
        </el-form-item>
        <el-form-item label="目的城市" prop="endCity">
          <el-input v-model="otherInfo.endCity"  />
        </el-form-item>
        <el-form-item label="开始时间">
          <el-date-picker v-model="otherInfo.startDate" type="date"  style="width: 100%;"
            format="YYYY-MM-DD" value-format="YYYY-MM-DD" />
        </el-form-item>
        <el-form-item label="结束时间">
          <el-date-picker v-model="otherInfo.endDate" type="date"  style="width: 100%;"
            format="YYYY-MM-DD" value-format="YYYY-MM-DD" />
        </el-form-item>
        <el-form-item label="时长" prop="duration">
          <el-input v-model="otherInfo.duration" disabled  />
        </el-form-item>
        <el-form-item label="出差天数：" prop="durationAll">
          <el-input v-model="otherInfo.durationAll" disabled />
        </el-form-item>
        <el-form-item label="出差备注：" prop="remarks">
          <el-input v-model="otherInfo.remarks" type="textarea" />
        </el-form-item>
        <el-form-item label="同行人" prop="fellowTravelerUserIds">
          <el-select v-model="fellowTravelerUserIds" block clearable style="width: 100%" multiple>
            <el-option v-for="item in partneroptions" :label="item.name" :value="item.id" />
          </el-select>
        </el-form-item>
        <el-form-item label="所属项目" prop="projectId" >
          <el-select v-model="otherInfo.projectId" block clearable>
            <el-option v-for="item in projectType" :label="item.projectName" :value="item.projectId" />
          </el-select>
        </el-form-item>
 



      </div>

    </el-form>

  </div>
</template>

<script setup>
import { ref, watch,onActivated } from 'vue'
import {getProjectList,getDictInfo,getuserList} from "~api/other";
import {getArrValue} from "js-fast-way";
import {useAppStore} from "~src/store";
const useAppState = useAppStore();

//参数
const props = defineProps({
  otherInfo: {
    type: Object,
    default: {}
  }
})
const trafficTypeData=ref([])
//交通类型字典
const getTrafficType= async () => {
    const {error, code, data} = await getDictInfo('traffic_type')
    //判断状态
    if (!error && code === 200) {
        trafficTypeData.value = getArrValue(data)
    } else {
        trafficTypeData.value = []
    }
}
//单程往返
const wayType = ref([
  {name: '单程', key: 1},
  {name: '往返', key: 2},
 
])
const cityType=ref([])
const projectType=ref([])
const partneroptions=ref([])

const getUserDict=async()=>{
    const {error, code, data} = await getuserList({tenantId:useAppState.tenantId})
    if (!error && code === 200) {
      partneroptions.value = getArrValue(data)

    } else {
      partneroptions.value = []

    }
}
const fellowTravelerUserIds=ref([])
//监听
watch(() => [
  props.otherInfo,
], ([otherInfo]) => {
  fellowTravelerUserIds.value=otherInfo.fellowTravelerUserIds.split(',')
  getProjectData()
  getTrafficType()
  getUserDict()

})
const getProjectData = async () => {
    const {error, code, data} = await getProjectList()
    //判断状态
    if (!error && code === 200) {
      projectType.value = getArrValue(data)
    } else {
      projectType.value = []
    }
}

</script>
<style lang='scss' scoped></style>