<template>
  <div class="main-div">
    <BaseIndexButtonGroup id="BaseIndexButtonGroup">
      <template #left>
        <BaseIndexButton ref="search" name="search"></BaseIndexButton>
        <BaseIndexButton ref="clear" name="clear"></BaseIndexButton>
      </template>
    </BaseIndexButtonGroup>

    <!--  卡片区  -->
    <div class="index-card">
      <!--  查询条件区域  -->
      <div id="search-cond-div" ref="search-cond-div" class="search-cond-class">
        <SearchCond ref="searchCond" v-model="searchCond"
                    @collapse-change="collapseChange" :setFlag="false"
                    :searchContent="searchContent"></SearchCond>
      </div>
      <!--  表格部分  -->
      <div slot="top">
        <DkTabs v-model="tabsModel" :options="tabsOptions" @on-click="tabsClick"></DkTabs>
        <!--  表格部分  -->
        <DkTable :data="tableData"
                 :page-flag="false"
                 :page-total-flag="false"
                 :height="tableHeight-60"
                 primaryKey="objectId"
                 :pageFlag="true"
                 @pageChange="pageSizeChange"
                 :page-total="pageInfo.total"
                 :current-page="pageInfo.currentPage"
                 ref="table-select"
                 :showCheckboxHeader="false"
                 :choose-flag="false"
                 v-show="!this.detailFlag">
          <DkTableColumn field="supName" type="link"
                         @on-link="tabsClick"></DkTableColumn>
          <DkTableColumn field="sumAmtPay" data-type="number"/>
          <DkTableColumn field="sumAmtHandle" data-type="number"/>
          <DkTableColumn field="remarks" width="auto"></DkTableColumn>
        </DkTable>

        <!--明细-->
        <DkTable :id="'table-'+$options.name"
                 ref="table-select-detail"
                 :data="itemData"
                 :height="tableHeight"
                 primaryKey="itemId"
                 :multiple="false"
                 :choose-flag="false"
                 v-show="this.detailFlag">
          <DkTableColumn field="accItemTypeName"/>
          <DkTableColumn field="orgName"/>
          <DkTableColumn field="staffName"/>
          <DkTableColumn field="amtPay" data-type="number"/>
          <DkTableColumn field="amtHandle" data-type="number"/>
          <!--备注-->
          <DkTableColumn field="remarks"></DkTableColumn>
        </DkTable>
      </div>
    </div>
  </div>
</template>

<script>
import {indexMixin} from "@/mixins";

export default {
  name: 'supplier-account-report',
  mixins: [indexMixin],
  data() {
    let self = this
    return {
      detailFlag:false,
      itemData:[],
      // 模式切换值
      tabsModel: 'totalOrder',
      tabsOptions: [{label: self.$t('totalOrder'), name: 'totalOrder'}, //总单
        {label: self.$t('details'), name: 'details'}, //明细
      ],
      searchContent: [
        {
          itemCode: '供应商-文本',
          itemName: 'supplierName',
          valueFormat: {code: 'supId'},
          valueKind: 'S-SEARCH',
          magnifierType: self.$config.MagnifierType.supplier,
        },
        {
          itemCode: '账务日期-时间',
          itemName: 'accDate',
          valueFormat: {
            code: 'accDate',
            default: [new Date().addMonths(-1).format('yyyy-MM-dd'), new Date().format('yyyy-MM-dd')]
          },
          valueKind: 'DATE_RANGE'
        },
      ],
    }
  },
  methods: {
    /**
    * @desc   : 总单tab切换
    * @author : 常皓宁
    * @date   : 2024/4/25 13:04
    */
    tabsClick(val) {
      let rows = [this.$refs['table-select'].getCurrentRow()]
      //如果切换的tab存在就去根据条件查询
      if (val == 'totalOrder') {
        this.detailFlag = false
        this.searchData()
      }else{
        this.tabsModel = 'details'
        setTimeout(() => {
          this.detailFlag = true
        }, 100)
        this.getDetail(rows)
      }
    },
    /**
    * @desc   : 查询数据
    * @author : 常皓宁
    * @date   : 2024/4/25 13:09
    */
    getData(params) {
      params.cpId = this.$store.state.user.cpId
      return this.excute(this.$service.detailReportService, this.$service.detailReportService.getSupAccount, params)
    },

    /**
    * @desc   : 获取明细
    * @author : 常皓宁
    * @date   : 2024/4/25 15:07
    */
    getDetail(rows){
      if(!rows){
        this.itemData = []
        return
      } else {
        let params = {
          objectId :rows[0].objectId
        }
        this.excute(this.$service.detailReportService, this.$service.detailReportService.getSupAccountItem, params).then(res =>{
          if(res.code === this.$config.SUCCESS_CODE){
            this.itemData = res.data
          } else {
            this.$Message.error(res.message)
          }
        })
      }
    },
  },
  created() {
    this.primaryKey = 'objectId'  // 设置主键Id
    this.routeObjName = 'detailReport'  // 设置路由名称
  }
}
</script>

<style scoped>

</style>
