<template>
    <div class="check">
        <form-option title="抽查标准公示">
            <el-form :inline="true" :model="formData" ref="form" label-width="100px">
                <el-form-item label="抽查事项:" prop="event">
                    <el-input v-model="formData.event" 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-button type="primary" icon="el-icon-plus" @click="handleAddData">新增</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="event" show-overflow-tooltip label="抽查事项" />
                <el-table-column prop="standard" show-overflow-tooltip label="抽查依据"/>
                <el-table-column prop="target" label="抽查主体" show-overflow-tooltip/>
                <el-table-column prop="enforceType" label="抽查对象" show-overflow-tooltip/>
                <el-table-column prop="proportion" label="抽查比例" show-overflow-tooltip/>
                <el-table-column prop="times" label="抽查次数" show-overflow-tooltip/>
                <el-table-column prop="way" label="抽查方式" show-overflow-tooltip/>
                <el-table-column prop="content" label="抽查内容及要求" show-overflow-tooltip/>
                <el-table-column prop="remark" label="备注" show-overflow-tooltip/>
                <el-table-column prop="is_display" label="处理状态" align="center">
                    <template slot-scope="scope">
                        <template v-if="scope.row.is_display == 1">
                            <el-button size="mini" type="success" plain @click="handleToggleStatus(scope.row)">开启</el-button>
                        </template>
                        <template v-else>
                            <el-button size="mini" type="danger" plain @click="handleToggleStatus(scope.row)">关闭</el-button>
                        </template>
                    </template>
                </el-table-column>
                <el-table-column prop="action" label="操作" align="center" width="160">
                    <template slot-scope="scope">
                        <el-button type="text" size="small" @click="handleDetail(scope.row.id)">详情</el-button>
                        <el-button type="text" size="small" @click="handleEdit(scope.row.id)">编辑</el-button>
                        <el-button type="text" size="small" @click="handleRemove(scope.row.id)">删除</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, sizes"
                    :page-sizes="[10, 20, 50, 100]"
                    :current-page="query.page"
                    :page-size="query.size"
                    :total="total"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange">
                </el-pagination>
            </div>
        </div>
    </div>
</template>

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

import { getStandard, updateStandard, removeStandard } from "@/api/system";
import { notEmpty, isEmpty } from '@/utils/tool';
import { resourceMixin } from '@/mixin/resource';

export default {
    components: {
        FormOption,
    },
    mixins: [resourceMixin],
    data() {
        return {
            formData: {
                event: ''
            },
            query: {
                page: 1,
                size: 10,
                sort: 'create_time desc'
            },
            total: 0,
            list: [],
            loading: false,
        }
    },
    computed: {
        pageTotal() {
            const page = Math.ceil(this.total / this.query.limit);
            return page > 0 ? page : 1;
        },
    },
    mounted() {
        this.handleQuery();
    },
    methods: {
        handleQueryData() {
            this.query.page = 1;
            this.handleQuery();
        },
        resetForm() {
            this.$refs.form.resetFields();
            this.resetQuery();
        },
        handleSizeChange(val) {
            this.query.limit = val;
            this.handleQuery();
        },
        handleCurrentChange(val) {
            this.query.page = val;
            this.handleQuery();
        },
        resetQuery() {
            this.query = {
                page: 1,
                limit: 10,
                query: "",
            };
            this.handleQuery();
        },
        parseStandardType(str) {
            if (isEmpty(str)) {
                return '';
            }
            const arr = str.split(',');
            const res = [];
            arr.map(item => {
                const name = this.parseUnitSize(item);
                if (name) {
                    res.push(name);
                }
            });
            return res.join('/');
        },
        handleQuery() {
            this.loading = true;
            if (notEmpty(this.formData.event)) {
                const event = this.formData.event.trim();
                this.query.query = `event==*${event}*`;
            }
            const vm = this;
            getStandard(this.query).then((res) => {
                if (res) {
                    vm.total = parseInt(res.total || "0");
                    const list = res.data || [];
                    list.map(item => {
                        item.enforceType = this.parseStandardType(item.enforce_obj_type);
                    });
                    vm.list = list;
                }
                this.loading = false;
            });
        },
        handleToggleStatus(row) {
            const isOn = row.is_display == 1;
            const msg = '是否确定' + (isOn ? '关闭' : '开启') + '显示标准公示？';
            const params = {
                is_display: isOn ? 0 : 1
            }
            this.$confirm(msg, '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                updateStandard(row.id, params).then(res => {
                    this.$message({
                        type: 'success',
                        message: '更新成功!'
                    });
                    this.handleQuery();
                })
            }).catch(() => {
                         
            });
        },
        handleAddData() {
            this.$router.push('/system/edit/')
        },
        handleDetail(id) {
            this.$router.push(`/system/info/${id}`)
        },
        handleEdit(id) {
            this.$router.push(`/system/edit/${id}`)
        },
        handleRemove(id) {
            this.$confirm('是否确定删除当前抽查标准？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                removeStandard(id).then(res => {
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                    if (this.list.length > 1) {
                        this.handleQuery();
                    }
                    else {
                        this.resetQuery();
                    }
                })
            }).catch(() => {
                         
            });
        },
    },
}
</script>
