<template>
    <div>
        <List
            ref="list"
            :data="data"
            :columns="columns"
            :actions="actions"
            :global-actions="gactions"
            :filters="filters"
            @update="update"
            @repeal="repeal"
            @apply="$router.push({name: 'BusinessTripApply'})"
            @detail="detail"
            @cancel="cancel"
        >
            <DateRange slot="filter-申请日期" slot-scope="{set, search}" class="col-11" @input="val=>(set({VacationStartTime:val.startDate, VacationEndTime: val.endDate}),search())"></DateRange>
            <StatusPicker slot="filter-流程状态" slot-scope="{set, search}" class="grow" @input="val=>(set(val),search())"></StatusPicker>
            <TypePicker slot="filter-出差类型" slot-scope="{value, set, search}" multiple name="TravalType" :value="value" @input="val=>(set(val), search())"></TypePicker>
        </List>
    </div>
</template>
<script>
import List from '@/components/List/List'
import DateRange from '@/components/List/DateRange'
import StatusPicker from '@/components/List/StatusPicker'
import TypePicker from '@/components/Form/TypePicker'
import Common  from './Common'
export default {
    name: 'BusinessList',
		components: { List, DateRange, StatusPicker, TypePicker },
		mixins: [Common],
    data() {
			return {
        // 面包屑导航
        crumbs: [{
            name: '考勤'
        },{
            name: '请假列表'
        }],
        // 列表配置
        data: null,
        columns: {
          '表单号': 'FormNo',
          '申请时间': ['FApplyTime', {
            sortable: true,
            datetime: true
          }],
          '出差时间': ['FVacationStartTime', {
            datetime: true,
          }],
          '出差时数': 'FTotalHours',
          '出差类型': ['FBussinessTravalType', {
              type: 'TravalType'
          }],
          '流程': ['FormStatus', {
              type: 'FormStatus'
          }]
        },
        actions: {
          '详情': 'detail',
          '撤回': ['repeal', {
            scene: 'warn',
            confirm: '确定要撤回吗？',
            condition: this.repealCondition
          }],
          '销差': ['cancel', {
            condition: this.cancelCondition
          }]

        },
        gactions: {
          '申请': 'apply'
        },
        filters: {
          '申请日期': 'VacationStartTime,VacationEndTime',
          '流程状态': ['FormStatus', {
              col: 0
          }]
        }
    	}
		},
    methods: {
        detail(item) {
            this.$router.push({
                name: 'BusinessTripDetail',
                query: {
                  FormID: item.FormID
                }
            })
        },
        update({filters, page}) {
            this.data = this.$get('/Attendance/Vacation/GetApplyVacationList', {
                PageSize: page.size,
                PageIndex: page.index,
                VacationType: 12,
                ...filters
            }).then(res=>({
                list: res.ReturnValue,
                total: res.Total
            }))
        }
    }
}
</script>
<style scoped>
.d-cur {
    background: rgba(0, 0, 0, 0.05);
}
</style>