<template>
    <div>
        <!--工具条-->
        <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
            <el-form>
                <el-form-item>
                    <div class="tool-wrap fl">
                        <el-select
                            v-model="curClassify"
                            placeholder="请选择"
                            @change="HandleSelectChange"
                        >
                            <el-option
                                v-for="(item,index) in totalData.classifyList"
                                :key="index"
                                :label="item.name"
                                :value="item.classify"
                            ></el-option>
                        </el-select>
                        <el-button @click="handleAdd()" v-if="true" type="primary">新增</el-button>
                    </div>
                </el-form-item>
            </el-form>
        </el-col>

        <!-- 列表 -->
        <el-table
            :data="totalData.dataList"
            highlight-current-row
            v-loading="listLoading"
            style="width: 100%;"
        >
            <el-table-column prop="tag" label="话题"></el-table-column>
            <el-table-column label="操作" width="150">
                <template slot-scope="scope">
                    <el-button size="small" @click="modifyHandler(scope.$index, scope.row)">修改</el-button>
                    <el-button
                        size="small"
                        type="danger"
                        @click="deleteHandler(scope.$index, scope.row)"
                    >删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <!--编辑界面-->
        <el-dialog
            :title="dialogTitle"
            :visible.sync="editFormVisible"
            :close-on-click-modal="false"
        >
            <el-form :model="editForm" label-width="80px" :rules="editFormRules" ref="editForm">
                <el-form-item label="分类" prop="classify">
                    <el-select
                        v-model="editForm.classify"
                        placeholder="请选择"
                        @change="HandleSelectDialogChange"
                    >
                        <el-option
                            v-for="(item,index) in totalData.classifyDialogList"
                            :key="index"
                            :label="item.name"
                            :value="item.classify"
                        ></el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="话题" prop="tag">
                    <el-input v-model="editForm.tag"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click.native="editFormVisible = false">取消</el-button>
                <el-button type="primary" @click.native="editSubmit" :loading="editLoading">提交</el-button>
            </div>
        </el-dialog>

        <!--分页导航-->
        <el-col :span="24" class="toolbar fl pagination-wrap">
            <div class="page-tips">总共{{total}}条记录，每页{{pageSize}}条，总共{{pageNum}}页</div>
            <el-pagination
                layout="prev, pager, next"
                @current-change="handleCurrentChange"
                :page-size="pageSize"
                :total="total"
                style="float:right;"
            ></el-pagination>
        </el-col>
    </div>
</template>

<script>
import {
    getClassifyList,
    getTagList,
    saveTag,
    deleteTag
} from '../../api/api.js'

export default {
    data() {
        return {
            key: 'value',
            page: 1,
            pageSize: 10,
            total: 0,
            totalData: {
                dataList: [],
                classifyList: [],
                classifyDialogList: []
            },
            listLoading: false,
            editLoading: false,
            editFormVisible: false,
            dialogTitle: '编辑',
            //编辑界面数据
            editForm: {
                tag: '',
                classify: ''
            },
            editFormRules: {
                tag: [
                    { required: true, message: '请输入话题', trigger: 'blur' }
                ],
                classify: [
                    { required: true, message: '请选择分类', trigger: 'blur' }
                ]
            },
            curClassify: ''
        }
    },
    computed: {
        pageNum() {
            return Math.ceil(this.total / this.pageSize)
        }
    },
    methods: {
        name() {},
        // 获取列表
        reqQuery() {
            let data = {
                page: this.page,
                size: this.pageSize,
                classify: this.curClassify
            }
            getTagList(data).then(result => {
                let { content, code } = result
                let { list, total } = content
                this.total = total
                this.$set(this.totalData, 'dataList', list)
                console.log('this.totalData:', this.totalData.dataList)
            })
        },
        reqGetClassifyList() {
            let data = {}
            getClassifyList(data)
                .then(result => {
                    let { content, code } = result
                    this.$set(this.totalData, 'classifyDialogList', content)
                    //深复制
                    let content2 = Object.assign([], content)
                    content2.unshift({
                        classify: '',
                        dispayType: '',
                        name: '全部'
                    })
                    this.$set(this.totalData, 'classifyList', content2)
                    this.reqQuery()
                })
                .catch(err => {})
        },
        // 修改 显示修改对话框
        modifyHandler(index, row) {
            this.dialogTitle = '修改'
              try {
                this.$refs['editForm'].resetFields()
            } catch (error) {}
            this.editFormVisible = true
            this.editForm = Object.assign({}, row)
        },
        deleteHandler(index, row) {
            let data = {
                tagCode: row.tagCode
            }
            this.$confirm('确认删除吗？', '提示', {}).then(() => {
                deleteTag(data)
                    .then(result => {
                        let { code, content } = result
                        if (code == 200) {
                            this.$notify({
                                title: '成功',
                                message: '删除成功',
                                type: 'success'
                            })
                        } else {
                        }
                        this.editFormVisible = false
                        this.reqQuery()
                    })
                    .catch(err => {})
            })
        },
        // 新增
        handleAdd() {
            this.editForm = {
                tagCode: '',
                tag: '',
                classify: ''
            }
               try {
                this.$refs['editForm'].resetFields()
            } catch (error) {}
            this.editFormVisible = true
            this.dialogTitle = '新增'
        },
        // 提交 新增/修改
        editSubmit() {
            let data = this.editForm
            this.$refs.editForm.validate(valid => {
                if (valid) {
                    this.editLoading = true
                    saveTag(data)
                        .then(result => {
                            let { code, content } = result
                            if (code == 200) {
                                this.$notify({
                                    title: '成功',
                                    message: '提交成功',
                                    type: 'success'
                                })
                            } else {
                            }
                            this.editLoading = false
                            this.editFormVisible = false
                            this.reqQuery()
                        })
                        .catch(err => {})
                }
            })
        },
        // 点击页数
        handleCurrentChange(val) {
            this.page = val
            this.reqQuery()
        },
        HandleSelectChange() {
            this.reqQuery()
        },
        // 编辑时选择分类
        HandleSelectDialogChange() {}
    },

    created() {
        this.reqGetClassifyList()
    }
}
</script>

<style lang="less" scoped>
.tool-wrap {
    color: #333333;
}

.pagination-wrap {
    .page-tips {
        height: 32px;
        line-height: 32px;
        color: #333333;
    }
}

.fl {
    display: flex;
    justify-content: space-between;
}

.fle {
    display: flex;
    justify-content: flex-end;
}

</style>