<template>
    <el-dialog :title="title" class="custom-dialog2" :visible.sync="show" :before-close="onCancel">
        <div class="home-line"></div>
        <div class="home-table">
            <el-row class="home-row">
                <div class="home-date">时间段：{{ date }}</div>
                <div v-if="type > 4" class="home-option">
                    <el-select v-model="job_type" placeholder="请选择" @change="changeJobType">
                        <el-option label="全部" value=""></el-option>
                        <el-option label="日常抽查" value="NORMAL"></el-option>
                        <el-option label="专项抽查" value="SPECIAL"></el-option>
                    </el-select>
                </div>
            </el-row>
            <el-table class="home-table-height mt15" :data="list" border v-loading="loading">
                <el-table-column type="index" align="center" width="50" label="序号" />
                <el-table-column prop="createTime" show-overflow-tooltip align="center" label="创建时间"/>
                <el-table-column prop="jobType" align="center" label="类型"/>
                <el-table-column prop="enforce_obj_name" show-overflow-tooltip label="被检查单位"/>
                <el-table-column prop="objAddress" show-overflow-tooltip label="单位地址"/>
                <el-table-column prop="enforce_org_name" show-overflow-tooltip label="执法机构"/>
                <el-table-column prop="executor_names" show-overflow-tooltip label="检查人员"/>
                <el-table-column prop="last_enforce_date" align="center" show-overflow-tooltip label="检查期限"/>
                <el-table-column prop="startTime" align="center" show-overflow-tooltip label="检查时间"/>
                <el-table-column prop="jobStatus" align="center" show-overflow-tooltip label="任务状态"/>
                <el-table-column prop="result" align="center" show-overflow-tooltip label="检查结果"/>
                <el-table-column prop="action" label="操作" align="center" width="100">
                    <template slot-scope="scope">
                        <el-button type="text" @click="showOne(scope.row)">查看</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <Page :page="query.page" :size="query.size" :total="total" layout="prev, pager, next" @pageChange="pageChange"></Page>
        </div>
    </el-dialog>
</template>

<script>
import { getJobs } from '@/api/job';
import { isEmpty, formatDate } from '@/utils/tool';
import { jobMixin } from '@/mixin/job';
import moment from 'moment';

export default {
    props: {
        show: {
            type: Boolean,
            default: false,
        },
        dateRange: Array,
        type: {
            type: Number,
            default: 1,
        },
    },
    data () {
        return {
            loading: false,
            list: [],
            query: {
                page: 1,
                size: 10,
                sort: 'create_time desc',
            },
            total: 0,
            job_type: '',
        }
    },
    mixins: [jobMixin],
    computed: {
        title() {
            let s = '日常抽查/已完成';
            switch (this.type) {
                case 2:
                    s = '日常抽查/待完成';
                    break;
                case 3:
                    s = '专项抽查/已完成';
                    break;
                case 4:
                    s = '专项抽查/待完成';
                    break;
                case 5:
                    s = '不合格查看';
                    break;
                case 6:
                    s = '立改查看';
                    break;
                case 7:
                    s = '限改查看';
                    break;
                case 8:
                    s = '未完成查看';
                    break;
                case 9:
                    s = '已完成查看';
                    break;
                default:
                    break;
            }
            return s;
        },
        date() {
            let res = [];
            if (this.dateRange && this.dateRange.length > 0) {
                this.dateRange.map(item => {
                    res.push(item.replace('-01', '').replace('-','.'));
                });
            }
            return res.join(' - ');
        },
    },
    watch: {
        show: {
            handler(n) {
                if (n) {
                    this.job_type = '';
                    this.loadData();
                }
            },
            immediate: true,
        }
    },
    methods: {
        onCancel() {
            this.$emit('update:show', false);
        },
        pageChange(page, size) {
            this.query.page = page;
            this.query.size = size;
            this.loadData();
        },
        changeJobType() {
            this.query.page = 1;
            this.loadData();
        },
        loadData() {
            this.loading = true;
            let query = [];
            if (this.type == 1 || this.type == 2) {
                this.job_type = 'NORMAL';
                if (this.type == 1) {
                    query.push('job_status==ARCHIVED');
                }
                else {
                    query.push('job_status=in=("TODO","DOING")');
                }
            }
            if (this.type == 3 || this.type == 4) {
                this.job_type = 'SPECIAL';
                if (this.type == 3) {
                    query.push('job_status==ARCHIVED');
                }
                else {
                    query.push('job_status=in=("TODO","DOING")');
                }
            }
            if (this.type == 5) {
                query.push("enforce_result=='NOT_PASS'");
                query.push("job_status=='ARCHIVED'");
            }
            if (this.type == 6) {
                query.push('immediately_file_id=isnull=false');
                query.push("job_status=='ARCHIVED'");
                query.push("enforce_result=='NOT_PASS'");
            }
            if (this.type == 7) {
                query.push('deadline_file_id=isnull=false');
                query.push("job_status=='ARCHIVED'");
                query.push("enforce_result=='NOT_PASS'");
            }
            if (this.type == 8) {
                query.push('job_status==ARCHIVED');
            }
            if (this.type == 9) {
                query.push('job_status=in=("TODO","DOING")');
            }

            if (isEmpty(this.job_type)) {
                query.push('job_type=in=("NORMAL","SPECIAL")');
            }
            else {
                query.push(`job_type==${this.job_type}`);
            }
            if (this.dateRange && this.dateRange.length > 1) {
                query.push(`last_enforce_date>="${this.dateRange[0]} 00:00:00"`);
                const date = moment(this.dateRange[1]).add(1, 'months').format('YYYY-MM-DD');
                query.push(`last_enforce_date<"${date} 00:00:00"`);
            }
            this.query.query = query.join(';');
            getJobs(this.query).then(res => {
                this.total = res && res.total || 0;
                const data = res && res.data || [];
                data.map(item => {
                    item.createTime = formatDate(item.create_time, true);
                    item.startTime = formatDate(item.start_time, true);
                    item.objAddress = item.enforce_obj.enforce_obj_address;
                    item.result = this.parseJobResult(item);
                    item.jobStatus = this.parseJobStatus(item.job_status);
                    item.jobType = this.parseJobType(item.job_type);
                });
                this.list = data;
                this.loading = false;
            });
        },
        showOne(row) {
            console.log('row: ', row);
        },
    }
}
</script>

<style lang="scss" scoped>
.home-line {
    width: 100%;
    height: 1px;
    background-color: #CDCDCD;
    margin-top: -20px;
}

.home-row {
    display: flex;
    align-items: center;
    padding-top: 10px;

    .home-date {
        font-size: 14px;
        color: #343534;
    }
    
    .home-option {
        margin-left: 30px;
    }
}

.home-table-height {
    min-height: 210px;
}
</style>