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


import {businessTripInterence} from "@/api/api.js"
import { interactiveInterface } from '@/api/api'
import tripApplicationDia from './components/tripApplicationDia.vue'
import mPage from "@/components/mPage.vue";

const reasonList=["路演","调研","培训","会议"]
const statusList=["待审批","已通过","已撤回","已驳回","已过期","已关闭"]

const searchParams=reactive({
  PageSize:10,
  CurrentIndex:1,
  Reason:'',
  Status:''
})
const tableData=ref([])
const userList=ref([])
const reapplyItem=ref({})
const total=ref(0)
const applyDiaShow=ref(false)

/* 获取所有列表 */
const getAllUser=()=>{
  interactiveInterface.allUserList()
  .then(res => {
    if(res.Ret !== 200) return
    userList.value = res.Data.List||[]
  })
}

const searchList=()=>{
  searchParams.CurrentIndex=1
  getApplication()
}
// 修改页码
const pageChange=(page_no)=>{
  searchParams.CurrentIndex=page_no
  getApplication()
}
const addApproval=()=>{
  reapplyItem.value={}
  applyDiaShow.value=true
  if(userList.value?.length>0) return
  getAllUser()
}
const application=()=>{
  getApplication()
}
// 撤回申请
const revocationApplication=(row)=>{
  ElMessageBox.confirm("确定要撤回该活动申请吗？", "撤回", {
    type: "warning",
  }).then(() => {
    businessTripInterence.withdrawTripApplication({BusinessApplyId:row.BusinessApplyId}).then(res=>{
      if(res.Ret == 200){
        ElMessage.success('撤回成功')
        getApplication();
      }
    })
  }).catch(()=>{})
}
// 驳回理由
const rejectReason=(row,type)=>{
  let title = '驳回理由'
  let text = row.RefuseReason
  if(type == 'close'){
    title = '关闭理由'
    text = row.CloseReason
  }
  ElMessageBox.alert(text, title, {
    confirmButtonText: '知道了',
  }).catch(()=>{})
}
// 重新申请
const reapply=(row)=>{
  reapplyItem.value=row
  applyDiaShow.value=true
  if(userList.value?.length>0) return
  getAllUser()
}
// 删除申请
const deleteApplication=(row)=>{
  ElMessageBox.confirm("确定要删除该活动申请吗？", "操作提示", {
    type: "warning",
  }).then(() => {
    businessTripInterence.deleteTripApplication({BusinessApplyId:row.BusinessApplyId}).then(res=>{
      if(res.Ret == 200){
        ElMessage.success('删除成功')
        getApplication();
      }
    })
  }).catch(()=>{})
}
// 关闭
const closeApprove=(row)=>{
  ElMessageBox.prompt('活动申请已审批通过，确定关闭该活动吗？若关闭，请填写关闭原因!', '操作提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    inputPlaceholder:'关闭理由',
    inputValidator:(value)=>{
      if(row.ApplyAdminId===Number(localStorage.getItem('AdminId'))&&!value){
        return '请输入关闭理由'
      }
      return true
    }
  }).then(({ value }) => {
    businessTripInterence.tripApproveClose({BusinessApplyId:row.BusinessApplyId,
      CloseReason:value||''})
    .then(res=>{
      if(res.Ret ==200){
        ElMessage.success('关闭成功')
        getApplication()
      }
    })
  }).catch(() => {});
}

// 获取申请列表
const getApplication=()=>{
  businessTripInterence.getTripApplicationList(searchParams).then(res=>{
    tableData.value = res.Data.List || []
    total.value = res.Data.Paging.Totals || 0
  })
}

getApplication()
</script>

<template>
  <div class="trip-application-container">
    <div class="trip-application-top">
      <div class="trip-application-search">
        <el-select v-model="searchParams.Reason" placeholder="请选择出差事由" clearable 
        style="width: 240px;margin-right: 16px;" @change="searchList" size="large">
          <el-option :label="item" :value="item" v-for="item in reasonList" :key="item"></el-option>
        </el-select>
        <el-select v-model="searchParams.Status" placeholder="请选择申请状态" clearable 
        style="width: 240px;" @change="searchList" size="large">
          <el-option :label="item" :value="item" v-for="item in statusList" :key="item"></el-option>
        </el-select>
      </div>
      <el-button type="primary" @click="addApproval" style="height: 40px;width: 100px;">添加申请</el-button>
    </div>
    <el-table :data="tableData" border >
      <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="revocationApplication(row)">撤回</span>
            <span class="table-operation-button" v-if="row.Status == '已驳回'" @click="rejectReason(row,'refuse')">驳回理由</span>
            <span class="table-operation-button" v-if="row.Status == '已关闭'" @click="rejectReason(row,'close')">关闭理由</span>
            <span class="table-operation-button" v-if="row.Status == '已驳回' || row.Status == '已撤回'" @click="reapply(row)">重新申请</span>
            <span class="table-operation-button" style="color: #C54322;" v-if="row.Status == '已撤回'" @click="deleteApplication(row)">删除</span>
            <span class="table-operation-button" v-if="row.IsClose" @click="closeApprove(row)">关闭</span>
          </div>
        </template>
      </el-table-column>
      <div slot="empty" class="table-noData">
        <img src="~@/assets/img/cus_m/nodata.png">
        <span>暂无数据</span>
      </div>
    </el-table>
    <!-- 页数选择器 -->
    <m-page
      :page_no="searchParams.CurrentIndex"
      :pageSize="searchParams.PageSize"
      :total="total"
      style="position: absolute;right: 50px;bottom: 40px;"
      @handleCurrentChange="pageChange"
    />
    <tripApplicationDia :userList="userList" :reapply="reapplyItem"
    v-model:dialogShow="applyDiaShow" @applicationSuccess="application"></tripApplicationDia>
  </div>
</template>

<style lang="scss" scoped>
  .trip-application-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-application-top{
      display: flex;
      justify-content: space-between;
      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>