<template>
    <div>
        <x-card>
            <div slot="content" class="table-page-search-wrapper">
                <a-form layout="inline">
                    <a-row :gutter="24">
                        <!-- <a-col :md="4" :sm="24">
                            <a-form-item>
                                <a-input v-model="queryParam.name" allow-clear placeholder="请输入小程序名称" />
                            </a-form-item>
                        </a-col>
                        <a-col :md="4" :sm="24">
                            <a-form-item>
                                <a-input v-model="queryParam.appid" allow-clear placeholder="请输入小程序appid" />
                            </a-form-item>
                        </a-col> -->

                        <a-col :md="4" :sm="24">
                            <a-form-model-item label="请选择年份：" prop="all_plan_one">
                                <a-date-picker mode="year" placeholder="请选择年份" format='YYYY'
                                    v-model="queryParam.searchvalue" style="width:100%" :open='yearShowOne'
                                    @change="handleChange" @openChange="openChangeOne" @panelChange="panelChangeOne"
                                    :disabled="modalDisabled" />
                            </a-form-model-item>
                        </a-col>

                        <a-col :md="(!advanced && 6) || 24" :sm="24">
                            <span class="table-page-search-submitButtons"
                                :style="(advanced && { float: 'right', overflow: 'hidden' }) || {}">
                                <a-button type="primary" @click="$refs.table.refresh(true)">查询</a-button>
                                <a-button style="margin-left: 8px" @click="() => (queryParam = {})">重置</a-button>
                            </span>
                        </a-col>
                    </a-row>
                </a-form>
            </div>
        </x-card>
        <a-card :bordered="false">
            <s-table ref="table" :columns="columns" :data="loadData" :alert="true" :rowKey="record => record.id"
                :onExport="onExport" :isexport="true">
            </s-table>
        </a-card>
    </div>
</template>
<script>
import { STable, XCard } from '@/components'
import { GetPhoneClickNumberList, Export } from '@/api/modular/main/info'
export default {
    components: {
        XCard,
        STable
    },
    data() {
        return {
            // 高级搜索 展开/关闭
            advanced: false,
            //true为打开，false为关闭
            yearShowOne: false,
            // 查询参数
            queryParam: {},
            // 表头
            columns: [
                {
                    title: '手机号',
                    dataIndex: 'clickphone'
                },
                {
                    title: '拨打时间',
                    dataIndex: 'clickdate'
                },
                {
                    title: '拨打次数',
                    dataIndex: 'clickcount'
                }
            ],
            // 加载数据方法 必须为 Promise 对象
            loadData: parameter => {
                return GetPhoneClickNumberList(Object.assign(parameter, this.queryParam)).then(res => {
                    return res.data
                })
            }
        }
    },
    methods: {
        handleOk() {
            this.$refs.table.refresh()
        },
        // 弹出日历和关闭日历的回调
        openChangeOne(status) {
            this.yearShowOne = status
        },
        // 得到年份选择器的值
        panelChangeOne(value) {
            this.queryParam.searchvalue = value
            this.yearShowOne = false
        },
        handleChange(value) {
            if (!value) {
                this.queryParam = {}
            }
        },
        // 导出数据
        onExport() {
            var query = Object.assign({}, this.queryParam);
            Export(query).then(res => {
                if (res.code === 0) {
                    window.open(res.data)
                } else {
                    this.$message.error(res.$message)
                }
            })
        }
    }
}
</script>
<style scoped lang="less">
/deep/ .ant-table td {
    white-space: nowrap;
}

/deep/ .ant-table-body {
    overflow-x: auto !important;
}

/deep/ .ant-table-thead>tr>th,
.ant-table-tbody>tr>td {
    white-space: nowrap;
}

.table-operator {
    margin-bottom: 18px;
}

button {
    margin-right: 8px;
}
</style>