<template>
    <!-- 培训管理-标签管理 -->
    <div class="label-manage-wrap traing-manage">
        <div class="top-wrap">
            <el-button type="primary" @click="handleModifyLabel({})">新增标签</el-button>
            <el-input v-model="searchText" clearable 
                prefix-icon="el-icon-search" placeholder="请输入标签名称" @input="handleCurrentChange(1)" 
                style="width:240px;"></el-input>
        </div>
        <div class="table-wrap">
            <el-table :data="tableData" border v-loading="tableLoading">
                <el-table-column v-for="column in tableColumn" :key="column.key" 
                    :label="column.label" align="center"
                    :prop="column.key"
                    :min-width="column.minWidth">
                </el-table-column>
                <el-table-column label="操作" align="center">
                    <template slot-scope="{row}">
                        <el-button type="text" @click="handleModifyLabel(row)">编辑</el-button>
                        <el-button type="text" @click="deleteLabel(row)" style="color:red;">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                layout="total,prev,pager,next,jumper" 
                background
                :current-page="currentPage"
                @current-change="handleCurrentChange"
                :page-size="pageSize" 
                :total="total"
                style="text-align:right;margin-top:30px;">
            </el-pagination>
        </div>
        <!-- 添加标签弹窗 -->
        <el-dialog
            :title="currentLabel.TagId?'编辑标签':'添加标签'"
            :visible.sync="isModifyDialogShow"
            :close-on-click-modal="false"
            :modal-append-to-body="false"
            @close="isModifyDialogShow=false"
            width="589px"
            v-dialogDrag
            center
            >
            <div class="dialog-container">
                <div class="input-item">
                <el-input  placeholder="请输入标签名称" v-model.trim="currentLabel.TagName" required ></el-input>
                </div>
                <p class="form-hint">注：名称不得超过5个字</p>
            </div>
            <div class="foot-container">
                <el-button @click="isModifyDialogShow=false">取 消</el-button>
                <el-button type="primary" @click="modifyLabel">确认</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import {labelTableColumn} from './config/tableColumn'
import {TagInterface} from '@/api/modules/trainingApi'
export default {
    data() {
        return {
            /* table */
            tableLoading:false,
            tableData:[],
            tableColumn:labelTableColumn,
            searchText:'',
            /* table-page */
            currentPage:1,
            pageSize:10,
            total:0,
            /* modify label */
            currentLabel:{},
            isModifyDialogShow:false,
        };
    },
    methods: {
        handleModifyLabel(data){
            this.currentLabel = _.cloneDeep(data)
            this.isModifyDialogShow = true
        },
        async modifyLabel(){
            if(!this.currentLabel.TagName){
                this.$message.warning("请输入标签名称")
                return
            }
            if(this.currentLabel.TagName.length>5){
                this.$message.warning("标签名称过长,请重新编辑")
                return
            }
            let res = null
            if(this.currentLabel.TagId){
                //edit
                res = await TagInterface.editTag({
                    TagId:this.currentLabel.TagId,
                    TagName:this.currentLabel.TagName
                })
            }else{
                //add
                res = await TagInterface.addTag({
                    TagName:this.currentLabel.TagName
                })
            }
            if(res.Ret!==200) return 
            //添加/编辑成功
            this.$message.success(`${this.currentLabel.TagId?'编辑':'添加'}成功`)
            this.currentPage = 1
            this.getTableData()
            this.isModifyDialogShow = false
        },
        deleteLabel(label){
            if(label.VideoTotal!==0){
                this.$confirm('该标签已关联视频，删除失败','提示',{confirmButtonText:'知道了',showCancelButton:false,type:'error'})
                return
            }
            this.$confirm(
                '删除后不可恢复，是否确认删除该标签？',
                '提示',
                {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
                }
            ).then(()=>{
                TagInterface.deleteTag({
                    TagId:label.TagId
                }).then(res=>{
                    if(res.Ret!==200) return 
                    this.$message.success('删除成功')
                    this.currentPage=1
                    this.getTableData()
                })
            }).catch(()=>{}).finally(()=>{})
        },
        getTableData(){
            this.tableLoading = true
            TagInterface.getTagList({
                PageSize:this.pageSize,
                CurrentIndex:this.currentPage,
                Keyword:this.searchText
            }).then(res=>{
                this.tableLoading = false
                if(res.Ret!==200) return
                if(!res.Data){
                    this.tableData = []
                    this.total = 0
                    return
                } 
                this.tableData = res.Data.List||[]
                this.total = res.Data.Paging.Totals
            })
        },
        handleCurrentChange(page){
            this.currentPage = page
            this.getTableData()
        }
    },
    mounted(){
        this.getTableData()
    }
};
</script>

<style scoped lang="scss">
@import "./css/manage.scss";
</style>
