<template>
    <div class='container'>
        <div class='handle-box'>
            <el-form :inline='true'>
                <el-form-item>
                    <el-input
                        v-model='searchForm.name'
                        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='inspectionResultTable'
            :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='name'
                label='模板名称'
                :show-overflow-tooltip='true'>
            </el-table-column>

            <el-table-column
                prop='isEnable'
                align='center'
                label='模板状态'>
                <template slot-scope='scope'>
                    <el-tag size='small' v-if='scope.row.isEnable === 10' type='success'>启用中</el-tag>
                    <el-tag size='small' v-else-if='scope.row.isEnable === 20' type='danger'>禁用中</el-tag>
                </template>
            </el-table-column>

            <el-table-column
                prop='type'
                align='center'
                label='模板类型'>
                <template slot-scope='scope'>
                    {{ scope.row.type == 10 ? '日常巡检' : '会议巡检' }}
                </template>
            </el-table-column>

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

            <el-table-column
                prop='icon'
                fixed='right'
                width='180px'
                label='操作'>
                <template slot-scope='scope'>
                    <el-button type='text' @click='editHandle(scope.row)'>编辑</el-button>
                    <el-divider direction='vertical'></el-divider>
                    <template>
                        <el-popconfirm title='确定删除这条数据吗？' @confirm='delHandle(scope.row.id)'>
                            <el-button type='text' slot='reference'>删除</el-button>
                        </el-popconfirm>
                    </template>
                    <el-divider direction='vertical'></el-divider>
                    <template>
                        <el-popconfirm :title='scope.row.isEnable==10?"确定要禁用这个模板吗？":"确定要启用这个模板吗？"'
                                       @confirm='updateIsEnableHandle(scope.row)'>
                            <el-button type='text' slot='reference'>{{ scope.row.isEnable == 10 ? '禁用' : '启用' }}
                            </el-button>
                        </el-popconfirm>
                    </template>
                </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='name'>
                            <el-input v-model='editForm.name' autocomplete='off' placeholder='请输入模板名称'></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span='12'>
                        <el-form-item label='模板类型:' prop='type'>
                            <el-select v-model='editForm.type' placeholder='请选择模板类型'>
                                <el-option
                                    v-for='item in templateTypeList'
                                    :key='item.value'
                                    :label='item.label'
                                    :value='item.value'>
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span='12'>
                        <el-form-item label='启用状态:' prop='isEnable'>
                            <el-select v-model='editForm.isEnable' placeholder='请选择启用状态'>
                                <el-option
                                    v-for='item in isEnableList'
                                    :key='item.value'
                                    :label='item.label'
                                    :value='item.value'>
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-divider content-position='center'>配置巡检项目</el-divider>
                <el-row>
                    <el-col :span='14'>
                        <div class='handle-box'>
                            <el-form :inline='true'>
                                <el-form-item>
                                    <el-input
                                        v-model='projectSearchForm.name'
                                        placeholder='项目名称'
                                        clearable>
                                    </el-input>
                                </el-form-item>

                                <el-form-item>
                                    <el-button @click='loadInspectionProjectData'>搜索</el-button>
                                </el-form-item>
                            </el-form>
                        </div>
                        <el-table
                            ref='inspectionProjectTableData'
                            :data='inspectionProjectTableData'
                            tooltip-effect='dark'
                            style='width: 100%'
                            size='mini'
                            border
                            stripe>
                            <el-table-column type='index' label='序号' width='50'>
                            </el-table-column>

                            <el-table-column prop='name' label='巡检项目名称' :show-overflow-tooltip='true'>
                            </el-table-column>

                            <el-table-column prop='icon' width='200px' label='操作'>
                                <template slot-scope='scope'>
                                    <el-button type='text' @click='addInspection(scope.row)'>添加</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                        <el-pagination
                            @size-change='handleSizeChangeProject'
                            @current-change='handleCurrentChangeProject'
                            layout='total, sizes, prev, pager, next, jumper'
                            :page-sizes='[5, 10, 15, 20]'
                            :current-page='inspectionProjectTablePage.current'
                            :page-size='inspectionProjectTablePage.size'
                            :total='inspectionProjectTablePage.total'>
                        </el-pagination>
                    </el-col>
                    <el-col :span='9' style='border-left: 1px solid #DCDFE6;margin-left: 8px;'>
                        <div style='margin-left: 8px;'>
                            巡检项目：
                            <el-card class='box-card'>
                                <el-tag
                                    v-for='(tag,index) in inspectionProjectList'
                                    :key='index'
                                    closable
                                    :type='tagType[Math.round(Math.random()*5)]'
                                    @close='removeTag(index)'>
                                    {{ tag.name }}
                                </el-tag>
                            </el-card>
                        </div>
                    </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: 'inspectionTemplateManage',
    components: {},
    watch: {
        //监听dialogVisible，关闭dialog时清空数据
        dialogVisible: function(newValue, oldValue) {
            if (!newValue) {
                this.inspectionProjectTablePage.current = 1;
                this.inspectionProjectTablePage.size = 5;
                this.inspectionProjectList = [];
                this.searchForm.name = '';
            }
        }
    },
    data() {
        return {
            dialogVisible: false,
            searchForm: {
                name: ''
            },
            projectSearchForm: {
                name: ''
            },
            templateTypeList: [{
                label: '日常巡检',
                value: 10
            }, {
                label: '会议巡检',
                value: 20
            }],
            isEnableList: [{
                label: '启用',
                value: 10
            }, {
                label: '禁用',
                value: 20
            }],
            editForm: {},
            total: 0,
            size: 10,
            current: 1,
            tableData: [],
            inspectionProjectTableData: [],
            inspectionProjectTablePage: {
                total: 0,
                size: 5,
                current: 1
            },
            inspectionProjectList: [],
            tagType: ['success', 'info', 'warning', 'danger', ''],
            editFormRules: {
                name: [
                    { required: true, message: '请输入模板名称', trigger: 'blur' }
                ],
                type: [
                    { required: true, message: '请选择模板类型', trigger: 'blur' }
                ],
                isEnable: [
                    { required: true, message: '请选择启用状态', trigger: 'blur' }
                ]
            }
        };
    },
    created() {
        this.loadData();
        this.loadInspectionProjectData();
    },
    methods: {
        loadData() {
            this.$axios.get('/api/inspection/template/list', {
                params: {
                    name: this.searchForm.name,
                    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;
            });
        },
        loadInspectionProjectData() {
            this.$axios.get('/api/inspection/project/list', {
                params: {
                    name: this.projectSearchForm.name,
                    current: this.inspectionProjectTablePage.current,
                    size: this.inspectionProjectTablePage.size
                }
            }).then(res => {
                this.inspectionProjectTableData = res.data.data.records;
                this.inspectionProjectTablePage.size = res.data.data.size;
                this.inspectionProjectTablePage.current = res.data.data.current;
                this.inspectionProjectTablePage.total = res.data.data.total;
            });
        },
        editHandle(row) {
            this.editForm = JSON.parse(JSON.stringify(row));
            //回显巡检项目数据
            this.$axios.get('/api/inspection/template/getProjectByTemplateId?templateId=' + row.id)
                .then(res => {
                    this.inspectionProjectList = res.data.data;
                });
            this.dialogVisible = true;
        },
        delHandle(id) {
            this.$axios.post('/api/inspection/template/deleteById?id=' + id).then(res => {
                this.loadData();
                this.$notify({
                    showClose: true,
                    message: '恭喜你，操作成功',
                    type: 'success'
                });
            });
        },
        handleClose() {
            this.resetForm('editForm');
        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
            this.dialogVisible = false;
            this.editForm = {};
        },
        submitForm(formName) {
            let _this = this;
            //封装请求参数prijectIds
            _this.editForm.inspectionProjectIds = _this.inspectionProjectList.map(t => {
                return t.id;
            });
            _this.$refs[formName].validate((valid) => {
                if (valid) {
                    _this.$axios.post('/api/inspection/template/saveOrUpdate', _this.editForm)
                        .then(res => {
                            _this.loadData();
                            _this.$notify({
                                showClose: true,
                                message: '恭喜你，操作成功',
                                type: 'success'
                            });
                            _this.resetForm(formName);
                        });
                } else {
                    return false;
                }
            });
        },
        handleSizeChange(val) {
            this.size = val;
            this.loadData();
        },
        handleCurrentChange(val) {
            this.current = val;
            this.loadInspectionProjectData();
        },
        handleSizeChangeProject(val) {
            this.inspectionProjectTablePage.size = val;
            this.loadInspectionProjectData();
        },
        handleCurrentChangeProject(val) {
            this.inspectionProjectTablePage.current = val;
            this.loadInspectionProjectData();
        },
        removeTag(index) {
            this.inspectionProjectList.splice(index, 1);
        },
        addInspection(data) {
            //判断是否重复添加
            let temp = this.inspectionProjectList.filter(t => {
                return t.id == data.id;
            });
            if (temp.length > 0) {
                this.$notify({
                    showClose: true,
                    message: '已存在重复的数据【' + temp[0].name + '】',
                    type: 'error'
                });
                return;
            }
            this.inspectionProjectList.push(data);
        },
        updateIsEnableHandle(row) {
            let _this = this;
            _this.$axios.post('/api/inspection/template/updateIsEnableById?templateId=' + row.id + '&isEnable=' + (row.isEnable == 10 ? '20' : '10'))
                .then(res => {
                    _this.loadData();
                    _this.$notify({
                        showClose: true,
                        message: '恭喜你，操作成功',
                        type: 'success'
                    });
                });
        }
    }
};
</script>

<style scoped>
.el-tag {
    margin: 4px;
}

.el-card {
    min-height: 300px;
    margin: 10px;
}
</style>
