<template>
    <div class="check">
        <form-option title="违法占道">
            <el-form :inline="true" :model="formData" ref="form" label-width="80px">
                <el-form-item label="违法状态:" prop="processing_status">
                    <el-select v-model="formData.processing_status" clearable placeholder="请选择">
                        <el-option label="全部" value=""></el-option>
                        <el-option label="已挪车" value="MOVED"></el-option>
                        <el-option label="已通知" value="NOTICED"></el-option>
                        <el-option label="已处罚" value="PUNISHMENTED"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="执法机构:" prop="orgs">
                    <el-cascader
                        v-model="formData.orgs"
                        class="custom-cascader"
                        :props="orgProps"
                        :options="orgOptions"
                        @change="orgChanged">
                    </el-cascader>
                </el-form-item>
                <el-form-item label="检查人员" prop="create_user_id">
                    <el-select v-model="formData.create_user_id" clearable placeholder="选择执行人员">
                        <el-option value="" label="全部" />
                        <el-option v-for="item in orgUsers" :key="item.uid" :value="item.uid" :label="item.name" />
                    </el-select>
                </el-form-item>
                <el-form-item label="检查时间:" prop="date">
                    <el-date-picker
                        v-model="formData.date"
                        type="date"
                        placeholder="选择日期">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="违法地点:" prop="location">
                    <el-input v-model="formData.location" placeholder="请输入"></el-input>
                </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="60"/>
                <el-table-column prop="illegal_number" show-overflow-tooltip label="编号"/>
                <el-table-column prop="checkDate" show-overflow-tooltip label="检查时间"/>
                <el-table-column prop="license_plate_num" label="违法车辆" show-overflow-tooltip align="center"/>
                <el-table-column prop="vehicleModel" label="类型" align="center" width="120"/>
                <el-table-column prop="inspection_location" label="违法地点" show-overflow-tooltip align="center"/>
                <el-table-column prop="enforce_org_name" label="执法机构" align="center" show-overflow-tooltip/>
                <el-table-column prop="create_user_name" label="检查人员" align="center" show-overflow-tooltip/>
                <el-table-column prop="processing_status" label="违法状态" align="center">
                    <template slot-scope="scope">
                        <!-- MOVED-已挪车,NOTICED-已通知,PUNISHMENTED-已处罚 -->
                        <el-tag v-if="scope.row.processing_status == 'NOTICED'" type="warning">已通知</el-tag>
                        <el-tag v-else-if="scope.row.processing_status == 'PUNISHMENTED'" type="danger">已处罚</el-tag>
                        <el-tag v-else type="success">已挪车</el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="action" label="操作" align="center" width="80">
                    <template slot-scope="scope">
                        <el-button type="text" icon="el-icon-view" size="small" @click="handleDetail(scope.row.id)">详情</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <Page :page="query.page" :size="query.size" :total="total" @pageChange="pageChange"></Page>
        </div>
    </div>
</template>

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

import { getList } from '@/api/punishment';
import { getUserByOrg } from '@/api/base';
import { formatDate, notEmpty, dateFormat } from '@/utils/tool';
import { orgMixin } from '@/mixin/org';
import punishmentMixin from '@/mixin/punishment';
import moment from 'moment';

export default {
    components: {
        FormOption,
    },
    mixins: [orgMixin, punishmentMixin],
    data () {
            return {
                formData: {
                    processing_status: '',
                    date: '',
                    orgs: '',
                    location: '',
                    create_user_id: '',
                },
                query: {
                    page: 1,
                    size: 10,
                    sort: 'create_time desc',
                },
                total: 0,
                list: [],
                loading: false,
                orgUsers: [],
            }
    },
    computed: {
        pageTotal () {
            const page = Math.ceil(this.total / this.query.limit)
            return page > 0 ? page : 1
        }
    },
    mounted () {
        this.loadOrgTree();
        this.handleQuery();
    },
    methods: {
        orgChanged(data) {
            this.orgUsers = []
            if (data.length > 0) {
                const orgId = data[data.length - 1];
                this.getOrgUsers(orgId);
            }
        },
        getOrgUsers(orgId) {
            if (orgId) {
                getUserByOrg(1, 10000, orgId).then(res => {
                    if (res && res.data) {
                        this.orgUsers = res.data;
                    }
                })
            }
            else {
                this.$message.warning('请先选择执法机构')
            }
        },
        handleQueryData() {
            this.query.page = 1
            this.handleQuery()
        },
        resetForm () {
            this.$refs.form.resetFields();
            this.handleQuery();
        },
        pageChange(page, size) {
            this.query.page = page;
            this.query.size = size;
            this.handleQuery();
        },
        handleQuery () {
            this.loading = true;
            let query = [];
            if (notEmpty(this.formData.processing_status)) {
                query.push(`processing_status==${this.formData.processing_status}`);
            }
            if (this.formData.orgs && this.formData.orgs.length > 0) {
                const orgId = this.formData.orgs[this.formData.orgs.length - 1];
                if (notEmpty(orgId)) {
                    query.push(`enforce_org_id==${orgId}`);
                }
            }
            if (notEmpty(this.formData.create_user_id)) {
                query.push(`create_user_id==${this.formData.create_user_id}`);
            }
            if (this.formData.date) {
                const start = dateFormat('YYYY-mm-dd', this.formData.date);
                query.push(`inspection_time>=${start}`);
                const end = moment(this.formData.date).add(1, 'days').format('YYYY-MM-DD');
                query.push(`inspection_time<${end}`);
            }
            if (notEmpty(this.formData.location)) {
                query.push(`inspection_location==*${this.formData.location.trim()}*`);
            }
            this.query.query = query.join(';');
            const vm = this;
            getList(this.query).then(res => {
                if (res) {
                    vm.total = parseInt(res.count || '0');
                    const list = res.data || []
                    list.map(item => {
                        item.checkDate = formatDate(item.inspection_time, true);
                        item.vehicleModel = this.parseVehicleModel(item.vehicle_model);
                    })
                    vm.list = list
                }
                this.loading = false
            })
        },
        handleDetail (id) {
            this.$router.push(`/punishment/detail/${id}`);
        },
    }
}
</script>

<style lang="scss">
  .check {
    .option .el-select .el-input__inner {
      padding-right: 15px;
    }
  }
</style>