<template>
    <div class="account-config-content">
        <div class="control-con-header">
            <a-form
                class="grid-form" layout="inline"
                :form="form"
                hide-required-mark
                @submit="handleQueryList"
            >
                <a-row class="grid-form-options">
                    <a-form-item
                        class="grid-form-item" label="账户"
                        :colon="false"
                    >
                        <acount-search class="acount-search-class" :appId.sync="acountId" :multiple="false"></acount-search>
                    </a-form-item>
                    <a-form-item class="form-handle-btn">
                        <a-button type="default" class="reset-class">重置</a-button>
                        <a-button type="primary" html-type="submit">查询</a-button>
                    </a-form-item>
                </a-row>
            </a-form>
            <a-button type="primary" class="upload-person" @click="handleAddAccountConfig">新建账户配置</a-button>
        </div>
        <div class="control-con-table">
            <a-table
                ref="table"
                size="middle"
                bordered
                :columns="columns"
                :dataSource="dataSource"
                :pagination="false"
            >
                <span slot="customTitle">
                    花费(元)
                    <a-tooltip placement="top">
                        <template slot="title">
                            <span>当日花费</span>
                        </template>
                        <a-icon type="smile-o"/>
                    </a-tooltip>
                </span>
                <span slot="acountRelax" slot-scope="text, record">
                    <a-switch :checked="text" @change="handleSwitchChang"/>
                </span>
                 <span slot="action" slot-scope="text, record">
                    <a @click="handleEdit(record)">编辑</a>
                    <a-divider type="vertical" />
                    <a @click="handleDelete(record)">删除</a>
                    <a-divider type="vertical" />
                    <a @click="handleDelete(record)">修改出价</a>
                    <a-divider type="vertical" />
                    <a @click="handleDelete(record)">修改预算</a>
                </span>
            </a-table>
            <a-pagination
                class="pagin-table-class"
                :total="totalAll"
                :show-total="total => `共 ${totalAll} 条`"
                size="small"
                show-size-changer
                show-quick-jumper
                @change="onShowSizeChange"
                @showSizeChange="onShowSizeChange"
            />
        </div>
        <configuration-modal
            :title="accountModalTitle"
            :visible="relaxVisible"
            @relaxSure="handleRelaxSure"
            @relaxCancel="handleRelaxCancel"
        >
        </configuration-modal>
    </div>
</template>
<script>
import AcountSearch from '@/views/modules/Statistics/components/Treeselect.vue';
import ConfigurationModal from './components/configuration-modal.vue';
export default {
    name: 'account-config',
    components: {
        AcountSearch,
        ConfigurationModal
    },
    data() {
        return {
            relaxVisible: false,
            accountModalTitle: 'add',
            acountId: undefined, // 搜索的账户ID
            totalAll: 0,
            dataSource: [
                {
                    orientationName: false,
                    accountName: '新仇旧恨',
                    populationType: '123',
                    typeStr: '北京市',
                    statDate: '2019-08-12',
                    coverNum: 765,
                    statusStr: '已解决',
                    chujia: 5654
                }
            ],
            columns: [
                {
                    title: '开关',
                    align: 'center',
                    dataIndex: 'orientationName',
                    scopedSlots: {customRender: 'acountRelax'}
                },
                {
                    title: '广告账户名称',
                    align: 'center',
                    dataIndex: 'accountName'
                },
                {
                    title: '账户ID',
                    align: 'center',
                    dataIndex: 'typeStr'
                },
                {
                    title: '创建时间',
                    dataIndex: 'statDate',
                    align: 'center'
                },
                {
                    title: '账户余额',
                    dataIndex: 'coverNum',
                    align: 'center'
                },
                {
                    title: '账户日预算量（元）',
                    dataIndex: 'statusStr',
                    align: 'center'
                },
                {
                    title: '出价（元）',
                    dataIndex: 'chujia',
                    align: 'center'
                },
                {
                    align: 'center',
                    dataIndex: 'populationType',
                    slots: {title: 'customTitle'},
                },
                {
                    title: '操作',
                    dataIndex: 'action',
                    align: 'center',
                    scopedSlots: {customRender: 'action'}
                }
            ]
        };
    },
    created() {
        this.form = this.$form.createForm(this);
    },
    mounted() {

    },
    methods: {
        handleQueryList(event) {
            event.preventDefault();
            const paramsData = this.form.getFieldsValue();
        },
        onShowSizeChange(current, pageSize) {
            const paramsData = this.form.getFieldsValue();
            this.tablePag = {
                page: current,
                size: pageSize
            };
            // this.handleGetTableList(paramsData);
        },
        handleSwitchChang(checked) {
            console.log(checked, 'switch-checked');
        },
        handleEdit(data) {
            console.log(data, 'data-edit');
        },
        handleDelete(data) {
            console.log(data, 'data-delete');
        },
        handleAddAccountConfig() {
            this.accountModalTitle = 'add';
            this.relaxVisible = true;
        },
        handleRelaxSure(data) {
            console.log(data, 'data--确认弹窗');
            this.relaxVisible = false;
        },
        handleRelaxCancel() {
            console.log('data--取消弹窗');
            this.relaxVisible = false;
        },
    }
};
</script>
<style lang="less" scoped>
    @import "account-config";
</style>