<template>
    <div class="crowd-control-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"
                    >
                        <a-input
                            v-decorator="['name']" type="text"
                            placeholder="请输入"
                        />
                    </a-form-item>
                    <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="grid-form-item grid-form-type" label="状态"
                        :colon="false"
                    >
                        <a-select
                            v-decorator="['status']"
                            placeholder="请选择"
                            allow-clear
                        >
                            <a-select-option v-for="item in statusTasks" :key="item.label">
                                {{ item.value }}
                            </a-select-option>
                        </a-select>
                    </a-form-item>
                    <a-form-item class="form-handle-btn">
                        <a-button type="default" class="reset-class" @click="handleResetForm">重置</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="handleUploadPerson">
                上传人群包
            </a-button>
        </div>
        <div class="control-con-table">
            <a-table
                ref="table"
                size="middle"
                bordered
                :columns="columns"
                :dataSource="dataSource"
                :pagination="false"
            >
                <span slot="action" slot-scope="text, record">
                    <a @click="handleEdit(record)">推送</a>
                    <a-divider type="vertical" />
                    <a @click="handleDelete(record)">删除</a>
                </span>
                <span slot="cause" slot-scope="text, record">
                    <a class="cause-text-class" @click="handleCause(record)">{{ text }}</a>
                </span>
                <span slot="depRelax" slot-scope="text, record">
                    <a @click="handleAcountRelax('dep', record)">{{ text }}</a>
                </span>
                <span slot="acountRelax" slot-scope="text, record">
                    <a @click="handleAcountRelax('acount', record)">{{ text }}</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>
        <a-modal
            v-if="personVisible"
            title="上传人群包"
            class="person-modal"
            :visible="personVisible"
            :confirm-loading="confirmLoading"
            @ok="handleOk"
            @cancel="handleCancel"
        >
            <div>
                <a-form-model
                    ref="ruleForm"
                    :model="personForm"
                    :rules="personRules"
                    :label-col="labelCol"
                    :wrapper-col="wrapperCol"
                >
                    <a-form-model-item label="匹配类型" prop="resource">
                        <a-radio-group v-model="personForm.resource">
                            <a-radio v-for="item in mateTypeTasks" :key="item.label" :value="item.label">{{ item.value }}</a-radio>
                        </a-radio-group>
                    </a-form-model-item>
                    <a-form-model-item ref="name" label="人群包名称" prop="name">
                        <a-input
                            v-model="personForm.name"
                            placeholder="请输入人群包名称"
                        />
                    </a-form-model-item>
                    <a-form-model-item label="选择账户">
                        <acount-search class="acount-search-class" :appId.sync="uploadAcountIds" :multiple="false"></acount-search>
                    </a-form-model-item>
                    <a-form-model-item label="上传人群包">
                        <a-upload
                            name="file"
                            :file-list="fileList"
                            :before-upload="beforeUpload"
                        >
                            <a-button><a-icon type="upload" />文件上传</a-button>
                        </a-upload>
                        <p class="upload-txt-rules">1、文件格式：支持上传*.txt(utf-8)文本；也支持将单个/多个*.txt文件经过Zip格式压缩上传</p>
                        <p class="upload-txt-rules">2、文件大小：单个文件大小不能超过1G</p>
                        <p class="upload-txt-rules">3、内容编排：每行一条记录</p>
                    </a-form-model-item>
                </a-form-model>
            </div>
        </a-modal>
        <a-modal
            title="推送账户"
            v-if="pushVisible"
            :visible="pushVisible"
            :confirm-loading="pushConfirmLoading"
            dialog-class="push-modal"
            @ok="handlePushSure"
            @cancel="handlePushCancel"
        >
            <div>
                <div class="acount-title">
                    <div class="acount-title-left">已选人群包</div>
                    <div class="acount-title-right">{{ tableSelectList.orientationName }}</div>
                </div>
                <div class="acount-title push-plate">
                    <div class="acount-title-left">推送平台</div>
                    <div class="acount-title-right">
                        <a-radio-group default-value="a" button-style="solid">
                            <a-radio-button value="a">效果</a-radio-button>
                            <a-radio-button value="b" disabled>品牌</a-radio-button>
                        </a-radio-group>
                    </div>
                </div>
                <tree-select @applyType="handleApplyType"></tree-select>
            </div>
        </a-modal>
        <a-modal
            title="相关项目"
            v-if="causeVisible"
            :visible="causeVisible"
            :confirm-loading="causeConfirmLoading"
            :footer="null"
            dialog-class="cause-modal"
            @cancel="handleCauseCancel"
        >
            <div>
                <div class="cause-modal-table-class">
                    <a-table :columns="causeColumns" :data-source="causeData" bordered :pagination="false"></a-table>
                </div>
                <a-pagination
                    class="pagin-table-class"
                    :total="totalAllCause"
                    size="small"
                    @change="handleCauseSizeChange"
                />
            </div>
        </a-modal>   
        <a-modal
            title="相关项目"
            v-if="relaxVisible"
            :visible="relaxVisible"
            :confirm-loading="relaxConfirmLoading"
            :footer="null"
            dialog-class="relax-modal"
            @cancel="handleRelaxCancel"
        >
            <div>
                <div class="acount-title">
                    <div class="acount-title-left">人群包名称</div>
                    <div class="acount-title-right">{{ acountRelaxDetail.orientationName }}</div>
                </div>
                <div class="acount-title push-plate">
                    <div class="acount-title-left">目标账户</div>
                    <div class="acount-title-right">{{ acountRelaxDetail.accountName }}</div>
                </div>
                <template v-if="relaxStatus === 'dep'">
                    <a-table :columns="depColumns" :data-source="depData" bordered>
                    </a-table>
                </template>
                <template v-if="relaxStatus === 'acount'">
                    <a-table :columns="acountColumns" :data-source="acountData" bordered></a-table>
                </template>
            </div>
        </a-modal>
    </div>
</template>
<script>
import TreeSelect from './components/tree-select/tree-select';
import {getAction, postAction} from '@/api/manage';
import AcountSearch from '@/views/modules/Statistics/components/Treeselect.vue';
import AppMarketService from './crowd-control-service';

let COS = require('cos-js-sdk-v5');
let cos = new COS({
    SecretId: 'AKIDE6IpMi8fJQRCg1iuWzFajjRs43kbbets',
    SecretKey: 'tXzuwMfplTTK3c9GFUyETilasvQfePu9'
});
export default {
    name: 'crowd-control',
    components: {
        TreeSelect,
        AcountSearch
    },
    data() {
        let that = this;
        return {
            totalAllCause: 0,
            acountId: undefined, // 搜索的账户ID
            uploadAcountIds: '',
            totalAll: 10,
            finallyRightTree: [],
            fileList: [],
            relaxVisible: false,
            relaxConfirmLoading: false,
            pushVisible: false,
            pushConfirmLoading: false,
            causeVisible: false,
            causeConfirmLoading: false,
            labelCol: {span: 4},
            wrapperCol: {span: 14},
            personVisible: false,
            confirmLoading: false,
            mateTypeTasks: AppMarketService.setMateTypeTasks(), // 匹配类型
            populationTypeTasks: AppMarketService.setPopulationTypeTasks(), // 人群包类型
            statusTasks: AppMarketService.setStatusTasks(), // 状态枚举
            relaxStatus: '',
            causeData: [], // 原因的table列表数据,
            depData: [], // 相关项目的table列表数据,
            acountData: [], // 相关账户的table列表数据,
            acountColumns: AppMarketService.setAcountColumns(), // 相关账户的table列表
            depColumns: AppMarketService.setDepColumns(), // 相关项目的table列表
            causeColumns: AppMarketService.setCauseColumns(), // 原因的table列表
            dataSource: [],
            columns: [
                {
                    title: '人群包名称',
                    align: 'center',
                    width: 200,
                    ellipsis: true,
                    dataIndex: 'orientationName'
                },
                {
                    title: '人群包类型',
                    align: 'center',
                    dataIndex: 'populationType',
                    customRender(t) {
                        return t ? that.populationTypeTasks.find(item => item.label === Number(t)).value : '-';
                    }
                },
                {
                    title: '匹配类型',
                    align: 'center',
                    dataIndex: 'typeStr'
                },
                {
                    title: '上传时间',
                    dataIndex: 'statDate',
                    align: 'center'
                },
                {
                    title: '覆盖数量',
                    dataIndex: 'coverNum',
                    align: 'center'
                },
                {
                    title: '状态',
                    dataIndex: 'status',
                    align: 'center',
                    customRender(t) {
                        return t ? that.statusTasks.find(item => item.label === t).value : '-';
                    }
                },
                {
                    title: '原因',
                    dataIndex: 'statusStr',
                    align: 'center',
                    scopedSlots: {customRender: 'cause'}
                },
                {
                    title: '目标账户',
                    dataIndex: 'accountName',
                    align: 'center'
                },
                {
                    title: '相关项目',
                    dataIndex: 'projectCount',
                    align: 'center',
                    scopedSlots: {customRender: 'depRelax'}
                },
                {
                    title: '相关账户',
                    dataIndex: 'accountCount',
                    align: 'center',
                    scopedSlots: {customRender: 'acountRelax'}
                },
                {
                    title: '操作',
                    dataIndex: 'action',
                    align: 'center',
                    scopedSlots: {customRender: 'action'}
                }
            ],
            personForm: {
                name: '',
                resource: ''
            },
            personRules: AppMarketService.setPersonRules(), // 上传人群包表单校验规则
            tablePag: {
                page: 1,
                size: 10
            },
            // table 原因的分页
            causePag: {
                page: 1,
                size: 10
            },
            tableSelectList: {},
            acountRelaxDetail: {},
            causeDetailData: {}
        };
    },
    created() {
        this.form = this.$form.createForm(this);
    },
    mounted() {
        this.handleGetTableList({});
    },
    methods: {
        onShowSizeChange(current, pageSize) {
            const paramsData = this.form.getFieldsValue();
            this.tablePag = {
                page: current,
                size: pageSize
            };
            this.handleGetTableList(paramsData);
        },
        handleCauseSizeChange(current, pageSize) {
            this.causePag = {
                page: current,
                size: pageSize
            };
            this.handleCauseTableData();
        },
        handleGetTableList(data) {
            const paramsData = {
                orientationName: data.name,
                accountName: this.acountId,
                status: data.status,
                pageNo: this.tablePag.page,
                pageSize: this.tablePag.size
            };
            getAction('/kuaishouCrowdPack/queryPageList', paramsData).then(result => {
                if (result.code === 200) {
                    this.dataSource = result.result.list || [];
                    this.totalAll = result.result.total || 0;
                }
            }).catch(error => {
                console.log(error, 'eeee');
            });
        },
        handleDelete(data) {
            this.$confirm({
                title: '删除提示',
                content: '确定要删除这一条吗？',
                onOk() {
                    getAction('/kuaishouCrowdPack/delete', {id: data.id}).then(result => {
                        if (result.code === 200) {
                            this.handleGetTableList({});
                        }
                    }).catch(error => {
                        console.log(error, 'eeee');
                    });
                }
            });
        },
        handleAcountRelaxTable() {
            const paramsData = {
                signature: this.acountRelaxDetail.signature,
                accountId: this.acountRelaxDetail.accountId,
                type: this.relaxStatus === 'dep' ? 1 : 2
            };
            getAction('/kuaishouCrowdPack/queryRel', paramsData).then(result => {
                if (result.code === 200) {
                    if (this.relaxStatus === 'dep') {
                        this.depData = result.result.list;
                    }
                    else if (this.relaxStatus === 'acount') {
                        this.acountData = result.result.list;
                    }
                }
            }).catch(error => {
                console.log(error, 'eeee');
            });
        },
        handleAcountRelax(txt, recd) {
            if (txt === 'dep') {
                this.relaxStatus = 'dep';
            }
            else if (txt === 'acount') {
                this.relaxStatus = 'acount';
            }
            this.acountRelaxDetail = recd;
            this.handleAcountRelaxTable();
            this.relaxVisible = true;
        },
        handleRelaxCancel() {
            this.relaxVisible = false;
        },
        handleCause(list) {
            this.causeVisible = true;
            this.causeDetailData = list;
            this.handleCauseTableData();
        },
        handleCauseTableData() {
            const paramsData = {
                signature: this.causeDetailData.signature,
                pageNo: this.causePag.page,
                pageSize: this.causePag.size
            };
            getAction('/kuaishouCrowdPack/queryFailReason', paramsData).then(result => {
                if (result.code === 200) {
                    this.causeData = result.result.list || [];
                    this.totalAllCause = result.result.total || 0;
                }
            }).catch(error => {
                console.log(error, 'eeee');
            });
        },
        handleApplyType(list) {
            this.finallyRightTree = list;
        },
        handleEdit(val) {
            this.tableSelectList = val;
            this.pushVisible = true;
        },
        handleCauseCancel() {
            this.causeVisible = false;
        },
        handlePushSure() {
            const paramsData = {
                accountIds: this.finallyRightTree.map(item => item.key),
                orientationId: this.tableSelectList.orientationId,
                accountId: this.tableSelectList.accountId
            };
            postAction('/kuaishouCrowdPack/accountPush', paramsData).then(result => {
                if (result.code === 200) {
                    this.pushVisible = false;
                    this.handleGetTableList({});
                }
            }).catch(error => {
                console.log(error, 'eeeeeee');
            });
        },
        handlePushCancel() {
            this.pushVisible = false;
        },
        beforeUpload(file) {
            const isZip = file.type.includes('zip') || file.type.includes('text');
            const fileOvesize = file.size > (1024 * 1024 * 1024);
            if (!isZip) {
                this.fileList = [];
                this.$message.error('只能上传zip格式的文件或者txt文件');
                return false;
            }
            if (fileOvesize) {
                this.$message.error('文件大小不能超过1G');
                return;
            }
            this.cosUpload(file);
        },
        cosUpload(file) {
            let that = this;
            let date = new Date();
            let y = date.getFullYear();
            let MM = date.getMonth() + 1;
            MM = MM < 10 ? '0' + MM : MM;
            let d = date.getDate();
            d = d < 10 ? '0' + d : d;
            let timeElse = new Date().getTime();
            let arr = file.name.split('.');
            let str = '';
            for (let i = 0; i < arr.length; i++) {
                if (i === arr.length - 1) {
                }
                else {
                    if (i === arr.length - 2) {
                        str += arr[i];
                    }
                    else {
                        str += arr[i] + '.';
                    }
                }
            }
            cos.putObject(
                {
                    Bucket: 'media-1301855440',
                    Region: 'ap-chongqing',
                    // 存储桶所在地域，必须字段
                    Key: that.uploadType + '/' + y + '-' + MM + '-' + d + '/' + str + '-' + timeElse + '.' + arr[arr.length - 1],
                    StorageClass: 'STANDARD',
                    Body: file // 上传文件对象
                },
                function (err, data) {
                    if (err) {
                        that.$message.error('上传失败!!!' + err);
                        return;
                    }
                    that.loadingElse = false;
                    that.fileList.push({
                        uid: file.name,
                        name: file.name,
                        status: 'done',
                        url: '//' + data.Location
                    });
                    if (that.fileList.length > 1) {
                        that.fileList = that.fileList.slice(-1);
                    }
                }
            );
        },
        handleQueryList(event) {
            event.preventDefault();
            const paramsData = this.form.getFieldsValue();
            this.handleGetTableList(paramsData);
        },
        handleResetForm() {
            this.form.resetFields();
            this.acountId = undefined;
            this.handleGetTableList({});
        },
        handleUploadPerson() {
            this.personVisible = true;
        },
        handleOk() {
            this.$refs.ruleForm.validate(valid => {
                if (valid) {
                    if (!this.uploadAcountIds) {
                        this.$message.error('请选择账户');
                        return;
                    }
                    if (!this.fileList.length) {
                        this.$message.error('请上传文件');
                        return;
                    }
                    this.handleUploadRuleForm();
                }
                else {
                    return false;
                }
            });
        },
        handleUploadRuleForm() {
            const paramsData = {
                type: this.personForm.resource,
                orientationName: this.personForm.name,
                accountId: this.uploadAcountIds,
                url: this.fileList[0].url
            };
            postAction('/kuaishouCrowdPack/uploadCrowdPack', paramsData).then(result => {
                if (result.code === 200) {
                    this.personVisible = false;
                    this.handleGetTableList({});
                }
            }).catch(error => {
                console.log(error, 'eeee');
            });
        },
        handleCancel() {
            this.personVisible = false;
            this.$refs.ruleForm.resetFields();
            this.uploadAcountIds = '';
        }
    }
};
</script>
<style lang="less" scoped>
    @import "crowd-control";
</style>