<template>
  <ele-modal
    custom-class="ele-dialog-form long-dialog-form"
    :centered="true"
    :visible.sync="detailDialogFlag"
    :title="title"
    :append-to-body="true"
    :close-on-click-modal="false"
    width="70%"
    :before-close="cancel"
  >

    <el-card shadow="never">
      <div class="switch">
        <div class="switch_left">
          <ul>
            <li
              v-for="item in tabOptions"
              :key="item.key"
              :class="{ active: activeComp == item.key }"
              @click="activeComp = item.key"
            >
              {{ item.name }}
            </li>
          </ul>
        </div>
      </div>
    </el-card>
    <div v-if="activeComp==='main'">
      <!--采购表单表单-->
      <purchase-form :dataForm.sync="dataForm" :datasource.sync="datasource" dialogType="view"></purchase-form>
      <headerTitle title="对账明细" style="margin-top: 30px">
        <template v-slot>
          <el-row style="font-weight: 700;color: red">
            <el-divider direction="vertical"></el-divider>
            <span>总金额：</span>
            <span>{{dataForm.amountTotalPrice||0}}</span>
            <el-divider direction="vertical"></el-divider>
            <span>应收金额：</span>
            <span>{{dataForm.amountReceivablePrice||0}}</span>
            <el-divider direction="vertical"></el-divider>
            <span>应付金额：</span>
            <span>{{dataForm.amountPayablePrice||0}}</span>


          </el-row>
        </template>
      </headerTitle>
      <inventoryTable ref="inventoryTableref" :dataForm="dataForm" :datasource.sync="datasource" dialogType="view"></inventoryTable>
    </div>


    <bpmDetail v-if="activeComp==='bpm'&&form.processInstanceId" :id="form.processInstanceId"></bpmDetail>

    <div slot="footer" class="footer">
      <el-button @click="cancel">返回</el-button>
    </div>
  </ele-modal>
</template>

<script>

import bpmDetail from '@/views/bpm/processInstance/detail.vue';
import InventoryTable from "./inventoryTable.vue";
import {infoAccountStatementAPI} from "@/api/saleManage/accountstatement";
import purchaseForm from "./purchaseForm.vue";

export default {
  props: ['detailDialogFlag'],
  components: {
    purchaseForm,
    InventoryTable,
    bpmDetail
  },
  data() {
    return {
      activeComp: 'main',
      tabOptions: [
        {key: 'main', name: '对账单详情'},
        {key: 'bpm', name: '流程详情'}
      ],
      visible: false,
      form: {},
      dataForm: {},
      datasource: [],
      title: '详情',


    };
  },
  methods: {
    async open(dialogType, row, type = '') {
      this.form = row
      this.dialogType = dialogType
      this.dataForm.type = type
      let data = await infoAccountStatementAPI(row.id)
      this.datasource = data.orderList
      this.dataForm = data
      switch (this.dataForm.dateType) {
        case 1:
          this.dataForm.year = this.dataForm.dateValue
          break;
        case 2:
          //2023年-四季度
          let data = this.dataForm.dateValue.split('年-')
          this.dataForm.year = data[0]
          this.dataForm.quarter = data[1]
          break
        case 3:
          this.dataForm.month = this.dataForm.dateValue
          break
        default:
          this.dataForm.dateValue = ''
          this.dataForm.dateTimeRange = [this.dataForm.startDate, this.dataForm.endDate]
      }
    },
    cancel() {
      this.$emit('update:detailDialogFlag', false)
    },
  }
};
</script>

<style scoped lang="scss">
.ele-dialog-form {
  .el-form-item {
    margin-bottom: 10px;
  }
}

.none {
  display: none;
}

.headbox {
  display: flex;
  justify-content: flex-start;
  align-items: center;

  .amount {
    font-size: 14px;
    font-weight: bold;
    margin-right: 20px;
  }
}
::v-deep.el-divider {
  margin: 10px;
  font-weight: bold;
}
</style>
