<template>
    <div class="check">
        <form-option title="执法对象变动日志">
            <el-form :inline="true" :model="formData" ref="form" label-width="100px">
                <el-form-item label="对象名称:" prop="enforce_obj_name">
                    <el-input v-model="formData.enforce_obj_name" placeholder="请输入"></el-input>
                </el-form-item>
                <el-form-item label="变更类型:" prop="change_type">
                    <el-select v-model="formData.change_type" clearable placeholder="请选择">
                        <el-option value="" label="全部"/>
                        <!-- 0新增，1对象名称,2经营场地,3法人/经营者,4营业状态,5联系方式 -->
                        <el-option value="0" label="新增"/>
                        <el-option value="1" label="对象名称"/>
                        <el-option value="2" label="经营场地"/>
                        <el-option value="3" label="法人/经营者"/>
                        <el-option value="4" label="营业状态"/>
                        <el-option value="5" label="联系方式"/>
                    </el-select>
                </el-form-item>
                <el-form-item label="变更人:" prop="update_user_type">
                    <el-select v-model="formData.update_user_type" clearable placeholder="请选择">
                        <el-option value="" label="全部"/>
                        <el-option value="0" label="市监信息同步"/>
                        <el-option value="1" label="执法单位变更"/>
                    </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" />
                <el-table-column prop="enforce_obj_name" show-overflow-tooltip label="对象名称" />
                <el-table-column prop="oper_type" show-overflow-tooltip label="新增/变更" width="120px" align="center">
                    <template slot-scope="scope">
                        {{ scope.row.oper_type == '0' ? '新增' : '变更' }}
                    </template>
                </el-table-column>
                <el-table-column prop="changeType" label="变更类型" show-overflow-tooltip align="center"/>
                <el-table-column prop="create_time" label="变更时间" show-overflow-tooltip align="center"/>
                <el-table-column prop="change_before" label="变更前" show-overflow-tooltip align="center"/>
                <el-table-column prop="changed_now" label="变更后" show-overflow-tooltip   align="center"/>
                <el-table-column prop="change_resonse" label="变更原因" show-overflow-tooltip />
                <el-table-column prop="update_user_name" label="操作人" show-overflow-tooltip />
            </el-table>
            <Page :page="query.page" :size="query.size" :total="total" @pageChange="pageChange"></Page>
        </div>
    </div>
</template>

<script>
import FormOption from "@/component/FormOption";
import moment  from 'moment';
import { getEnforceObjChangeLog } from "@/api/log";
import { notEmpty } from '@/utils/tool';

export default {
    components: {
        FormOption,
    },
    data() {
        return {
            formData: {
                enforce_obj_name:'',
                change_type:'',
                update_user_type:'',
            },
            query: {
                page: 1,
                size: 10,
                sort: 'create_time desc',
            },
            total: 0,
            list: [],
            loading: false,
        }
    },
    mounted() {
        this.handleQuery();
    },
    methods: {
        handleQueryData() {
            this.query.page = 1;
            this.handleQuery();
        },
        resetForm() {
            this.$refs.form.resetFields();
            this.query.page = 1;
            this.handleQuery();
        },
        pageChange(page, size) {
            this.query.page = page;
            this.query.size = size;
            this.handleQuery();
        },
        handleQuery() {
            this.loading = true;
            const res = [];
            if(notEmpty(this.formData.enforce_obj_name)){
                res.push(`enforce_obj_name==*${this.formData.enforce_obj_name.trim()}*`);
            }
            if(notEmpty(this.formData.change_type)){
                res.push(`change_type==${this.formData.change_type}`);
            }
            if(notEmpty(this.formData.update_user_type)){
                res.push(`update_user_type==${this.formData.update_user_type}`);
            }
            this.query.query = res.join(';');
            getEnforceObjChangeLog(this.query).then((res) => {
                const data = res && res.data || [];
                data.map(item => {
                    item.changeType = this.parseChangeType(item.change_type);
                    item.updateTime = moment(item.update_time).format('YYYY-MM-DD HH:mm:ss');
                    item.create_time = moment(item.create_time).format('YYYY-MM-DD HH:mm:ss');
                });
                this.list = data;
                this.total = res && res.total || 0;
                this.loading = false;
            });
        },
        parseChangeType(type) {
            //变更类型: 0新增，1对象名称,2经营场地,3法人/经营者,4营业状态,5联系方式
            let s = '新增';
            switch (type) {
                case 1:
                    s = '对象名称';
                    break;
                case 2:
                    s = '经营场地';
                    break;
                case 3:
                    s = '法人/经营者';
                    break;
                case 4:
                    s = '营业状态';
                    break;
                case 5:
                    s = '联系方式';
                    break;
                default:
                    break;
            }
            return s;
        },
    },
}
</script>
