<style lang="scss" scoped>
.search-bar {
    display: flex;
    align-items: center;
}
.search-box p {
    display: inline-block;
    border: 1px solid #f2f2f2;
    border-radius: 5px;
    margin-right: 10px;
    padding: 5px 10px;
    cursor: pointer;
}
</style>
<style scoped>
.showNumBox {
    margin: 10px 0;
}
.showNumBox .ant-card-body {
    display: flex;
    justify-content: center;
}
.showNumBox p,
.showNumBox span {
    text-align: center;
    line-height: 40px;
    font-size: 30px;
    font-weight: 600;
    color: red;
    margin: 0;
}
.search-box .ant-card-body {
    padding: 5px 15px;
}
.showNumBox .ant-card-body .styleElse {
    line-height: 60px;
    height: 40px;
    font-size: 16px;
    font-weight: 400;
    margin-left: 10px;
}
.ant-modal-wrap .yincang .ant-modal-content .ant-modal-footer {
    display: none !important;
}
.yincang .ant-col-6 p {
    text-align: left;
    color: red;
    font-size: 16px;
    font-weight: 500;
}
.ant-table-thead div {
    font-weight: 700;
}
.tool-tip {
    position: absolute;
    top: 65px;
    right: 10px;
}
</style>
<style lang="less" scoped>
.ant-card-head .ant-tabs-bar {
    padding: 0;
}
.search-box .ant-card-body {
    padding: 5px 15px;
}
.search-box {
    padding: 15px 10px;
}
.search-box p {
    display: inline-block;
    border: 1px solid #f2f2f2;
    border-radius: 5px;
    margin-right: 10px;
    padding: 5px 10px;
    cursor: pointer;
}
.statistics .ant-col-6 .ant-card-body .styleElse {
    line-height: 60px;
    height: 40px;
    font-size: 16px;
    font-weight: 400;
    margin-left: 10px;
}
.ant-modal-wrap .yincang .ant-modal-content .ant-modal-footer {
    display: none !important;
}
.yincang .ant-col-6 p {
    text-align: left;
    color: red;
    font-size: 16px;
    font-weight: 500;
}
.ant-table-thead div {
    font-weight: 700;
}
.tool-tip {
    position: absolute;
    top: 65px;
    right: 10px;
}
.statistics {
    .ant-card-bordered {
        border: none;
    }
    .ant-card-head .ant-tabs {
        clear: both;
        margin-bottom: -13px;
        color: rgba(0, 0, 0, 0.65);
        font-weight: normal;
        font-size: 14px;
    }
    .duibi {
        position: absolute;
        right: 24px;
        top: 15px;
    }
    p {
        margin-bottom: 0;
    }
}
</style>

<style lang="less" scoped>
@import 'channelManage';
</style>
<template>
    <div class="channelManage config-project">
        <a-card>
            <div class="table-page-search-wrapper">
                <a-form layout="inline" :form="form" hide-required-mark :selfUpdate="true" @submit="handleQueryList">
                    <a-row :gutter="24">
                        <a-col :md="8" :sm="8" :xxl="6">
                            <!-- <a-form-item label="项目名称"> -->
                            <selectTable :projectId.sync="productId" ref="selectTable"></selectTable>
                        </a-col>

                        <a-col :md="8" :sm="8" :xxl="6">
                            <selectTableProject
                                :projectId.sync="projectId"
                                :productId="productId"
                                ref="selectTableProject"
                            ></selectTableProject>
                        </a-col>
                        <!--  -->
                        <a-col :md="8" :sm="8" :xxl="6">
                            <a-form-item label="账户ID">
                                <a-input placeholder="请输入账户ID" v-decorator="['accountId']"></a-input>
                            </a-form-item>
                        </a-col>
                        <a-col :md="8" :sm="8" :xxl="6">
                            <a-form-item label="状态">
                                <a-select
                                    v-decorator="['state', { initialValue: '' }]"
                                    placeholder="请选择"
                                    allow-clear
                                >
                                    <a-select-option :value="''">不限</a-select-option>
                                    <a-select-option :value="0">关</a-select-option>
                                    <a-select-option :value="1">开</a-select-option>
                                </a-select>
                            </a-form-item>
                        </a-col>
                        <a-col :md="8" :sm="8" :xxl="6">
                            <span style="float: left; overflow: hidden" class="table-page-search-submitButtons">
                                <a-button type="primary" icon="search" @click="handleQueryList">查询</a-button>
                                <a-button type="primary" @click="handleResetForm" icon="reload" class="middle-button"
                                    >重置</a-button
                                >
                                <a-button type="primary" icon="plus" @click="addNewChannel">新建渠道号</a-button>
                            </span>
                        </a-col>
                    </a-row>
                </a-form>
            </div>
        </a-card>

        <a-row style="margin-bottom:15px;margin-top:12px">
            <a-col :span="24">
                <div class="tableBody" style="min-height:200px;padding-bottom: 50px">
                    <a-table
                        :columns="columns"
                        :dataSource="dataSource"
                        :pagination="false"
                        :loading="dataLoading"
                        bordered
                        @change="tableChange"
                        size="middle"
                        style="word-break: break-all;font-size:16px;font-weight:600"
                        id="outTable"
                        ref="accountTable"
                    >
                        <span slot="state" slot-scope="text, record">
                            <a-switch :checked="text == 1" @change="onChangeStatus(text, record, 'state')" />
                        </span>
                        <span slot="usageLevel" slot-scope="text, record">
                            {{ text == 'account' ? '账户' : text == 'plan' ? '计划' : text == 'group' ? '组' : '-' }}
                        </span>
                        <span slot="action" slot-scope="text, records">
                            <a @click="editNewChannelElse(records)">编辑</a>
                            <a-divider type="vertical" />
                            <!-- <a @click="addNewChannelElse(records)">添加渠道号</a>
                            <a-divider type="vertical" /> -->
                            <a @click="toDetailList(records)">查看详情</a>
                        </span>
                    </a-table>
                    <a-pagination
                        size="small"
                        :showTotal="ipagination.showTotal"
                        style="float: right;margin-top:10px"
                        v-if="dataSource.length > 0"
                        showQuickJumper
                        show-size-changer
                        :pageSize.sync="ipagination.pageSize"
                        :total="ipagination.total"
                        v-model="ipagination.current"
                        @change="getDataSource"
                        @showSizeChange="getDataSource"
                    />
                </div>
            </a-col>
        </a-row>

        <a-modal
            title="修改渠道号"
            :width="1000"
            ref="modal"
            :visible="visibleDownLoad"
            @ok="handleOkImport"
            @cancel="
                visibleDownLoad = false
                cancel()
                formDownLoad.resetFields()
            "
            okText="提交"
            :confirmLoading="downLoading"
        >
            <span style="color:red"
                >注意：页面字段均为非必填项，填写哪项修改哪个字段，不填写不做修改！修改的内容为该账户下所有开启的渠道号！</span
            >
            <a-form :form="formDownLoad" v-if="editData">
                <a-form-item
                    label="使用层级"
                    :labelCol="{ xs: { span: 24 }, sm: { span: 5 } }"
                    :wrapperCol="{ xs: { span: 24 }, sm: { span: 19 } }"
                    class="require-class"
                >
                    <a-radio-group
                        disabled
                        button-style="solid"
                        v-decorator="[
                            'usageLevel',
                            {
                                rules: [{ required: true, message: '使用层级必选' }],
                                initialValue: editData.usageLevel
                            }
                        ]"
                    >
                        <a-radio-button value="account">账户</a-radio-button>
                        <a-radio-button value="plan">计划</a-radio-button>
                        <a-radio-button value="group">组</a-radio-button>
                    </a-radio-group>
                </a-form-item>
                <a-form-item
                    label="调起链接"
                    :labelCol="{ xs: { span: 24 }, sm: { span: 5 } }"
                    :wrapperCol="{ xs: { span: 24 }, sm: { span: 19 } }"
                >
                    <a-input v-decorator="['schemaUri']" allow-clear id="schemaUri" />
                    <a-tag color="#2db7f5" @click="getChangeAll('渠道号', 'formDownLoad', 'schemaUri')">+渠道号</a-tag>
                </a-form-item>
                <a-form-item
                    label="第三方点击监测链接"
                    :labelCol="{ xs: { span: 24 }, sm: { span: 5 } }"
                    :wrapperCol="{ xs: { span: 24 }, sm: { span: 19 } }"
                >
                    <a-input
                        v-decorator="[
                            'clickTrackUrl',
                            {
                                rules: [{ validator: handleConfirmValueOkUndefind }]
                            }
                        ]"
                        allow-clear
                        id="clickTrackUrl"
                    />
                    <a-tag color="#2db7f5" @click="getChangeAll('渠道号', 'formDownLoad', 'clickTrackUrl')"
                        >+渠道号</a-tag
                    >
                </a-form-item>
                <a-form-item
                    label="第三方actionBar监测链接"
                    :labelCol="{ xs: { span: 24 }, sm: { span: 5 } }"
                    :wrapperCol="{ xs: { span: 24 }, sm: { span: 19 } }"
                >
                    <a-input
                        v-decorator="[
                            'actionbarClickUrl',
                            {
                                rules: [{ validator: handleConfirmValueOkUndefind }]
                            }
                        ]"
                        allow-clear
                        id="actionbarClickUrl"
                    />
                    <a-tag color="#2db7f5" @click="getChangeAll('渠道号', 'formDownLoad', 'actionbarClickUrl')"
                        >+渠道号</a-tag
                    >
                </a-form-item>
                <a-form-item
                    label="是否循环使用"
                    :labelCol="{ xs: { span: 24 }, sm: { span: 5 } }"
                    :wrapperCol="{ xs: { span: 24 }, sm: { span: 19 } }"
                    class="require-class"
                >
                    <a-select v-decorator="['isCycle']" placeholder="请选择" style="width:200px" allow-clear>
                        <a-select-option :value="0">否</a-select-option>
                        <a-select-option :value="1">是</a-select-option>
                    </a-select>
                </a-form-item>
            </a-form>
        </a-modal>
    </div>
</template>

<script>
import ARow from 'ant-design-vue/es/grid/Row'
import ACol from 'ant-design-vue/es/grid/Col'
import moment from 'moment'
import { getAction, postAction, downFile, downFilePost } from '@/api/manage'
import selectTable from '@/views/modules/material/comment/selectTable.vue'
import selectTableProject from '@/views/modules/Statistics/components/selectPagination.vue'
import qs from 'qs'
import { mapGetters } from 'vuex'
import Vue from 'vue'
import { ACCESS_TOKEN } from '@/store/mutation-types'
import $ from 'jquery'
const fileSuffix = ['xlsx', 'xls', 'zip']
let TTcolumns = [
    {
        title: '状态',
        dataIndex: 'state',
        scopedSlots: { customRender: 'state' },
        align: 'center',
        key: 'state'
    },
    {
        title: '产品名称',
        dataIndex: 'productName',
        scopedSlots: { customRender: 'productName' },
        align: 'center',
        key: 'productName'
    },
    {
        title: '项目名称',
        dataIndex: 'projectName',
        scopedSlots: { customRender: 'projectName' },
        align: 'center',
        key: 'projectName'
    },
    {
        title: '账户名称',
        dataIndex: 'authName',
        scopedSlots: { customRender: 'authName' },
        align: 'center',
        key: 'authName'
    },
    {
        title: '账户ID',
        dataIndex: 'accountId',
        scopedSlots: { customRender: 'accountId' },
        align: 'center',
        key: 'accountId'
    },
    {
        title: '账户所属人',
        dataIndex: 'realname',
        scopedSlots: { customRender: 'realname' },
        align: 'center',
        key: 'realname'
    },

    { 
        title: '创建时间(最新创建时间)',
        dataIndex: 'stateDate',
        scopedSlots: { customRender: 'stateDate' },
        align: 'center',
        key: 'stateDate'
    },
    {
        title: '使用层级',
        dataIndex: 'usageLevel',
        scopedSlots: { customRender: 'usageLevel' },
        align: 'center',
        key: 'usageLevel'
    },

    {
        title: '操作',
        dataIndex: 'action',
        scopedSlots: { customRender: 'action' },
        align: 'center',
        width:200,
        key: 'action'
    }
]

export default {
    components: {
        ACol,
        ARow,
        selectTable,
        selectTableProject
    },

    data() {
        return {
            tokenHeader: { 'X-Access-Token': Vue.ls.get(ACCESS_TOKEN) },
            fileList: [],
            dataFile: null,
            loadDisabled: false,
            productId: '',
            projectId: '',
            accountId: '',
            visibleChannel: false,
            visibleDownLoad: false,
            editData: null,
            downLoading: false,
            fileUrl: '',
            projectIdDownLoad: '',
            productIdDownLoad: '',
            channelType: 'a',
            createType: '1',
            typeAccountId: null,
            typeProjectId: null,
            indexAll: 0,
            spinning: false,
            form: this.$form.createForm(this),
            formDownLoad: this.$form.createForm(this),
            exportloading: false,
            dateRange: [moment().subtract(1, 'weeks'), moment()],
            noImg: require('@/assets/noImg.png'),
            validationRules: {
                bid: [
                    {
                        required: true,
                        message: '出价信息必须填写'
                        // validator: this.validateBid,
                    }
                ]
            },
            ipagination: {
                current: 1,
                pageSize: 10,
                //   pageSizeOptions: ['10', '20', '30'],
                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
                }
            },
            value: 'valid',
            KSaccountList: [],
            TTaccountList: [],

            KSdesignList: [],
            TTdesignList: [],

            operateDisabled: false,
            duration: 1000,
            //treeselect的参数
            treeValue: [],
            treeData: [],

            type: 3,

            operate: '',
            designList: [],

            tabKey: 1,

            loading: false,
            columns: [...TTcolumns],
            dataSource: [],

            tableTab: 1,

            newPlan: 0,
            effectPlan: 0,

            openOptions: false,

            target: 'createTime',
            order: 'descend',
            dataLoading: false,
            url: '/channel/channelManagementHome',
            modifyPriceVisible: false,
            modifyPriceLoading: false,
            modifyPriceDetail: null,
            accountVisible: false,
            againLoading: false,
            accountProjectDetail: null,
            accountProjectList: []
        }
    },
    methods: {
        moment,
        handleConfirmValueOkUndefind(rule, value, callback) {
            if (!!!value) {
                callback()
            } else if (/(http|https):\/\/([\w.]+\/?)\S*/.test(value)) {
                callback()
            } else {
                callback('链接开头为http://或https://')
            }
        },
        getChangeAll(type, form, field) {
            var node = document.getElementById(field)
            var v = ''
            if (field == 'channelName' || field == 'channelCode') {
                v = '-{{' + type + '}}-'
            } else {
                v = '-{{' + type + '}}-'
            }

            if (document.selection) {
                //IE
                node.focus()
                var sel = document.selection.createRange()
                sel.text = v
                sel.select()
                if (field == 'channelName') {
                    this[form].setFieldsValue({ channelName: sel.text })
                } else if (field == 'channelCode') {
                    this[form].setFieldsValue({ channelCode: sel.text })
                } else if (field == 'schemaUri') {
                    this[form].setFieldsValue({ schemaUri: sel.text })
                } else if (field == 'clickTrackUrl') {
                    this[form].setFieldsValue({ clickTrackUrl: sel.text })
                } else if (field == 'actionbarClickUrl') {
                    this[form].setFieldsValue({ actionbarClickUrl: sel.text })
                }
            } else if (node.selectionStart || node.selectionStart == '0') {
                //MOZILLA/GOOGLE
                var startPos = node.selectionStart
                var endPos = node.selectionEnd
                var restoreTop = node.scrollTop
                node.value = node.value.substring(0, startPos) + v + node.value.substring(endPos, node.value.length)
                if (restoreTop > 0) {
                    node.scrollTop = restoreTop
                }
                if (field == 'channelName') {
                    this[form].setFieldsValue({ channelName: node.value })
                } else if (field == 'channelCode') {
                    this[form].setFieldsValue({ channelCode: node.value })
                } else if (field == 'schemaUri') {
                    this[form].setFieldsValue({ schemaUri: node.value })
                } else if (field == 'clickTrackUrl') {
                    this[form].setFieldsValue({ clickTrackUrl: node.value })
                } else if (field == 'actionbarClickUrl') {
                    this[form].setFieldsValue({ actionbarClickUrl: node.value })
                }
                node.focus()
                node.selectionStart = startPos + v.length
                node.selectionEnd = startPos + v.length
                // this.channelName = node.value
            } else {
                //OTHER
                node.value += v
                // console.log(node.value)
                if (field == 'channelName') {
                    this[form].setFieldsValue({ channelName: node.value })
                } else if (field == 'channelCode') {
                    this[form].setFieldsValue({ channelCode: node.value })
                } else if (field == 'schemaUri') {
                    this[form].setFieldsValue({ schemaUri: node.value })
                } else if (field == 'clickTrackUrl') {
                    this[form].setFieldsValue({ clickTrackUrl: node.value })
                } else if (field == 'actionbarClickUrl') {
                    this[form].setFieldsValue({ actionbarClickUrl: node.value })
                }
                node.focus()
                // this.channelName = node.value
            }
        },
        onChangeStatus(text, rescord, type) {
            let status = text === 0 ? 1 : 0
            let url = ''
            let params = {}
            params.accountId = rescord.accountId
            params.state = status
            url = '/channel/updateAccountChannelState'
            this.getAction(url, params).then(res => {
                if (res.success) {
                    const paramsData = this.form.getFieldsValue()
                    this.handleGetTableList(paramsData)
                } else {
                    this.$message.error(res.message)
                }
            })
        },
        overUpload(file) {},
        handleChange() {
            this.loadDisabled = false
            this.$message.success('文件导入成功')
        },
        beforeUpload(file) {
            // this.cosUpload(file)
            // if (process.env.NODE_ENV == 'development') {
            //   this.uploadAction = `/jeecg-boot/kuaishouAppPackage/importAppExcel?projectId=${this.projectId}&platform=${
            //     this.appType == 'ios' ? +this.platform + 2 : +this.platform
            //   }&imageUrl=${this.fileUrl}`
            // } else if (process.env.NODE_ENV == 'debug') {
            // } else if (process.env.NODE_ENV == 'production') {
            //   this.uploadAction = `${this.axios.defaults.baseURL}/kuaishouAppPackage/importAppExcel?projectId=${
            //     this.projectId
            //   }&platform=${this.appType == 'ios' ? +this.platform + 2 : +this.platform}&imageUrl=${this.fileUrl}`
            // }
            // this.dataFile = file
            this.dataFile = $('.fileUpload')
                .eq(0)
                .find('input')[0].files[0]
            this.loadDisabled = true
            const size = (Number(file.size) / (1024 * 1024)).toFixed(2)
            const fileName = file.name
            const fileStrArr = fileName.split('.')
            const suffix = fileStrArr[fileStrArr.length - 1]

            let result = fileSuffix.some(item => {
                return item === suffix
            })

            if (!result) {
                this.$message.error('不支持该文件类型')
                this.loadDisabled = false
                return Promise.reject()
            }
        },
        ...mapGetters(['userInfo']),
        toDetailList(item) {
            if (item.accountId == '') {
                localStorage.removeItem('channelInfoAccountId')
                localStorage.setItem('channelInfoProjectId', item.projectId)
                this.$router.push({ path: '/autoLaunch/channelDetailList' })
            } else {
                localStorage.removeItem('channelInfoProjectId')
                localStorage.setItem('channelInfoAccountId', JSON.stringify({
                    accountId: item.accountId,
                    accountName: item.authName,
                    projectName: item.projectName
                }))
                this.$router.push({ path: '/autoLaunch/channelDetailList' })
            }
        },

        cpaBidValid(rule, value, callback) {
            let z = /-/g
            let a = /\//g
            let d = /\./g
            if (value === '' || value === undefined) {
                callback('出价必须填写')
            } else if (value.startsWith('.') || value.endsWith('.')) {
                callback('请填写正确出价')
            } else if (value.startsWith('-') || value.endsWith('-')) {
                callback('请填写正确出价')
            } else if (value.match(a) && value.match(z)) {
                callback('不允许出现除"-"和"/"之外的所有字符，并且二者不可同时出现')
            } else if (value.match(/[^0-9+-\/]/g)) {
                callback('请填写正确出价')
            } else {
                callback()
            }
        },
        editNewChannelElse(item) {
            this.visibleDownLoad = true
            this.editData = item
        },
        addNewChannelElse(item) {
            // this.createType = item.createType
            // this.typeAccountId = item.accountId
            // this.typeProjectId = item.projectId
            // this.visibleChannel = true

            localStorage.removeItem('channelInfo')
            this.$router.push({ path: '/autoLaunch/createChannelIndex?accountId=' + item.accountId })
            // var createTypeData = { createType: this.createType, accountId: item.accountId, projectId: item.projectId }
            // localStorage.setItem('createTypeData', JSON.stringify(createTypeData))
            // this.$router.push({ path: '/autoLaunch/createChannel' })
        },
        handleOk() {
            if (this.channelType == 'a') {
                this.createType = '1'
                var createTypeData = {
                    createType: this.createType,
                    accountId: this.typeAccountId,
                    projectId: this.typeProjectId
                }
                localStorage.setItem('createTypeData', JSON.stringify(createTypeData))
                this.$router.push({ path: '/autoLaunch/createChannel' })
            } else if (this.channelType == 'b') {
                this.createType = '2'
                this.visibleDownLoad = true
            } else if (this.channelType == 'c') {
                this.createType = '3'
                var createTypeData = {
                    createType: this.createType,
                    accountId: this.typeAccountId,
                    projectId: this.typeProjectId
                }
                localStorage.setItem('createTypeData', JSON.stringify(createTypeData))
                this.$router.push({ path: '/autoLaunch/createChannel' })
            }
            this.handleCancel()
        },
        handleOkImport() {
            this.formDownLoad.validateFields((err, values) => {
                if (!err) {
                    if (!values.actionbarClickUrl && !values.clickTrackUrl && values.isCycle == undefined && !values.schemaUri) {
                        this.$message.error('至少修改一项')
                        return
                    } else {
                        this.downLoading = true
                        var params = { ...values }
                        params.accountId = this.editData.accountId
                        params.userId = this.userInfo().id
                        this.getAction('/channel/updateChannels', params).then(res => {
                            this.downLoading = false
                            if (res.success) {
                                this.visibleDownLoad = false
                                this.formDownLoad.resetFields()
                                const paramsData = this.form.getFieldsValue()
                                this.handleGetTableList(paramsData)
                            }
                        })
                    }
                }
            })
        },
        handleOkDownLoad() {
            if (!!this.projectIdDownLoad && !!this.productIdDownLoad) {
                let params = {}
                params.productId = this.productIdDownLoad
                params.projectId = this.projectIdDownLoad
                params.userId = this.userInfo().id
                downFile('/channel/exportChannelTemplate', params).then(res => {
                    let blob = new Blob([res], {
                        type: 'application/vnd.openxmlformats-officedocument.spre1adsheetml.sheet'
                    })
                    let downloadElement = document.createElement('a')
                    let href = window.URL.createObjectURL(blob) //创建下载的链接
                    downloadElement.href = href
                    downloadElement.download = '渠道号模板.xlsx' //下载后文件名
                    document.body.appendChild(downloadElement)
                    downloadElement.click() //点击下载
                    document.body.removeChild(downloadElement) //下载完成移除元素
                    window.URL.revokeObjectURL(href) //释放掉blob对象
                })
            } else {
                this.$message.error('请选择产品和项目')
            }
        },
        handleCancel() {
            this.channelType = 'a'
            this.visibleChannel = false
            this.typeAccountId = null
            this.typeProjectId = null
        },
        addNewChannel() {
            // this.visibleChannel = true
            // localStorage.setItem('createTypeData', JSON.stringify(createTypeData))
            localStorage.removeItem('channelInfo')
            this.$router.push({ path: '/autoLaunch/createChannelIndex' })
        },
        getDataSource(current, pageSize) {
            // 切换分页时的回调，
            // 当在页面定义change事件时，切记要把此处的事件清除，因为这两个事件重叠了，可能到时候会导致一些莫名的bug
            this.ipagination.current = current
            this.ipagination.pageSize = pageSize
            const paramsData = this.form.getFieldsValue()
            this.handleGetTableList(paramsData)
        },
        handleQueryList(event) {
            this.ipagination.current = 1
            event.preventDefault()
            const paramsData = this.form.getFieldsValue()
            this.handleGetTableList(paramsData)
        },
        handleResetForm() {
            this.ipagination.current = 1
            this.form.resetFields()
            this.$refs.selectTable.keyValue = ''
            this.$refs.selectTable.getData()
            this.$refs.selectTableProject.keyValue = ''
            this.$refs.selectTableProject.getData()
            const paramsData = this.form.getFieldsValue()
            this.handleGetTableList(paramsData)
        },
        handleGetTableList(data) {
            let paramsData = {
                productId: this.productId,
                projectId: this.projectId,
                accountId: data.accountId,
                state: data.state,
                pageNo: this.ipagination.current,
                pageSize: this.ipagination.pageSize,
                userId: this.userInfo().id
            }
            this.dataSource = []
            this.dataLoading = true
            this.getAction(this.url, paramsData)
                .then(result => {
                    this.dataLoading = false
                    if (result.code === 200) {
                        this.dataSource = result.result.list || []
                        this.ipagination.total = result.result.total || 0
                        // result.result.total
                    } else {
                        this.$message.error(result.message)
                    }
                })
                .catch(error => {
                    this.dataLoading = false
                    console.log(error, 'eeee')
                })
        },
        getAccountNoProject() {
            this.projectId = undefined
            const paramsData = this.form.getFieldsValue()
            this.handleGetTableList(paramsData)
        },
        disabledDate(current) {
            // Can not select days before today and today
            return current && current > moment().endOf('day')
        },
        dateChange(date, dateString) {
            // console.log(date,dateString)
        },

        filterOption(input, option) {
            // console.log(input, option)
            return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
        },
        operateChange(value) {
            console.log(value)
            if (value) {
                this.accountDisabled = true
                this.accountId = ''
            } else {
                this.accountDisabled = false
            }
        },

        tableChange(pagination, filters, sorter, { currentDataSource }) {
            this.ipagination.current = pagination.current
            this.ipagination.pageSize = pagination.pageSize
            if (sorter.order) {
                this.order = sorter.order ? sorter.order : 'descend'
                this.target = sorter.columnKey
                const paramsData = this.form.getFieldsValue()
                this.handleGetTableList({
                    ...paramsData,
                    target: sorter.columnKey,
                    order: sorter.order ? sorter.order : 'descend'
                })
            }
        },

        // 获取所有运营
        getAllOperator(key) {
            let url = '/sys/user/getAllUserListV1'
            this.designList = []

            getAction(url, {}).then(res => {
                if (res.success) {
                    this.designList = res.result
                }
            })
        }
    },
    watch: {
        productId: function(n, o) {
            if (n != '') {
                this.$refs.selectTableProject.keyValue = ''
                this.$refs.selectTableProject.getData(n)
            }
        },
        productIdDownLoad: function(n, o) {
            if (n != '') {
                this.$refs.selectTableProjectDownLoad.keyValue = ''
                this.$refs.selectTableProjectDownLoad.getData(n)
            }
        }
    },
    computed: {
        newDate() {
            var myDate = new Date()
            myDate.getYear() //获取当前年份(2位)
            var n = myDate.getFullYear() //获取完整的年份(4位,1970-????)
            var m = myDate.getMonth() //获取当前月份(0-11,0代表1月)
            var d = myDate.getDate() //获取当前日(1-31)
            var day = myDate.getHours()
            return day
        }
    },
    mounted() {
        const paramsData = this.form.getFieldsValue()
        this.handleGetTableList(paramsData)
        this.getAllOperator()
    },
    activated: function() {},

    filters: {
        toPercentage(val) {
            if (typeof val != 'string') {
                return (val * 100).toFixed(2) + '%'
            } else {
                return val
            }
        },
        //保留两位小数并且变成货币格式
        decimalsHandle(val) {
            if (val && typeof val != 'string') {
                if (val >= 0) {
                    val = parseFloat(val).toFixed(2)
                    let numberStr = val.toString()
                    let str = numberStr.split('.')

                    let str0 = str[0].split('').reverse()
                    for (let i = 0; i < str0.length; i++) {
                        if ((i + 1) % 4 === 0) {
                            str0.splice(i, 0, ',')
                        }
                    }
                    str0.reverse()
                    let handleResult = ''
                    for (let j = 0; j < str0.length; j++) {
                        handleResult += str0[j]
                    }

                    return handleResult + '.' + str[1]
                } else {
                    val = parseFloat(val).toFixed(2)
                    let numberStr = val.toString()
                    let str = numberStr.split('.')

                    let str0 = str[0]
                        .substr(1)
                        .split('')
                        .reverse()
                    for (let i = 0; i < str0.length; i++) {
                        if ((i + 1) % 4 === 0) {
                            str0.splice(i, 0, ',')
                        }
                    }
                    str0.reverse()
                    let handleResult = ''
                    for (let j = 0; j < str0.length; j++) {
                        handleResult += str0[j]
                    }

                    return '-' + handleResult + '.' + str[1]
                }
            } else if (typeof val == 'string') {
                return val
            } else {
                return 0
            }
        },
        //变成货币格式
        formatCurrency(val) {
            if (val) {
                let numberStr = val.toString()
                let str = numberStr.split('').reverse()
                for (let i = 0; i < str.length; i++) {
                    if ((i + 1) % 4 === 0) {
                        str.splice(i, 0, ',')
                    }
                }
                str.reverse()
                let handleResult = ''
                for (let j = 0; j < str.length; j++) {
                    handleResult += str[j]
                }
                return handleResult
            } else {
                return '-'
            }
        }
    }
}
</script>
