<template>
    <div class="toutiaoBatch">
        <!-- <a-spin :spinning="spinning"> -->

        
        <div class="tabs">
            <a-tabs v-model="tabkey" @change="callback">
                <a-tab-pane key="group" tab="广告组">
                </a-tab-pane>
                <a-tab-pane key="plan" tab="广告计划">
                    <a-tag color="blue" style="height:30px;line-height:30px;font-size:14px;" v-show="currentGroup.name">
                       {{currentGroup.name}}	 <a-icon type="close"  @click="clearGroup" />
                    </a-tag>
                </a-tab-pane>
                <a-tab-pane key="idea" tab="广告创意">
                   
                    <a-tag color="blue" style="height:30px;line-height:30px;font-size:14px;" v-show="currentPlan.name ">
                        {{currentPlan.name }}	 <a-icon type="close" @click="clearPlan" />
                    </a-tag>
                </a-tab-pane>
                <!-- <a-button type='primary'  slot="tabBarExtraContent" @click="goBatch" >
                   + 头条批量创建
                </a-button> -->
                <a-button type='primary'  slot="tabBarExtraContent" @click="goBatch" v-if="tabkey=='group'">
                   + 头条批量创建
                </a-button>
                <a-button type='primary'  slot="tabBarExtraContent" @click="createPlan" v-if="tabkey=='plan'">
                   + 新建计划
                </a-button>
                <a-button type='primary'  slot="tabBarExtraContent" @click="createIdea" v-if="tabkey=='idea'">
                   + 新建创意
                </a-button>

            </a-tabs>
        </div>
       
        <div class="topOptions">
            <span class="OptinItem topOpt">
                <Treeselect :appId.sync="accountID" :multiple="false" request="1,3"  ref="treeSelect" style="margin-bottom:8px " />

                <!-- <a-tree-select
                    show-search
                    allow-clear
                    dropdownMatchSelectWidth
                    v-model="accountID"
                    style="width: 60%"
                    :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
                    :tree-data="treeData"
                    placeholder="请选择具体账户"
                    :filterOption='filterOption'
                    treeNodeFilterProp='title'
                    @change='accountIDChange'
                >

                </a-tree-select> -->
            </span>
            <span class="OptinItem">
                <a-select  style="width: 120px" v-model="statusValue" @change="statusChange" placeholder="请选择状态">
                    <a-select-option value=" " >
                        不限
                    </a-select-option>
                    <a-select-option value="ENABLE" >
                        启用
                    </a-select-option>
                    <a-select-option value="DISABLE" >
                        暂停
                    </a-select-option>
                    <a-select-option value="DELETE">
                        删除
                    </a-select-option>
                </a-select>
            </span>

            <span class="OptinItem">
                <!-- <a-date-picker @change="dateChange" /> -->
                 <a-range-picker v-model="dateValue" :disabled-date="disabledDate"  style="width: 250px;" format="YYYY-MM-DD" @change="dateChange" />
            </span>
            <span class="OptinItem">
                <a-input-search placeholder="请输入名称关键词" v-model="optionId" style="width: 200px"  />
            </span>
            <span class="optionBtn">
                <a-button type='primary' @click="search" class="searchBtn">查询</a-button>
                <!-- <a-button type='default' @click="reset">重置</a-button> -->
            </span>
        </div>
        <div class="tableArea">
            <div class="tableOption">
                <span class="OptinItem">
                    <a-tooltip>
                        <template slot="title" >
                            这里可以批量启动、暂停、删除你的选择哦~
                        </template>
                        <!-- <a-button type="link" @click="changeSelectStatus">批量操作</a-button> -->
                        <span >批量操作：</span>
                    </a-tooltip>
                </span>
                <span class="OptinItem">
                    <a-select  style="width: 120px" @change="optChange" v-model="optValue" placeholder="请选择状态" :disabled='selectedRowKeys.length<=0'>
                        <a-select-option value="open" >
                            启动
                        </a-select-option>
                        <a-select-option value="pause">
                            暂停
                        </a-select-option>
                        <a-select-option value="delete">
                            删除
                        </a-select-option>
                    </a-select>
                </span>
                 <span class="OptinItem">
                    <a-popconfirm
                        title="确定要删除选择的内容吗？"
                        ok-text="删除"
                        cancel-text="取消"
                        @confirm="confirm"
                        @cancel="cancel"
                        v-if="optValue=='delete'"
                    >
                        <a-button type='primary' @click="isOkHandle" class="ok">确定</a-button>
                    </a-popconfirm>
                    <a-button type='primary' @click="isOkHandle" class="ok" v-else>确定</a-button>


                    <a-popover v-model="visible" trigger="click" >
                        <div slot="content">
                            <span style='font-weight:700;margin-right:15px;font-size:15px'>预算</span>
                            <a-radio-group v-model="radioValue" @change="radioChange">
                                <a-radio value="BUDGET_MODE_INFINITE">不限</a-radio>
                                <a-radio value="BUDGET_MODE_DAY">日预算</a-radio>
                            </a-radio-group>
                            <span v-show="radioValue=='BUDGET_MODE_DAY'">预计金额： <a-input-number :min="0" v-model="dayBudgetValue" :step="0.1" @change="budgetChange" size="small" style='margin-right:20px' /></span>
                            <a-button type='default' @click="showPricecancel"  style='margin-right:10px'>取消</a-button>
                            <a-button type='primary' @click="showPriceOk"  class="ok">保存</a-button>
                        </div>

                        <!-- <a-button type='default'  v-if="tabkey=='group'" class="ok">更改预算</a-button> -->
                    </a-popover>
                    <a-button type='default' @click="changebudget" v-if="tabkey=='plan'" class="ok">更改预算</a-button>
                    <a-button type='default' @click="changeofferPrice" v-show="tabkey=='plan'">更改出价</a-button>

                 </span>
                <!-- <span class="optionBtn">
                    <a-button type='primary' @click="reset">自定义列</a-button>
                </span> -->
            </div>
            <div class="table">
                <a-table
                    :columns="columns"
                    :data-source="data"
                    :rowSelection="{selectedRowKeys: selectedRowKeys,...rowSelection}"
                    bordered
                    :pagination="ipagination"
                    :loading="loading"
                    @change="sort"
                    
                >
                    <template slot="name" slot-scope="text,record">
                        <a href="javascript:;" @click="goNextPage(record)">
                            <editableCell :text="text" slotName='name' @change="onCellChange(record.key, 'name', $event)" />
                        </a>
                    </template>
                    <span slot="budget" slot-scope="text,record">
                       <editableCell :text="text" slotName='budget' @change="onCellChange(record.key, 'budget', $event)" />
                    </span>
                    <span slot="bid" slot-scope="text,record" >
                       <editableCell :text="text" slotName='bid' @change="onCellChange(record.key, 'bid', $event)" />
                    </span>
                    <span slot="cpaBid" slot-scope="text,record">
                       <editableCell :text="text" slotName='cpaBid' @change="onCellChange(record.key, 'cpaBid', $event)" />
                       <!-- {{text}} -->
                    </span>

                    <span slot="campaignStatus" slot-scope="text,record">
                        <a-spin :spinning="record.spin" size="small" >
                            <div class="spin-content">
                                <a-switch size="default" :checked=text  @change="switchChange(text,record)"/>
                            </div>
                        </a-spin>    
                        <!-- <a-switch size="default" :checked=text  @change="switchChange(text,record)"/>                     -->
                    </span>

                    <span slot="createStatus" slot-scope="text,record">
                         <a-spin :spinning="record.spin" size="small" >
                            <div class="spin-content">
                                <a-switch size="default" :checked=text  @change="switchChange(text,record)"/>
                            </div>
                        </a-spin>
                        <!-- <a-switch size="default" :checked=text  @change="switchChange(text,record)"/> -->
                    </span>
                    <span slot="planStatus" slot-scope="text,record">
                        <a-spin :spinning="record.spin" size="small" >
                            <div class="spin-content">
                                <a-switch size="default" :checked=text  @change="switchChange(text,record)"/>
                            </div>
                        </a-spin>
                        <!-- <a-switch size="default" :checked=text  @change="switchChange(text,record)"/> -->
                    </span>
                   
                    <span slot="createImg" slot-scope="text,record">
                        <!-- <a-switch size="default" :checked=text  @change="switchChange(text,record)"/> -->
                        <a-popover placement="right">
                            <template slot="content">
                                <!-- {{record.videoId_dictText}}  -->
                                <video :src="record.videoId_dictText" style="width:250px" controls  ></video>
                            </template>
                            <template slot="title">
                            <!-- <span>Title</span> -->
                            </template>
                            <!-- <a-button>Right</a-button> -->
                            <img :src="record.imageId_dictText" alt="" style="width:100px">
                        </a-popover>
                        
                    </span>
                    <!-- <span slot="options" slot-scope="record">
                        <a href="javascript:;" style="margin-right:10px">编辑</a>
                        <a href="javascript:;" v-if="tabkey=='plan'" @click="copyPlan(record)">复制</a>
                        <a href="javascript:;" v-if="tabkey=='idea'">预览</a>
                    </span> -->
                    <span slot="parentGroup" slot-scope="text">
                        <a href="javascript:;" >{{text}}</a>
                    </span>
                    <span slot="parentPlan" slot-scope="text">
                        <a href="javascript:;" >{{text}}</a>
                    </span>
                    <span slot="time" slot-scope="text,record">
                        {{record.startTime}}至{{record.endTime}}
                    </span>
                    <span slot="flowControlMode" slot-scope="text">
                        <span v-if="text=='FLOW_CONTROL_MODE_FAST'">优先跑量</span>
                        <span v-if="text=='FLOW_CONTROL_MODE_SMOOTH'">优先低成本</span>
                        <span v-if="text=='FLOW_CONTROL_MODE_BALANCE'">均衡投放</span>
                    </span>
                </a-table>
            </div>
        </div>
        
        <!-- 出价的模态框 -->
        <div class="batchModal" >
            <a-modal v-model="offerPriceVisiable" :title="'批量修改'+ModalTitle" @ok="modifyChangeOk" width='55%' id="batchModal" >
                <div id="batchModal">
                    <div class="selectePlan">已选{{}}个广告计划</div>
                    <div class="modifyRules">
                        <span class="rules">修改规则：</span>
                        <a-radio-group v-model="modifyRulesValue" @change="modifyRulesChange">
                            <a-radio-button value="total">
                                统一修改
                            </a-radio-button>
                            <a-radio-button value="separately">
                                分别修改
                            </a-radio-button>
                        </a-radio-group>
                        <span class="totalPrice" v-if="modifyRulesValue=='total'"><span>{{ModalTitle=='出价'?'出价：':'总预算：'}}</span>

                            <a-input-number :min="0" v-model="inputValue" :step="0.1" @change="totalbudgetChange" size="small"  /> 元
                        </span>
                    </div>
                    <div class="modifyTable">
                        <a-table
                            :columns="modifyTableCol"
                            :data-source="modifyTableData"
                            bordered
                            tableLayout="auto"
                            :pagination="false"
                            :loading='modifyTableloading'
                            style="word-break: break-all;"
                            >
                            <span slot="changeBudget" slot-scope="text,records">
                                <span v-if="ModalTitle=='出价'">oCPM</span>
                                <span v-else>{{modifyRulesValue=='total'?'总预算：':'日预算：'}}</span>
                                <a-input-number :min="0"  :step="0.1"  @blur='budgetChange($event,records)' size="small" :disabled="modifyRulesValue=='total'" /> 元
                            </span>
                            <span slot="currentCost" slot-scope="currentCost">{{ currentCost | decimalsHandle }}</span>
                            <span slot="budget" slot-scope="text">

                                <span >日预算：{{  text | decimalsHandle }}</span>
                            </span>
                            <span slot="bid" slot-scope="text" >
                                <span >oCPM： {{text | decimalsHandle}}</span>

                            </span>
                        </a-table>
                    </div>
                </div>
            </a-modal>
        </div>

        <!-- 复制计划的弹出框 -->
        <a-modal v-model="copyPlanVisiable" title="复制计划" @ok="copyPlanOk" id="copyModal" :maskClosable='false'>
            <div id="copyModal">
                <p class="copyTip">复制说明：适用于批量复制多个广告计划，默认同事复制所属创意。此类型不直接跨广告投放账号复制，且只能复制完成后逐一修改</p>
                <p style="font-weight:700;font-size:15px">被复制广告计划：<span>{{}}</span></p>
                <p><span class="copyName"><b class="copyKeyStart">*</b> 复制个数：</span>
                    <a-input-number :min="1" :max="10" v-model="copyNum" style="width:250px" />

                </p>
                <p><span class="copyName"><b class="copyKeyStart">*</b>复制到广告组：</span>
                    <a-select size="default" default-value="a1" style="width: 250px" v-model="copyGroup" >
                    <a-select-option v-for="i in 25" :key="(i + 9).toString(36) + i">
                        {{ (i + 9).toString(36) + i }}
                    </a-select-option>
                    </a-select>
                </p>
            </div>

        </a-modal>
              
    <!-- </a-spin> -->
    </div>
</template>

<script>
import moment from 'moment';
import { getAction, postAction, downFile, downFilePost } from '@/api/manage';
// import { JeecgListMixin } from '@/mixins/ipagination'
import editableCell from './editableCell'
import Treeselect from '@/views/modules/Statistics/components/Treeselect.vue'
import qs from 'qs'
let typeValue='预算'
let modifyTableCol=[
    {
        title: '广告计划',
        dataIndex: 'name',
        align: 'center',
    },
    {
        title: '当前消耗',
        dataIndex: 'currentCost',
        align: 'center',
        scopedSlots: { customRender: 'currentCost' },
    },
    {
        title: '当前预算',
        dataIndex: 'budget',
        align: 'center',
        scopedSlots: { customRender:'budget'  },
    },
    {
        title: '当前出价',
        dataIndex: 'bid',
        align: 'center',
        scopedSlots: { customRender:'bid' },
    },
    {
        title: '修改'+typeValue,
        dataIndex: 'changeBudget',
        align: 'center',
        scopedSlots: { customRender: 'changeBudget' },

    },
]

const columns = [
  {
    title: '状态',
    dataIndex: 'campaignStatus',
    key: 'campaignStatus',
    align: 'center',
    scopedSlots: { customRender: 'campaignStatus' }
  },
  {
    title: '广告组名称',
    dataIndex: 'name',
    key: 'name',
    align: 'center',
    scopedSlots: { customRender: 'name' }
  },
  {
    title: '广告组ID',
    dataIndex: 'id',
    key: 'id',
    align: 'center',
  },
  {
    title: '推广目的',
    dataIndex: 'landingType_dictText',
    key: 'landingType_text',
    align: 'center',
  },
  {
    title: '预算类型',
    dataIndex: 'budgetMode_dictText',
    key: 'budgetMode_text',
    align: 'center',
    width:250,
    scopedSlots: { customRender: 'budgetMode' }
  },
  {
    title: '组预算(元)',
    dataIndex: 'budget',
    key: 'budget',
    align: 'center',
    scopedSlots: { customRender: 'budget' }
  },
  {
    title: '创建时间',
    dataIndex: 'campaignCreateTime',
    key: 'campaignCreateTime',
    align: 'center',
    scopedSlots: { customRender: 'campaignCreateTime' }
  },
];
const planColumns = [
  {
    title: '状态',
    dataIndex: 'planStatus',
    key: 'planStatus',
    align: 'center',
    scopedSlots: { customRender: 'planStatus' }
  },
    //   {
    //     title: '操作',
    //     dataIndex: 'options',
    //     key: 'options',
    //     align: 'center',
    //     width:200,
    //     scopedSlots: { customRender: 'options' }
    //   },
  {
    title: '计划名称',
    dataIndex: 'name',
    key: 'name',
    align: 'center',
    width:200,
    scopedSlots: { customRender: 'name' }
  },
    // {
    //     title: '计划ID',
    //     dataIndex: 'id',
    //     key: 'id',
    //     align: 'center',
    // },
  {
    title: '账户',
    dataIndex: 'accountId_dictText',
    key: 'accountId_dictText',
    align: 'center',
  },
  {
    title: '计划预算(元)',
    dataIndex: 'budget',
    key: 'budget',
    align: 'center',
    width:150,
    scopedSlots: { customRender: 'budget' }
  },
  {
    title: '出价(元)',

    dataIndex: 'bid',
    key: 'bid',
    align: 'center',
    width:150,
    scopedSlots: { customRender: 'bid' }
  },
  {
    title: '目标转化出价(元)',

    dataIndex: 'cpaBid',
    key: 'cpaBid',
    align: 'center',
    width:150,
    scopedSlots: { customRender: 'cpaBid' }
  },
  {
    title: '投放方式',
    dataIndex: 'flowControlMode',
    key: 'flowControlMode',
    align: 'center',
    scopedSlots: { customRender: 'flowControlMode' }
  },
  {
    title: '投放时间',
    dataIndex: 'time',
    key: 'time',
    align: 'center',
    scopedSlots: { customRender: 'time' }
  },
  {
    title: '所属广告组',
    dataIndex: 'campaignId_dictText',
    key: 'campaignId_dictText',
    align: 'center',
    scopedSlots: { customRender: 'campaignId_dictText' }
  },
  {
    title: '创建时间',
    dataIndex: 'adCreateTime',
    key: 'adCreateTime',
    align: 'center',
    scopedSlots: { customRender: 'adCreateTime' }
  },
];
const ideaColumns = [
  {
    title: '开关',
    dataIndex: 'createStatus',
    key: 'status',
    align: 'center',
    scopedSlots: { customRender: 'createStatus' }
  },
    //   {
    //     title: '操作',
    //     dataIndex: 'options',
    //     key: 'options',
    //     align: 'center',
    //     scopedSlots: { customRender: 'options' }
    //   },
    {
        title: '创意',
        dataIndex: 'createImg',
        key: 'createImg',
        align: 'center',
        width:120,
        scopedSlots: { customRender: 'createImg' }
    },
 
  /*{
    title: '广告创意',
    dataIndex: 'img',
    key: 'img',
    align: 'center',
  },*/
  {
    title: '创意标题',
    dataIndex: 'title',
    key: 'title',
    align: 'center',
  },
   {
    title: '创意ID',
    dataIndex: 'id',
    key: 'id',
    align: 'center',
  },
  /*{
    title: '创意方式',
    dataIndex: 'iaID',
    key: 'idaID',
    align: 'center',
  },*/
  {
    title: '创意状态',
    dataIndex: 'status_dictText',
    key: 'status_dictText',
    align: 'center',
    scopedSlots: { customRender: 'status_dictText' }
  },
  {
    title: '账户',
    dataIndex: 'accountId_dictText',
    key: 'accountId_dictText',
    align: 'center',
  },
  {
    title: '所属计划',
    dataIndex: 'planId_dictText',
    key: 'planId_dictText',
    align: 'center',
    scopedSlots: { customRender: 'planId_dictText' }
  },
  
  {
    title: '创建时间',
    dataIndex: 'creativeCreateTime',
    key: 'creativeCreateTime',
    align: 'center',
    scopedSlots: { customRender: 'creativeCreateTime' }
  },
 /* {
    title: '投放位置',
    dataIndex: 'LaunchPosition',
    key: 'LaunchPosition',
    align: 'center',
    scopedSlots: { customRender: 'LaunchPosition' }
  },*/
];


export default {
    components: {
        editableCell,
        Treeselect,
    },
    // mixins: [JeecgListMixin],
    data() {
        return {
            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;
                }
            },
            currentGroup:{},
            currentPlan:{},           

            spinning:false,
            moment,
           
            accountID:undefined,
            openID:undefined,
            treeData:[],
            // account:'',//媒体账号
            optionId:'',//input输入的id或关键词
            statusValue:undefined,
            dateValue:[],//日期选择框选择
            dateString:[],//--我赋值的是dateString
            tabkey:'group',//tab选中的页
            selectDisable:true,
            optValue:'',//操作设置的值 删除 暂停 开启
            visible: false,//出价里的弹出框
            radioValue:'unlimit',//出价的单选默认值
            dayBudgetValue:0,//日预算的默认值
            offerPriceVisiable:false,//修改出价的弹出框显示与否
            modifyRulesValue:'total',//修改出价里的radio默认值
            ModalTitle:'出价',//模态框的标题
            inputValue:'',//模态框里统一修改时的金额
            //主页的表格
            data:[],
            columns,
            selectedRowKeys:[],
            selectedRows:[],
            loading:false,
            editID:0,
            //批量修改里的表格
            typeValue,
            modifyTableData:[

            ],
            modifyTableCol,
            modifyTableloading:false,


            //复制计划
            copyPlanVisiable:false,
            copyRecord:null,
            copyNum:1,//复制个数
            copyGroup:'',
            url: {
              campaignList: "/ctop/byteDanceCampaign/list",
              planList: "/ctop/byteDanceAdvertisePlan/list",
              creativeList: "/ctop/byteDanceCreative/list",


            },


            xiugaiData:[],//存分别修改时候的数组
        }
    },
    computed: {
        rowSelection(){
            return {
                onChange: (selectedRowKeys, selectedRows) => {
                    // console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
                    this.selectedRowKeys=selectedRowKeys;
                    this.selectedRows=selectedRows;
                },
                onSelect: (record, selected, selectedRows) => {
                    // console.log(record, selected, selectedRows);
                    this.modifyTableData=selectedRows;

                    this.selectedRows=selectedRows;
                },
                onSelectAll: (selected, selectedRows, changeRows) => {
                    // console.log(selected, selectedRows, changeRows);
                    this.modifyTableData=selectedRows
                    this.selectedRows=selectedRows;
                },
            }

        },
    },
    methods: {
        // 点击跳转
        goNextPage(item){
            console.log(item);
            if(this.tabkey=='group'){
                this.tabkey='plan';
                this.columns=planColumns;
                this.loading=true;
                this.data=[];
                this.currentGroup=item
                console.log(item.id)
                this.getplanList({
                    accountId:this.accountID,
                    name:this.optionId,
                    status:this.statusValue,
                    startDate:this.dateString[0],
                    endDate:this.dateString[1],
                    pageNo:this.ipagination.current,
                    pageSize:this.ipagination.pageSize,
                    campaignId:item.id
                })

                let groupInfo=JSON.stringify(item)
                localStorage.setItem('groupInfo',groupInfo)
                
            }else if(this.tabkey=='plan'){
                this.tabkey='idea';
                this.columns=ideaColumns;
                this.loading=true;
                this.data=[];
                this.currentPlan=item
                this.refreshCreativeList({
                    accountId:this.accountID,
                    planId:item.id,
                    name:this.optionId,
                    status:this.statusValue,
                    startDate:this.dateString[0],
                    endDate:this.dateString[1],
                    pageNo:this.ipagination.current,
                    pageSize:this.ipagination.pageSize,
                })
                let planInfo=JSON.stringify([item])
                localStorage.setItem('planInfo',planInfo)
            }
            
        },
        // 清空选中的组信息
        clearGroup(){
            this.currentGroup={};
            this.loading=true;
            this.getplanList({
                accountId:this.accountID,
                name:this.optionId,
                status:this.statusValue,
                startDate:this.dateString[0],
                endDate:this.dateString[1],
                pageNo:this.ipagination.current,
                pageSize:this.ipagination.pageSize,
                campaignId:this.currentGroup.id
            })
        },
        // 清空选中的计划
        clearPlan(){
            this.currentPlan={};
            this.loading=true;
            this.refreshCreativeList({
                accountId:this.accountID,
                name:this.optionId,
                status:this.statusValue,
                startDate:this.dateString[0],
                endDate:this.dateString[1],
                pageNo:this.ipagination.current,
                pageSize:this.ipagination.pageSize,
                planId:this.currentPlan.id,
            })
        },
        // table里的函数

        // table里的函数在上

        accountIDChange(val){
            // console.log(val);
            let currentData=this.treeData.filter((item)=>{
                return item.value==val
            })
            // console.log(currentData);
            if(currentData.length>0){
                this.accountID=undefined;
                this.openID=val
            }
            
            this.search();
            this.treeData.forEach((item)=>{
                item.children.forEach(ele=>{
                    if(ele.value==this.accountID){
                        let accountInfo=JSON.stringify(ele)
                        localStorage.setItem('accountInfo',accountInfo)
                    }
                })
            })
        },

        filterOption(input, option){
            // console.log(input, option)
            return (
                option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
            );
        },
        //tab切换页的函数
        callback(key) {
            // console.log(key);
            this.tabkey=key;

            // this.columns=[];
            if(key=='group'){
                this.columns=columns;
            }else if(key=='plan'){
                this.columns=planColumns;
            }else if(key=='idea'){
                this.columns=ideaColumns;
            }

            if(this.accountID){
                this.tabkey=key;
                this.loading=true
                if(key=='group'){
                    
                    this.refreshCampaignList({
                        accountId:this.accountID,
                        name:this.optionId,
                        status:this.statusValue,
                        startDate:this.dateString[0],
                        endDate:this.dateString[1],
                        pageNo:this.ipagination.current,
                        pageSize:this.ipagination.pageSize,
                        
                    });
                }else if(key=='plan'){
                    this.getplanList({
                        accountId:this.accountID,
                        name:this.optionId,
                        toutiaoStatus:this.statusValue,
                        startDate:this.dateString[0],
                        endDate:this.dateString[1],
                        pageNo:this.ipagination.current,
                        pageSize:this.ipagination.pageSize,
                        campaignId:this.currentGroup.id
                    })

                }else if(key=='idea'){
                    let params = {};
                      this.refreshCreativeList({
                        accountId:this.accountID,
                        planId:this.currentPlan.id,
                        name:this.optionId,
                        status:this.statusValue,
                        startDate:this.dateString[0],
                        endDate:this.dateString[1],
                        pageNo:this.ipagination.current,
                        pageSize:this.ipagination.pageSize,
                      });
                }
            }

        },
        //跳转到批量页面
        goBatch(){
            
            this.$router.push('/modules/BatchCreate/newGroup')
            
            
        },
        createPlan(){
            if(this.currentGroup.name){
                console.log(this.currentGroup)
                this.$router.push('/modules/BatchCreate/newPlan');
                let groupInfo=JSON.stringify(this.currentGroup);
                localStorage.setItem('groupInfo',groupInfo)
            }else {
                this.$router.push('/modules/BatchCreate/newGroup')
            }
        },
        createIdea(){
            if(this.accountID){
                if(this.currentPlan.name){
                    // console.log(this.currentPlan)                  
                    let groupInfo=JSON.stringify(this.currentGroup);
                    localStorage.setItem('groupInfo',groupInfo)
                    let planInfo=JSON.stringify([this.currentPlan]);
                    localStorage.setItem('planInfo',planInfo)
                    this.$router.push('/modules/BatchCreate/newCreate');
                }else if(!this.currentPlan.name){
                    // console.log('hhhh    去新建或者选择已有');
                    this.$router.push('/modules/BatchCreate/selectPlanList');
                }
            }else {
                this.$router.push('/modules/BatchCreate/newGroup')
            }
        },
        //状态改变
        statusChange(value){
            console.log(value);

        },
        //日期改变
        dateChange(date, dateString) {
            console.log(date, dateString);
            this.dateString=dateString;
        },
        disabledDate(current) {
            // console.log(current)
            return current && current > moment().subtract(1, 'day')
        },
        //输入框查询事件
        onSearch(value){
            // console.log('input--'+value);
        },
        //查询按钮事件
        search(){
            // console.log(this.accountID,this.dateString,this.statusValue,this.optionId);

            if(this.accountID){
                this.loading=true
                if(this.tabkey=='group'){
                    this.columns=columns;
                    this.refreshCampaignList({
                        accountId:this.accountID,
                        name:this.optionId,
                        status:this.statusValue,
                        startDate:this.dateString[0],
                        endDate:this.dateString[1],
                        pageNo:this.ipagination.current,
                        pageSize:this.ipagination.pageSize,
                    })
                }else if(this.tabkey=='plan'){
                    this.columns=planColumns;
                    this.getplanList({
                        accountId:this.accountID,
                        name:this.optionId,
                        status:this.statusValue,
                        startDate:this.dateString[0],
                        endDate:this.dateString[1],
                        pageNo:this.ipagination.current,
                        pageSize:this.ipagination.pageSize,
                        campaignId:this.currentGroup.id
                    })
                }else if(this.tabkey=='idea'){
                    this.columns=ideaColumns;
                    this.refreshCreativeList({
                        accountId:this.accountID,
                        name:this.optionId,
                        status:this.statusValue,
                        startDate:this.dateString[0],
                        endDate:this.dateString[1],
                        pageNo:this.ipagination.current,
                        pageSize:this.ipagination.pageSize,
                        planId:this.currentPlan.id,
                    })
                }
            }else{
                this.$message.error('请选择账户后重试')
            }

        },
        //点击分页
        sort(pagination, filters, sorter, { currentDataSource }){
            
            this.ipagination.current=pagination.current;

            this.ipagination.pageSize=pagination.pageSize;
            this.search()
        },
        //重置按钮事件
        reset(){

        },
        //状态改变
        switchChange(text,record){
            // this.spinning=true;
            // console.log(text,record);
            let recordData=JSON.parse(JSON.stringify(record))
            record.spin=true;
            if(this.tabkey=='group'){
                let ids=record.id;
                let status=text?'disable':'enable';
                postAction('/ctop/byteDanceCampaign/editStatus',qs.stringify({
                    accountId:this.accountID,
                    ids:`${ids}`,
                    status:status,
                })).then((res)=>{
                    //    console.log(res);
                        // this.spinning=false;
                        record.spin=false;
                    if(res.success){
                        this.refreshCampaignList({
                                accountId:this.accountID,
                                name:this.optionId,
                                status:this.statusValue,
                                startDate:this.dateString[0],
                                endDate:this.dateString[1],
                                pageNo:this.ipagination.current,
                                pageSize:this.ipagination.pageSize,
                                
                            })
                            this.$message.success(res.message)
                    }else{
                        this.$message.error(res.message)
                    }
                })
           }else if(this.tabkey=='plan'){

                if(text){
                    recordData.optStatus='AD_STATUS_DISABLE';
                }else{
                    recordData.optStatus='AD_STATUS_ENABLE'
                }
                this.batchEditHttp('status',[recordData])

           }else if(this.tabkey=='idea'){
               let ids=record.id;
               let status=text?'disable':'enable';
                postAction('/ctop//byteDanceCreative/editStatus',qs.stringify({
                   accountId:this.accountID,
                   ids:`${ids}`,
                   status:status,
               })).then((res)=>{
                //    console.log(res);
                
                    if(res.success){
                        //    this.data=[];
                        record.spin=false;
                            this.refreshCreativeList({
                                accountId:this.accountID,
                                name:this.optionId,
                                status:this.statusValue,
                                startDate:this.dateString[0],
                                endDate:this.dateString[1],
                                pageNo:this.ipagination.current,
                                pageSize:this.ipagination.pageSize,
                                planId:this.currentPlan.id,
                                
                            })
                    }else{
                        record.spin=false;
                        this.$message.error(res.message)
                    }
               })
           }

        },


        //改变批量操作的按钮
        changeSelectStatus(){
            this.selectDisable=false;
        },
        //批量操作下的启动 删除 暂停
        optChange(value){
            // console.log(value)
            this.optValue=value;
        },
        editGroupStatus(url){
            let ids='';
            this.selectedRows.forEach((item,index)=>{
                if(index==0){
                    ids=`${item.id}`
                }else{
                        ids+=`,${item.id}`
                }

            })
            let status=''
            if(this.optValue=='pause'){
                status='disable'
            }else if(this.optValue=='open'){
                status='enable'
            }else if(this.optValue=='delete'){
                status='delete'
            }
            postAction(url,qs.stringify({
                accountId:this.accountID,
                ids,
                status,
            })).then((res)=>{
                console.log(res);
                // this.loading=false
                this.optValue=undefined;
                if(res.success){
                    this.$message.success(res.message)
                    // this.data=[];
                    this.refreshCampaignList({
                        accountId:this.accountID,
                        name:this.optionId,
                        status:this.statusValue,
                        startDate:this.dateString[0],
                        endDate:this.dateString[1],
                        pageNo:this.ipagination.current,
                        pageSize:this.ipagination.pageSize,
                    })
                }else{
                    this.loading=false
                    // if(this.selectedRows.length>0){
                    //     this.selectedRows.forEach(item=>{
                    //         item.spin=false;
                    //     })
                    // }
                    this.selectedRowKeys=[];
                    this.selectedRows=[];
                    this.optValue=undefined;
                    this.$message.error(res.message)
                }
                
                
                
            })
        },
        //批量操作的确定按钮
        isOkHandle(){
            console.log(this.optValue&&this.selectedRowKeys.length>0)
            if(this.optValue&&this.selectedRowKeys.length>0){
                // this.selectedRows.forEach(item=>{
                //     item.spin=true;
                // })
            
                if(this.optValue=='pause'){   
                    this.loading=true;
                    if(this.tabkey=='group'){
                        console.log(this.selectedRows);                       
                        this.editGroupStatus('/ctop/byteDanceCampaign/editStatus')

                    }else if(this.tabkey=='plan'){
                        // console.log(0)
                        this.loading=true;
                        if(this.selectedRowKeys.length>0){
                            this.selectedRows.forEach((item)=>{
                                item.optStatus='AD_STATUS_DISABLE'
                            })
                        }
                        console.log(0)
                        this.batchEditHttp('status',this.selectedRows)
                    }else if(this.tabkey=='idea'){
                        this.loading=true;
                        this.editGroupStatus('/ctop/byteDanceCreative/editStatus')
                    }

                }else if(this.optValue=='open'){
                    this.loading=true;
                    if(this.tabkey=='group'){
                        this.editGroupStatus('/ctop/byteDanceCampaign/editStatus');
                    }else if(this.tabkey=='plan'){
                        if(this.selectedRowKeys.length>0){
                            this.selectedRows.forEach((item)=>{
                                item.optStatus='AD_STATUS_ENABLE'
                            })
                        }
                        this.batchEditHttp('status',this.selectedRows)
                    }else if(this.tabkey=='idea'){
                         this.editGroupStatus('/ctop/byteDanceCreative/editStatus');
                    }

                }
              
                // this.selectedRows=[];
                // this.selectedRowKeys=[];
                
            }
            
        },
        //确定删除
        confirm(e) {
            // console.log(e);
                this.loading=true;
                if(this.optValue=='delete'){
                    
                     if(this.tabkey=='group'){
                         this.editGroupStatus('/ctop/byteDanceCampaign/editStatus')
                    }else if(this.tabkey=='plan'){
                        if(this.selectedRowKeys.length>0){
                            this.selectedRows.forEach((item)=>{
                                item.optStatus='AD_STATUS_DELETE'
                            })
                        }
                        this.batchEditHttp('status',this.selectedRows)
                        this.$message.success('删除成功');
                    }else if(this.tabkey=='idea'){
                        this.editGroupStatus('/ctop/byteDanceCreative/editStatus');
                    }

                }



        },
        //取消删除
        cancel(e) {
            // console.log(e);
            // this.$message.error('删除成功');
        },
        //预算里 取消按钮点击
        showPricecancel() {
            // console.log(111);
            this.visible = false;
            this.dayBudgetValue=0
            this.radioValue='unlimit'
        },
        showPriceOk(){
            this.visible = false;
        },
        //单选按钮改变事件
        radioChange(e) {
            // console.log('radio checked', e.target.value,this.radioValue);
        },
        totalbudgetChange(val){
            // console.log(this.inputValue,'------',val)
        },
        budgetChange(e,record){
            // console.log(e.target.value,'------',record);
            this.xiugaiData.push(JSON.parse(JSON.stringify(record)))
            if(this.typeValue=='预算'){
                if(e.target.value ){
                    this.xiugaiData.forEach((item)=>{
                        if(item.id==record.id){
                            item.budget=e.target.value*1
                        }
                    })
                    // console.log(this.xiugaiData)
                }

            }else if(this.typeValue=='出价'){
                if(e.target.value ){
                    this.xiugaiData.forEach((item)=>{
                        if(item.id==record.id){
                            item.bid==e.target.value*1
                        }
                    })

                }
            }

        },
        //广告计划下的预算
        changebudget(){
            this.offerPriceVisiable=true;
            this.ModalTitle='预算'
            this.typeValue='预算'
            this.modifyTableCol[4].title='修改预算';
            this.xiugaiData=[];
            this.inputValue=undefined;
        },
        //修改出价
        changeofferPrice(){
            this.offerPriceVisiable=true;
            this.ModalTitle='出价'
            this.typeValue='出价';
            this.modifyTableCol[4].title='修改出价';
            this.xiugaiData=[]
            this.inputValue=undefined
        },
        //批量修改出价和预算的弹出框确定
        modifyChangeOk(e) {
            // console.log(e);
            this.offerPriceVisiable = false;
            // console.log(this.inputValue);
            if(this.modifyRulesValue=='separately'){

                let batchArr=[...this.xiugaiData];
                let changeZiduan=''
                if(this.typeValue=='预算'){
                    changeZiduan='budget'
                }else if(this.typeValue=='出价'){
                    changeZiduan='bid'
                }
                // console.log(batchArr)
                this.batchEditHttp(changeZiduan,batchArr)
            }else if(this.modifyRulesValue=='total'){
                let batchArr=[...this.modifyTableData]
                if(this.typeValue=='出价'){
                    batchArr.forEach((item)=>{
                        item.bid=this.inputValue
                    })
                    this.batchEditHttp('bid',batchArr)
                }else if(this.typeValue=='预算'){
                    batchArr.forEach((item)=>{
                        item.budget=this.inputValue
                    })
                    this.batchEditHttp('budget',batchArr)
                }

            }

            this.modifyTableData=[];
            this.selectedRowKeys=[]


        },
        batchEditHttp(type,params){
            postAction(`/ctop/byteDanceAdvertisePlan/batchEdit/${type}`,params).then((res)=>{
                // console.log(res);
                this.optValue=undefined;
                if(res.success){
                    if(res.result.length>0){
                        this.modifyTableData=[]
                        this.modifyTableData=res.result
                        
                        this.getplanList({
                            accountId:this.accountID,
                            name:this.optionId,
                            status:this.statusValue,
                            startDate:this.dateString[0],
                            endDate:this.dateString[1],
                            pageNo:this.ipagination.current,
                            pageSize:this.ipagination.pageSize,
                            campaignId:this.currentGroup.id
                        })
                    }
                    // params.spin=false;
                    params.forEach(item=>{
                        item.spin=false;
                    })
                    this.optValue=undefined;
                    this.selectedRowKeys=[];
                    this.$message.success(res.message)
                }else{
                    // params.spin=false;
                    // params.forEach(item=>{
                    //     item.spin=false;
                    // })
                    this.loading=false;
                    this.getplanList({
                        accountId:this.accountID,
                        name:this.optionId,
                        status:this.statusValue,
                        startDate:this.dateString[0],
                        endDate:this.dateString[1],
                        pageNo:this.ipagination.current,
                        pageSize:this.ipagination.pageSize,
                        campaignId:this.currentGroup.id
                    })
                    this.$message.error(res.message)
                }
            })
        },
        //修改规则的改变
        modifyRulesChange(e){
            // console.log(e.target.value)
            this.modifyRulesValue=e.target.value
            if(e.target.value=='total'){
                this.inputValue=''
            }else{
                this.inputValue=0
            }
        },
        

        //点击修改广告名
        // changecampaignName(text,record){
        //     console.log(text,record)
        // },

        onCellChange(key, dataIndex, value) {
            // console.log(key, dataIndex, value)
            
                const dataSource = [...this.data];
                const target = dataSource.find(item => item.key === key);
                if (target) {
                    target[dataIndex] = value;
                    console.log(target)
                    //单独修改预算
                    if(this.tabkey=='group'){
                        if(dataIndex=='name'){
                            postAction('/ctop/byteDanceCampaign/edit',{
                                accountId:this.accountID,
                                id:key,
                                campaignName:value,
                            }).then((res)=>{
                                console.log(res);
                                if(res.success){
                                    this.data=dataSource
                                    this.$message.success(res.message)
                                }else{
                                    this.$message.error(res.message)
                                    this.data=[];
                                    this.refreshCampaignList({
                                        accountId:this.accountID,
                                        name:this.optionId,
                                        status:this.statusValue,
                                        startDate:this.dateString[0],
                                        endDate:this.dateString[1],
                                        pageNo:this.ipagination.current,
                                        pageSize:this.ipagination.pageSize,
                                    })
                                }
                            })
                        }else if(dataIndex=='budget'){
                            postAction('/ctop/byteDanceCampaign/edit',{
                                accountId:this.accountID,
                                id:key,
                                budget:value,
                            }).then((res)=>{
                                console.log(res);
                                if(res.success){
                                    // this.data = dataSource;
                                    target[dataIndex] = value;
                                    this.$message.success({
                                        content:res.message,
                                        duration:2
                                    })
                                }else{
                                    this.$message.error({
                                        content:res.message,
                                        duration:2
                                    })
                                }
                            })
                        }

                    }else if(this.tabkey=='plan'){
                        postAction('/ctop/byteDanceAdvertisePlan/edit',target).then((res)=>{
                            console.log(res);
                            if(res.success){
                                this.data = dataSource;                      
                                this.$message.success('修改成功！')
                            }else{
                                this.$message.error(res.message);
                                this.getplanList({
                                    accountId:this.accountID,
                                    name:this.optionId,
                                    status:this.statusValue,
                                    startDate:this.dateString[0],
                                    endDate:this.dateString[1],
                                    pageNo:this.ipagination.current,
                                    pageSize:this.ipagination.pageSize,
                                    campaignId:this.currentGroup.id
                                })
                            }
                        })
                    }else if(this.tabkey=='idea'){

                    }


                }
            
            // console.log(this.data)
        },


        //复制广告计划
        copyPlan(record){
            this.copyRecord=record;
            this.copyPlanVisiable=true;
        },

        copyPlanOk(e) {
            this.copyPlanVisiable = false;
            // console.log(this.copyNum,'---',this.copyGroup)
        },
        refreshCampaignList(params){
            // this.loading=true
          getAction(this.url.campaignList, params).then(res => {
            // console.log(res);
            this.loading = false;
            if (res.success) {
                this.ipagination.total = res.result.total
                         
                this.data = res.result.records.map(item=>{

                    return {
                        ...item,
                        spin:false,
                        key:item.id
                    }
                });
                this.selectedRows=[];
                this.selectedRowKeys=[];
                
            } else {
            //   console.log(res.message);
                this.selectedRows=[];
                this.selectedRowKeys=[];
            }
          })
        },
        getplanList(params){

            getAction(this.url.planList,params).then((res)=>{
                this.data=[]
                console.log(res)
                this.loading = false
                if(res.success){

                    this.ipagination.total = res.result.total
                    
                    res.result.records.forEach((item)=>{
                        item.key=item.id
                    })

                    this.data = res.result.records.map(item=>{

                        return {
                            ...item,
                            spin:false
                        }
                    });
                    // console.log(this.data)
                    this.selectedRowKeys=[];
                }
            })
        },

        refreshCreativeList(params){
            this.loading=true;
            getAction(this.url.creativeList, params).then(res => {
                // console.log(res);
                this.loading=false;
                if (res.success) {
                    this.ipagination.total = res.result.total
                    this.loading = false;
                    res.result.records.forEach((item)=>{
                            item.key=item.id
                    })
                    // this.data = res.result.records;
                    this.data = res.result.records.map(item=>{

                        return {
                            ...item,
                            spin:false
                        }
                    });
                } else {
                    // console.log(res.message);
                }
            })
        },
        //请求项目和账户内容
        accountHttp(){
            this.treeData=[];
            this.accountID=undefined;
            getAction('/ctop/projectMember/getProjectAccountByUserId?mediaType=1', {}).then(res => {
            if(res.success){
                    // console.log(res);
                    if(res.result){
                        res.result.forEach((element,index) => {
                        if(element){
                            this.treeData.push({});
                            this.treeData[index].title=element.project.projectName +'_('+ element.project.advertiserName +')';
                            this.treeData[index].value='project'+element.project.projectId;
                            this.treeData[index].key=element.project.projectId;
                            this.treeData[index].mediaId=element.project.mediaId;
                            this.treeData[index].children=[];

                            if(element.account.length){
                            element.account.forEach((ele,i)=>{
                                this.treeData[index].children.push({});
                                this.treeData[index].children[i].title=ele.userName+'_'+ele.authName;
                                this.treeData[index].children[i].value=ele.accountId;
                                this.treeData[index].children[i].key=ele.accountId;
                            })

                            }
                        }
                        });
                        // console.log(this.treeData)

                    }
            }
            })
        },
    },
    mounted() {
        this.accountHttp()
    },
    
    activated() {
        // this.accountHttp()
    },
    beforeDestroy() {
        this.treeData.forEach((item)=>{
            item.children.forEach(ele=>{
                if(ele.value==this.accountID){
                    let accountInfo=JSON.stringify(ele)
                    localStorage.setItem('accountInfo',accountInfo)
                }
            })
        })
       

    },
    filters: {
        toPercentage(val) {
            if(val){
                if(typeof val != 'string'){
                    return (val * 100).toFixed(2) + '%'
                }else{
                    return val
                }
            }else if(typeof val =='string'){
                    return val
                }
            else{
                return 0
            }
        },
        //保留两位小数并且变成货币格式
        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||val==0)&& typeof val !='string'){
                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 if(typeof val =='string'){
                    return val
            }
            else{
                return '-'
            }

        }
    }
}
</script>
<style lang="scss">
    #closeIcon{
         color: #0E74D2;
    }
    .toutiaoBatch{
        .ant-tag .anticon-close {      
            color: #1890ff;        
        }
        .ant-tag .anticon-close:hover{      
            color: rgba(0, 0, 0, 0.85);    
        }

    }
    
    .ant-tooltip-inner,.ant-tooltip,.ant-tooltip-arrow::before{
        background-color: #fff;
        color: #333;
    }
    #batchModal{
        .rules,.totalPrice{
            font-weight: 600;
        }

        .selectePlan{
            font-size: 14px;
            font-weight: 700;
            color: #333;
            padding: 20px 0;
        }
        .totalPrice{
            margin-left: 20px;
        }
        .modifyTable{
            margin-top: 20px;
            width: 100%;
            height: 400px;
            overflow: auto;
            font-weight: 600;
        }
    }
    #copyModal{
        .ant-modal-header{
            text-align: center;
        }
        .copyTip{
            font-size: 12px;
            color: #999;
        }
        .copyName{
            width: 118px;
            display: inline-block;
            text-align: right;
            .copyKeyStart{
                color: red;
            }
        }
        // font-weight: 600;
    }
</style>
<style lang="scss" scoped>
.toutiaoBatch{
    background-color: #fff;
    padding: 10px 20px;
    position: relative;
    width: 100%;
    .OptinItem{
        display: inline-block;
        margin-right: 15px;
        .ok{
            margin-right: 15px;
        }
    }
    .OptinItem:first-child{
        margin-right: 10px;
    }
    .topOptions{
        padding: 15px 0;
        .topOpt{
            width: 100%;
            margin-bottom: 10px;
        }
    }
    .optionBtn{
        // display: inline-block;
        float: right;
        .searchBtn{
            margin-right: 10px;
        }
    }
    .tableArea{
        .tableOption{
            padding: 20px 0;
        }
    }


}

</style>