<template>
    <div class='container'>
        <div class='handle-box'>
            <el-form :inline='true'>
                <el-form-item>
                    <el-input
                        v-model='searchForm.title'
                        placeholder='请输入会议标题'
                        clearable>
                    </el-input>
                </el-form-item>

                <el-form-item>
                    <el-button @click='loadData'>搜索</el-button>
                </el-form-item>

                <el-form-item>
                    <el-button type='primary' @click='dialogVisible = true' v-if="hasAuth('sys:user:save')">新增
                    </el-button>
                </el-form-item>
            </el-form>
        </div>

        <el-table
            ref='meetingTable'
            :data='tableData'
            tooltip-effect='dark'
            style='width: 100%'
            border
            stripe>

            <el-table-column
                type='index'
                label='序号'
                width='50'>
            </el-table-column>

            <el-table-column
                prop='title'
                label='会议标题'
                width='240'
                :show-overflow-tooltip='true'>
            </el-table-column>

            <el-table-column
                prop='receptionObject'
                label='接待对象'
                width='240'
                :show-overflow-tooltip='true'>
            </el-table-column>

            <el-table-column
                prop='receptionNumber'
                label='接待人数'
                width='100'
                align='center'>
            </el-table-column>

            <el-table-column
                prop='receptionContent'
                label='接待内容'
                width='240'
                :show-overflow-tooltip='true'>
            </el-table-column>

            <el-table-column
                prop='status'
                width='100'
                align='center'
                label='会议状态'>
                <template slot-scope='scope'>
                    <el-tag size='small' v-if='scope.row.status == 10' type='info'>未开始</el-tag>
                    <el-tag size='small' v-else-if='scope.row.status == 20' type='success'>已结束</el-tag>
                </template>
            </el-table-column>

            <el-table-column
                prop='receptionDirector'
                label='接待负责人'
                width='100'>
            </el-table-column>

            <el-table-column
                prop='createTime'
                width='150'
                label='创建时间'>
            </el-table-column>

            <el-table-column
                prop='icon'
                fixed='right'
                width='200px'
                label='操作'>
                <template slot-scope='scope'>
                    <span v-show='scope.row.status!=20'>
                      <el-button :disabled='scope.row.status==20' type='text'
                                 @click='editHandle(scope.row)'>编辑</el-button>
                      <el-divider direction='vertical'></el-divider>
                    </span>
                    <template>
                        <el-popconfirm title='确定删除这条数据吗？' @confirm='delHandle(scope.row.id)'>
                            <el-button type='text' slot='reference'>删除</el-button>
                        </el-popconfirm>
                    </template>
                    <span v-show='scope.row.status!=20'>
                      <el-divider direction='vertical'></el-divider>
                      <el-popconfirm title='确定要结束这条会议记录吗？' @confirm='endMeeting(scope.row)'>
                        <el-button :disabled='scope.row.status==20' type='text' slot='reference'>结束会议</el-button>
                      </el-popconfirm>
                    </span>
                </template>
            </el-table-column>

        </el-table>

        <el-pagination
            @size-change='handleSizeChange'
            @current-change='handleCurrentChange'
            layout='total, sizes, prev, pager, next, jumper'
            :page-sizes='[10, 20, 50, 100]'
            :current-page='current'
            :page-size='size'
            :total='total'>
        </el-pagination>


        <!--新增对话框-->
        <el-dialog
            title='提示'
            :visible.sync='dialogVisible'
            width='60%'
            :before-close='handleClose'>

            <el-form :model='editForm' :rules='editFormRules' ref='editForm' label-width='100px'>
                <el-row>
                    <el-col :span='12'>
                        <el-form-item label='会议标题:' prop='title'>
                            <el-input v-model='editForm.title' autocomplete='off' placeholder='请输入会议标题'></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span='12'>
                        <el-form-item label='接待对象:' prop='receptionObject'>
                            <el-input v-model='editForm.receptionObject' autocomplete='off'
                                      placeholder='请输入接待对象'></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span='12'>
                        <el-form-item label='接待时间:' prop='receptionTime'>
                            <el-date-picker
                                v-model='editForm.receptionTime'
                                type='datetime'
                                value-format='yyyy-MM-dd HH:mm'
                                :picker-options='pickerOptions'
                                placeholder='请选择接待时间'>
                            </el-date-picker>
                        </el-form-item>
                    </el-col>
                    <el-col :span='12'>
                        <el-form-item label='接待人数:' prop='receptionNumber'>
                            <el-input type='number' v-model='editForm.receptionNumber' autocomplete='off'
                                      placeholder='请输入接待人数'></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span='12'>
                        <el-form-item label='接待负责人:' prop='receptionDirector'>
                            <el-input v-model='editForm.receptionDirector' autocomplete='off'
                                      placeholder='请输入接待负责人'></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span='12'>
                        <el-form-item label='保障人员:' prop='guaranteePersonnel'>
                            <el-input v-model='editForm.guaranteePersonnel' autocomplete='off'
                                      placeholder='请输入保障人员'></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span='12'>
                        <el-form-item label='巡检模板' prop='inspectionTemplateId'>
                            <el-select v-model='editForm.inspectionTemplateId' placeholder='请选择巡检模板'>
                                <el-option
                                    v-for='item in inspectionTemplateList'
                                    :key='item.value'
                                    :label='item.label'
                                    :value='item.value'>
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span='12'>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span='24'>
                        <el-form-item label='接待内容:' prop='receptionContent'>
                            <el-input :maxlength='500' type='textarea' :rows='3' v-model='editForm.receptionContent' autocomplete='off'
                                      placeholder='请输入接待内容'></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span='24'>
                        <el-form-item label='接待要求:' prop='receptionRequirement'>
                            <el-input :maxlength='250' type='textarea' :rows='3' v-model='editForm.receptionRequirement'
                                      autocomplete='off'
                                      placeholder='请输入接待要求'></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <div slot='footer' class='dialog-footer'>
                <el-button @click="resetForm('editForm')">取 消</el-button>
                <el-button type='primary' @click="submitForm('editForm')">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>

export default {
    name: 'meetingManage',
    components: {
    },
    data() {
        return {
            searchForm: {
                title: ''
            },
            pickerOptions: {
                disabledDate(time) {
                    return time.getTime() < Date.now() - 8.64e7;
                }
            },
            inspectionTemplateList: [],
            total: 0,
            size: 10,
            current: 1,
            dialogVisible: false,
            editForm: {},
            tableData: [],
            editFormRules: {
                title: [
                    { required: true, message: '请输入会议标题', trigger: 'blur' }
                ],
                receptionObject: [
                    { required: true, message: '请输入接待对象', trigger: 'blur' }
                ],
                receptionTime: [
                    { required: true, message: '请选择接待时间', trigger: 'blur' }
                ],
                receptionNumber: [
                    { required: true, message: '请输入接待人数', trigger: 'blur' }
                ]
            }
        };
    },
    created() {
        this.loadData();
        this.loadInspectionTemplateData();
    },
    methods: {
        loadData() {
            this.$axios.get('/api/meeting/info/list', {
                params: {
                    title: this.searchForm.title,
                    current: this.current,
                    size: this.size
                }
            }).then(res => {
                this.tableData = res.data.data.records;
                this.size = res.data.data.size;
                this.current = res.data.data.current;
                this.total = res.data.data.total;
            });
        },
        loadInspectionTemplateData() {
            this.$axios.get('/api/inspection/template/getByType', {
                params: {
                    type: 20 //表示会议巡检
                }
            }).then(res => {
                this.inspectionTemplateList = res.data.data.map(t => {
                    return { label: t.name, value: t.id };
                });
            });
        },
        handleClose() {
            this.resetForm('editForm');
        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
            this.dialogVisible = false;
            this.editForm = {};
        },
        submitForm(formName) {
            let _this = this;
            _this.$refs[formName].validate((valid) => {
                if (valid) {
                    _this.$axios.post('/api/meeting/info/' + (_this.editForm.id ? 'updateBean' : 'addBean'), _this.editForm)
                        .then(res => {
                            _this.loadData();
                            _this.$notify({
                                showClose: true,
                                message: '恭喜你，操作成功',
                                type: 'success'
                            });
                            _this.resetForm(formName);
                        });
                } else {
                    return false;
                }
            });
        },
        editHandle(row) {
            this.editForm = JSON.parse(JSON.stringify(row));
            this.dialogVisible = true;
        },
        delHandle(id) {
            this.$axios.post('/api/meeting/info/deleteById?id=' + id).then(res => {
                this.loadData();
                this.$notify({
                    showClose: true,
                    message: '恭喜你，操作成功',
                    type: 'success'
                });
            });
        },
        handleSizeChange(val) {
            this.size = val;
            this.loadData();
        },
        handleCurrentChange(val) {
            this.current = val;
            this.loadData();
        },
        endMeeting(row) {
            let _this = this;
            _this.$axios.post('/api/meeting/info/updateStatus?meetingId=' + row.id + '&status=20').then(res => {
                _this.loadData();
                _this.$notify({
                    showClose: true,
                    message: '恭喜你，操作成功',
                    type: 'success'
                });
            });
        }
    }
};
</script>

<style scoped>
.el-dropdown {
    font-size: 12px;
    color: #00D1B2;
}
</style>
