<template>
  <view class="detail-contract-about">
    <about-product
      :list="productList"
      :discount-rate="discount_rate"
      :total="totalMoney"
      :config="getConfigs('product')"
      class="about-section" />
    <about-group
      :list="teamList"
      :config="getConfigs('group')"
      class="about-section" />
    <about-receivables-plan
      :list="receivablesPlanList"
      :config="getConfigs('receivablesPlan')"
      class="about-section" />
    <about-receivables
      :list="receivablesList"
      :config="getConfigs('receivables')"
      class="about-section" />

    <about-file
      v-if="batchId"
      :batch-id="batchId"
      :detail-id="detailId"
      type="crm_contract"
      class="about-section" />

    <about-operation
      :detail-id="detailId"
      type="crm_contract"
      class="about-section" />
  </view>
</template>

<script>
  import {
    QueryProduct,
    QueryReceivables,
    QueryReceivablesPlanList,
    GetMembers
  } from 'API/crm/contract'

  import AboutProduct from '../../components/tabAbout/aboutProduct.vue'
  import AboutGroup from '../../components/tabAbout/aboutGroup.vue'
  import AboutReceivables from '../../components/tabAbout/aboutReceivables.vue'
  import AboutReceivablesPlan from '../../components/tabAbout/aboutReceivablesPlan.vue'
  import AboutFile from '../../components/tabAbout/aboutFile.vue'
  import AboutOperation from '../../components/tabAbout/aboutOperation.vue'

  export default {
    name: 'DetailContractAbout',
    components: {
      AboutProduct,
      AboutGroup,
      AboutReceivables,
      AboutReceivablesPlan,
      AboutFile,
      AboutOperation
    },
    props: {
      detailId: {
        type: [String, Number],
        default: null,
        required: true
      },
      detailData: {
        type: Object,
        default: () => {}
      },
      batchId: {
        type: String,
        default: null
      }
    },
    data() {
      return {
        productList: [],
        contractList: [],
        teamList: [],
        receivablesList: [],
        receivablesPlanList: [],

        discount_rate: 0,
        totalMoney: 0
      }
    },
    created() {
      this.getList()
    },
    methods: {
      getList() {
        QueryProduct({contractId: this.detailId, pageType: 0}).then(response => {
          console.log('productList: ', response)
          this.productList = response.list
          this.totalMoney = response.money
          this.discount_rate = response.discountRate || 0
        }).catch()

        GetMembers({ id: this.detailId }).then(res => {
          console.log('teamList: ', res)
          this.teamList = res
        }).catch(() => {})

        // 回款计划
        QueryReceivablesPlanList({
          contractId: this.detailId,
          pageType: 0
        }).then(response => {
          console.log('ReceivedPlan', response);
          this.receivablesPlanList = response.list
        }).catch()

        // 回款
        QueryReceivables({
          contractId: this.detailId,
          pageType: 0
        }).then(response => {
          console.log('Received', response);
          this.receivablesList = response.list
        }).catch()
      },

      getConfigs() {
        return {
          detail: this.detailData,
          type: 'contract'
        }
      }
    }
  }
</script>

<style scoped lang="scss">

</style>
