<style lang="less" scoped>
    @import "../account-config.less";
</style>

<template>
        <div class="account-config-content">
            <div class="control-con-header">
                <a-form
                class="grid-form"
                layout="inline"
                hide-required-mark
            >
                <a-row class="grid-form-options">
                    <a-form-item
                        class="grid-form-item"
                        label="账户"
                        :colon="false"
                    >
                        <acount-search class="acount-search-class" :appId.sync="acountId" :multiple="false" request="1,3"></acount-search>
                    </a-form-item>
                    <a-form-item label="状态">
                        <a-select v-model="searchStatus" style="width: 100px">
                            <a-select-option :value="0">不限</a-select-option>
                            <a-select-option :value="1">开启</a-select-option>
                            <a-select-option :value="2">关闭</a-select-option>
                        </a-select>
                    </a-form-item>
                    <a-form-item class="form-handle-btn">
                        <a-button type="primary" html-type="submit" @click="searchClick">查询</a-button>
                    </a-form-item>
                </a-row>
            </a-form>
            <a-button type="primary" class="upload-person" @click="addLink">添加</a-button>
            </div>

            <div class="control-con-table">
                <a-table
                    ref="table"
                    size="middle"
                    bordered
                    :loading="controlLoading"
                    :columns="columns"
                    :dataSource="dataSource"
                    :pagination="false">
                    <span slot="acountRelax" slot-scope="text, record">
                        <a-switch :checked="record.warningFlag == '1'" @change="handleSwitchChang($event, record)"/>
                    </span>
                  
                    <span slot="action" slot-scope="text, record">
                       
                        <a @click="handleEdit(record)">编辑</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
            :title="linkTitle"
            v-if="visible"
            :visible="visible"
            :confirm-loading="confirmLoading"
            :width="850"
            @ok="handleOk"
            @cancel="handleCancel">
            <a-form-model
                    ref="ruleForm"
                    :model="configForm"
                    :rules="rules"
                    :label-col="labelCol"
                    :wrapper-col="wrapperCol"
                >
                <a-form-model-item label="广告账户">
                   <acount-search style="width: 100%;" :disabled="linkTitle == '修改配置'" :appId.sync="configForm.advertisementacountId" :multiple="false" request="1,3"></acount-search>
                </a-form-model-item>
                <a-form-model-item label="有效触点" prop="linkAddress">
                    <a-input placeholder="请输入链接地址" allow-clear v-model="configForm.linkAddress"/>
                </a-form-model-item>
            
            </a-form-model>
            
          </a-modal>
        </div>
</template>


<script>
    import AcountSearch from '@/views/modules/Statistics/components/Treeselect.vue';
    import {mapGetters} from 'vuex';
    import {getAction, postAction,putAction} from '@/api/manage';
    import {urlAcount} from '../account-config-server.js';
    export default{
        name: 'link-configuration',
        components:{AcountSearch},
        data() {
            return {
                linkTitle:'',
                visible:false,
                confirmLoading:false,
                acountId: undefined,
                labelCol: {span: 4},
                wrapperCol: {span: 14},
                searchStatus:0,
                controlLoading: true,
                dataSource: [],
                configForm:{
                    advertisementacountId:undefined,
                    linkAddress:'',
                },
                rules:{
                    linkAddress:[
                    {required: true, message: '请输入', trigger: 'blur'},
                ],
                },
                columns:[
                    {
                    title: '开关',
                    align: 'center',
                    width:80,
                    dataIndex: 'acountRelax',
                    scopedSlots: {customRender: 'acountRelax'}
                    },{
                        title: '项目名称',
                        align: 'center',
                        width:100,
                        dataIndex:'projectName',
                    },{
                        title: '账户名称',
                        align: 'center',
                        width:150,
                        dataIndex:'accountName',
                    },{
                        title: '账户ID',
                        align: 'center',
                        width:150,
                        dataIndex:'accountId',
                    },{
                        title: '第三方点击监测链接',
                        align: 'center',
                        width:350,
                        dataIndex:'actionTrackUrl',
                    },{
                        title: '账户所属人',
                        align: 'center',
                        width:100,
                        dataIndex:'operateUserName',
                    },{
                        title: '状态',
                        align: 'center',
                        width:100,
                        dataIndex:'warningFlag',
                        customRender: function (text) {
                            if (text == 1) {
                                return '开启'
                            } else if (text == 2) {
                                return '关闭'
                            } 
                        },
                    },{
                    title: '操作',
                    dataIndex: 'action',
                    align: 'center',
                    width: '10%',
                    scopedSlots: {customRender: 'action'}
                    }
                ],
                totalAll: 0,
                    tablePag: {
                    page: 1,
                    size: 10
                },
                createUserId:'',
            }
        },
        mounted() {
            this.handleInitTable();
        },
        methods: {
            ...mapGetters(['userInfo']),
            // 查询
            handleInitTable(){
                let params = {
                    userId: this.userInfo().id,
                    accountId:this.acountId,
                    warningFlag:this.searchStatus == 0 ? '' : this.searchStatus,
                    pageNo: this.tablePag.page,
                    pageSize: this.tablePag.size
                }
                getAction(urlAcount + '/bytedance-api/ad/bytedancePlanJobController/selectAccountActionTrackUrlList', params).then(res => {
                if (res.code === 0) {
                   
                    this.controlLoading = false;
                    this.dataSource = res.result.list;
                    this.totalAll = res.result.total;
                }
                else {
                    this.controlLoading = false;
                    this.$message.error(res.message);
                }
            }).catch(error => {
                console.log(error, 'eeee');
            });


            },
            // 新增
            addLink(){
                this.configForm.advertisementacountId = undefined;
                this.configForm.linkAddress = '';
                this.linkTitle = '添加配置'
                this.visible = true;
            },
            // 编辑
            handleEdit(item){
                this.linkTitle = '修改配置'
                this.visible = true;
                this.createUserId = item.createUserId;
                this.configForm.advertisementacountId = item.accountId;
                this.configForm.linkAddress = item.actionTrackUrl;
            },
            // 确定
            handleOk(){
                if (this.configForm.advertisementacountId) {
                    this.$refs.ruleForm.validate(valid => {
                if (valid) {
                    this.controlLoading = true;
                    if (this.linkTitle == '添加配置') {
                        let params = {
                        accountId:this.configForm.advertisementacountId,
                        actionTrackUrl:this.configForm.linkAddress,
                        createUserId:this.userInfo().id
                    }
                    
                    postAction(urlAcount+'/bytedance-api/ad/bytedancePlanJobController/insertAccountTrackUrl',params).then(res=>{
                        if (res.code == 0) {
                            this.visible = false;
                            this.handleInitTable();
                            this.$message.success('新增成功');
                        }else{
                            this.controlLoading = false;
                            this.$message.error(res.message);
                        }
                    }).catch(error => {
                        console.log(error, 'eeee');
                    });
                    }else{
                        let params = {
                            accountId:this.configForm.advertisementacountId,
                            actionTrackUrl:this.configForm.linkAddress,
                            createUserId:this.createUserId
                        }
                        
                        postAction(urlAcount+'/bytedance-api/ad/bytedancePlanJobController/updAccountActionTrackUrl',params).then(res=>{
                        if (res.code == 0) {
                            this.visible = false;
                            this.handleInitTable();
                            this.$message.success('修改成功');
                        }else{
                            this.controlLoading = false;
                            this.$message.error(res.message);
                        }
                    }).catch(error => {
                        console.log(error, 'eeee');
                    });
                    }
                    
                }
                else {
                    console.log('error submit!!');
                    return false;
                }
            });
                }else{
                    this.$message.error('请选择广告账户');
                }
                
            },
            // 开关
            handleSwitchChang(checked, data){
                this.controlLoading = true;
                let params = {
                    accountId:data.accountId,
                    warningFlag:checked?1:2,
                    createUserId:this.userInfo().id
                }
                postAction(urlAcount+'/bytedance-api/ad/bytedancePlanJobController/updAccountActionTrackUrl',params).then(res=>{
                    if (res.code == 0) {
                        this.$message.success(res.message);
                        this.handleInitTable();
                    }else {
                    this.$message.error(res.message);
                }
                }).catch(error => {
                console.log(error, 'eeee');
            });
            },
            // 取消 
            handleCancel(){
                this.configForm.advertisementacountId = undefined;
                this.configForm.linkAddress = '';
                this.visible = false;
                this.controlLoading = false;
            },
            searchClick(){
                this.controlLoading = true;
                this.tablePag.page = 1;
                this.handleInitTable();

            },
            onShowSizeChange(current, pageSize) {
            this.tablePag = {
                page: current,
                size: pageSize
            };
            this.controlLoading = true;
            this.handleInitTable();
        },
        },
    }
</script>
