<template>
    <div class="zy-template">
        <div class="zy-main-title">项目管理</div>
        <div class="zy-module">
            <el-form :model="query" label-width="80px">
                <el-form-item label="关键字" class="zy-search-form-item">
                    <el-input v-model="query.name" size="mini" placeholder="项目名/项目编号" clearable></el-input>
                </el-form-item>
                <el-form-item label="状态" class="zy-search-form-item">
                    <el-select v-model="query.status" size="mini" clearable placeholder="不选默认全部">
                        <el-option label="禁用" value="0"/>
                        <el-option label="启用" value="1"/>
                    </el-select>
                </el-form-item>
                <el-button type="primary" size="mini" @click="submit">查询</el-button>
            </el-form>
        </div>

        <div class="zy-module">
            <el-button type="primary" size="small" style="margin-bottom: 20px;" @click="addDialog = true">增加</el-button>
            <el-table :data="page.records" max-height="800" stripe size="small"
                      header-cell-class-name="zy-table-header-cell" cell-class-name='zy-table-cell'>
                <el-table-column prop="name" label="项目名称" width="120" min-width="5%"/>
                <el-table-column label="项目备注" min-width="30%">
                    <template #default="scope">
                        <div style="height: 24px; overflow: hidden;">
                            {{scope.row.remark}}
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="状态" width="60">
                    <template #default="scope">
                        <el-tag type="danger" size="mini" v-if="scope.row.status==0">禁用</el-tag>
                        <el-tag type="success" size="mini" v-if="scope.row.status==1">启用</el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="createTime" label="创建时间" width="160"/>
                <el-table-column label="操作" width="100" min-width="10%">
                    <template #default="scope">
                        <el-button @click="handleUpdate(scope.row)" type="text" size="small">修改</el-button>
                        <el-button @click="handlePass(scope.row.id)" type="text" size="small" style="color: #67c23a"
                                   v-if="scope.row.status==0">启用
                        </el-button>
                        <el-button @click="handleRefuse(scope.row.id)" type="text" size="small" style="color: #f56c6c;"
                                   v-if="scope.row.status==1">禁用
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination class="zy-table-pagination" background layout="prev, pager, next"
                           :current-page="page.current" :total="page.total" :page-size="page.size"
                           @current-change="pagination"/>
        </div>

        <el-dialog title="添加项目" v-model="addDialog" width="500px">
            <el-form :model="addForm" label-width="100px" :rules="rules">
                <el-form-item label="项目名称:" prop="name">
                    <el-input v-model="addForm.name" maxlength="30"></el-input>
                </el-form-item>

                <el-form-item label="备注:">
                    <el-input type="textarea" v-model="addForm.remark" maxlength="100"></el-input>
                </el-form-item>
            </el-form>
            <template #footer>
				<span class="dialog-footer">
					<el-button @click="addDialog = false">取 消</el-button>
					<el-button type="primary" @click="addSubmit('addForm')">提 交</el-button>
				</span>
            </template>
        </el-dialog>

        <el-dialog title="修改项目" v-model="updateDialog" width="500px">
            <el-form ref="updateForm" :model="updateForm" label-width="100px" :rules="rules">
                <el-form-item label="项目名称:" prop="name">
                    <el-input v-model="updateForm.name" maxlength="30"></el-input>
                </el-form-item>

                <el-form-item label="备注:">
                    <el-input type="textarea" v-model="updateForm.remark" maxlength="100"></el-input>
                </el-form-item>
            </el-form>
            <template #footer>
				<span class="dialog-footer">
					<el-button @click="updateDialog = false">取 消</el-button>
					<el-button type="primary" @click="updateSubmit('updateForm')">提 交</el-button>
				</span>
            </template>
        </el-dialog>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                query: {
                    name: null,
                    status: null
                },
                page: {
                    current: 1,
                    size: 10,
                },
                addDialog: false, //增加表单
                updateDialog: false, //更新表单
                addForm: {//添加表单
                    name: null,
                    remark: null
                },
                updateForm: {//更新表单
                    id: null,
                    name: null,
                    remark: null
                },
                rules: {
                    name: [{
                        required: true,
                        message: '项目名必填',
                        trigger: 'blur'
                    }],
                }
            };
        },
        mounted() {
            this.getListPage(this.page);
        },
        methods: {
            /**
             * 提交查询条件
             */
            submit: function () {
                const params = {
                    name: this.query.name,
                    status: this.query.status
                };
                this.getListPage(params);
            },

            /**
             * 分页点击事件
             */
            pagination: function (current) {
                const params = {
                    name: this.query.name,
                    status: this.query.status,
                    current: current,
                    size: this.page.size,
                };
                this.getListPage(params);
            },

            /**
             * 获取设备列表
             */
            getListPage: function (params) {
                this.$http.Get(this.$global.item.listPage, params).then(res => {
                    console.log(res.data);
                    this.page = res.data;
                })
            },

            /**
             * 更新项目
             */
            handleUpdate: function (obj) {
                this.updateDialog = true;
                this.updateForm = {
                    id: obj.id,
                    name: obj.name,
                    remark: obj.remark
                }
            },

            /**
             * 提交增加表单
             */
            addSubmit: function (formName) {
                this.$refs[formName].validate((valid) => {
                    if (!valid) return false;
                    this.$http.Post(this.$global.item.save, this.addForm).then(res => {
                        this.$message.success("添加成功!");
                        this.refresh();
                    })
                });
            },

            /**
             * 提交更新表单
             */
            updateSubmit: function (formName) {
                this.$refs[formName].validate((valid) => {
                    if (!valid) return false;
                    this.$http.Post(this.$global.item.update, this.updateForm).then(res => {
                        this.$message.success("修改成功!");
                        this.refresh();
                    })
                });
            },

            /**
             * 禁用
             */
            forbidden: function (id) {
            },

            /**
             * 启用
             */
            permit: function (id) {
            },


            /**
             * 刷新列表
             */
            refresh: function () {
                this.addDialog = false;
                this.updateDialog = false;
                const params = {
                    key: this.query.key,
                    status: this.query.status,
                    current: this.page.current,
                    size: this.page.size,
                };
                this.getListPage(params);
            }
        }
    };
</script>

<style lang="scss" scoped>

</style>
