<template>
    <div class="template_content">
        <!-- 搜索 -->
        <div class="search_box">
        <a-form layout="inline">
            <a-form-item label="标签名：">
                <a-input v-model="searchPage.name" placeholder="请输入标签名" allowClear></a-input>
            </a-form-item>
            <a-form-item>
                <a-button icon="search" type="primary" @click="handleSubmit">查询</a-button>
            </a-form-item>
        </a-form>
        </div>
        <!-- 主体内容 -->
        <div class="content_box">
            <!-- 表格操作 -->
            <div class="table_top">
                <a-button
                icon="plus"
                type="primary"
                class="btn_right_margin"
                @click="showModal('')"
                >添加</a-button>
            </div>
            <a-table
                tableLayout="fixed"
                :columns="columns"
                :dataSource="data"
                :loading="loading"
                :pagination="pagination"
                bordered
                size="small"
                @change="handleTableChange"
                rowKey="id"
            >
                
                <!-- 操作 -->
                <template slot="action" slot-scope="text, record">
                    <a-button
                        icon="edit"
                        type="primary"
                        class="btn_margin"
                        @click="showModal(record)"
                    >修改</a-button>
                    <a-button
                        icon="delete"
                        type="danger"
                        class="btn_margin"
                        @click="deleteRow(record)"
                    >删除</a-button>
                </template>
            </a-table>
        </div>

        <!-- 弹窗 -->
        <template>
            <a-modal 
            :visible="modalVisible" 
            :title="modalTitle"
            @ok="onSave"
            @cancel="onCancel"
            >
                <a-form-model
                    :model="formModel"
                    :label-col="{span:4}"
                    :wrapper-col="{span: 8}"
                    :rules="formRules"
                    ref="formModelRef"
                    >
                    <a-form-model-item
                        label="标签名称"
                        ref="nameVal"
                        prop="name"
                    >
                        <a-input v-model="formModel.name" @blur="blurValidate('nameVal')"></a-input>
                    </a-form-model-item>
                </a-form-model>

            </a-modal>
        </template>
    </div>
</template>

<script>
import {fetchList,addObj,putObj,delObj} from '@/api/biz/courseTag'
import {disposereq} from '@/utils/util'

let columns = [
    {
        title: "标签名",
        dataIndex: "name",
        align: "center"
    },
    {
        title: '操作',
        key: "action",
        scopedSlots: { customRender: "action" },
        align: "center"
    }
]

export default {
    data(){
        return {
            loading: false,
            searchPage: {
                pageIndex: 1,
                pageSize: 10,
                name: ""
            },
            columns: columns,
            data: [],
            pagination: {
                showQuickJumper: true,
                showSizeChanger: true
            },
            modalVisible: false,
            modalTitle: '添加',
            modalType: '',
            rowData: '',
            formModel: {
                name: ''
            },
            formRules: {
                name: [
                    {
                        required: true,
                        message: '不能为空',
                        trigger: 'blur'
                    },
                ]
            }
        }
    },
    created() {
        this.getList(this.searchPage)
    },
    beforeUpdate() {
        
    },
    methods: {
        getList(query){
            this.loading = true;
            fetchList(query).then(res => {
                if(res.code == 200){
                    this.loading = false
                    this.data = res.data;
                    const pager = { ...this.pagination };
                    pager.current = query.pageIndex;
                    pager.total = res.count;
                    this.pagination = pager;
                }else{
                    this.$message.info(res.resp_msg);
                }
            }).catch(err => {
                this.loading = false
                disposereq(this,err)
            })
        },
        blurValidate(prop){
            this.$refs[prop].onFieldBlur()
        },
        // 表格数据变化触发事件
        handleTableChange(pagination, filters, sorter) {
            const searchPage = { ...this.searchPage };
            searchPage.pageIndex = pagination.current;
            searchPage.pageSize = pagination.pageSize;
            this.loading = true;
            this.getList(searchPage);
        },
        // 搜索事件
        handleSubmit() {
            const searchPage = { ...this.searchPage };
            this.getList(searchPage);
        },
        // 显示对话框
        showModal(row) {
            this.modalVisible = true;
            // 判断添加或者编辑
            if (row == "") {
                this.modalTitle = '添加';
                this.modalType = "add";
                this.formModel.name = ""
                this.rowData = ''
            } else {
                this.modalTitle = '编辑';
                this.modalType = "edit";
                this.formModel.name = row.name
                this.rowData = row;
                
            }
        },
        // 删除行数据
        deleteRow(row) {
            delObj([row.id])
                .then(res => {
                    this.loading = false;
                    if (res.resp_code == 200) {
                        this.$message.success('删除成功');
                        const searchPage = { ...this.searchPage };
                        this.loading = true;
                        this.getList(searchPage);
                    } else {
                        this.$message.info(res.resp_msg);
                    }
                })
                .catch(err => {
                    disposereq(this, err);
                });
        },
        //对话框确定
        onSave(){
            this.$refs.formModelRef.validate(valid => {
                if(valid){
                    if(this.modalType == 'add'){
                        let data = {}
                        data.name = this.formModel.name
                        addObj(data).then(res => {
                            if(res.resp_code == 200){
                                this.modalVisible = false
                                this.$message.success('保存成功');
                                const searchPage = { ...this.searchPage };
                                this.loading = true;
                                this.getList(searchPage);
                            }else{
                                this.$message.info(res.resp_msg);
                            }
                        }).catch(err => {
                            disposereq(this,err)
                        })
                    }else if(this.modalType == 'edit'){
                        let data = {}
                        data.id = this.rowData.id
                        data.name = this.formModel.name
                        putObj(data).then(res => {
                            if(res.resp_code == 200){
                                this.modalVisible = false
                                this.$message.success('保存成功');
                                const searchPage = { ...this.searchPage };
                                this.loading = true;
                                this.getList(searchPage);
                            }else{
                                this.$message.info(res.resp_msg)
                            }
                        }).catch(err => {
                            disposereq(this,err)
                        })
                    }
                }
            })

        },
        //对话框取消
        onCancel(){
            this.modalVisible = false
            this.$refs.formModelRef.resetFields()
            
            
        }
    }
}
</script>
<style>
.template_content {
  background-color: #f0f2f5;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}
.search_box {
  width: 100%;
  box-sizing: border-box;
  padding: 14px;
  background-color: #fff;
}
.content_box {
  width: 100%;
  background-color: #fff;
  margin-top: 10px;
  padding: 14px;
}
.table_top {
  padding-bottom: 14px;
}
.btn_margin {
  margin: 0px 5px;
}
.btn_right_margin {
  margin-right: 10px;
}
</style>