<template>
  <div>
    <basicDetails
        ref="details"
        :titleText="mainData.billno"
        :editData="mainData"
        :mainAreaData="mainAreaData"
        turnPageId="20221226152904"
        idname="sa_paybillid"
        ownertable="sa_paybill"
        tags=""
        delApiId="20221226153104"
        :statusCheck="[{key:'status',value:'提交'},{key:'status',value:'审核'}]"
        :tabs="['打款明细','详细信息']"
        @pageChange="pageChange"
        @onEditSuccess="queryMainData($route.query.id)">
      <div slot="tags">
      </div>
      <div slot="customOperation">
        <Edit v-if="tool.checkAuth($route.name,'update') && mainData.status == '新建'" class="inline-16" @onSuccess="$refs.remitDetail.listData()" :data="mainData"/>
        <el-button v-if="mainData.status == '新建' && tool.checkAuth($route.name,'submit')" class="inline-16" type="primary" @click="submit" size="mini">提 交</el-button>
        <Check v-if="mainData.status == '提交' && tool.checkAuth($route.name,'check')" class="inline-16" @onSuccess="queryMainData()"/>
        <el-button v-if="mainData.status != '新建' && tool.checkAuth($route.name,'back')" class="inline-16" type="primary" @click="back" size="mini">退 回</el-button>
      </div>
      <div slot="slot0" >
        <remit-detail ref="remitDetail" @onSuccess="queryMainData" v-if="mainData">
          <add-remit :disabled="mainData.status != '新建'" v-if="tool.checkAuth($route.name,'remitvoucherManage')" slot="addRemit" :data="mainData" @onSuccess="$refs.remitDetail.listData()"></add-remit>
          <template v-slot:editRemit="scope">
              <el-button :disabled="mainData.status != '新建'" v-if="tool.checkAuth($route.name,'remitvoucherManage')" class="inline-16" type="text" size="mini" @click="$refs.remitDetail.currentItem=scope.data">编 辑</el-button>
          </template>
          <template v-slot:delRemit="scope">
            <Del :disabled="mainData.status != '新建'" v-if="tool.checkAuth($route.name,'remitvoucherManage')" class="inline-16" :id="scope.data.sa_paybilldetailid" @onSuccess="$refs.remitDetail.listData()"></Del>
          </template>
        </remit-detail>
      </div>
      <div slot="slot1" >
        <base-info v-if="detailInfo" :detailInfo="detailInfo"></base-info>
      </div>
    </basicDetails>
  </div>
</template>

<script>
import BaseInfo from '@/HDrpManagement/projectChange/modules/modules/baseInfo/baseInfo'
import Check from '../components/check'
import Del from './delDetail'
import remitDetail from './remitDetail'
import addRemit from './addRemit'
import Edit from '@/Form/remitvoucher/edit'
export default {
  name: "detail",
  data() {
    return {
      mainData:{},
      mainAreaData:{},
      detailInfo:''
    }
  },
  components:{
    BaseInfo,
    Check,
    remitDetail,
    Del,
    Edit,
    addRemit
  },
  methods:{
    async queryMainData(id) {
      const res = await this.$api.requested({
        "id":20221226153404,
        "content": {
          "sa_paybillid": this.$route.query.id
        }
      })
      this.mainData = res.data
      console.log(this.mainData);
      this.changeDataStructure()
    },
    submit () {
      this.$confirm('确定提交当前打款凭证吗?','提示',{
        confirmButtonText:'确定',
        cancelButtonText:'取消',
        type:'warning'
      }).then(async () => {
        let res = await this.$api.requested({
          "id":20221226153204,
          "content":{
            sa_paybillid:this.$route.query.id
          }
        })
        this.tool.showMessage(res,() => {
          this.queryMainData()
        })
      })
    },
    back () {
      this.$confirm('确定退回当前打款凭证吗?','提示',{
        confirmButtonText:'确定',
        cancelButtonText:'取消',
        type:'warning'
      }).then(async () => {
        let res = await this.$api.requested({
          "id":20221227110104,
          "content":{
            sa_paybillid:this.$route.query.id
          }
        })
        this.tool.showMessage(res,() => {
          this.queryMainData()
        })
      })
    },
    changeDataStructure() {
      let that = this
      this.mainAreaData = [
        {
          label:'凭证号',
          value:this.mainData.billno
        },
        {
          label:'经销商编号',
          value:this.mainData.agentnum
        },
        {
          label:'经销商简称',
          value:this.mainData.abbreviation
        },
        {
          label:'付款人',
          value:this.mainData.payer
        },
        {
          label:'银行账号',
          value:this.mainData.bankcardno
        },
        {
          label:'银行',
          value:this.mainData.bank
        },
        {
          label:'付款时间',
          value:this.mainData.paydate
        },
        {
          label:'打款总金额',
          value:this.tool.formatAmount(this.mainData.amount,2)
        },
        {
          label:'单据状态',
          value:this.mainData.status,
          style:function () {
              let style = {}
              switch (that.mainData.status) {
                case '新建':
                  style = {color:'#000000'}
                  break;
                case '提交':
                  style = {color:'#d90a0a'}
                  break;
                case '审核':
                  style = {color:'#52C41A'}
                  break;
              }
              return style
            }
        },
        {
          label:'回款归属月份',
          value:this.mainData.period
        },
        {
          label:'转入银行',
          value:this.mainData.period
        },
        {
          label:'转入账户',
          value:this.mainData.period
        },
        {
          label:'备注',
          value:this.mainData.remarks
        },
      ]
      this.detailInfo = {
        baseInfo: [
          {
            label:'凭证号',
            value:this.mainData.billno
          },
          {
            label:'经销商编号',
            value:this.mainData.agentnum
          },
          {
            label:'经销商简称',
            value:this.mainData.abbreviation
          },
          {
            label:'付款人',
            value:this.mainData.payer
          },
          {
            label:'银行账号',
            value:this.mainData.bankcardno
          },
          {
            label:'银行',
            value:this.mainData.bank
          },
          {
            label:'付款时间',
            value:this.mainData.paydate
          },
          {
            label:'打款总金额',
            value:this.tool.formatAmount(this.mainData.amount,2)
          },
          {
            label:'单据状态',
            value:this.mainData.status,
            style:function () {
              let style = {}
              switch (that.mainData.status) {
                case '新建':
                  style = {color:'#000000'}
                  break;
                case '提交':
                  style = {color:'#d90a0a'}
                  break;
                case '审核':
                  style = {color:'#52C41A'}
                  break;
              }
              return style
            }
          },
          {
            label:'回款归属月份',
            value:this.mainData.period
          },
          {
            label:'转入银行',
            value:this.mainData.period
          },
          {
            label:'转入账户',
            value:this.mainData.period
          },
          {
            label:'备注',
            value:this.mainData.remarks
          },
        ],
        systemInfo: [
          {label:'创建人',value:this.mainData.createby},
          {label:'创建时间',value:this.mainData.createdate},
          {label:'审核人',value:this.mainData.checkby},
          {label:'审核时间',value:this.mainData.checkdate},
        ]
      }
    },
    // 监听切换数据,上一页,下一页
    pageChange (id,rowindex,tabIndex) {
      this.$router.replace({path:'/remitvoucherDetail',query:{id:id,rowindex:rowindex}})
      this.queryMainData(id)
    },
    onSuccess(){
      this.visible = false
      this.queryMainData(this.$route.query.id)
      this.$emit('onSuccess')
    }
  },
  mounted () {
    this.queryMainData(this.$route.query.id)
  },
  created() {
  }
}
</script>

<style scoped>

</style>