<template>
    <div class="party-table">
         <el-table border :data="list" style="width: 100%;height:100%" height="100%">
             <el-table-column
                 label="序号"
                 align="center"
                 width="100">
                   <template slot-scope="scope" >
                       <span>{{ (currentPage-1) * 10 + scope.$index + 1}}</span>
                   </template>    
             </el-table-column>   
             <el-table-column           
                align="center"
                v-for="(item,index) in feildList" 
                :key="index"
                :prop="item.prop"
                :label="item.label"
                :width="item.width">
                <template slot-scope="scope" >
                    <div v-if="item.isEdit" class="table-btn-group">
                        <el-tooltip content="修改" placement="top">
                            <el-button circle  @click="handleOperate(scope.row,'edit')">
                                <i class="icon-table icon-edit"></i>
                            </el-button>
                        </el-tooltip>
                         <el-tooltip content="重置密码" placement="top">
                            <el-button circle @click="handleOperate(scope.row,'reset')">
                               <i class="icon-table icon-reset"></i>
                            </el-button>
                        </el-tooltip>
                         <el-tooltip content="禁用" placement="top">
                            <el-button 
                             circle 
                             :disabled="scope.row.status == 2"
                             @click="handleOperate(scope.row,'disable')">
                                <i class="icon-table icon-disable"></i>
                            </el-button>
                        </el-tooltip>
                       <el-tooltip content="激活" placement="top">
                            <el-button 
                             circle 
                             :disabled="scope.row.status == 1"
                             @click="handleOperate(scope.row,'enable')">
                                <i class="icon-table icon-enable"></i>
                            </el-button>
                        </el-tooltip>
                    </div>
                    <div v-else>
                        <span v-if="item.prop==='type'">
                            {{scope.row[item.prop] | accoutType}}
                        </span>
                        <span v-else>{{scope.row[item.prop]}}</span>
                    </div>
                </template>
            </el-table-column>
    </el-table>
    </div>
</template>
<script>
// status 1 启用 2 禁用
export default {
    data(){
        return {

        }
    },
    props:{
        currentPage:{
            type:Number,
            default:1
        },
        list:{
            type:Array,
            default:()=>{return []}
        },
        feildList:{
            type:Array,
            default:()=>{return []}
        }
    },
    filters:{
        accoutType(type){
            switch (type){
                case "1":
                    return "平台账号"
                    break;
                case "2":
                    return "用户账号"
                    break;  
                case "3":
                    return "机顶盒账号"
                    break;  
                case "4":
                    return "运维账号"
                    break;
                default:
                    return ""             
            }
            
        }
    },
    methods:{
        handleOperate(row,type){
            if(type != 'edit'){
                 this.$confirm('确认进行此操作?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                    }).then(() => {
                        this.handlEmitMsg(row,type)
                    }).catch(() => {
                            
                    });
            }else{
                this.handlEmitMsg(row,type)
            }
            
        },
        handlEmitMsg(row,type){
            this.$emit(
                "action",
                {
                  row:row,
                  type:type
                }
            )
        }
    }
}
</script>
<style lang="less">
  @import '../../../style/table.less';
 
</style>