<template>
    <div>
        <el-form :inline="true" :model="formData" ref="form" label-width="90px">
            <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-form-item label="执法机构:" prop="orgs">
                <el-cascader
                    class="custom-cascader"
                    v-model="formData.orgs"
                    :props="orgProps"
                    :options="orgOptions"
                    @change="orgChanged">
                </el-cascader>
            </el-form-item>
                <el-form-item label="检查人员:" prop="account">
                <el-select v-model="formData.account" clearable placeholder="选择检查人员">
                    <el-option value="" label="全部" />
                    <el-option v-for="item in orgUsers" :key="item.id" :value="item.id" :label="item.name" />
                </el-select>
            </el-form-item>
                <el-form-item label="检查时间:" prop="checkDate">
                    <el-date-picker v-model="formData.checkDate" range-separator="至"
                                    type="daterange" start-placeholder="开始日期"
                                    end-placeholder="结束日期"
                    ></el-date-picker>                </el-form-item>
                <el-form-item label="被检查单位:" prop="companyName">
                <el-select v-model="formData.companyName" placeholder="选择被检查单位" @focus="showChooseResource=true"></el-select>
            </el-form-item>
            <el-form-item label="检查结果:" prop="result">
                <el-select v-model="formData.result" clearable placeholder="选择检查结果">
                    <el-option value="" label="全部" />
                    <el-option v-for="item in statusList" :key="item.id" :value="item.id" :label="item.name" />
                </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="handleQuery">查询</el-button>
        </el-form>

        <el-table
            :data="tableData"
            border
            style="width: 100%"
            v-loading="loading">
            <el-table-column type="index" align="center" label="序号" width="80" />
            <el-table-column prop="jobType" show-overflow-tooltip label="任务类型" align="center"></el-table-column>
            <el-table-column prop="enforce_obj_name" show-overflow-tooltip label="被检查单位">
                <template slot-scope="scope">{{scope.row.enforce_obj_name}}</template>
            </el-table-column>
            <el-table-column prop="enforce_obj_address" show-overflow-tooltip label="单位地址">
                <template slot-scope="scope">{{scope.row.enforce_obj && scope.row.enforce_obj.enforce_obj_address}}</template>
            </el-table-column>
            <el-table-column prop="enforce_org_name" show-overflow-tooltip label="执法机构" align="center">
                <template slot-scope="scope">{{scope.row.enforce_org_name}}</template>
            </el-table-column>
            <el-table-column prop="executor_names" show-overflow-tooltip label="检查人员" align="center" />
            <el-table-column prop="startTime" label="检查时间" show-overflow-tooltip align="center" />
            <el-table-column prop="name" label="任务状态" align="center">
                <template slot-scope="scope">{{ parseJobStatus(scope.row.job_status) }}</template>
            </el-table-column>
            <el-table-column prop="name" label="检查结果" show-overflow-tooltip align="center">
                <template slot-scope="scope">{{ parseStatus(scope.row.enforce_result) }}</template>
            </el-table-column>
            <el-table-column prop="action" label="操作" align="center">
                <template slot-scope="scope">
                    <el-button type="text" size="small" @click="handleChoose(scope.row)">选择</el-button>
                </template>
            </el-table-column>
        </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"
                :current-page="query.page"
                :page-size="query.size"
                :total="total"
                @current-change="handleCurrentChange">
            </el-pagination>
        </div>

        <el-dialog title="选择被检查单位" append-to-body :visible.sync="showChooseResource" class="custom-dialog">
            <choose-resource @changeResource="changeResource"></choose-resource>
        </el-dialog>
    </div>
</template>

<script>
import ChooseResource from '@/component/ChooseResource'

import { getUserByOrg } from '@/api/base'
import { jobMixin } from '@/mixin/job'
import { resourceMixin } from '@/mixin/resource'
import { getJobs } from '@/api/job';
import { formatDate } from '@/utils/tool';
import { orgMixin } from '@/mixin/org';

export default {
    components: {
        ChooseResource
    },
    mixins: [jobMixin, resourceMixin, orgMixin],
    data () {
        return {
            formData: {
                status: '',
                org: '',
                orgs: '',
                account: '',
                checkDate: '',
                companyName: '',
                company: '',
                limit: '',
                createDate: '',
                result: ''
            },
            query: {
                page: 1,
                size: 10,
                sort: "create_time desc"
            },
            orgUsers: [],
            showChooseResource: false,
            tableData: [],
            total: 0,
            loading: false,
        }
    },
    computed: {
        pageTotal() {
            const page = Math.ceil(this.total / this.query.size)
            return page > 0 ? page : 1
        }
    },
    mounted () {
        this.loadOrgTree()
        this.handleQuery()
    },
    methods: {
        getOrgUsers() {
            if (this.formData.org) {
                getUserByOrg(1, 10000, this.formData.org).then(res => {
                    if (res && res.data) {
                        this.orgUsers = res.data
                    }
                })
            }
            else {
                this.$message.warning('请先选择执法机构')
            }
        },
        orgChanged(data) {
            this.formData.org = data.length > 0 ? data[data.length - 1] : null
            this.orgUsers = []
            this.getOrgUsers()
        },
        changeResource(data) {
            if (data) {
                this.formData.company = data.id
                this.formData.companyName = data.enforce_obj_name
            }
            this.showChooseResource = false
        },
        handleCurrentChange(v) {
            this.query.page = v;
            this.queryTask();
        },
        queryTask() {
            this.loading = true;
            getJobs(this.query).then(res => {
                if (res) {
                    this.total = res.total || 0
                    const list = res.data || []
                    list.map(item => {
                        item.jobType = this.parseJobType(item.job_type);
                        item.startTime = formatDate(item.start_time, true)
                    })
                    this.tableData = list
                }
                this.loading = false
            })
        },
        resetForm() {
            this.orgUsers = []
            this.formData.company = ''
            this.$refs.form.resetFields()
            this.query.query = '';
            this.queryTask()
        },
        handleQuery() {
            let expressions = [];
            expressions.push("job_status=='ARCHIVED'");
            if (this.formData.job_type) {
                expressions.push(`job_type==${this.formData.job_type}`);
            }
            if (this.formData.orgs&&this.formData.orgs[this.formData.orgs.length-1]!=null&&this.formData.orgs[this.formData.orgs.length-1]!='') {
                const orgsArr = this.formData.orgs;
                expressions.push(`enforce_org_id==${orgsArr[orgsArr.length-1]}`);
            }
            if (this.formData.account) {
                expressions.push(`executor_ids==${this.formData.account}`);
            }
            if (this.formData.company) {
                expressions.push(`enforce_obj_id==${this.formData.company}`);
            }
            if (this.formData.result) {
                expressions.push(`enforce_result==${this.formData.result}`);
            }
            if (this.formData.result == 'CORRECT_IMMEDIATELY') {
                expressions.push("enforce_result=='NOT_PASS'");
                expressions.push('immediately_file_id=isnull=false');
            }
            if (this.formData.result == 'DEADLINE_CORRECT') {
                expressions.push("enforce_result=='NOT_PASS'");
                expressions.push('deadline_file_id=isnull=false');
            }

            if (this.formData.checkDate && this.formData.checkDate.length === 2) {
                expressions.push('start_time' + ">" + "'" + formatDate(this.formData.checkDate[0], true) + "'")
                expressions.push('start_time' + "<" + "'" + formatDate(this.formData.checkDate[1], true) + "'")
            }
            let queryString = expressions.join(';');
            this.query.query = queryString;
            this.queryTask();
        },
        handleChoose(row) {
            this.$emit('choose', row)
        }
    }
}
</script>