<template>
  <div>
    <basicDetails
        ref="details"
        :titleText="mainData.billno"
        formPath="revoucher"
        :editData="mainData"
        :mainAreaData="mainAreaData"
        :turnPageId="20221010102903"
        :delApiId="20221009103203"
        idname="sa_cashbillid"
        ownertable="sa_cashbill"
        tags=""
        :tabs="['核销单查询','详细信息']"
        :statusCheck="[{key:'status',value:'审核'}]"
        @pageChange="pageChange"
        @onEditSuccess="queryMainData($route.query.id)">
      <div slot="tags">
<!--        <tagPanl slot="tags" :data="tagObj" :id="mainData.sa_customersid" @onSuccess="queryMainData"/>-->
        <!-- 使用此插槽可不传[tags] -->
        <!-- :tabs="['经销商团队','代理区域','营销类别','账户余额']" -->
      </div>
      <div slot="customOperation">
        <customBtn 
          btnName="一键核销"
          message="确认核销当前收入凭证吗?"
          idName="20230224183304"
          keyName="sa_cashbillid"
          :id="$route.query.id"
          @onSuccess="writeOffSuccess"
          class="inline-16"
          v-if="mainData.status == '审核' && tool.checkAuth($route.name,'writeoff') && mainData.unwriteoffamount > 0"
        />
        <examine class="inline-16" v-if="tool.checkAuth($route.name,'check')" :data="mainData"  @examineSuccess="onSuccess"></examine>
        <customBtn 
          btnName="对冲"
          message="确认对冲当前收入凭证吗?"
          idName="20230306102904"
          keyName="sa_cashbillid"
          :id="$route.query.id"
          @onSuccess="duichong"
          class="inline-16"
          v-if="mainData.status == '审核' && tool.checkAuth($route.name,'duichong')"
        />
        <!-- 此区域提供了自定义操作按钮 -->
<!--        <div class="inline-16" v-if="tool.checkAuth($route.name,'receive') && mainData.freeget === 1 && length === 0 ">
          <receive  :id="mainData.sa_customersid" @onshow="show"></receive>
        </div>
        <div class="inline-16" v-if="tool.checkAuth($route.name,'distribution') && length === 0">
          <distribution  :data="mainData" @onshow="onSuccess" @setSuccess="onSuccess"></distribution>
        </div>
        <div class="inline-16" v-if="tool.checkAuth($route.name,'toVoid')">
          <to_void  :id="mainData.sa_customersid" @onshow="onSuccess" @toVoidSuccess="onSuccess"></to_void>
        </div>-->
      </div>
      <div slot="slot1" >
        <detailed  :detailData="mainData"></detailed>
      </div>
      <div slot="slot0" >
        <writeoffBill ref="bill"></writeoffBill>
      </div>
    </basicDetails>
  </div>
</template>

<script>
import detailed from './modules/detailedData'
import examine from './modules/examine'
import writeoffBill from '../components/writeoffBill'
import { log } from '@antv/g2plot/lib/utils'
export default {
  name: "index",
  components:{detailed,examine,writeoffBill},
  data(){
    return {
      mainData:{},
      mainAreaData:[],
    }
  },
  methods:{
    writeOffSuccess (data) {
       this.queryMainData(this.$route.query.id)
       this.$refs.bill && this.$refs.bill.listData()

      let route = this.$route
      if (route.path !== '/taskDetails') {
        this.oldRoute = {path:route.path,query:route.query}
        this.$store.dispatch('setHistoryRouter',this.oldRoute)
      }
      this.$router.replace({path:'/writeoffbillDetail',query:{id:data[0].sa_writeoffbillid,rowindex:data[0].rowindex}})
    },
    async queryMainData(id){
      const res = await this.$api.requested({
        "id": "20221009103003",
        "version":1,
        "content": {
          "sa_cashbillid":id
        }
      })
      this.mainData = res.data
      console.log(this.mainData);
      
      this.changeDataStructure()
    },
    duichong (data) {
      this.$store.dispatch('changeDetailDrawer',false)
      this.$router.push('/recvoucher')
      this.$router.replace({
        path:'/recvoucherDetails',
        query:{
          id:data.sa_cashbillid, 
        }
      })
      setTimeout(() => {
        this.$router.replace({
          path:'/recvoucherDetails',
          query:{
            id:data.sa_cashbillid,
          }
        })
        this.$store.dispatch('changeDetailDrawer',true)
        this.queryMainData(this.$route.query.id)
      })

    },
    changeDataStructure(){
      let that = this
      this.mainAreaData = [
        {
          label:'单号',
          value:this.mainData.billno
        },
        {
          label:'状态',
          value:this.mainData.status,
          style:function () {
            let style = {}
            switch (that.mainData.status) {
              case '新建':
                style = {color:"#000000"}
                break;
              case '审核':
                style = {color:"#52C41A"}
                break;
              default:
                break;
            }
            return style
          }
        },
        {
          label:'账户类型',
          value:this.mainData.accountname
        },
        {
          label:'企业名称',
          value:this.mainData.enterprisename
        },
        {
          label:'单据日期',
          value:this.mainData.createdate
        },
        {
          label:'金额',
          value:this.tool.formatAmount(this.mainData.amount,2)
        },
        {
          label:'分类',
          value:this.mainData.class
        },
        {
          label:'分类明细',
          value:this.mainData.subclass
        },
        {
          label:'凭证来源',
          value:this.mainData.sourse
        },
        {
          label:'凭证来源说明',
          value:this.mainData.sourcenote
        },
        {
          label:'对冲单号',
          value:this.mainData.offsettingbillno
        },
        {
          label:'备注',
          value:this.mainData.remarks
        },
        {
          label: '核销金额',
          value: this.tool.formatAmount(this.mainData.amount, 2)
        },
        {
          label:'未核销金额',
          value:this.tool.formatAmount(this.mainData.unwriteoffamount,2)
        },
      ]
    },
    // 监听切换数据,上一页,下一页
    pageChange (id,rowindex) {
      this.flag = false
      this.$router.replace({path:'/payvoucherDetails',query:{id:id,rowindex:rowindex}})
      this.queryMainData(id)
    },
    onSuccess(){
      this.queryMainData(this.$route.query.id)
    }
  },
  created() {
    this.queryMainData(this.$route.query.id)
  }
}
</script>

<style scoped>

</style>