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

import {businessTripInterence} from "@/api/api.js"
import tripApproveDia from "./components/tripApproveDia.vue";
import mPage from "@/components/mPage.vue";

const statusList=[{label:"全部",value:''},{label:"待审批",value:'待审批'},
      {label:"已通过",value:'已通过'},{label:"已驳回",value:'已驳回'},{label:"已关闭",value:'已关闭'}]
const searchParams=reactive({
  PageSize:10,
  CurrentIndex:1,
  Status:'待审批'
})
const tableData=ref([])
const approveItem=ref({})
const total=ref(0)
const approvalDiaShow=ref(false)

// 获取审批列表
const getApproveList=()=>{
  businessTripInterence.getTripApproveList(searchParams).then(res=>{
    tableData.value = res.Data.List || []
    total.value = res.Data.Paging.Totals || 0
  })
}
const searchList=()=>{
  searchParams.CurrentIndex=1
  getApproveList()
}
// 修改页码
const pageChange=(page_no)=>{
  searchParams.CurrentIndex=page_no
  getApproveList()
}
const approve=()=>{
  getApproveList()
}
// 审批
const revocationApprove=(row)=>{
  approvalDiaShow.value =true
  approveItem.value=row
}
// 关闭
const closeApprove=(row)=>{
  ElMessageBox.prompt('活动申请已审批通过，确定关闭该活动吗？若关闭，请填写关闭原因!', '操作提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    inputPlaceholder:'关闭理由'
  }).then(({ value }) => {
    businessTripInterence.tripApproveClose({BusinessApplyId:row.BusinessApplyId,
      CloseReason:value||''})
    .then(res=>{
      if(res.Ret ==200){
        ElMessage.success('关闭成功')
        getApproveList()
      }
    })
  }).catch(() => {});
}
// 驳回理由
const rejectReason=(row,type)=>{
  let title = '驳回理由'
  let text = row.RefuseReason
  if(type == 'close'){
    title = '关闭理由'
    text = row.CloseReason
  }
  ElMessageBox.alert(text, title, {
    confirmButtonText: '知道了',
  }).catch(() => {});
}

getApproveList()
</script>

<template>
  <div class="trip-approve-container">
    <div class="trip-approve-top">
      <el-select v-model="searchParams.Status" placeholder="请选择审批状态" style="width: 240px;" @change="searchList">
        <el-option :label="item.label" :value="item.value" v-for="item in statusList" :key="item" ></el-option>
      </el-select>
    </div>
    <el-table :data="tableData" border >
      <el-table-column label="申请人" prop="ApplyRealName" align="center" width="100">
        <template #default="{row}">
          {{ row.ApplyRealName }}
        </template>
      </el-table-column>
      <el-table-column label="到达日期" prop="ArriveDate" align="center" width="100">
        <template #default="{row}">
          {{ row.ArriveDate }}
        </template>
      </el-table-column>
      <el-table-column label="返回日期" prop="ReturnDate" align="center" width="100">
        <template #default="{row}">
          {{ row.ReturnDate }}
        </template>
      </el-table-column>
      <el-table-column label="目的地" prop="City" align="center">
        <template #default="{row}">
          {{ row.City }}
        </template>
      </el-table-column>
      <el-table-column label="出差事由" prop="Reason" align="center" width="100">
        <template #default="{row}">
          {{ row.Reason }}
        </template>
      </el-table-column>
      <el-table-column label="交通工具" prop="Transportation" align="center">
        <template #default="{row}">
          {{ row.Transportation.indexOf('其他')!=-1?row.Transportation.substring(row.Transportation.indexOf('-')+1):row.Transportation }}
        </template>
      </el-table-column>
      <el-table-column label="同行人" prop="PeerPeopleName" align="center" show-overflow-tooltip>
        <template #default="{row}">
          {{ row.PeerPeopleName || '无' }}
        </template>
      </el-table-column>
      <el-table-column label="申请状态" prop="Status" align="center" width="100">
        <template #default="{row}">
          <span :style="{color:row.Status=='待审批'|| row.Status=='已驳回'?'#C54322':'#606266'}">
            {{ row.Status }}
          </span>
        </template>
      </el-table-column>
      <el-table-column label="提交时间" prop="CreateTime" align="center">
        <template #default="{row}">
          {{ row.CreateTime }}
        </template>
      </el-table-column>
      <el-table-column label="操作"  align="center">
        <template #default="{row}">
          <div style="margin-right: -10px;">
            <span class="table-operation-button" v-if="row.Status == '待审批'" @click="revocationApprove(row)">审批</span>
            <span class="table-operation-button" v-if="row.Status == '已驳回'" @click="rejectReason(row,'refuse')">驳回理由</span>
            <span class="table-operation-button" v-if="row.IsClose" @click="closeApprove(row)">关闭</span>
            <span class="table-operation-button" v-if="row.Status == '已关闭'" @click="rejectReason(row,'close')">关闭理由</span>
          </div>
        </template>
      </el-table-column>
      <template #empty>
        <div class="table-noData">
          <img src="~@/assets/img/cus_m/nodata.png">
          <span>暂无数据</span>
        </div>
      </template>
    </el-table>
    <!-- 页数选择器 -->
    <m-page
      :page_no="searchParams.CurrentIndex"
      :pageSize="searchParams.PageSize"
      :total="total"
      style="position: absolute;right: 50px;bottom: 40px;"
      @handleCurrentChange="pageChange"
    />
    <tripApproveDia v-model:dialogShow="approvalDiaShow" :approveItem="approveItem" @approveSuccess="approve"></tripApproveDia>
  </div>
</template>

<style lang="scss" scoped>
  .trip-approve-container{
    min-height: calc(100vh - 110px);
    height: auto;
    box-sizing: border-box;
    background-color: #fff;
    box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.05);
    border-radius: 4px;
    padding: 30px 30px 70px;
    .trip-approve-top{
      margin-bottom: 20px;
    }
    .table-operation-button{
      color: #409EFF;
      cursor: pointer;
      margin-right: 10px;
      white-space: nowrap;
    }
    .table-noData{
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      margin: 18vh 0;
      img{
        height: 110px;
        width: 136px;
      }
      span{
        font-weight: 400;
        font-size: 16px;
        color: #999999;
      }
    }
  }
</style>