<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">
          <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">
          <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 slot-scope="{row}">
          {{ row.ArriveDate }}
        </template>
      </el-table-column>
      <el-table-column label="返回日期" prop="ReturnDate" align="center" width="100">
        <template slot-scope="{row}">
          {{ row.ReturnDate }}
        </template>
      </el-table-column>
      <el-table-column label="目的地" prop="City" align="center">
        <template slot-scope="{row}">
          {{ row.City }}
        </template>
      </el-table-column>
      <el-table-column label="出差事由" prop="Reason" align="center" width="100">
        <template slot-scope="{row}">
          {{ row.Reason }}
        </template>
      </el-table-column>
      <el-table-column label="交通工具" prop="Transportation" align="center">
        <template slot-scope="{row}">
          {{ row.Transportation.indexOf('其他')!=-1?row.Transportation.substring(row.Transportation.indexOf('-')+1):row.Transportation }}
        </template>
      </el-table-column>
      <el-table-column label="行程说明" show-overflow-tooltip prop="Itinerary" align="center">
        <template slot-scope="{row}">
          {{ row.Itinerary }}
        </template>
      </el-table-column>
      <el-table-column label="同行人" prop="PeerPeopleName" align="center" show-overflow-tooltip>
        <template slot-scope="{row}">
          {{ row.PeerPeopleName || '无' }}
        </template>
      </el-table-column>
      <el-table-column label="申请状态" prop="Status" align="center" width="100">
        <template slot-scope="{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 slot-scope="{row}">
          {{ row.CreateTime }}
        </template>
      </el-table-column>
      <el-table-column label="操作"  align="center">
        <template slot-scope="{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"
    :dialogShow.sync="applyDiaShow" @applicationSuccess="application"></tripApplicationDia>
  </div>
</template>

<script>
import {businessTripInterence} from "api/api.js"
import { interactiveInterface } from '@/api/api'
import tripApplicationDia from './components/tripApplicationDia.vue'
import mPage from "@/components/mPage.vue";
  export default {
    name:'businessApplication',
    components:{
      tripApplicationDia,
      mPage
    },
    data() {
      this.reasonList=["路演","调研","培训","会议"]
      this.statusList=["待审批","已通过","已撤回","已驳回","已过期","已关闭"]
      return {
        searchParams:{
          PageSize:10,
          CurrentIndex:1,
          Reason:'',
          Status:''
        },
        tableData:[],
        userList:[],
        reapplyItem:{},
        total:0,
        //-------------弹窗
        applyDiaShow:false
      }
    },
    methods:{
      /* 获取所有列表 */
      getAllUser() {
        interactiveInterface.allUserList()
        .then(res => {
          if(res.Ret !== 200) return
          this.userList = res.Data.List||[]
        })
      },
      // 获取申请列表
      getApplication(){
        businessTripInterence.getTripApplicationList(this.searchParams).then(res=>{
          this.tableData = res.Data.List || []
          this.total = res.Data.Paging.Totals || 0
        })
      },
      searchList(){
        this.searchParams.CurrentIndex=1
        this.getApplication()
      },
      // 修改页码
      pageChange(page_no){
        this.searchParams.CurrentIndex=page_no
        this.getApplication()
      },
      addApproval(){
        this.reapplyItem={}
        this.applyDiaShow=true
        if(this.userList && this.userList.length>0) return
        this.getAllUser()
      },
      application(){
        this.getApplication()
      },
      // 撤回申请
      revocationApplication(row){
        this.$confirm("确定要撤回该活动申请吗？", "撤回", {
          type: "warning",
        }).then(() => {
          businessTripInterence.withdrawTripApplication({BusinessApplyId:row.BusinessApplyId}).then(res=>{
            if(res.Ret == 200){
              this.$message.success('撤回成功')
              this.getApplication();
            }
          })
        }).catch(()=>{})
      },
      // 驳回理由
      rejectReason(row,type){
        let title = '驳回理由'
        let text = row.RefuseReason
        if(type == 'close'){
          title = '关闭理由'
          text = row.CloseReason
        }
        this.$alert(text, title, {
          confirmButtonText: '知道了',
        })
      },
      // 重新申请
      reapply(row){
        this.reapplyItem=row
        this.applyDiaShow=true
        if(this.userList && this.userList.length>0) return
        this.getAllUser()
      },
      // 删除申请
      deleteApplication(row){
        this.$confirm("确定要删除该活动申请吗？", "操作提示", {
          type: "warning",
        }).then(() => {
          businessTripInterence.deleteTripApplication({BusinessApplyId:row.BusinessApplyId}).then(res=>{
            if(res.Ret == 200){
              this.$message.success('删除成功')
              this.getApplication();
            }
          })
        }).catch(()=>{})
      },
        // 关闭
      closeApprove(row){
        this.$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){
						this.$message.success('关闭成功')
						this.getApplication()
						}
					})
				}).catch(() => {});
      },
    },
    created(){
      this.getApplication()
    }
  }
</script>

<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>