<template>
    <div class="crowd-control-content">
        <div class="table-page-search-wrapper">
            <a-form
                layout="inline"
                :form="form"
                hide-required-mark
                @submit="handleQueryList"
            >
                <a-row :gutter="24">
                    <a-col :md="8" :sm="8" :xxl="6">
                        <selectTable :projectId.sync="projectId" ref="selectTable" :requireCheck="false"></selectTable>
                    </a-col>
                    <a-col :md="8" :sm="8" :xxl="6">
                        <a-form-item
                            label="名称"
                        >
                            <a-input
                                v-decorator="['name']" type="text"
                                placeholder="请输入"
                            />
                        </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" @click="handleUploadPerson" class="middle-button">
                                上传人群包
                            </a-button>
                             <a-button type="primary" @click="handleUpdatePerson" v-if="realShow" :loading="realLoading">
                                更新人群
                            </a-button>
                           
                        </span>
                        
                    </a-col>
                </a-row>
            </a-form>
            
        </div>
        <div class="control-con-table">
            <a-table
                ref="table"
                size="middle"
                bordered
                :columns="columns"
                :dataSource="dataSource"
                :pagination="false"
                :loading="dataLoading"
            >
                <span slot="action" slot-scope="text, record">
                    <a @click="handleEdit(record)">推送</a>
                    <a-divider type="vertical" />
                    <a @click="handleDelete(record)">删除</a>
                </span>
                                
                <span slot="actionMore" slot-scope="text, record">
                    <a @click="handleHistory(record)">推送历史</a>
                </span>
                <span slot="cause" slot-scope="text, record">
                    <a class="cause-text-class" @click="handleCause(record)">失败原因</a>
                </span>
                <span slot="depRelax" slot-scope="text, record">
                    <a @click="handleAcountRelax('unit', record)">{{ text }}</a>
                </span>
                <span slot="acountRelax" slot-scope="text, record">
                    <a @click="handleAcountRelax('acount', record)">{{ text }}</a>
                </span>
            </a-table>
            <a-pagination
                v-if="dataSource.length>0"
                class="pagin-table-class"
                :total="totalAll"
                :show-total="total => `共 ${totalAll} 条`"
                size="small"
                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"
                >
                    <selectTable
                        :projectId.sync="uploadProjectId"
                        :labelCol="labelCol"
                        :disabled="disabled"
                        :requireCheck="true"
                        v-if="!disabled"
                    ></selectTable>
                     <a-form-model-item ref="name" label="人群包名称" prop="name">
                        <a-input
                            v-model="personForm.name"
                            placeholder="请输入人群包名称"
                            :disabled="personNameDisabled"
                        />
                    </a-form-model-item>
                    <a-form-model-item label="匹配类型" prop="resource">
                        <a-radio-group v-model="personForm.resource" :disabled="personResourceDisabled">
                            <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 label="选择账户" class="grid-form-item-account">
                        <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"
                            @change="handleChange"
                        >
                            <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 }} (ID: {{ tableSelectList.id }})</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 :httpSrc="src" @applyType="handleApplyType" :projectId="tableSelectList.projectId" :templateId="tableSelectList.id"></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="relaxStatus === 'unit' ? '相关组' : '相关账户'"
            v-if="relaxVisible"
            :visible="relaxVisible"
            :confirm-loading="relaxConfirmLoading"
            :footer="null"
            dialog-class="relax-modal"
            @cancel="handleRelaxCancel"
        >
            <div>
                <template v-if="relaxStatus === 'unit'">
                    <AcountSearch :appId.sync="unitAccountId" :multiple="false"  request="2,4"   ref="treeSelect" style="margin-bottom:8px;width:300px " />   
                    <a-table :columns="depColumns" :data-source="depData" bordered :pagination="accountIpagination">
                    </a-table>
                </template>
                <template v-if="relaxStatus === 'acount'">
                    <a-table :columns="acountColumns" :data-source="acountData" bordered :pagination="accountIpagination"></a-table>
                </template>
            </div>
        </a-modal>

        <a-modal
            title="推送历史"
            v-if="historyVisible"
            :visible="historyVisible"
            :confirm-loading="causeConfirmLoading"
            :footer="null"
            dialog-class="cause-modal"
            @cancel="historyVisible = false"
        >
            <div>
                <div class="cause-modal-table-class">
                    <a-table :columns="causeColumns" :data-source="historyData" bordered :pagination="false">
                        <span slot="action" slot-scope="text, record">
                            <a-popconfirm
                                title="是否重新推送?"
                                ok-text="是"
                                cancel-text="否"
                                @confirm="handleAgian(record)"
                            >
                                <a :disabled="record.result==='推送成功'">重新推送</a>
                            </a-popconfirm>
                            
                        </span>
                    </a-table>
                </div>
                <a-pagination
                    class="pagin-table-class"
                    :total="totalAllHistory"
                    size="small"
                    @change="handleHistorySizeChange"
                />
            </div>
        </a-modal>   
    </div>
</template>
<script>
import TreeSelect from '@/views/modules/autoLaunch/directional/components/tree-select.vue';
import {getAction, postAction} from '@/api/manage';
import AcountSearch from '@/views/modules/Statistics/components/Treeselect.vue';
import selectTable from '@/views/modules/Statistics/components/selectPagination.vue';
import AppMarketService from './crowd-control-service';
import BMF from 'browser-md5-file';
import { mapGetters } from 'vuex';
let COS = require('cos-js-sdk-v5');
let cos = new COS({
    SecretId: 'AKIDE6IpMi8fJQRCg1iuWzFajjRs43kbbets',
    SecretKey: 'tXzuwMfplTTK3c9GFUyETilasvQfePu9'
});
export default {
    name: 'crowd-control',
    components: {
        TreeSelect,
        AcountSearch,
        selectTable
    },
    data() {
        let that = this;
        return {
            dataLoading: false,
            src: '/kuaishouPopulationPackage/getAccountByProjectId',
            unitAccountId: '',
            personResourceDisabled: false,
            personNameDisabled: false,
            totalAllCause: 0,
            acountId: undefined, // 搜索的账户ID
            projectId: null,
            uploadAcountIds: '',
            uploadProjectId: '',
            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: 'typeStr'
                },
                {
                    title: '创建时间',
                    dataIndex: 'statDate',
                    align: 'center'
                },
                {
                    title: '关联项目',
                    dataIndex: 'projectName',
                    align: 'center',
                    ellipsis: true,
                    customRender(t) {
                        if(t) {
                            return t
                        }
                        else {
                            return '-'
                        }
                    }
                },
                {
                    title: '相关账户',
                    dataIndex: 'accountCount',
                    align: 'center',
                    scopedSlots: {customRender: 'acountRelax'}
                },
                {
                    title: '相关组',
                    dataIndex: 'unitCount',
                    align: 'center',
                    scopedSlots: {customRender: 'depRelax'}
                },
                {
                    title: '操作',
                    dataIndex: 'action',
                    align: 'center',
                    scopedSlots: {customRender: 'action'}
                },
                {
                    title: '更多',
                    dataIndex: 'actionMore',
                    align: 'center',
                    scopedSlots: {customRender: 'actionMore'},
                    ellipsis: true
                },
            ],
            personForm: {
                name: '',
                resource: ''
            },
            personRules: AppMarketService.setPersonRules(), // 上传人群包表单校验规则
            tablePag: {
                page: 1,
                size: 10
            },
            // table 原因的分页
            causePag: {
                page: 1,
                size: 10
            },
            historyPag: {
                page: 1,
                size: 10
            },
            tableSelectList: {},
            acountRelaxDetail: {},
            causeDetailData: {},
            historyData: [],
            totalAllHistory: 0,
            historySelectList: null,
            historyVisible: false,
            accountIpagination: {
                current: 1,
                pageSize: 10,
                //   pageSizeOptions: ['10', '20', '30'],
                showTotal: (total, range) => {
                    return range[0] + "-" + range[1] + " 共" + total + "条"
                },
                showQuickJumper: true,
                showSizeChanger:false,
                pageSizeOptions: ['10', '30', '50'],
                total: 0,
                onChange: (current, pageSize) => {
                    // 切换分页时的回调，
                    // 当在页面定义change事件时，切记要把此处的事件清除，因为这两个事件重叠了，可能到时候会导致一些莫名的bug
                    this.accountIpagination.current = current;
                    this.accountIpagination.pageSize= pageSize;
                    this.handleAcountRelax(this.relaxStatus  ,this.acountRelaxDetail)
                }
            },
            realShow: false,
            realLoading: false
        };
    },
    watch: {
        unitAccountId: function(n,o) {
            if(this.relaxVisible){
                this.handleAcountRelax(this.relaxStatus  ,this.acountRelaxDetail)
            }
        },
    },
    created() {
        this.form = this.$form.createForm(this);
    },
    mounted() {
        this.realShow = this.userInfo().realname === '管理员' ? true : false
        if(!this.realShow) {
            getAction('/kuaishou/batch/syncUserPopulationList',{ userId:this.userInfo().id, type:1}).then(res => {
                if(res.success) {

                }
            })
        }
        this.handleGetTableList({});
    },
    methods: {
        ...mapGetters(['nickname', 'avatar', 'userInfo']),
        handleAgian(val) {
            let params = {};
            params.id = val.id;
            params.accountIds = [val.accountId];
            postAction('/kuaishouPopulationPackage/push' ,params).then(res => {
                if(res.success) {
                   
                    if(!this.realShow) {
                        getAction('/kuaishou/batch/syncUserPopulationList',{ userId:this.userInfo().id, type:1}).then(res => {
                            if(res.success) {
                                this.$message.success(res.message);
                                this.historyVisible = false;
                                this.handleGetTableList({});
                            }
                            else {
                                this.$message.error(res.message);
                            }
                        })
                    }
                    else {
                        this.$message.success(res.message);
                        this.historyVisible = false;
                        this.handleGetTableList({});
                    }
                }
                else {
                    this.$message.error(res.message);
                }
            })

        },
        handleHistorySizeChange(current, pageSize) {
            this.historyPag = {
                page: current,
                size: pageSize
            };
            this.handleHistoryTableData(this.historySelectList.id);
        },
        handleHistory(list) {
            this.historyVisible = true;
            this.handleHistoryTableData(list.id);
            this.historySelectList = list;
        },
        handleHistoryTableData(id) {
            const paramsData = {
                id: id,
                pageNo: this.historyPag.page,
                pageSize: this.historyPag.size,
                status: this.resultHistory
            };
            getAction('/kuaishouPopulationPackage/queryPushHistory', paramsData).then(result => {
                if (result.code === 200) {
                    this.historyData = result.result.list || [];
                    this.totalAllHistory = result.result.total || 0;
                }
                else {
                    this.$message.error(result.message);
                }
            }).catch(error => {
                console.log(error, 'eeee');
            });
        },
        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,
                projectId: this.projectId,
                status: data.status,
                pageNo: this.tablePag.page,
                pageSize: this.tablePag.size
            };
            this.dataSource = [];
            this.dataLoading = true;
            getAction('/kuaishouPopulationPackage/list', paramsData).then(result => {
                if (result.code === 200) {
                    this.dataLoading = false;
                    this.dataSource = result.result.list || [];
                    this.totalAll = result.result.total || 0;
                }
                else {
                    this.dataLoading = false;
                    this.$message.error(result.message);
                }
            }).catch(error => {
                this.dataLoading = false;
                console.log(error, 'eeee');
            });
        },
        handleDelete(data) {
            let that = this;
            this.$confirm({
                title: '删除提示',
                content: '是否删除该人群包？',
                onOk() {
                    getAction('/kuaishouPopulationPackage/delete', {id: data.id}).then(result => {
                        if (result.code === 200) {
                            that.handleGetTableList({});
                            that.$message.success('删除成功');
                        }
                        else {
                            that.$message.error(result.message);
                        }
                    }).catch(error => {
                        console.log(error, 'eeee');
                    });
                }
            });
        },
        handleAcountRelaxTable() {
            let url = this.relaxStatus === 'unit' ? '/kuaishouPopulationPackage/getRelatedGroups' : '/kuaishouPopulationPackage/getRelatedAccounts'
            let paramsData = {};
            paramsData.id = this.acountRelaxDetail.id;
            paramsData.pageNo = this.accountIpagination.current;
            paramsData.pageSize = this.accountIpagination.pageSize;
            if(this.relaxStatus === 'unit') {
                paramsData.accountId = this.unitAccountId;
            }
                
            getAction(url, paramsData).then(result => {
                if (result.code === 200) {
                    if (this.relaxStatus === 'unit') {
                        this.depData = result.result.list;
                    }
                    else if (this.relaxStatus === 'acount') {
                        this.acountData = result.result.list;
                    }
                     this.accountIpagination.current = result.result.total;
                }
                else {
                    this.$message.error(result.message);
                }
            }).catch(error => {
                console.log(error, 'eeee');
            });
        },
        handleAcountRelax(txt, recd) {
            if (txt === 'unit') {
                this.relaxStatus = 'unit';
            }
            else if (txt === 'acount') {
                this.relaxStatus = 'acount';
            }
            this.acountRelaxDetail = recd;
            this.handleAcountRelaxTable();
            this.relaxVisible = true;
        },
        handleRelaxCancel() {
            this.unitAccountId = '';
            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;
                }
                else {
                    this.$message.error(result.message);
                }
            }).catch(error => {
                console.log(error, 'eeee');
            });
        },
        handleApplyType(list) {
            this.finallyRightTree = list;
        },
        handleEdit(val) {
            this.tableSelectList = val;
            this.pushVisible = true;
        },
        handleCauseCancel() {
            this.causeVisible = false;
        },
        handlePushSure() {
            if(this.finallyRightTree.length > 0) {
                this.pushConfirmLoading = true;
                const paramsData = {
                    accountIds: this.finallyRightTree.map(item => item.key),
                    id: this.tableSelectList.id
                };
                postAction('/kuaishouPopulationPackage/push', paramsData).then(result => {
                    
                    if (result.code === 200) {
                        
                        if(!this.realShow) {
                            getAction('/kuaishou/batch/syncUserPopulationList',{ userId:this.userInfo().id, type:1}).then(res => {
                                if(res.success) {
                                    this.pushConfirmLoading = false;
                                    this.pushVisible = false;
                                    this.handleGetTableList({});
                                    this.$message.success('推送成功')
                                }
                            })
                        }
                        else {
                            this.pushConfirmLoading = false;
                            this.pushVisible = false;
                            this.handleGetTableList({});
                            this.$message.success('推送成功')
                        }
                    }
                    else {
                        this.pushConfirmLoading = false;
                        this.$message.error(result.message);
                    }
                }).catch(error => {
                    this.pushConfirmLoading = false;
                    console.log(error, 'eeeeeee');
                });
            }
            else {
                this.$message.error("请选择要推送的账户")
            }
           
        },
        handlePushCancel() {
            this.pushVisible = false;
        },
        beforeUpload(file) {
            this.cosUpload(file);
        },
        handleMd5(file) {
            let bmf = new BMF();
            let that = this;
            return new Promise(function (resolve, reject) {
                bmf.md5(file, (err, md5) => {
                    getAction('kuaishouPopulationPackage/checkPopulationPackage', {signature: md5}).then(result => {
                        if (result.code === 200) {
                            that.personNameDisabled = false;
                            that.personResourceDisabled = false;
                            resolve();
                        }
                        else if (result.code === 201) {
                            that.$message.error(result.message);
                            that.personForm.name = result.result.orientationName;
                            that.personForm.resource = result.result.type;
                            that.personNameDisabled = true;
                            that.personResourceDisabled = true;
                            reject();
                        }
                    }).catch(error => {
                        console.log(error, 'eeee');
                        reject();
                    });
                });
            });
        },
        handleChange(info) {
            this.fileList = info.fileList;
        },
        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);
                    }
                    const isZip = file.type.includes('zip') || file.type.includes('text');
                    const fileOvesize = file.size > (1024 * 1024 * 1024);
                    if (!isZip) {
                        that.$message.error('只能上传zip格式的文件或者txt文件');
                        return;
                    }
                    if (fileOvesize) {
                        that.$message.error('文件大小不能超过1G');
                        return;
                    }
                    that.handleMd5(file);
                }
            );
        },
        handleQueryList(event) {
            event.preventDefault();
            const paramsData = this.form.getFieldsValue();
            this.handleGetTableList(paramsData);
        },
        handleResetForm() {
            this.form.resetFields();
            this.projectId = undefined;
            this.handleGetTableList({});
            this.$refs.selectTable.keyValue = "";
            this.$refs.selectTable.getData()
        },
        handleUploadPerson() {
            this.personVisible = true;
        },
        handleUpdatePerson() {
            if(this.realShow) {
                this.realLoading = true;
                getAction('/kuaishou/batch/syncUserPopulationList',{ userId:this.userInfo().id, type:0}).then(res => {
                    if(res.success) {
                        this.realLoading = false;
                        this.$message.success('更新成功');
                        this.handleResetForm();
                    }
                    else {
                        this.realLoading = false;
                        this.$message.error('更新失败');
                    }
                })
            }
        },
        handleOk() {
            this.$refs.ruleForm.validate(valid => {
                if (valid) {
                    if (!this.uploadProjectId) {
                        this.$message.error('请选择项目');
                        return;
                    }
                    if (!this.fileList.length) {
                        this.$message.error('请上传文件');
                        return;
                    }
                    this.confirmLoading = true
                    this.handleUploadRuleForm();
                }
                else {
                    return false;
                }
            });
        },
        handleUploadRuleForm() {
            const paramsData = {
                type: this.personForm.resource,
                orientationName: this.personForm.name,
                projectId: this.uploadProjectId,
                url: this.fileList[0].url
            };
            postAction('/kuaishouPopulationPackage/add', paramsData).then(result => {
                this.confirmLoading = false
                if (result.code === 200) {
                    this.personVisible = false;
                    this.personResourceDisabled = false;
                    this.personNameDisabled = false;
                    this.$message.success('上传成功');
                    this.handleGetTableList({});
                    this.fileList = [];
                    this.personForm.name = '';
                    this.personForm.resource = '';
                    this.uploadProjectId = undefined;
                }
                else {
                    this.$message.error(result.message);
                }
            }).catch(error => {
                console.log(error, 'eeee');
            });
        },
        handleCancel() {
            this.confirmLoading = false
            this.personVisible = false;
            this.personResourceDisabled = false;
            this.personNameDisabled = false;
            this.$refs.ruleForm.resetFields();
            this.uploadProjectId = '';
            this.personForm.name = '';
            this.personForm.resource = '';
            this.fileList = [];
        }
    }
};
</script>
<style lang="less" scoped>
    @import "crowd-control";
</style>