<template>
    <div>
        <form-option title="执法音视频">
            <el-form :inline="true" :model="formData" ref="form" label-width="90px">
                <el-form-item label="绑定状态:" prop="bdStatus">
                    <el-select v-model="formData.bind_status" clearable placeholder="选择绑定状态">
                        <el-option v-for="item in bgStatus" :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-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>
        </form-option>

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

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

    import { getUserByOrg } from '@/api/base'
    import {jobMixin} from '@/mixin/job'
    import {resourceMixin} from '@/mixin/resource'
    import {DateTime} from "luxon";
    import { orgMixin } from '@/mixin/org';

    export default {
        components: {
            FormOption,
            ChooseResource
        },
        mixins: [jobMixin, resourceMixin, orgMixin],
        data() {
            return {
                formData: {
                    device_status: '',
                    bind_status: '',
                    org: '',
                    orgs: null,
                    account: '',
                    checkDate: null,
                    update_time: '',
                    companyName: '',
                    company: '',
                    limit: '',
                    createDate: null,
                    result: '',
                },
                orgUsers: [],
                showChooseResource: false,
                deviceStatus: [
                    {
                        k: '全部',
                        v: ''
                    },
                    {
                        k: 'ONLINE',
                        v: '在线'
                    },
                    {
                        k: 'OFFLINE',
                        v: '离线'
                    }
                ],
                bgStatus: [
                    {
                        k: '',
                        v: '全部'
                    },
                    {
                        k: 'ACTIVE',
                        v: '已关联'
                    },
                    {
                        k: 'UN_ACTIVE',
                        v: '未关联'
                    }
                ],

            }
        },
        mounted() {
            this.loadOrgTree()
        },
        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
            },
            resetForm() {
                this.$refs.form.resetFields()
                this.$parent.resetForm()
            },
            addData() {
                this.$emit("changeDialogFormVisible")
            },
            handleQuery() {
                let queryString = ""
                let expressions = []
                if (this.formData.device_status) {
                    expressions.push("device_status" + "==" + "'" + this.formData.device_status + "'")
                }
                if (this.formData.bind_status === 'ACTIVE') {
                    expressions.push("enfore_job_id=isnull=false")
                } else if (this.formData.bind_status === 'UN_ACTIVE') {
                    expressions.push("enfore_job_id=isnull=true")
                }
                if (this.formData.orgs) {
                    expressions.push("org_id" + "==" + "'" + this.formData.orgs.pop() + "'")
                }
                if (this.formData.account) {
                    expressions.push("use_person_id" + "==" + "'*" + 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.update_time && this.formData.update_time.length === 2) {
                    expressions.push('update_time' + ">" + "'" +
                        DateTime.fromJSDate(this.formData.update_time[0]).toFormat("yyyy-LL-dd HH:mm:ss") + "'")
                    expressions.push('update_time' + "<" + "'" +
                        DateTime.fromJSDate(this.formData.update_time[1]).toFormat("yyyy-LL-dd HH:mm:ss") + "'")
                }

                if (this.formData.limit && this.formData.limit.length === 2) {
                    expressions.push('last_enforce_date' + ">" + "'" +
                        DateTime.fromJSDate(this.formData.limit[0]).toFormat("yyyy-LL-dd HH:mm:ss") + "'")
                    expressions.push('last_enforce_date' + "<" + "'" +
                        DateTime.fromJSDate(this.formData.limit[1]).toFormat("yyyy-LL-dd HH:mm:ss") + "'")
                }

                if (this.formData.createDate && this.formData.createDate.length === 2) {
                    expressions.push('create_time' + ">" + "'" +
                        DateTime.fromJSDate(this.formData.createDate[0]).toFormat("yyyy-LL-dd HH:mm:ss") + "'")
                    expressions.push('create_time' + "<" + "'" +
                        DateTime.fromJSDate(this.formData.createDate[1]).toFormat("yyyy-LL-dd HH:mm:ss") + "'")
                }

                if (expressions.length !== 0) {
                    queryString = expressions.reduce(function (previousValue, currentValue, index, array) {
                        return previousValue + ";" + currentValue
                    })
                }
                this.$emit('query', queryString)
            }
        }
    }
</script>