<style lang="scss" scoped>
.tableBox {
    background-color: #fff;
    margin: 15px 0px;
    padding: 15px 10px;
    .tableTop {
        position: relative;
        padding-bottom: 15px;
        border-bottom: 1px solid #e0e0e0;
        .selectTime {
            margin-right: 20px;
        }
        .add {
            position: absolute;
            top: 0;
            right: 0;
        }
    }
}
</style>
<template>
    <div class="video-report">
        <!-- 报表区域 -->

        <div class="tableBox">
            <div style="display:flex">
                <selectTreeAccount
                    v-model="searchAccountId"
                    style="display: inline-block;position: relative;margin-left: 0px;width:30%;margin-bottom:15px"
                    reqUrl="/monitor/projectMonitorWhiteList/getProjectAndAccountIds"
                />
                <a-button type="primary" @click="search" style="position:relative;top:2px">搜索</a-button>
            </div>

            <div class="tableTop" style="display:flex;justify-content: flex-end;">
                <a-button type="primary" @click="addWhite">添加</a-button>
            </div>
            <a-table
                size="middle"
                :columns="columns"
                :dataSource="data"
                bordered
                id="outTable"
                :pagination="ipagination"
                :loading="loading"
                ref="accountTable"
            >
                <a slot="action" slot-scope="text, records" @click="editConfiguration(records)">
                    编辑
                </a>
                <span slot="status" slot-scope="text, record">
                    <a-switch :checked="text == 0" @change="handleSwitchChang($event, record)" />
                </span>
            </a-table>
        </div>
        <a-modal
            v-model="whiteVisible"
            title="添加配置"
            @ok="whiteListOk"
            @cancel="handleCancel"
            :width="1000"
            :confirmLoading="confirmLoading"
        >
            <a-form layout="horizontal" :form="form" hide-required-mark :selfUpdate="true" v-bind="formItemLayout">
                <a-row :gutter="24">
                    <a-col :md="24" :sm="24" :xxl="24">
                        <a-form-item label="选择账户">
                            <selectTreeAccount
                                v-if="whiteVisible"
                                v-model="accountId"
                                style="display: inline-block;position: relative;margin-left: 0px;width:100%;margin-bottom:15px"
                                reqUrl="/monitor/projectMonitorWhiteList/getProjectAndAccountIds"
                            />
                        </a-form-item>
                    </a-col>
                </a-row>
                <a-row :gutter="24">
                    <a-col :md="24" :sm="24" :xxl="24">
                        <a-form-item label="第三方点击监测链接">
                            <a-input
                                v-decorator="[
                                    'clickTrackUrl',
                                    {
                                        rules: [
                                            { required: true, message: '请填写第三方点击监测链接' },
                                            { validator: handleConfirmValue }
                                        ]
                                    }
                                ]"
                                allow-clear
                            />
                        </a-form-item>
                    </a-col>
                </a-row>
                <a-row :gutter="24">
                    <a-col :md="24" :sm="24" :xxl="24">
                        <a-form-item label="第三方点击按钮监测链接(ab监测)">
                            <a-input
                                v-decorator="[
                                    'actionbarClickUrl',
                                    {
                                        rules: [{ validator: handleConfirmValueOkUndefind }]
                                    }
                                ]"
                                allow-clear
                            />
                            <span style="color:red">需媒体加白使用</span>
                        </a-form-item>
                    </a-col>
                </a-row>
            </a-form>
        </a-modal>
    </div>
</template>

<script>
import moment from 'moment'
import { JeecgListMixin } from '@/mixins/ipagination'
import { getAction, postAction, downFile, downFilePost, deleteAction } from '@/api/manage'
import { mapGetters } from 'vuex'
import selectTreeAccount from '@/components/formComponents/selectAccount.vue'
import pick from 'lodash.pick'
const columnsFixd = [
    {
        title: '监测状态',
        dataIndex: 'status',
        align: 'center',
        key: 'status',
        scopedSlots: { customRender: 'status' }
    },
    {
        title: '项目名称',
        dataIndex: 'projectName',
        align: 'center',
        key: 'projectName',
        scopedSlots: { customRender: 'projectName' }
    },
    {
        title: '账户ID',
        dataIndex: 'accountId',
        align: 'center',
        key: 'accountId',
        scopedSlots: { customRender: 'accountId' }
    },
    {
        title: '账户名称',
        dataIndex: 'accountName',
        align: 'center',
        key: 'accountName',
        scopedSlots: { customRender: 'accountName' }
    },

    {
        title: '三方点击监测链接',
        dataIndex: 'clickTrackUrl',
        align: 'center',
        width: 350,
        key: 'clickTrackUrl',
        scopedSlots: { customRender: 'clickTrackUrl' }
    },
    {
        title: '三方点击按钮监测链接(ab监测)',
        dataIndex: 'actionbarClickUrl',
        align: 'center',
        width: 350,
        key: 'actionbarClickUrl',
        scopedSlots: { customRender: 'actionbarClickUrl' }
    },
    {
        title: '配置人',
        dataIndex: 'userName',
        align: 'center',
        key: 'userName',
        scopedSlots: { customRender: 'userName' }
    },
    {
        title: '账户状态',
        dataIndex: 'accountStatus',
        align: 'center',
        key: 'accountStatus',
        customRender: function(t, r, index) {
            if (t == 0 || t == '0') {
                return '投放中'
            } else if (t == 1 || t == '1') {
                return '暂停'
            }
        }
    },
    {
        title: '操作',
        align: 'center',
        dataIndex: 'action',
        scopedSlots: { customRender: 'action' }
    }
]
const columnsWhite = [
    {
        title: '项目名称',
        dataIndex: 'projectName',
        align: 'center',
        key: 'projectName',
        scopedSlots: { customRender: 'projectName' }
    },
    {
        title: '运营负责人',
        align: 'center',
        dataIndex: 'responsibleId_dictText'
    },
    {
        title: '设计负责人',
        align: 'center',
        dataIndex: 'designResponsibleId_dictText'
    },
    {
        title: '操作',
        align: 'center',
        dataIndex: 'action',
        scopedSlots: { customRender: 'action' }
    }
]

export default {
    data() {
        return {
            columns: [...columnsFixd], //table的表头
            columnsWhite: columnsWhite,
            whiteVisible: false,
            loading: false,
            whiteLoading: false,
            confirmLoading: false,
            addColumns: [],
            data: [],
            dataWhiteList: [],
            accountId: undefined,
            searchAccountId: undefined,
            form: this.$form.createForm(this),
            ipagination: {
                current: 1,
                pageSize: 10,

                showTotal: (total, range) => {
                    return range[0] + '-' + range[1] + ' 共' + total + '条'
                },
                showQuickJumper: true,
                // showSizeChanger: true,
                // pageSizeOptions: ['10', '30', '50'],
                total: 0,
                onChange: (current, pageSize) => {
                    // 切换分页时的回调，
                    // 当在页面定义change事件时，切记要把此处的事件清除，因为这两个事件重叠了，可能到时候会导致一些莫名的bug
                    this.ipagination.current = current
                    this.ipagination.pageSize = pageSize
                    this.handleGetTableList()
                }
            },
            ipaginationWhite: {
                current: 1,
                pageSize: 10,

                showTotal: (total, range) => {
                    return range[0] + '-' + range[1] + ' 共' + total + '条'
                },
                showQuickJumper: true,
                // showSizeChanger: true,
                // pageSizeOptions: ['10', '30', '50'],
                total: 0,
                onChange: (current, pageSize) => {
                    // 切换分页时的回调，
                    // 当在页面定义change事件时，切记要把此处的事件清除，因为这两个事件重叠了，可能到时候会导致一些莫名的bug
                    this.ipaginationWhite.current = current
                    this.ipaginationWhite.pageSize = pageSize
                    this.getWhiteList()
                }
            },
            projectName: '',
            whiteListRul: '/monitor/trackMonitorConfigure/list',
            formItemLayout: {
                labelCol: { span: 6 },
                wrapperCol: { span: 16 }
            },
            type: 'add',
            editId: undefined
            // '/monitor/projectMonitorWhiteList/getProjectAndAccountIds'
        }
    },
    watch: {},
    components: {
        selectTreeAccount
    },
    methods: {
        ...mapGetters(['userInfo']),
        handleConfirmValue(rule, value, callback) {
            if (/(http|https):\/\/([\w.]+\/?)\S*/.test(value) && value != '') {
                callback()
            } else {
                callback('链接不能为空且开头为http://或https://')
            }
        },
        handleConfirmValueOkUndefind(rule, value, callback) {
            if (!!!value) {
                callback()
            } else if (/(http|https):\/\/([\w.]+\/?)\S*/.test(value)) {
                callback()
            } else {
                callback('链接开头为http://或https://')
            }
        },
        handleSwitchChang(checked, data) {
            const paramsData = {
                id: data.id,
                status: checked ? 0 : 1
            }
            postAction('/monitor/trackMonitorConfigure/edit', paramsData)
                .then(result => {
                    if (result.code === 200) {
                        this.handleGetTableList()
                    } else {
                        this.$message.error(result.message)
                    }
                })
                .catch(error => {
                    console.log(error, 'eeee')
                })
        },
        editConfiguration(item) {
            this.whiteVisible = true
            this.$nextTick(() => {
                this.type = 'edit'
                setTimeout(() => {
                    this.accountId = item.accountId
                }, 100)
                // this.accountId = item.accountId
                this.editId = item.id
                this.form.setFieldsValue(pick(item, 'clickTrackUrl', 'actionbarClickUrl'))
                //时间格式化
            })
        },
        handleGetTableList() {
            this.loading = true
            const params = {
                pageSize: this.ipagination.pageSize,
                pageNo: this.ipagination.current,
                userId: this.userInfo().id,
                accountId: this.searchAccountId
            }
            getAction(this.whiteListRul, params).then(res => {
                this.loading = false
                if (res.success) {
                    // let result = res.result
                    // this.data.push({ ...result, key: 1 })
                    // result.map((item, index) => {
                    //   item.key = index
                    // })
                    this.data = res.result.records.map((item, index) => {
                        return {
                            ...item,
                            key: index
                        }
                    })
                    this.ipagination.total = res.result.total
                } else {
                    this.$message.error(res.message)
                    this.loading = false
                }
            })
        },
        addWhite() {
            this.whiteVisible = true
        },
        search() {
            this.ipaginationWhite.current = 1
            this.handleGetTableList()
        },
        handleCancel() {
            this.form.resetFields()
            this.accountId = ''
            this.whiteVisible = false
        },
        whiteListOk() {
            this.form.validateFields((err, values) => {
                if (!err) {
                    if (this.accountId) {
                        this.confirmLoading = true
                        var params = { ...values }
                        params.accountId = this.accountId
                        params.userId = this.userInfo().id
                        if (this.type == ' add') {
                        } else {
                            params.id = this.editId
                        }
                        var url =
                            this.type == 'add'
                                ? '/monitor/trackMonitorConfigure/add'
                                : '/monitor/trackMonitorConfigure/edit'
                        postAction(url, params).then(res => {
                            this.confirmLoading = false
                            if (res.success) {
                                this.handleCancel()
                                this.handleGetTableList()
                            } else {
                                this.$message.error(res.message)
                            }
                        })
                    }
                }
            })
        },
        deleteWhite(id) {
            deleteAction('/monitor/projectMonitorWhiteList/delete', { id: id }).then(res => {
                if (res.success) {
                    this.handleGetTableList()
                } else {
                    this.$message.error(res.message)
                }
            })
        },
        filterOption(input, option) {
            return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
        }
    },

    mounted() {
        this.handleGetTableList()
    }
}
</script>
