<template>
  <el-dialog
    title="出差审批"
    :visible.sync="dialogShow"
    :modal-append-to-body="false"
    :close-on-click-modal="false"
    @closed="diaClose"
    width="500px"
  >
    <el-form :model="dataForm" ref="approveForm" label-width="90px"
    id="Form" size="mini">
      <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="行程说明">
        <el-tooltip popper-class="item-top-intro" effect="dark" :content="approveItem.Itinerary" placement="top">
          <div class="itinerary-text">
            {{ approveItem.Itinerary }}
          </div>
        </el-tooltip>
      </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>

<script>
import {businessTripInterence} from "api/api.js"

  export default {
    name:"tripApproveDia",
    props:{
      dialogShow:{
        type:Boolean,
        required:true
      },
      approveItem:{
        type:Object,
        required:true
      }
    },
    data() {
      return {
        dataForm:{
          approveResult:'',
          rejectReason:''
        }
      }
    },
    computed:{
        //非审批人隐藏审批相关按钮
        canApprove(){
            const {ApproveId} = this.approveItem
            const userId = localStorage.getItem('AdminId')
            return Number(userId) === ApproveId
        }
    },
    methods:{
      diaClose(){
        this.dataForm={
          approveResult:'',
          rejectReason:''
        }
        this.$refs.approveForm.clearValidate()
        this.$emit("update:dialogShow",false)
      },
      approveSubmit(){
        this.$refs.approveForm.validate(valid=>{
          if(valid){
            // console.log(this.approveItem);
            const params={
              BusinessApplyId:this.approveItem.BusinessApplyId,
              ApproveStatus:this.dataForm.approveResult,
              RefuseReason:this.dataForm.rejectReason
            }
            businessTripInterence.tripApprove(params).then(res=>{
              if(res.Ret == 200){
                this.$message.success('审批成功')
                this.$emit("approveSuccess")
                this.diaClose()
              }
            })
          }
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
.itinerary-text{
  width:100%;
  overflow:hidden; 
  text-overflow:ellipsis;
  display:-webkit-box;
  line-clamp: 3;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:3;
}
.dialog-footer{
  text-align: center;
  padding:60px 40px 20px ;
}
</style>

<style lang="scss">
@import "../style/trip-dialog.scss";
.item-top-intro{
  max-width: 400px;
}
</style>