<script setup>
import { computed, reactive,ref } from "vue";
import { ElMessage } from 'element-plus'

import {businessTripInterence} from "@/api/api.js"

const props = defineProps({
    dialogShow:{
      type:Boolean,
      default:false
    },
    approveItem:{
      type:Object,
      required:true
    }
})
const emits = defineEmits(["update:dialogShow","approveSuccess"])
const approveFormRef=ref(null)

const dataForm=reactive({
  approveResult:'',
  rejectReason:''
})


//非审批人隐藏审批相关按钮
const canApprove = computed(() => {
  const {ApproveId} = props.approveItem
  const userId = localStorage.getItem('AdminId')
  return Number(userId) === ApproveId
})

const diaClose=()=>{
  dataForm.approveResult=''
  dataForm.rejectReason=''
  approveFormRef.value.clearValidate()
  emits("update:dialogShow",false)
}

const approveSubmit=()=>{
  approveFormRef.value.validate(valid=>{
    if(valid){
      const params={
        BusinessApplyId:props.approveItem.BusinessApplyId,
        ApproveStatus:dataForm.approveResult,
        RefuseReason:dataForm.rejectReason
      }
      businessTripInterence.tripApprove(params).then(res=>{
        if(res.Ret == 200){
          ElMessage.success('审批成功')
          emits("approveSuccess")
          diaClose()
        }
      })
    }
  })
}

</script>

<template>
  <el-dialog
    title="出差审批"
    :model-value="dialogShow"
    :modal-append-to-body="false"
    :close-on-click-modal="false"
    @closed="diaClose"
    width="500px"
  >
    <el-form :model="dataForm" ref="approveFormRef" label-width="90px"
    id="Form" size="small">
      <el-form-item label="申请人">
        {{ approveItem.ApplyRealName }}
      </el-form-item>
      <el-form-item label="到达日期">
        {{ approveItem.ArriveDate }}
      </el-form-item>
      <el-form-item label="返程日期">
        {{ approveItem.ReturnDate }}
      </el-form-item>
      <el-form-item label="目的地">
        {{ approveItem.Province+' '+ approveItem.City}}
      </el-form-item>
      <el-form-item label="出差事由">
        {{ approveItem.Reason }}
      </el-form-item>
      <el-form-item label="交通工具">
        {{ approveItem.Transportation&&approveItem.Transportation.indexOf('其他')!=-1?
        approveItem.Transportation.substring(approveItem.Transportation.indexOf('-')+1):
        approveItem.Transportation }}
      </el-form-item>
      <el-form-item label="同行人" v-show="approveItem.PeerPeopleName">
        {{ approveItem.PeerPeopleName }}
      </el-form-item>
        <template v-if="canApprove">
            <el-form-item label="审批状态" prop="approveResult" 
            :rules="[{required:true,message:'请选择审评状态',trigger:'change'}]">
                <el-radio v-model="dataForm.approveResult" :label="1">通过</el-radio>
                <el-radio v-model="dataForm.approveResult" :label="2">驳回</el-radio>
            </el-form-item>
            <el-form-item label="驳回理由" prop="rejectReason" v-if="dataForm.approveResult==2"
            :rules="[{required:true,message:'驳回理由不能为空',trigger:'blur'}]">
                <el-input v-model="dataForm.rejectReason" placeholder="请输入驳回理由" type="textarea"></el-input>
            </el-form-item>
        </template>
    </el-form>
    <template v-if="canApprove">
        <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="approveSubmit" style="width: 120px;height: 40px;">确定</el-button>
            <el-button @click="diaClose"  style="width: 120px;height: 40px;margin-left: 26px;">取消</el-button>
        </div>        
    </template>
  </el-dialog>	
</template>


<style lang="scss" scoped>
.dialog-footer{
  text-align: center;
  padding:60px 40px 20px ;
}
</style>

<style lang="scss">
@import "../style/trip-dialog.scss";
</style>