<template>
    <div class="jixiao">
        <div class="top">
            <div class="topSel">
                <div class="company">
                    <span>公司：</span>
                    <a-select v-model="company" style="width: 120px" @change="companyChange">
                        <a-select-option value="" v-if="selectOption.company.length>1">
                            全部
                            </a-select-option>
                            <a-select-option v-for="(item) in selectOption.company" :value='item.companyId' :key="item.companyId">
                               {{item.area}}
                            </a-select-option>                   
                        </a-select>
                </div>
                <div>
                    <span>媒体类型：</span>
                    <a-select v-model="mediaType" style="width: 120px" @change="mediaTypeChange">
                        <a-select-option :value="0">
                            全部
                        </a-select-option>
                        <a-select-option v-for="(item) in selectOption.mediaType" :value='item.num' :key='item.code'>
                            {{item.name}}
                        </a-select-option>                    
                    </a-select>
                </div>
                <div>
                    <span>年份：</span>
                    <a-select v-model="years" style="width: 120px" @change="yearsChange">
                        <a-select-option :value='0'>
                            全部
                        </a-select-option>
                        <a-select-option v-for="(item,index) in yearsArr" :value="item" :key='index'>
                            {{item}}
                        </a-select-option>
                        
                    </a-select>
                </div>
                <div>
                    <span>季度：</span>
                    <a-select v-model="quarter" style="width: 120px" @change="quarterChange">
                        <a-select-option value="">
                            全部
                        </a-select-option>
                        <a-select-option v-for="(item,index) in quarterArr" :value='item' :key='index'>
                            {{item}}
                        </a-select-option>
                        
                    </a-select>
                </div>
            </div>
            
            <div class="optionBTN">
                <div>                
                    <span>部门：</span>
                    <a-select v-model="department" style="width: 120px" @change="departmentChange">
                        <a-select-option value=''>
                            全部
                        </a-select-option>
                        <a-select-option v-for="(item,index) in selectOption.depart" :value="item" :key="index">
                            {{item}}
                        </a-select-option>                   
                    </a-select>
                </div>
                <div>                
                    <span>职位：</span>
                    <a-select v-model="position" style="width: 120px" @change="positionChange">
                        <a-select-option value=''>
                            全部
                        </a-select-option>
                        <a-select-option v-for="item in selectOption.post" :value="item.roleCode" :key="item.id">
                            {{item.roleName}}
                        </a-select-option>                   
                    </a-select>
                </div>
                <div>                
                    <span>姓名：</span>
                    <a-input placeholder="请输入姓名" v-model="nameValue" style="width:200px" />
                </div>
               <span class="btn">
                   <a-button class="search" type='primary' @click="search">查询</a-button>
                    <a-button type="primary" @click="exportExcel" id="mybtn">导出报表</a-button>
               </span>
                
            </div>
        </div>
        
        <div class="tableBox">
            <a-table
                size="middle"
                :columns="columns"
                :dataSource="tableData"
                bordered
                id="outTable"
                :pagination="ipagination"
                :scroll="{ x: scrollX }"
                :loading="loading"
                ref="accountTable"
                :width="tableWidth"
                @change="sort"
                style="word-break: break-all;font-size:16px;font-weight:600"
              >
                <span slot="operation" slot-scope="text, record">
                        <a href="javascript:;" @click="opendetail(text, record)">查看明细</a>
                 </span>
                 <span slot="cost" slot-scope="cost">{{cost | decimalsHandle}}</span>
                 
                 <span slot="performance" slot-scope="performance">{{performance | decimalsHandle}}</span>
                 <span slot="point" slot-scope="point">{{ point | pointHandle }}</span>
                 <span slot="mediaType" slot-scope="text">
                     <span v-if="text==1">头条</span>
                     <span v-if="text==2">快手</span>
                     <span v-if="text==3">头条内广</span>
                     <span v-if="text==4">快手内广</span>
                 </span>
            </a-table>
        </div>
         <!-- 明细表 -->
        <div class="detailBoxPerform">
            <a-modal v-model="visibleDetail" title="详细信息" width="70%" :footer="null" id="detailBoxPerform">
                <!-- <a-button type="default" @click="exportExcel" id="mybtn">导出报表</a-button> -->
                <div class="myTable">
                    <a-table
                        :columns="detailColumns"
                        :data-source="detailData"
                        bordered
                        tableLayout="auto"
                        :pagination="false"
                        :loading='loadingDetail'
                        style="word-break: break-all;"
                        id="myTablePerform"
                        :scroll="{ y: 500 }"
                        >
                        <span slot="cost" slot-scope="cost">{{ cost | decimalsHandle }}</span>
                        <span slot="totalCost" slot-scope="totalCost">{{ totalCost | decimalsHandle }}</span>
                        <span slot="materialCost" slot-scope="materialCost">{{ materialCost | decimalsHandle }}</span>
                        <span slot="oldCost" slot-scope="oldCost">{{ oldCost | decimalsHandle }}</span>
                        <span slot="newCost" slot-scope="newCost">{{ newCost | decimalsHandle }}</span>
                        <span slot="personCost" slot-scope="personCost">{{ personCost | decimalsHandle }}</span>
                        <span slot="percent" slot-scope="percent">{{ percent | toPercentage }}</span>
                        <span slot="oldPercent" slot-scope="oldPercent">{{ oldPercent | toPercentage }}</span>
                        <span slot="newPercent" slot-scope="newPercent">{{ newPercent | toPercentage }}</span>
                        
                        <div slot="urls" slot-scope="test,records">
                            <img
                            :src="records.coverUrl"
                            alt
                            style="width:100px"
                            @click="openVideo(records.url)"                           
                            />
                        </div>
                        <span slot="mediaType" slot-scope="text">
                            <span v-if="text==1">头条</span>
                            <span v-if="text==2">快手</span>
                            <span v-if="text==3">头条内广</span>
                            <span v-if="text==4">快手内广</span>
                        </span>
                    </a-table>
                    <div class="fenye">
                        <a-pagination v-if="totalItem>0" v-model="currentPage" :total="totalItem" id="fenye" show-less-items style="margin: 20px 5px 5px;"  size="small" @change="pageChange"/>
                    </div>                   
                </div>               
            </a-modal>
        </div>
        
        <a-modal v-model="Videovisible" title="视频详情" @ok="videoOk" :footer="null" width="50%">
            <video
                @click.stop
                class="video"
                :src="videoUrl"
                controls="controls"
                style="height:600px;width:100%"
            >您的浏览器不支持 video 标签。</video>
        </a-modal>
    </div>
</template>


<script>
import moment from 'moment';
import { getAction, postAction, downFile, downFilePost } from '@/api/manage';
import { JeecgListMixin } from '@/mixins/ipagination'


const columnsFixd = [
  {
    title: '姓名',
    dataIndex: 'userName',
    align: 'center',
    key:'userName',
    scopedSlots: { customRender: 'userName' }
  },
  {
    title: '部门',
    dataIndex: 'department',
    align: 'center', 
    key: 'department',
    scopedSlots: { customRender: 'department' }
  },
  {
    title: '职位',
    dataIndex: 'roleName',
    align: 'center',
    
    key: 'roleName',
    scopedSlots: { customRender: 'roleName' }
  },
  {
    title: '媒体类型',
    dataIndex: 'mediaType',
    align: 'center',
    scopedSlots: { customRender: 'mediaType' }
  },
   {
    title: '季度',
    dataIndex: 'quarters',
    align: 'center',
    scopedSlots: { customRender: 'quarters' }
  },
  {
    title: '消耗(元)',
    dataIndex: 'cost',
    align: 'center',
    scopedSlots: { customRender: 'cost' },
    
  },
  {
    title: '提成比例',
    dataIndex: 'point',
    align: 'center',
    scopedSlots: { customRender: 'point' },
    
  },
            // {
            //     title: '应得绩效',
            //     dataIndex: 'performance',
            //     align: 'center',
            //     scopedSlots: { customRender: 'performance' },
            //     sorter:()=>{}
            // },
            // {
            //     title: '管理岗绩效',
            //     dataIndex: 'additionalFees',
            //     align: 'center',
            //     scopedSlots: { customRender: 'additionalFees' },
            //     sorter:()=>{}
            // },
  {
    title: '操作',
    dataIndex: 'operation',
    align: 'center',
    scopedSlots: { customRender: 'operation' },
    
  }
]
const elseColumns = [
  {
    title: '姓名',
    dataIndex: 'userName',
    align: 'center',
    key:'userName',
    scopedSlots: { customRender: 'userName' }
  },
  {
    title: '部门',
    dataIndex: 'department',
    align: 'center', 
    key: 'department',
    scopedSlots: { customRender: 'department' }
  },
  {
    title: '职位',
    dataIndex: 'roleName',
    align: 'center',
    
    key: 'roleName',
    scopedSlots: { customRender: 'roleName' }
  },
  {
    title: '媒体类型',
    dataIndex: 'mediaType',
    align: 'center',
    scopedSlots: { customRender: 'mediaType' }
  },
   {
    title: '季度',
    dataIndex: 'quarters',
    align: 'center',
    scopedSlots: { customRender: 'quarters' }
  },
  {
    title: '消耗(元)',
    dataIndex: 'cost',
    align: 'center',
    scopedSlots: { customRender: 'cost' },
    
  },
 
  {
    title: '操作',
    dataIndex: 'operation',
    align: 'center',
    scopedSlots: { customRender: 'operation' },
    
  }
]

const operateDetailColumns=[
    {
        title: '季度',
        dataIndex: 'quarters',
        align: 'center',
        scopedSlots: { customRender: 'quarters' },
       
        width:200
    },
    {
        title: '项目',
        dataIndex: 'projectName',
        align: 'center',
        scopedSlots: { customRender: 'projectName' },
      
        width:200
    },
    {
        title: '账户名称',
        dataIndex: 'authName',
        align: 'center',
        scopedSlots: { customRender: 'authName' },
        
        
    },
    {
        title: '消耗(元)',
        dataIndex: 'cost',
        align: 'center',
        scopedSlots: { customRender: 'cost' },
        width:150,
  },
]

const saleDetailColumns = [
    {
        title: '季度',
        dataIndex: 'quarters',
        align: 'center',
        scopedSlots: { customRender: 'quarters' },       
        width:110
    },
    {
        title: '老客消耗(元)',
        dataIndex: 'oldCost',
        align: 'center',
        scopedSlots: { customRender: 'oldCost' },
        
        width:115
    },
    {
        title: '新客消耗(元)',
        dataIndex: 'newCost',
        align: 'center',
        scopedSlots: { customRender: 'newCost' },
       
        width:115,
    },
    {
        title: '老客提成比例',
        dataIndex: 'oldPercent',
        align: 'center',
        scopedSlots: { customRender: 'oldPercent' },
       
        width:120
    },
    {
        title: '新客提成比例',
        dataIndex: 'newPercent',
        align: 'center',
        scopedSlots: { customRender: 'newPercent' },
        
        width:120,
    },
    {
        title: '广告主名称',
        dataIndex: 'name',
        align: 'center',
        scopedSlots: { customRender: 'name' },
        
       
  },
    {
        title: '总消耗(元)',
        dataIndex: 'totalCost',
        align: 'center',
        scopedSlots: { customRender: 'totalCost' },
        width:100,
  },
]

const designDetailColumns = [
    {
        title: '媒体类型',
        dataIndex: 'mediaType',
        align: 'center',
        scopedSlots: { customRender: 'mediaType' },
        width:100,
    },
    {
        title: '项目',
        dataIndex: 'projectName',
        align: 'center',
        scopedSlots: { customRender: 'projectName' },
        width:100,
        
    },
    {
        title: '视频',
        dataIndex: 'urls',
        align: 'center',
        scopedSlots: { customRender: 'urls' },
        width:140,        
    },
    {
        title: '素材消耗(元)',
        dataIndex: 'materialCost',
        align: 'center',
        scopedSlots: { customRender: 'materialCost' },
        
        width:120,        
    },
    {
        title: '个人消耗(素材消耗*绩效占比)',
        dataIndex: 'personCost',
        align: 'center',
        scopedSlots: { customRender: 'personCost' },      
    },
    {
        title: '设计负责人',
        dataIndex: 'leaderName',
        align: 'center',
        scopedSlots: { customRender: 'leaderName' },
        width:110,
    },
    {
        title: '职位',
        dataIndex: 'roleName',
        align: 'center',
        scopedSlots: { customRender: 'roleName' },
        width:100,
    },
    
    {
        title: '绩效占比',
        dataIndex: 'percent',
        align: 'center',
        scopedSlots: { customRender: 'percent' },
        width:100,
  },
]
    


export default {
    mixins:[JeecgListMixin],
    data() {
        return {
            selectOption:{
                company:{}
            },
            yearsArr:[],
            quarterArr:[],
            company:'',
            mediaType:0,
            position:'',
            department:'',
            quarter:'',//季度数据
            years:0,
            nameValue:'',
            //table数据
            columns:JSON.parse(JSON.stringify(columnsFixd)) ,//table的表头
            columnsFixd,
            elseColumns,
            tableData:[],
            scrollX:0,       
            tableWidth: '',//设置表格的列宽
            loading:false,

            //是否打开视频
            Videovisible: false,
            videoUrl: '',

            visibleDetail:false, //明细表的开关
            detailData:[],
            loadingDetail:false,
            detailColumns:JSON.parse(JSON.stringify(operateDetailColumns)),
            operateDetailColumns,//运行
            saleDetailColumns,//销售的详细表头
            designDetailColumns,//设计的详细表头

            //fenye
            currentPage:1,
            totalItem:0,

            currentRecord:null
        }
    },
    methods: {
        moment,
        //chaxun anniu 
        search(){
            if(this.department=='运营部'){
                this.columns=this.columnsFixd;
                this.detailColumns=this.operateDetailColumns
            }else if(this.department=='设计部'){
                this.columns=this.elseColumns;
                this.detailColumns=this.designDetailColumns
            }else if(this.department=='销售部'){
                this.columns=this.elseColumns;
                this.detailColumns=this.saleDetailColumns
            }else{
                this.columns=this.columnsFixd;
            }
            this.tableHttp();
        },
         //导出报表
        exportExcel() {
           
            // var name = this.data.filter(item => {
            //     return item.signature == this.signature
            // })[0].projectName
            let companyName=''
            if(this.company){
                this.selectOption.company.forEach((item)=>{
                    if(item.companyId==this.company){
                        companyName=item.area
                    }
                   
                })
            }
            var name =`${companyName || '全公司'}_${this.year || '全年份'}_${this.quarter || '全季度'}_${this.mediaType|| '全部类型'}`;
            
            downFilePost('/ctop/performance/show/excel', {
                year:this.years,
                quarter:this.quarter,
                company:this.company,
                userName:this.nameValue,
                roleCode:this.position,
                mediaType:this.mediaType,
                department:this.department
            }).then(res => {
                let blob = new Blob([res], {
                    type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
                })
                let downloadElement = document.createElement('a')
                let href = window.URL.createObjectURL(blob) //创建下载的链接
                downloadElement.href = href
                downloadElement.download = name+'.xlsx'    //下载后文件名
                document.body.appendChild(downloadElement)
                downloadElement.click() //点击下载
                document.body.removeChild(downloadElement) //下载完成移除元素
                window.URL.revokeObjectURL(href) //释放掉blob对象
            })
        },

        //点击查看明细按钮的事件
        opendetail(text, record) {
            console.log(text, record);
            this.visibleDetail = true
            this.detailData = []
            this.loadingDetail=true
            this.currentRecord=record
            this.currentPage=1;
            this.totalItem=0
            if(record.department=='运营部'){
                // this.columns=this.columnsFixd;
                this.detailColumns=this.operateDetailColumns;
                postAction('/ctop/performance/show/operateDetail', {
                    year:record.year,
                    quarter:record.quarter,
                    userId:record.userId,
                    mediaType:record.mediaType
                }).then(res => {
                    // let resArr = []
                    this.loadingDetail=false
                    console.log(res)
                    if (res.success) {
                        let result = res.result
                        // this.detailData.push({ ...result, key: 1 })
                        result.map((item, index) => {
                            item.key = index;
                            item.quarters=record.quarters
                        })
                        this.detailData = result
                    }
                })
            }else if(record.department=='设计部'){
                // this.columns=this.elseColumns;
                this.detailColumns=this.designDetailColumns;
                postAction('/ctop/performance/show/designDetail/1/10', {
                    year:record.year,
                    quarter:record.quarter,
                    userId:record.userId,
                    mediaType:record.mediaType
                }).then(res => {
                    // let resArr = []
                    this.loadingDetail=false
                    console.log(res)
                    if (res.success) {
                        let result = res.result.list
                        // this.detailData.push({ ...result, key: 1 })
                        result.map((item, index) => {
                            item.key = index;
                            item.roleName=this.currentRecord.roleName
                            item.quarters=record.quarters
                        })
                        this.detailData = result;
                        this.totalItem=res.result.total
                    }
                })
            }else if(record.department=='销售部'){
                // this.columns=this.elseColumns;
                this.detailColumns=this.saleDetailColumns;
                postAction('/ctop/performance/show/saleDetail', {
                    year:record.year,
                    quarter:record.quarter,
                    userId:record.userId,
                    mediaType:record.mediaType
                }).then(res => {
                    // let resArr = []
                    this.loadingDetail=false
                    console.log(res)
                    if (res.success) {
                        let result = res.result
                        // this.detailData.push({ ...result, key: 1 })
                        result.map((item, index) => {
                            item.key = index;
                            item.quarters=record.quarters
                        })
                        this.detailData = result
                    }
                })
            }

            
            
        },

        //获取选择框的信息
        getInfoHttp(){
            getAction('/ctop/performance/show/getPerformanceInfo',{}).then((res)=>{
                // console.log(res);                
                this.selectOption=res.result;
                this.yearsArr=Reflect.ownKeys(res.result.data).splice(0,Reflect.ownKeys(res.result.data).length-1)
                // console.log(this.yearsArr)
               console.log(this.selectOption.company.length)
                if(this.selectOption.company.length==1){
                    this.company=this.selectOption.company[0].companyId
                }
            });
            
        },
        //职位改变
        positionChange(val){
            console.log(val)
            this.position=val;
        },
        //部门改变
        departmentChange(val){
            console.log(val)
            this.department=val
        },
        //公司改变
        companyChange(val){
            // console.log(val)
            this.company=val
        },
        //媒体类型
        mediaTypeChange(val){
            // console.log(val)
            this.mediaType=val
        },
        //年份改变
        yearsChange(val){
            // console.log(val)
            this.years=val;
            if(val==''){
                this.quarterArr=[];
                this.quarter=''
            }else{
                this.quarterArr=this.selectOption.data[this.years]
            }
        },
        //季度改变
        quarterChange(val){
            // console.log(val)
            this.quarter=val;
            
        },
         //table 排序
        sort(pagination, filters, sorter, { currentDataSource }){
            console.log(pagination, filters, sorter)
            if(sorter.order == 'ascend'){            
                this.order='asc'
                this.target=sorter.columnKey;
            }else if(sorter.order == 'descend'){
                this.order='desc'    
                this.target=sorter.columnKey;
            }else{
                this.order='desc'
                this.target='cost';
            }
            
            this.tableHttp();
        },

        //请求table的数据
        tableHttp(){
            this.loading=true
            this.tableData=[]
            postAction(`ctop/performance/show/${this.ipagination.current}/${this.ipagination.pageSize}/desc`,{
                year:this.years,
                quarter:this.quarter,
                company:this.company,
                userName:this.nameValue,
                roleCode:this.position,
                mediaType:this.mediaType,
                department:this.department
            }).then(res=>{
                console.log(res)
                this.loading=false;
                if(res.success&&res.result.list.length>0){
                    res.result.list.forEach((item,index)=>{
                        item.key=index;
                        item.quarters=item.year+'_'+item.quarter;
                    })
                    this.tableData=[...res.result.list]
                }
                this.ipagination.total = res.result.total   
            })
        },

        

        //打开视频
        openVideo(val) {
            this.Videovisible = true
            this.videoUrl = val
        },
        videoOk() {
            this.Videovisible = false
        },

        //f分页页码改变
        pageChange(page, pageSize){
            console.log(page, pageSize);
            this.currentPage=page;
            this.detailData=[];
            this.loadingDetail=true;
            postAction(`/ctop/performance/show/designDetail/${this.currentPage}/10`, {
                    year:this.currentRecord.year,
                    quarter:this.currentRecord.quarter,
                    userId:this.currentRecord.userId,
                    mediaType:this.currentRecord.mediaType
                }).then(res => {
                    // let resArr = []
                    this.loadingDetail=false
                    console.log(res)
                    if (res.success) {
                        let result = res.result.list
                        // this.detailData.push({ ...result, key: 1 })
                        result.map((item, index) => {
                            item.key = index;
                            item.roleName=this.currentRecord.roleName
                            item.quarters=this.currentRecord.quarters
                        })
                        this.detailData = result;
                        this.totalItem=res.result.total
                    }
                })
        },

        onVisibleChange (key) { //Tooltip 显示隐藏的回调,类似onmouseenter 进入离开事件，用来显示我们不同的信息提醒
            console.log(key)
                let str = '';
                switch (key) {
                    case 1:
                    str = '你的姓名';
                    default:
                    break;
            }

            // this.filterTitleKey=str        
        }

    },
    mounted() {
        new Promise((resolve,reject)=>{
             getAction('/ctop/performance/show/getPerformanceInfo',{}).then((res)=>{
                // console.log(res);                
                this.selectOption=res.result;
                this.yearsArr=Reflect.ownKeys(res.result.data).splice(0,Reflect.ownKeys(res.result.data).length-1)
                // console.log(this.yearsArr)
               console.log(this.selectOption.company.length)
                if(this.selectOption.company.length==1){
                    this.company=this.selectOption.company[0].companyId
                }
                resolve('true')
            });
            
        }).then((res)=>{
            this.tableHttp();
        })
       
    },
    filters: {
        pointHandle(val){
            if(val){
                if(typeof val != 'string'){
                    return (val * 100).toFixed(2) + '%'
                }else{
                    return val
                }
            }
            else{
                return '-'
            }    
        },
        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" scoped>
.jixiao{
    .top{
        background: #fff;
        margin-bottom: 20px;
        padding: 20px 15px 20px;
    }
    .topSel{
        display: flex;
        padding: 10px 0;
        
        // justify-content: space-between;
        div{
            display: inline-block;
            margin-right: 0.6rem;
        }
        
    }
    .optionBTN{    
            // float: right;
            padding: 10px 0px;
            div{       
                display: inline-block;
                margin-right: 0.6rem;
            }
            .btn{
                float: right;
            }
            .search{
                margin-right: 20px;
                width: 88px;
            }
    }
    .optionBTN::before{
        content: '';
        display: block;
        clear: both;
    }
    .top:hover{
        box-shadow: 0 0 15px rgba(0,0,0,.2);
        border-radius: 10px;
    }
    .tableBox{
        background: #fff;
        padding: 15px 15px;
    }
}

</style>
<style lang="scss">
#detailBoxPerform{
    padding: 20px 0 20px;
    #myTablePerform{
        margin-bottom: 20px;
    }
    .fenye{           
            
        text-align: right;
    }
    
}
</style>