<template>
  <div class="container">
    <div>{{msg}}</div>
    <div>{{propData}}</div>
  </div>
</template>

<script>
export default {
  name: 'demo',
    data: function() {
        return {
            propData: '11111111111111111111',
            isclosed: false,
            isopen: true,
            loading:false,
            currentPage:1,
            total:11,
            pageSize:10,
            popoverVisiable:false,
            tableData: {
                column: [
                    {
                        type: 'selection',
                    },
                    {
                        type: 'index',
                        label: '序号',
                        width: '100',
                        fixed:true,
                    },
                    {
                        prop: 'name',
                        label: '银行名称',
                        fixed:true,
                        width: '200',
                        render: (h, scope) => {
                            return (
                                <div>
                                <a style="color:#CEAB70;cursor:pointer">{scope.row.name}</a>
                                </div>
                        )
                        }
                    },
                    {
                        prop: 'branch',
                        label: '分支行',
                        width: '200'
                    },
                    {
                        prop: 'english',
                        label: '英文名称',
                        width: '300'
                    },
                    {
                        prop: 'engSimple',
                        label: '英文简称',
                        width: '200'
                    },
                    {
                        prop: 'code',
                        label: 'SwiftCode',
                        width: '200'
                    },
                    {
                        prop: 'status',
                        label: '状态',
                        width: '200'
                    },
                    {
                        label: '操作',
                        width: '200',
                        fixed: 'right',
                        render: (h, scope) => {
                            return (
                                <div>
                                <el-button
                            type="text"
                            onClick={ () => { this.handleEdit(scope.$index, scope.row) } }>编 辑</el-button>
                            <el-button
                            type="text"
                        class="samples-text-button-primary"
                            style="margin-right:10px"
                            onClick={ () => { this.handleEdit(scope.$index, scope.row) } }>生 效</el-button>
                            <el-popover
                            placement="left"
                            trigger="click"
                            onShow={ () => { this.handlePopShow() } }
                            popper-class="s-popover"
                            width="234">
                                <div  style="display:flex;align-items:center;justify-content:center;padding:20px 0;">
                                <i class="el-icon-question" style="font-size:26px;margin-right:10px;color:#e05e5e"></i>
                            确定禁用这条数据！
                        </div>
                            <div style="text-align: center; margin: 0">
                                <el-button size="small" type="primary" plain onClick={ () => { this.handleClosePopover()}}>取 消</el-button>
                            <el-button type="primary" size="small"  onClick={ () => { this.handleDelete(scope.$index, scope.row) } }>确 认</el-button>
                            </div>
                            <el-button
                            type="text"
                            slot="reference"
                        class="samples-text-button-disabled"
                            onClick={ (e) => { this.handleDelete(scope.$index, scope.row,e) } }>禁 用</el-button>
                            </el-popover>
                            </div>
                        )
                        }
                    },
                ],
                data: [{
                    date: '2016-05-02',
                    name: '中国银行',
                    branch: '支行',
                    english: 'AIDJFIDJFHUISKEHUISKE',
                    engSimple: 'ICBC',
                    code: 'ABCDEFG',
                    status: '禁用',
                } ,
                    {
                        date: '2016-05-02',
                        name: '中国银行',
                        branch: '支行',
                        english: 'AIDJFIDJFHUISKEHUISKE',
                        engSimple: 'ICBC',
                        code: 'ABCDEFG',
                        status: '禁用',
                    } ,
                    {
                        date: '2016-05-02',
                        name: '中国银行',
                        branch: '支行',
                        english: 'AIDJFIDJFHUISKEHUISKE',
                        engSimple: 'ICBC',
                        code: 'ABCDEFG',
                        status: '禁用',
                    } ,
                    {
                        date: '2016-05-02',
                        name: '中国银行',
                        branch: '支行',
                        english: 'AIDJFIDJFHUISKEHUISKE',
                        engSimple: 'ICBC',
                        code: 'ABCDEFG',
                        status: '禁用',
                    } ,
                    {
                        date: '2016-05-02',
                        name: '中国银行',
                        branch: '支行',
                        english: 'AIDJFIDJFHUISKEHUISKE',
                        engSimple: 'ICBC',
                        code: 'ABCDEFG',
                        status: '禁用',
                    } ,
                    {
                        date: '2016-05-02',
                        name: '中国银行',
                        branch: '支行',
                        english: 'AIDJFIDJFHUISKEHUISKE',
                        engSimple: 'ICBC',
                        code: 'ABCDEFG',
                        status: '禁用',
                    } ,
                    {
                        date: '2016-05-02',
                        name: '中国银行',
                        branch: '支行',
                        english: 'AIDJFIDJFHUISKEHUISKE',
                        engSimple: 'ICBC',
                        code: 'ABCDEFG',
                        status: '禁用',
                    } ,
                    {
                        date: '2016-05-02',
                        name: '中国银行',
                        branch: '支行',
                        english: 'AIDJFIDJFHUISKEHUISKE',
                        engSimple: 'ICBC',
                        code: 'ABCDEFG',
                        status: '禁用',
                    } ,
                    {
                        date: '2016-05-02',
                        name: '中国银行',
                        branch: '支行',
                        english: 'AIDJFIDJFHUISKEHUISKE',
                        engSimple: 'ICBC',
                        code: 'ABCDEFG',
                        status: '禁用',
                    } ,
                    {
                        date: '2016-05-02',
                        name: '中国银行',
                        branch: '支行',
                        english: 'AIDJFIDJFHUISKEHUISKE',
                        engSimple: 'ICBC',
                        code: 'ABCDEFG',
                        status: '禁用',
                    } ,
                    {
                        date: '2016-05-02',
                        name: '中国银行',
                        branch: '支行',
                        english: 'AIDJFIDJFHUISKEHUISKE',
                        engSimple: 'ICBC',
                        code: 'ABCDEFG',
                        status: '禁用',
                    } ,
                ],
                options:{
                    boundariesElement:"scrollParent"
                }
            }
        }
    },
    props: {
        propData: {
            type: String,
            default: '我是默认值'
        }
    },
    methods:{
    tablecellStyle({row, column, rowIndex, columnIndex}){
        //console.log(column)
        if(column.type == "default" ){
            return { 'padding-left':'20px'}
        }
        if( column.type == "index"){
            return { 'padding-left':'20px'}
        }
    },
    headerCellClass({row, column, rowIndex, columnIndex}){
        console.log(column);
        if(column.type == "index"){
            return 'indexTableHeaderStyle'
        }else if(column.type == "selection"){
            return ''
        }else{
            return 'samples-header-cell'
        }
    },
    handleSizeChange(){
    },
    handleCurrentChange(){
    },
    handleEdit(index, row){
        console.log(index, row)
        // this.$message(`点击的了编辑，索引：${ index }`)
    },
    handleDelete (index, row,h){
        let pop = this;
        console.log(pop);
        console.log(h);
    },
    handlePopShow(){
        // console.log('show');
        let pop = this;
        console.log(pop);
    },
    handleClosePopover(){
        document.querySelector("#app").click();
    }
}
}
</script>

<style lang="scss">
.container{
    text-align: center;
}
</style>
