<template>
    <div class="account-list-page">

        <el-button 
            type="primary" 
            @click="showEditAccount=true;activeTermId=0;initData={}"
            v-permission="permissionBtn.dataSourcePermission.dataSource_account_add"
        >新增终端账号</el-button>
        <el-table
            style="margin-top:30px"
            :data="tableData"
            border
        >
            <el-table-column
                v-for="col in tableColOpts"
                :key="col.key"
                :label="col.name"
                :prop="col.key"
                :sortable="col.sortable"
                align="center"
            >
                <template slot-scope="scope">
                    <span 
                        v-if="col.key==='Status'"
                        :style="{color:scope.row.Status===1?'':'#FF0000'}"
                    >{{scope.row.Status===1?'启用':'禁用'}}</span>
                    <span v-else>{{scope.row[col.key]}}</span>
                </template>
            </el-table-column>
            <el-table-column label="操作" align="center" width="100">
                <template slot-scope="scope">
                    <span 
                        style="color:#409EFF;cursor: pointer;" 
                        @click="handleEditAccount(scope.row)"
                        v-permission="permissionBtn.dataSourcePermission.dataSource_account_edit"
                    >编辑</span>
                    <span 
                        style="color:#409EFF;cursor: pointer;" 
                        @click="handleSetAccountStatus(scope.row,2)" 
                        v-if="scope.row.Status===1"
                        v-permission="permissionBtn.dataSourcePermission.dataSource_account_enable"
                    >禁用</span>
                    <span 
                        style="color:#409EFF;cursor: pointer;" 
                        @click="handleSetAccountStatus(scope.row,1)" 
                        v-if="scope.row.Status===2"
                        v-permission="permissionBtn.dataSourcePermission.dataSource_account_enable"
                    >启用</span>
                </template>
            </el-table-column>
            <div slot="empty">
                <tableNoData text="暂无数据"/>
            </div>
        </el-table>

        <!-- 新增/编辑终端账号 -->
        <EditAccount 
            v-model="showEditAccount" 
            :TerminalId="activeTermId" 
            :initData="initData"
            @change="getAccountList"
        />
    </div>
</template>

<script>
import EditAccount from './components/EditAccount.vue'
import {apiDataSource} from '@/api/modules/dataSource.js'
export default {
    components:{EditAccount},
    data() {
        return {
            tableData:[],
            tableColOpts:[
                {
                    name:'终端编码',
                    key:'TerminalCode',
                },
                {
                    name:'终端名称',
                    key:'Name',
                },
                {
                    name:'文件夹路径',
                    key:'DirPath',
                },
                {
                    name:'终端地址',
                    key:'ServerUrl',
                },
                {
                    name:'终端token',
                    key:'Value',
                },
                {
                    name:'数据源类型',
                    key:'Source',
                },
                {
                    name:'状态',
                    key:'Status',
                },
                {
                    name:'指标数据量',
                    key:'Num',
                },
                {
                    name:'更新时间',
                    key:'ModifyTime',
                    sortable:true
                },
            ],

            showEditAccount:false,
            activeTermId:0,
            initData:{},
        }
    },
    created() {
        this.getAccountList()
    },
    methods: {
        async getAccountList(){
            const res=await apiDataSource.accountList({})
            if(res.Ret===200){
                const arr=res.Data.List||[]
                this.tableData=arr
            }
        },

        // 点击编辑账号
        handleEditAccount(e){
            this.activeTermId=e.TerminalId
            this.initData=e
            this.showEditAccount=true
        },

        // 启用/禁用账号
        handleSetAccountStatus(e,status){
            apiDataSource.accountSet({
                TerminalId:e.TerminalId,
                Status:status
            }).then(res=>{
                if(res.Ret===200){
                    this.$message.success('操作成功')
                    this.getAccountList()
                }
            })
        }
    },
}
</script>

<style lang="scss" scoped>
.account-list-page{
    padding: 30px;
    border-radius: 4px;
    border: 1px solid #DCDFE6; 
    background-color: #fff;
    min-height: calc(100vh - 260px);
}
</style>