<template>
    <div>
        <el-button type="primary" size="mini" @click="handleEdit" >头条广告应用管理</el-button>
        <el-dialog 
            title="头条广告应用管理"
            :visible.sync="visible"
            width="950px"
        >
            <el-form :model="queryForm" ref="ttqueryForm" :inline="true">
                <el-form-item>
                    <el-button type="cyan" icon="el-icon-search" size="mini" @click="handleQuery">刷新</el-button>
                    <el-button type="primary" icon="el-icon-plus" size="mini" @click="addApp">新建</el-button>
                </el-form-item>
            </el-form>
            <el-table :data="appList" v-loading="loading">
                <el-table-column label="应用名称" prop="appName" align="center" width="90"/>
                <el-table-column label="应用ID" prop="appId" align="center" width="150"/>
                <el-table-column label="应用密钥" prop="appSecret" align="center"/>
                <el-table-column label="归属" prop="useType" align="center" width="90">
                    <template slot-scope="scope">
                        <div>{{scope.row.useType === 0 ? '数据系统' : scope.row.useType === 1 ? '监控系统' : scope.row.useType === 2 ? '游戏数据' : '其它'}}</div>
                    </template>
                </el-table-column>
                <el-table-column label="Enable?" prop="enabled" align="center" width="90">
                    <template slot-scope="scope">
                        <el-switch
                            v-model="scope.row.enabled"
                            @change="handleStatusChange(scope.row)"
                        ></el-switch>
                    </template>
                </el-table-column>
                <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="150">
                    <template slot-scope="scope" v-if="scope.row.id && typeof scope.row.id === 'number'">
                        <el-button
                            size="mini"
                            type="text"
                            icon="el-icon-edit"
                            @click="handleEditApp(scope.row)"
                        >编辑</el-button>
                        <el-button
                            size="mini"
                            type="text"
                            icon="el-icon-delete-solid"
                            style="color: red"
                            @click="handleDel(scope.row)"
                        >删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!-- <span slot="footer" class="dialog-footer">
                <el-button @click="openTenEditSwitch = false">关 闭</el-button>
            </span> -->
        </el-dialog>

        <el-dialog 
            title="新增头条广告应用"
            :visible.sync="addVisible"
            width="350px"
        >
            <el-form :model="addQueryForm" ref="addqueryForm" :rules="rules">
                <el-form-item label="应用名称" prop="appName">
                    <el-input
                        v-model="addQueryForm.appName"
                        placeholder="应用名称"
                        clearable
                        size="small"
                    />
                </el-form-item>
                <el-form-item label="应用ID" prop="appId">
                    <el-input
                        v-model.number="addQueryForm.appId"
                        placeholder="请输入应用ID"
                        clearable
                        size="small"
                    />
                </el-form-item>
                <el-form-item label="应用密钥" prop="appSecret">
                    <el-input
                        v-model="addQueryForm.appSecret"
                        placeholder="请输入应用密钥"
                        clearable
                        size="small"
                    />
                </el-form-item>
                <el-form-item label="Enable?" prop="enabled">
                    <el-switch v-model="addQueryForm.enabled"></el-switch>
                </el-form-item>
                <el-form-item label="归属" prop="useType">
                    <el-select v-model="addQueryForm.useType" placeholder="请选择" size="small">
                        <el-option label="数据系统" value="0"></el-option>
                        <el-option label="监控系统" value="1"></el-option>
                        <el-option label="游戏数据" value="2"></el-option>
                        <el-option label="其它" value="-1"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>

            <span slot="footer" class="dialog-footer">
                <el-button @click="addVisible = false">取 消</el-button>
                <el-button type="primary" @click="onSubmitSwitch()">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import { getAdApp, addAdApp, editAdApp, editAdAppEnabled, delAdApp } from "@/api/accounts/ttAdapi";
export default {
    data () {
        return {
            visible: false,
            queryForm: {
                enabled: true
            },
            appList: [],
            loading: false,

            addVisible: false,
            addQueryForm: {},
            rules: {
                appName: [ { required: true, message: '请输入应用名称', trigger: 'blur' } ],
                appId: [
                    { required: true, message: '请输入应用ID', trigger: 'blur' },
                    { type: 'number', message: '应用ID必须为数字值'}
                ],
                appSecret: [ { required: true, message: '请输入应用密钥', trigger: 'blur' } ],
                enabled: [ { required: true, message: '请选择是否可用', trigger: 'blur' } ],
                useType: [ { required: true, message: '请选择归属', trigger: 'blur' } ]
            },
        }
    },
    props: {

    },
    watch: {
        visible(val) {
            if (!val) {
                this.$emit("onChange");
            }
        }
    },
    methods: {
        /** 显示隐藏 */
        handleEdit() {
            this.visible = true;
            this.getList()
        },
        /** 获取数据 */
        getList() {
            this.loading = true;
            getAdApp().then(res => {
                this.loading = false
                this.appList = res.data
            }).catch(err => this.loading = false)
        },
        /** 搜索 */
        handleQuery() {
            this.getList()
        },
        /** 新建按钮 */
        addApp() {
            this.addQueryForm = { enabled: true }
            this.addVisible = true
        },
        /** 新增应用 */
        onSubmitSwitch() {
            this.$refs['addqueryForm'].validate((valid) => {
                if (valid) {
                    console.log(this.addQueryForm);
                    if (this.addQueryForm.id) {
                        editAdApp(this.addQueryForm).then(res => {
                            if(res.data){
                                this.msgSuccess("修改成功");
                                this.addVisible = false
                                this.getList()
                            }else{
                                console.error(res)
                            }
                        })
                    } else {
                        addAdApp(this.addQueryForm).then(res => {
                            if(res.data){
                                this.msgSuccess("新增成功");
                                this.addVisible = false
                                this.getList()
                            }else{
                                console.error(res)
                            }
                        })
                    }
                }
            })
        },
        /** 编辑应用 */
        handleEditApp(row) {
            this.addQueryForm = { ...row, useType: row.useType.toString() }
            this.addVisible = true
        },
        /** 修改状态 */
        handleStatusChange(row) {
            let text = row.enabled ? "启用" : "停用";
            this.$confirm('确认要"' + text + '""' + row.appName + '"应用吗?', "警告", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            }).then(function() {
                return editAdAppEnabled(row.id, row.enabled);
            }).then(() => {
                this.msgSuccess(text + "成功");
            }).catch(function() {
                row.enabled = row.enabled ? false : true;
            });
        },
        /** 删除应用 */
        handleDel(row) {
            this.$confirm('确定删除？', '删除', {
                distinguishCancelAndClose: true,
                confirmButtonText: '确定',
                cancelButtonText: '取消'
            }).then(() => {
                delAdApp(row.id).then(res => {
                    if(res.data) {
                        this.msgSuccess('删除成功');
                        this.getList()
                    }
                })
            })
            
        },
    }
}
</script>