<template>
    <div class="check">
        <form-option title="任务指派日志">
            <el-form :inline="true" :model="formData" ref="form" label-width="100px">
                <el-form-item label="单位名称" prop="enforceObjName">
                    <el-input v-model="formData.enforceObjName" placeholder="请输入"></el-input>
                </el-form-item>
                <el-form-item label="检查人员" prop="executorName">
                    <el-input v-model="formData.executorName" placeholder="请输入"></el-input>
                </el-form-item>
                <el-form-item label="任务月份" prop="jobTime">
                    <el-date-picker
                            v-model="formData.jobTime"
                            type="month"
                            value-format="yyyy-MM"
                            :picker-options="pickerOptions0"
                            placeholder="选择日期">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="任务类型:" prop="job_type">
                    <el-select v-model="formData.job_type" clearable placeholder="选择任务类型">
                        <el-option value="" label="全部"/>
                        <el-option v-for="item in jobType" :key="item.k" :value="item.k" :label="item.v"/>
                    </el-select>
                </el-form-item>
                <el-button class="ml" icon="el-icon-refresh-right" @click="resetForm">重置</el-button>
                <el-button type="primary" icon="el-icon-search" @click="handleQueryData">查询</el-button>
            </el-form>
        </form-option>
        <div class="custom-table">
            <el-table :data="list" border v-loading="loading">
                <el-table-column type="index" align="center" label="序号" width="60px" >
                    <template slot-scope="scope">
                        {{scope.$index+1}}
                    </template>
                </el-table-column>
                <el-table-column prop="enforce_obj_name" show-overflow-tooltip label="单位名称" align="center"/>
                <el-table-column prop="job_type" show-overflow-tooltip label="类型" width="120px" align="center">
                    <template slot-scope="scope">
                        {{ parseJobType(scope.row.job_type) }}
                    </template>
                </el-table-column>
                <el-table-column prop="job_time" :formatter="monthFilter"  label="任务月份" show-overflow-tooltip width="120px" align="center"/>
                <el-table-column prop="enforceType" :formatter="oldExecutorFormat" label="原检查人员" show-overflow-tooltip align="center"/>
                <el-table-column prop="proportion" :formatter="executorFormat" label="现检查人员" show-overflow-tooltip align="center"/>
                <el-table-column prop="operation_time" :formatter="timeFilter" label="操作时间" show-overflow-tooltip   align="center"/>
                <el-table-column prop="operation_reason" label="操作原因" show-overflow-tooltip  align="center"/>
                <el-table-column prop="operation_user_name" label="操作人" show-overflow-tooltip  align="center"/>
            </el-table>
            <div class="custom-pagination">
                <div class="info">
                    <span>共 {{ total }} 条记录</span>
                    <span>第 {{ query.page }} / {{ pageTotal }} 页</span>
                </div>
                <el-pagination
                        background
                        class="custom-page"
                        layout="prev, pager, next, sizes"
                        :page-sizes="[10, 20, 50, 100]"
                        :current-page="query.page"
                        :page-size="query.size"
                        :total="total"
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange">
                </el-pagination>
            </div>
        </div>
    </div>
</template>

<script>
    import FormOption from "@/component/FormOption";
    import moment  from 'moment';
    import { getJobLogs } from "@/api/log";
    import { notEmpty, isEmpty } from '@/utils/tool';
    import { resourceMixin } from '@/mixin/resource';
    import { jobMixin } from '@/mixin/job';

    export default {
        components: {
            FormOption,
        },
        mixins: [resourceMixin,jobMixin],
        data() {
            return {
                pickerOptions0: {
                    disabledDate(time) {
                        return time.getTime() > Date.now();
                    }
                },
                formData: {
                    enforceObjName:'',
                    executorName:'',
                    jobTime:'',
                    job_type:''
                },
                query: {
                    page: 1,
                    size: 10,
                    sort: 'create_time desc',
                    query: ""
                },
                total: 0,
                list: [],
                loading: false,
            }
        },
        computed: {
            pageTotal() {
                const page = Math.ceil(this.total / this.query.limit);
                return page > 0 ? page : 1;
            },
        },
        mounted() {
            this.handleQuery();
        },
        methods: {
            handleQueryData() {
                this.query.page = 1;
                this.handleQuery();
            },
            resetForm() {
                this.$refs.form.resetFields();
                this.resetQuery();
            },
            handleSizeChange(val) {
                this.query.limit = val;
                this.handleQuery();
            },
            handleCurrentChange(val) {
                this.query.page = val;
                this.handleQuery();
            },
            resetQuery() {
                this.query = {
                    page: 1,
                    limit: 10,
                    sort: 'create_time desc',
                    query: "",
                };
                this.handleQuery();
            },
            handleQuery() {
                this.loading = true;
                const res = []
                if(notEmpty(this.formData.enforceObjName)){
                    const enforceObjName = this.formData.enforceObjName.trim();
                    res.push('enforce_obj_name == "*'+ enforceObjName + '*"');
                }
                if(notEmpty(this.formData.executorName)){
                    const executorName = this.formData.executorName.trim();
                    res.push('(old_executor_name_m == "*'+ executorName + '*" or '+
                        'old_executor_name_s == "*'+ executorName + '*" or ' +
                        'executor_name_m == "*'+ executorName + '*" or ' +
                        'executor_name_s == "*'+ executorName + '*" )');
                }
                if(notEmpty(this.formData.jobTime)){
                    const jobTime = this.formData.jobTime;
                    const year = jobTime.substr(0,4);
                    const month = jobTime.substr(5,2);
                    const month1 = parseInt(month)+1;
                    const jobTime1 = month1>12 ? parseInt(year)+1+'-'+'01' : year+'-'+(month1<10?'0'+month1 :month1);
                    res.push('job_time >= "'+ jobTime + '"');
                    res.push('job_time < "'+ jobTime1 + '"');
                }
                if(notEmpty(this.formData.job_type)){
                    const job_type = this.formData.job_type;
                    res.push('job_type == "'+ job_type + '"');
                }
                this.query.query = res.join(';');
                const vm = this;
                getJobLogs(this.query).then((res) => {
                    if (res) {
                        vm.total = parseInt(res.total || "0");
                        const list = res.data || [];
                        vm.list = list;
                    }
                    this.loading = false;
                });
            },
            monthFilter(row,column,cellValue){
                if(notEmpty(cellValue)){
                    return moment(cellValue).format("YYYY年MM月")
                }
            },
            timeFilter(row,column,cellValue){
                if(notEmpty(cellValue)){
                    return moment(cellValue).format("YYYY-MM-DD HH:mm:ss")
                }
            },
            oldExecutorFormat(row,column,cellValue){
                const executor_m = row.old_executor_name_m;
                const executor_s = row.old_executor_name_s;
                const res =[];
                if(executor_m){res.push(executor_m)}
                if(executor_s){res.push(executor_s)}
                return res.join(',');
            },
            executorFormat(row,column,cellValue){
                const executor_m = row.executor_name_m;
                const executor_s = row.executor_name_s;
                const res =[];
                if(executor_m){res.push(executor_m)}
                if(executor_s){res.push(executor_s)}
                return res.join(',');
            }
        },
    }
</script>
