<template>
  <div class="effectPage">
    <div class="moduler">
      <a-select mode="multiple"
      style="width: 460px;margin-right:30px"
      v-model="projectValue"
      placeholder="请选择具体项目"
      :filter-option="filterOption"
      option-filter-prop="children"
      :maxTagCount=4
      @change="projectChange">
        <a-select-option v-for="item in projectData" :key="item.projectId">
          {{ item.projectName }}
        </a-select-option>
      </a-select>     
      <a-range-picker v-model="dateRange" @change="dateChange" style="width:200px" />      
      <div class="opt">
        <!-- <a-button type='primary' @click="exportExcel" style="margin-right:15px">导出报表</a-button> -->
        <a-button type='primary' @click="(ipagination.current=1);(projectId = null);( unitId = null );(campaignId = null);(accountId = null) ;search()">查询</a-button>
      </div>
    </div>
    <div class="moduler">
        <a-tabs v-model="tabKey" @change="tabKeyChange">
            <a-tab-pane :key="1" tab="项目"></a-tab-pane>
            <a-tab-pane :key="2" tab="账户"> </a-tab-pane>
            <a-tab-pane :key="3" tab="广告计划"> </a-tab-pane>
            <a-tab-pane :key="4" tab="广告组"> </a-tab-pane>
            <a-tab-pane :key="5" tab="广告创意"> </a-tab-pane>
            <a-button slot="tabBarExtraContent" type='primary' @click="exportExcel"  :loading="exportLoading">导出报表</a-button>
        </a-tabs>
        <div class="tableBody">
          <a-spin :spinning="spinning">
            <a-table :columns="columns" 
            :data-source="tableData" 
            :scroll="{ x: 3500 }"  
            bordered  
            :laoding='loading' 
            :pagination='ipagination'
            size='middle'
             @change="tableChange"
            >
                <a slot="projectName" slot-scope="text,records" @click="goAccount(records)">{{text}}</a>
                <a slot="authName" slot-scope="text,records" @click="goCampaign(records)">{{text}}</a>
                <a slot="campaignName" slot-scope="text,records" @click="goUnit(records)">{{text}}</a>
                <a slot="unitName" slot-scope="text,records" @click="goCreative(records)">{{text}}</a>
                <!-- <a slot="creativeName" slot-scope="creativeName" >{{creativeName}}</a> -->

                <a slot="coverUrl" slot-scope="text,records" >
                  <!-- <img :src="text" alt="" style="width:90px" @click="openVideo(records)"> -->
                  <a-popover placement="right">
                      <template slot="content">
                          <!-- {{record.videoId_dictText}}  -->
                          <video :src="records.url" style="width:250px" controls autoplay muted ></video>
                      </template>
                      <template slot="title">
                      <!-- <span>Title</span> -->
                      </template>
                      <!-- <a-button>Right</a-button> -->
                      <img :src="text" alt="" style="width:60px">
                  </a-popover>
                </a>

                <span slot="charge" slot-scope="charge"> {{charge|decimalsHandle}}</span>
                <span slot="activationCost" slot-scope="activationCost"> {{activationCost|decimalsHandle}}</span>
                <span slot="eventNextDayStayCost" slot-scope="eventNextDayStayCost"> {{eventNextDayStayCost|decimalsHandle}}</span>
                <span slot="impression1kCost" slot-scope="impression1kCost"> {{impression1kCost|decimalsHandle}}</span>
                <span slot="photoClickCost" slot-scope="photoClickCost"> {{photoClickCost|decimalsHandle}}</span>
                <span slot="actionCost" slot-scope="actionCost"> {{actionCost|decimalsHandle}}</span>


                <span slot="photoClick" slot-scope="photoClick"> {{photoClick|formatCurrency}}</span>
                <span slot="photoShow" slot-scope="photoShow"> {{photoShow|formatCurrency}}</span>
                <span slot="aclick" slot-scope="aclick"> {{aclick|formatCurrency}}</span>
                <span slot="bclick" slot-scope="bclick"> {{bclick|formatCurrency}}</span>
                <span slot="activation" slot-scope="activation"> {{activation|formatCurrency}}</span>
                <span slot="submit" slot-scope="submit"> {{submit|formatCurrency}}</span>
                <span slot="eventRegister" slot-scope="eventRegister"> {{eventRegister|formatCurrency}}</span>
                <span slot="eventNextDayStay" slot-scope="eventNextDayStay"> {{eventNextDayStay|formatCurrency}}</span>
                <span slot="photoShare" slot-scope="photoShare"> {{photoShare|formatCurrency}}</span>
                <span slot="photoComment" slot-scope="photoComment"> {{photoComment|formatCurrency}}</span>
                <span slot="photoLike" slot-scope="photoLike"> {{photoLike|formatCurrency}}</span>
                <span slot="follow" slot-scope="follow"> {{follow|formatCurrency}}</span>
                <span slot="report" slot-scope="report"> {{report|formatCurrency}}</span>
                <span slot="cancelFollow" slot-scope="cancelFollow"> {{cancelFollow|formatCurrency}}</span>
                <span slot="block" slot-scope="block"> {{block|formatCurrency}}</span>
                <span slot="nagative" slot-scope="nagative"> {{nagative|formatCurrency}}</span>
                <span slot="downloadStarted" slot-scope="downloadStarted"> {{downloadStarted|formatCurrency}}</span>
                <span slot="downloadCompleted" slot-scope="downloadCompleted"> {{downloadCompleted|formatCurrency}}</span>
                <span slot="downloadCompleted" slot-scope="downloadCompleted"> {{downloadCompleted|formatCurrency}}</span>


                <span slot="photoClickRatio" slot-scope="photoClickRatio"> {{photoClickRatio|toPercentage}}</span>
                <span slot="actionRate" slot-scope="actionRate"> {{actionRate|toPercentage}}</span>

            </a-table>
          </a-spin>  
        </div>
    </div>
    <div >
      <a-modal v-model="visible" title="视频详情" @ok="handleOk" :width='currentRecords.materialType==1?"350px" :"600px"'>
        <div style="display:flex;justify-content:center">
          <div style="margin-right:15px">
            <video :src="imgSrc" style="width:250px" controls  v-if="currentRecords.materialType==1"></video>
            <video :src="imgSrc" style="width:500px" controls v-if="currentRecords.materialType==2"></video>
          </div>
          <div>
            <!-- <p> 标题：{{currentRecords.creativeName}}</p> -->
            <!-- <p> 标题：{{currentRecords.creativeName}}</p> -->
          </div>
        </div>
        
      </a-modal>
    </div>
  </div>
</template>

<script>
import moment from 'moment'
import { getAction, postAction, downFile, downFilePost } from '@/api/manage'
import { JeecgListMixin } from '@/mixins/ipagination'
const publicColumns=[
    {
    title: '消耗',
    dataIndex: 'charge',
    scopedSlots: { customRender: 'charge' },
    align:'center',

  },
  {
    title: '封面曝光数',
    dataIndex: 'photoShow',
    scopedSlots: { customRender: 'photoShow' },
    align:'center',
  },
  {
    title: '封面点击数',
    dataIndex: 'photoClick',
    scopedSlots: { customRender: 'photoClick' },
    align:'center',
  },
  {
    title: '素材曝光数',
    dataIndex: 'aclick',
    scopedSlots: { customRender: 'aclick' },
    align:'center',
  },
  {
    title: '行为数',
    dataIndex: 'bclick',
    scopedSlots: { customRender: 'bclick' },
    align:'center',
  },
  {
    title: '激活数',
    dataIndex: 'activation',
    scopedSlots: { customRender: 'activation' },
    align:'center',
  },
  {
    title: '注册数',
    dataIndex: 'eventRegister',
    scopedSlots: { customRender: 'eventRegister' },
    align:'center',
  },
  {
    title: '提交按钮点击数',
    dataIndex: 'submit',
    scopedSlots: { customRender: 'submit' },
    align:'center',
  },
  {
    title: '次日留存数',
    dataIndex: 'eventNextDayStay',
    scopedSlots: { customRender: 'eventNextDayStay' },
    align:'center',
  },
  {
    title: '次日留存成本',
    dataIndex: 'eventNextDayStayCost',
    scopedSlots: { customRender: 'eventNextDayStayCost' },
    align:'center',
  },
  {
    title: '激活成本',
    dataIndex: 'activationCost',
    scopedSlots: { customRender: 'activationCost' },
    align:'center',
  },
  {
    title: '封面点击率',
    dataIndex: 'photoClickRatio',
    scopedSlots: { customRender: 'photoClickRatio' },
    align:'center',
  },
  {
    title: '行为率 ',
    dataIndex: 'actionRate',
    scopedSlots: { customRender: 'actionRate' },
    align:'center',
  },
  {
    title: '均千次封面曝光花费',
    dataIndex: 'impression1kCost',
    scopedSlots: { customRender: 'impression1kCost' },
    align:'center',
  },
  {
    title: '平均封面点击单价',
    dataIndex: 'photoClickCost',
    scopedSlots: { customRender: 'photoClickCost' },
    align:'center',
  },
  {
    title: '平均行为单价',
    dataIndex: 'actionCost',
    scopedSlots: { customRender: 'actionCost' },
    align:'center',
  },
  {
    title: '分享数',
    dataIndex: 'photoShare',
    scopedSlots: { customRender: 'photoShare' },
    align:'center',
  },
  {
    title: '评论数',
    dataIndex: 'photoComment',
    scopedSlots: { customRender: 'photoComment' },
    align:'center',
  },
  {
    title: '点赞数',
    dataIndex: 'photoLike',
    scopedSlots: { customRender: 'photoLike' },
    align:'center',
  },
  {
    title: '新增关注数',
    dataIndex: 'follow',
    scopedSlots: { customRender: 'follow' },
    align:'center',
  },
  {
    title: '举报数',
    dataIndex: 'report',
    scopedSlots: { customRender: 'report' },
    align:'center',
  },
  {
    title: '取消关注数',
    dataIndex: 'cancelFollow',
    scopedSlots: { customRender: 'cancelFollow' },
    align:'center',
  },
  {
    title: '拉黑数',
    dataIndex: 'block',
    scopedSlots: { customRender: 'block' },
    align:'center',
  },
  {
    title: '减少此类作品数',
    dataIndex: 'nagative',
    scopedSlots: { customRender: 'nagative' },
    align:'center',
  },
  {
    title: '安卓下载开始数',
    dataIndex: 'downloadStarted',
    scopedSlots: { customRender: 'downloadStarted' },
    align:'center',
  },
  {
    title: '安卓下载完成数',
    dataIndex: 'downloadCompleted',
    scopedSlots: { customRender: 'downloadCompleted' },
    align:'center',
  },
]

const projectColumns = [
  {
    title: '项目名称',
    dataIndex: 'projectName',
    width: 150,
    align:'center',
    scopedSlots: { customRender: 'projectName' },
    fixed: 'left'
  },
  {
    title: '广告主',
    dataIndex: 'advertiserName',
    width: 200,  
    align:'center',
    fixed: 'left'
  },
  {
    title: '运营负责人',
    dataIndex: 'responsibleName',    
    scopedSlots: { customRender: 'responsibleName' },
    align:'center',
  },
  {
    title: '设计负责人',
    dataIndex: 'designResponsibleName',
    scopedSlots: { customRender: 'designResponsibleName' },
    align:'center',
  },
  // {
  //   title: '时间',
  //   dataIndex: 'statDate',
  //   // width:200,
  //   scopedSlots: { customRender: 'statDate' },
  //   align:'center',
  // },
]

const accountColumns = [
  {
    title: '账户名称',
    dataIndex: 'authName',
    width: 130,
    align:'center',
    scopedSlots: { customRender: 'authName' },
    fixed: 'left'
  },
  {
    title: '账户id',
    dataIndex: 'accountId',
    align:'center',
    width:90,
    scopedSlots: { customRender: 'accountId' },
    fixed: 'left'
  },
  {
    title: '项目名称',
    dataIndex: 'projectName',
    width: 130,
    align:'center',
    scopedSlots: { customRender: 'projectName' },
    fixed: 'left'
  },
  
  // {
  //   title: '时间',
  //   dataIndex: 'statDate',
  //   // width:200,
  //   scopedSlots: { customRender: 'statDate' },
  //   align:'center',
  // },
  
]

const campaignColumns = [
  {
    title: '广告计划名称',
    dataIndex: 'campaignName',
    width: 180,
    align:'center',
    scopedSlots: { customRender: 'campaignName' },
    fixed: 'left'
  },
  {
    title: '广告计划id',
    dataIndex: 'campaignId',
    align:'center',
    scopedSlots: { customRender: 'campaignId' },
    fixed: 'left',
    width:100,
  },
  {
    title: '账户名称',
    dataIndex: 'authName',
    width: 150,
    align:'center',
    scopedSlots: { customRender: 'authName' },
    fixed: 'left'
  },
  
  // {
  //   title: '时间',
  //   dataIndex: 'statDate',
  //   // width:200,
  //   scopedSlots: { customRender: 'statDate' },
  //   align:'center',
  // },

  
]

const unitColumns = [
  {
    title: '广告组名称',
    dataIndex: 'unitName',
    align:'center',
    scopedSlots: { customRender: 'unitName' },
    fixed: 'left',
    width:180,
  },
  {
    title: '广告组id',
    dataIndex: 'unitId',
    align:'center',
    width:90,
    scopedSlots: { customRender: 'unitId' },
    fixed: 'left'
  },
  {
    title: '计划名称',
    dataIndex: 'campaignName',
    width: 180,
    align:'center',
    scopedSlots: { customRender: 'campaignName' },
    fixed: 'left'
  },

  // {
  //   title: '时间',
  //   dataIndex: 'statDate',
  //   // width:200,
  //   scopedSlots: { customRender: 'statDate' },
  //   align:'center',
  // },

  
]

const ideaColumns = [
    {
      title: '创意',
      dataIndex: 'coverUrl',
      align:'center',
      scopedSlots: { customRender: 'coverUrl' },
      fixed: 'left',
      width:100,
    },
   {
    title: '创意名称',
    dataIndex: 'creativeName',
    align:'center',
    scopedSlots: { customRender: 'creativeName' },
    fixed: 'left',
    width:130,
  },

  {
    title: '广告组名称',
    dataIndex: 'unitName',
    align:'center',
    scopedSlots: { customRender: 'unitName' },
    fixed: 'left',
    width:130,
  },

  // {
  //   title: '时间',
  //   dataIndex: 'statDate',
  //   // width:200,
  //   scopedSlots: { customRender: 'statDate' },
  //   align:'center',
  // },
 
]

export default {
    mixins:[JeecgListMixin],
    data() {
      return {
        projectValue:[],
        dateRange:[moment().subtract(1,'days'),moment()],
        projectData:[],
        tableData:[],
        columns:[...projectColumns,...publicColumns],
        loading:false,
        tabKey:1,
        currentid:undefined,
        accountId:undefined,
        projectId:undefined,
        campaignId:undefined,
        unitId:undefined,    
        spinning:false,  
        visible:false,
        imgSrc:undefined,
        currentRecords:{},
        projectRecord:{},
        exportLoading:false,
      }
    },
    methods: {
      //导出报表
        exportExcel() {
          if(this.projectValue.length>0){
            this.exportLoading=true;
            let type='';
           if(this.tabKey==1){
              type='project'
            }else if(this.tabKey==2){
              type='account'
            }else if(this.tabKey==3){
              type='campaign'
            }else if(this.tabKey==4){
              type='group'
            }else if(this.tabKey==5){
              type='creative'
            }

          var name =`${this.dateRange[0].format('YYYY_MM_DD')}~${this.dateRange[1].format('YYYY_MM_DD')}_效果报表`;
            
          downFilePost(`/ctop/advertiser/exportKuaishouProjectInfo`, {
            startDate:this.dateRange[0].format('YYYY-MM-DD'),
            endDate:this.dateRange[1].format('YYYY-MM-DD'),
            projectList:this.projectValue,
            projectId:this.projectId,
            accountId:this.accountId,
            campaignId:this.campaignId,
            unitId:this.unitId,
            type,
          }).then(res => {
                // console.log(res)
                this.exportLoading=false;
                let blob = new Blob([res], {
                    type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
                })
                // console.log(blob)
                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对象
            })
          }else{
            this.$message.error('请选择项目！')
          }
        },
      handleOk(e) {
        // console.log(e);
        this.visible = false;
      },
      openVideo(records){
        this.visible=true;
        this.imgSrc=records.url;
        this.currentRecords=records
      },
      // 过滤事件
      filterOption(input, option) {
        return (
          option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
        );
      },
        //table的改变（页码改变请求数据，也可以写排序）
      tableChange(pagination, filters, sorter, { currentDataSource }){
          // this.searchHandle();
          
          this.search();
      },
      projectChange(val){
        console.log(val);
          this.tabKey=1;
          this.search();
      },
      dateChange(date,dateString){
        console.log(date,dateString)
      },
      // tab切换事件
      tabKeyChange(key){
        // console.log(key)
        // if(key==1){
        //   this.getTableProjectList()
        // }else if(key==2){
        //   this.getTableAccountList();
        // }else if(){

        // }
        this.projectId = null
        this.unitId = null
        this.campaignId = null
        this.accountId = null
        this.ipagination.current=1;
        this.search();
      },
      // x项目的table值
      getTableProjectList(paramse){   
        this.loading=true;     
        this.spinning=true;
        
        this.columns= [...projectColumns,...publicColumns]  
        postAction('/kuaishou/getKuaishouProjectInfo',paramse).then(res=>{
          console.log(res);
          this.tabKey=1;
          this.loading=false;
          this.spinning=false;
          if(res.success){             
              res.result.list.forEach((item,index)=>{
                item.key=index
              })
              this.tableData=res.result.list;
              this.ipagination.total=res.result.total
          }
         
        })
      },
      // 从项目跳转到账户,并获取账户的table值
      goAccount(records){
        console.log(records,'--account');
        this.projectRecord=records
        this.projectId=records.projectId 
        this.getTableAccountList()

      },
      // 从账户到计划
      goCampaign(records){
        console.log(records,'--Campaign');
        this.accountId=records.accountId;
        this.getTableCampaignList()
      },
      // 从计划到组
      goUnit(records){
        console.log(records,'--unit');
        this.campaignId=records.campaignId;
        this.getTableUnitList()
      },
      // 从组到创意
      goCreative(records){
          console.log(records,'--creat');
          this.unitId=records.unitId;
          this.getTableCreativeList()
      },
      getTableAccountList(){         
          this.loading=true; 
          this.spinning=true;
          // this.ipagination.current=0;           
          postAction('/kuaishou/getKuaishouAccountInfoByProjectId',{
            startDate:this.dateRange[0].format('YYYY-MM-DD'),
            endDate:this.dateRange[1].format('YYYY-MM-DD'),
            projectId:this.projectId,
            projectList:this.projectValue.length==0?null:this.projectValue,
            pageNum:this.ipagination.current,
            pageSize:'10'
          }).then(res=>{
              console.log(res)
               this.tabKey=2;
               this.loading=false; 
               this.spinning=false;  
               this.columns= [...accountColumns,...publicColumns] 
              if(res.success){
                 
                this.tableData= res.result.list
                this.ipagination.total=res.result.total
              }
          })
      },
      getTableCampaignList(){        
        this.loading=true; 
        // this.ipagination.current=0; 
        this.spinning=true;       
        postAction('/kuaishou/getKuaishouCampaignInfoByAccountId',{
          startDate:this.dateRange[0].format('YYYY-MM-DD'),
          endDate:this.dateRange[1].format('YYYY-MM-DD'),
          accountId:this.accountId,
          projectList:this.projectValue.length==0?null:this.projectValue,
          pageNum:this.ipagination.current,
          pageSize:'10'
        }).then(res=>{
            console.log(res)
            this.tabKey=3;
            this.loading=false; 
            this.spinning=false;
            this.columns= [...campaignColumns,...publicColumns]      
            if(res.success){             
              this.tableData= res.result.list
              this.ipagination.total=res.result.total
            }
        })
      },
      getTableUnitList(){        
        this.loading=true; 
        // this.ipagination.current=0;   
        this.spinning=true;      
        postAction('/kuaishou/getKuaishouUnitInfoByCampaignId',{
          startDate:this.dateRange[0].format('YYYY-MM-DD'),
          endDate:this.dateRange[1].format('YYYY-MM-DD'),
          campaignId:this.campaignId,
          projectList:this.projectValue.length==0?null:this.projectValue,
          pageNum:this.ipagination.current,
          pageSize:'10'
        }).then(res=>{
            console.log(res)
            this.tabKey=4;
            this.loading=false;  
            this.spinning=false;
            this.columns= [...unitColumns,...publicColumns]   
            if(res.success){
              
              this.tableData= res.result.list
              this.ipagination.total=res.result.total
            }
        })
      },
      getTableCreativeList(){        
        this.loading=true; 
        // this.ipagination.current=0;      
        this.spinning=true; 
        postAction('/kuaishou/getKuaishouCreativeInfoByUnitId',{
          startDate:this.dateRange[0].format('YYYY-MM-DD'),
          endDate:this.dateRange[1].format('YYYY-MM-DD'),
          unitId:this.unitId,
          projectList:this.projectValue.length==0?null:this.projectValue,
          pageNum:this.ipagination.current,
          pageSize:'10'
        }).then(res=>{
            console.log(res)
            this.tabKey=5;
            this.loading=false; 
            this.spinning=false;  
            this.columns= [...ideaColumns,...publicColumns]    
            if(res.success){ 
              this.tableData= res.result.list
              this.ipagination.total=res.result.total
            }
        })
      },

      search(){

        
        if(this.tabKey==1){
          this.getTableProjectList({
            startDate:this.dateRange[0].format('YYYY-MM-DD'),
            endDate:this.dateRange[1].format('YYYY-MM-DD'),
            projectList:this.projectValue,
            pageNum:this.ipagination.current,
            pageSize:'10'
          })
        }else if(this.tabKey==2){
          this.getTableAccountList();
        }else if(this.tabKey==3){
          this.getTableCampaignList();
        }else if(this.tabKey==4){
          this.getTableUnitList();
        }else if(this.tabKey==5){
          this.getTableCreativeList();
        }
          
      },
    },
    mounted() {
      // /ctop/projectMember/participateList
      //  var arr = this.request.split(',')
      //         var dataTwo = []
      //         var data = res.result.filter(item => {
      //           return item.mediaId == arr[0]
      //         })
      //         if (arr.length > 1) {
      //           dataTwo = res.result.filter(item => {
      //             return item.mediaId == arr[1]
      //           })
      //         }
        postAction('/ctop/projectMember/getOwnProjects',{
          mediaIds:[2,4],         
        }).then(res=>{
          console.log(res);
          this.projectData=res.result
        });
        console.log(this.dateRange)
        this.getTableProjectList({
          startDate:this.dateRange[0].format('YYYY-MM-DD'),
          endDate:this.dateRange[1].format('YYYY-MM-DD'),
          projectList:[],
          pageNum:'0',
          pageSize:'10'
        });
    },
    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="less">
.resize-table-th {
  position: relative;
  .table-draggable-handle {
    height: 100% !important;
    bottom: 0;
    left: auto !important;
    right: -5px;
    cursor: col-resize;
    touch-action: none;
  }
}
</style>
<style lang="scss" scoped>
.effectPage{
  .moduler {
    background: #fff;
    margin-bottom: 16px;
    position: relative;
    padding: 32px 24px 48px 32px;
    border-radius: 4px;
    box-shadow: 0px 1px 6px 0px rgba(0, 0, 0, 0.05);
    .opt{
      position: absolute;
      top: 32px ;
      right: 24px;
    }
    .moduler-title {
      display: flex;
      align-items: 'center';
      font-size: 22px;
      margin-bottom: 20px;
    }
    .row-item {
      display: flex;
      justify-content: flex-start;
      align-items: 'center';
      margin-bottom: 32px;
    }
    .row-item:last-of-type {
      margin-bottom: 0;
    }
    .row-item .hint-item {
      width: 24px;
      min-width: 24px;
      align-self: flex-start;
      line-height: 20px;
      height: 20px;
      margin-top: 5px;
    }
    .row-item .label-item {
      position: relative;
      align-items: flex-start;
      align-self: flex-start;
      line-height: 20px;
      height: 20px;
      margin-top: 7px;
      width: 80px;
      min-width: 80px;
      .text-item {
        font-size: 14px;
        width: 60px;
      }
    }
    .row-item .required-item {
      width: 4px;
      height: 4px;
      border-radius: 2px;
      background: #f45858;
      position: absolute;
      right: 10px;
      top: 50%;
      transform: translateY(-50%);
    }
    .row-item .input-item {
      min-width: 480px;
      position: relative;
      // height: 35px;
      .tip {
        font-size: 12px;
        color: tomato;
      }
    }

    .tableBody{
      margin-top: 10px;
    }
  }
  .spin-content {
    border: 1px solid #91d5ff;
    background-color: #e6f7ff;
    padding: 30px;
  }
}
</style>