<template>
    <form-option :title="title">
        <el-form ref="form" :model="form" :rules="rules" label-width="120px" class="form">
            <el-form-item label="抽查事项" prop="event">
                <el-input v-model="form.event"></el-input>
            </el-form-item>
            <el-form-item label="是否显示">
                <el-switch v-model="form.isDisplay">{{ form.isDisplay ? '显示' : '不显示' }}</el-switch>
            </el-form-item>
            <el-form-item label="抽查依据" prop="standard">
                <el-input v-model="form.standard" type="textarea" placeholder="请输入" :rows="5" maxlength="300" show-word-limit></el-input>
            </el-form-item>
            <el-form-item label="抽查对象" prop="enforce_obj_type">
                <el-checkbox-group v-model="form.enforce_obj_type">
                    <el-checkbox v-for="item in unitSize" :key="item.id" :label="item.id">{{item.name}}</el-checkbox>
                </el-checkbox-group>
            </el-form-item>
            <el-form-item label="抽查主体" prop="target">
                <el-input v-model="form.target"></el-input>
            </el-form-item>
            <el-form-item label="抽查比例" prop="proportion">
                <el-input v-model="form.proportion"></el-input>
            </el-form-item>
            <el-form-item label="抽查次数" prop="times">
                <el-input v-model="form.times"></el-input>
            </el-form-item>
            <el-form-item label="抽查方式" prop="way">
                <el-input v-model="form.way"></el-input>
            </el-form-item>
            <el-form-item label="抽查内容及要求" prop="content">
                <el-input v-model="form.content" type="textarea" placeholder="请输入" :rows="5" maxlength="300" show-word-limit></el-input>
            </el-form-item>
            <el-form-item label="备注" prop="remark">
                <el-input v-model="form.remark" type="textarea" placeholder="请输入" :rows="5" maxlength="300" show-word-limit></el-input>
            </el-form-item>
            <el-form-item>
                <el-button @click="cancelEdit">取消</el-button>
                <el-button type="primary" :loading="uploading" @click="onSubmit">确定</el-button>
            </el-form-item>
        </el-form>
    </form-option>
</template>

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

import { getOneStandard, addStandard, updateStandard } from "@/api/system";
import { resourceMixin } from '@/mixin/resource';

export default {
    components: {
        FormOption
    },
    mixins: [resourceMixin],
    data () {
        return {
            form: {
                event: '',
                is_display: '',
                isDisplay: true,
                standard: '',
                enforce_obj_type: [],
                target: '',
                proportion: '',
                times: '',
                way: '',
                content: '',
                remark: ''
            },
            rules: {
                event: [
                    { required: true, message: '请输入抽查事项', trigger: 'blur' },
                    { min: 3, max: 100, message: '长度在 3 到 100 个字符', trigger: 'blur' }
                ],
                enforce_obj_type: [
                    { required: true, message: '请选择抽查对象', trigger: 'change' }
                ],
                target: [
                    { min: 0, max: 100, message: '不能超过100字符', trigger: 'blur' }
                ],
                proportion: [
                    { min: 0, max: 100, message: '不能超过100字符', trigger: 'blur' }
                ],
                times: [
                    { min: 0, max: 100, message: '不能超过100字符', trigger: 'blur' }
                ],
                way: [
                    { min: 0, max: 100, message: '不能超过100字符', trigger: 'blur' }
                ],
            },
            uploading: false,
        }
    },
    computed: {
        id() {
            return this.$route.params.id
        },
        title() {
            return notEmpty(this.id) ? '编辑抽查标准' : '新增抽查标准'
        }
    },
    mounted () {
        this.initData()
    },
    methods: {
        initData() {
            if (this.id) {
                this.loading = true;
                getOneStandard(this.id).then(res => {
                    res.isDisplay = res.is_display == 1;
                    res.enforce_obj_type = res.enforce_obj_type.split(',');
                    this.form = res;
                    this.loading = false;
                })
            }
        },
        cancelEdit() {
            this.$router.back();
        },
        onSubmit() {
            const vm = this;
            this.$refs['form'].validate((valid) => {
                if (valid) {
                    vm.uploading = true;
                    const obj = Object.assign({}, vm.form);
                    obj.enforce_obj_type = obj.enforce_obj_type.join(',');
                    obj.is_display = obj.isDisplay ? 1 : 0;
                    if (notEmpty(vm.id)) {
                        updateStandard(vm.id, obj).then(res => {
                            vm.$message.success('更新成功');
                            vm.cancelEdit();
                        }).catch(() => {
                            vm.uploading = false;
                        });
                    }
                    else {
                        addStandard(obj).then(res => {
                            vm.$message.success('新增成功');
                            vm.cancelEdit();
                        }).catch(() => {
                            vm.uploading = false;
                        });
                    }
                }
            })
        },
    }
}
</script>

<style lang="scss" scoped>
.form {
    width: 660px;
}
</style>