<template>
    <div>
      <a-row>
        <a-col :span="24">
          <div class="main-title">
            <span>设备费-试制设备预算明细表<strong>(金额单位：万元)</strong></span>
          </div>
        </a-col>
      </a-row>
      <a-row type="flex" class="row_center">
        <a-col :span="1" class="bg-gray">
          <div class="special-middle">
            <div>序号</div>
          </div>
        </a-col>
        <a-col :span="2" class="bg-gray">
          <div class="special-middle">
            <div>设备名称</div>
          </div>
        </a-col>
        <a-col :span="3" class="bg-gray">
          <div class="special-middle">
            <div>功能和技术指标</div>
          </div>
        </a-col>
        <a-col :span="2" class="bg-gray">
          <div class="special-middle">
            <div>单价(万元/台套)</div>
          </div>
        </a-col>
        <a-col :span="2" class="bg-gray">
          <div class="special-middle">
            <div>数量(台套)</div>
          </div>
        </a-col>
        <a-col :span="2" class="bg-gray">
          <div class="special-middle">
            <div>金额</div>
          </div>
        </a-col>
        <a-col :span="2" class="bg-gray">
          <div class="special-middle">
            <div>财政资金</div>
          </div>
        </a-col>
        <a-col :span="2" class="bg-gray">
          <div class="special-middle">
            <div>自筹资金</div>
          </div>
        </a-col>
        <a-col :span="4" class="bg-gray">
          <div class="special-middle">
            <div>试制单位</div>
          </div>
        </a-col>
        <a-col :span="4" class="bg-gray">
          <div class="special-middle">
            <div>安置单位</div>
          </div>
        </a-col>
      </a-row>
      <a-row v-for="(item, index) in manufactureList" :key="'manufactureList'+index" type="flex" class="row_center">
        <a-col :span="1">
          <div class="special-middle">{{ index + 1 }}</div>
        </a-col>
        <a-col :span="2">
          <div class="special-middle">{{ item.name }}</div>
        </a-col>
        <a-col :span="3">
          <div class="special-middle">{{ item.functionTarget }}</div>
        </a-col>
        <a-col :span="2">
          <div class="special-middle">
            <div>{{ parseFloat(item.unitPrice).toFixed(2) }}</div>
          </div>
        </a-col>
        <a-col :span="2">
          <div class="special-middle">{{ item.quantity }}</div>
        </a-col>
        <a-col :span="2">
          <div class="special-middle">
            <div>{{ parseFloat(item.totalBudget).toFixed(2) }}</div>
          </div>
        </a-col>
        <a-col :span="2">
          <div class="special-middle">
            <div>{{ parseFloat(item.fundAmount).toFixed(2) }}</div>
          </div>
        </a-col>
        <a-col :span="2">
          <div class="special-middle">
            <div>{{ parseFloat(item.selfAmount).toFixed(2) }}</div>
          </div>
        </a-col>
        <a-col :span="4">
          <div class="special-middle">{{ item.manufactureUnit }}</div>
        </a-col>
        <a-col :span="4">
          <div class="special-middle">{{ item.storageUnit }}</div>
        </a-col>
      </a-row>
      <a-row type="flex" class="row_center">
        <a-col :span="6">
          <div class="special-middle">
            <div>单价5万元及以上试制设备合计</div>
          </div>
        </a-col>
        <a-col :span="2">
          <div class="special-middle">
            <div>/</div>
          </div>
        </a-col>
        <a-col :span="2">
          <div class="special-middle">
            <div>{{ fiftyUpNumber }}</div>
          </div>
        </a-col>
        <a-col :span="2">
          <div class="special-middle">
            <div>{{ parseFloat(fiftyUpAmount).toFixed(2) }}</div>
          </div>
        </a-col>
        <a-col :span="2">
          <div class="special-middle">
            <div>{{ parseFloat(fiftyUpFundAmount).toFixed(2) }}</div>
          </div>
        </a-col>
        <a-col :span="2">
          <div class="special-middle">
            <div>{{ parseFloat(fiftyUpSelfAmount).toFixed(2) }}</div>
          </div>
        </a-col>
        <a-col :span="4">
          <div class="special-middle">
            <div>/</div>
          </div>
        </a-col>
        <a-col :span="4">
          <div class="special-middle">
            <div>/</div>
          </div>
        </a-col>
      </a-row>
      <a-row type="flex" class="row_center">
        <a-col :span="6">
          <div class="special-middle">
            <div>单价5万元以下试制设备合计</div>
          </div>
        </a-col>
        <a-col :span="2">
          <div class="special-middle">
            <div>/</div>
          </div>
        </a-col>
        <a-col :span="2">
          <div class="special-middle">
            <div>{{ fiftyDownNumber }}</div>
          </div>
        </a-col>
        <a-col :span="2">
          <div class="special-middle">
            <div>{{ parseFloat(fiftyDownAmount).toFixed(2) }}</div>
          </div>
        </a-col>
        <a-col :span="2">
          <div class="special-middle">
            <div>{{ parseFloat(fiftyDownFundAmount).toFixed(2) }}</div>
          </div>
        </a-col>
        <a-col :span="2">
          <div class="special-middle">
            <div>{{ parseFloat(fiftyDownSelfAmount).toFixed(2) }}</div>
          </div>
        </a-col>
        <a-col :span="4">
          <div class="special-middle">
            <div>/</div>
          </div>
        </a-col>
        <a-col :span="4">
          <div class="special-middle">
            <div>/</div>
          </div>
        </a-col>
      </a-row>
      <a-row type="flex" class="row_center">
        <a-col :span="6">
          <div class="special-middle">
            <div>累计</div>
          </div>
        </a-col>
        <a-col :span="2">
          <div class="special-middle">
            <div>/</div>
          </div>
        </a-col>
        <a-col :span="2">
          <div class="special-middle">
            <div>{{ totalNumber }}</div>
          </div>
        </a-col>
        <a-col :span="2">
          <div class="special-middle">
            <div>{{ parseFloat(totalAmount).toFixed(2) }}</div>
          </div>
        </a-col>
        <a-col :span="2">
          <div class="special-middle">
            <div>{{ parseFloat(totalFundAmount).toFixed(2) }}</div>
          </div>
        </a-col>
        <a-col :span="2">
          <div class="special-middle">
            <div>{{ parseFloat(totalSelfAmount).toFixed(2) }}</div>
          </div>
        </a-col>
        <a-col :span="4">
          <div class="special-middle">
            <div>/</div>
          </div>
        </a-col>
        <a-col :span="4">
          <div class="special-middle">
            <div>/</div>
          </div>
        </a-col>
      </a-row>
      <!-- <a-row type="flex">
        <a-col :span="24" style="text-align: center;">
          <div class="special-middle">
            <a-button type="dashed" style="width: 50%" @click="addArray">
              <a-icon type="plus" /> 添加
            </a-button>
          </div>
        </a-col>
      </a-row> -->
    </div>
  </template>
  
  <script>
  const Manufacture = {
    id: "",
    objectId: "",
    name: "",
    functionTarget: "",
    unitPrice: 0.00,
    quantity: 1,
    totalBudget: 0.00,
    fundAmount: 0.00,
    selfAmount: 0.00,
    manufactureUnit: "",
    storageUnit: "",
  }
  
  export default {
    name: "manufactureInfo",
    props: {
      manufactureList: {
        type: Array,
        default: () => {
          return [];
        },
      },
    },
    data() {
      return {
        fiftyUpNumber: 0,
        fiftyUpAmount: 0.00,
        fiftyUpFundAmount: 0.00,
        fiftyUpSelfAmount: 0.00,
  
        fiftyDownNumber: 0,
        fiftyDownAmount: 0.00,
        fiftyDownFundAmount: 0.00,
        fiftyDownSelfAmount: 0.00,
  
        totalNumber: 0,
        totalAmount: 0.00,
        totalFundAmount: 0.00,
        totalSelfAmount: 0.00,
      };
    },
    created() {
      if (this.manufactureList) {
        this.calTotalNumber()
        this.calTotalAmount()
        this.calTotalFundAmount()
        this.calTotalSelfAmount()
      }
    },
    methods: {
      addArray() {
        this.manufactureList.push({ ...Manufacture })
      },
      deleteManufacture(item) {
        let index = this.manufactureList.indexOf(item)
        if (index !== -1) {
          this.manufactureList.splice(index, 1)
        }
        this.calTotalNumber()
        this.calTotalAmount()
        this.calTotalFundAmount()
        this.calTotalSelfAmount()
      },
      outUnitPriceChange(index) {
        this.manufactureList[index].totalBudget = this.manufactureList[index].unitPrice * this.manufactureList[index].quantity
        this.calTotalNumber()
        this.calTotalAmount()
      },
      outNumberChange(index) {
        this.manufactureList[index].totalBudget = this.manufactureList[index].unitPrice * this.manufactureList[index].quantity
        this.calTotalNumber()
        this.calTotalAmount()
      },
      calTotalNumber() {
        this.totalNumber = 0
        this.fiftyUpNumber = 0
        this.fiftyDownNumber = 0
        this.manufactureList.forEach(e => {
          if (e.unitPrice >= 5)
            this.fiftyUpNumber += e.quantity
          else
            this.fiftyDownNumber += e.quantity
  
          this.totalNumber += e.quantity
        })
      },
      calTotalAmount() {
        this.totalAmount = 0.00
        this.fiftyUpAmount = 0.00
        this.fiftyDownAmount = 0.00
        this.manufactureList.forEach(e => {
          if (e.unitPrice >= 5)
            this.fiftyUpAmount += e.totalBudget
          else
            this.fiftyDownAmount += e.totalBudget
  
          this.totalAmount += e.totalBudget
        })
      },
      outFundAmountChange(index) {
        this.calTotalFundAmount()
      },
      outSelfAmountChange(index) {
        this.calTotalSelfAmount()
      },
      calTotalFundAmount() {
        this.fiftyUpFundAmount = 0.00
        this.fiftyDownFundAmount = 0.00
        this.totalFundAmount = 0.00
        this.manufactureList.forEach(e => {
          if (e.unitPrice >= 5)
            this.fiftyUpFundAmount += e.fundAmount
          else
            this.fiftyDownFundAmount += e.fundAmount
  
          this.totalFundAmount += e.fundAmount
        })
      },
      calTotalSelfAmount() {
        this.fiftyUpSelfAmount = 0.00
        this.fiftyDownSelfAmount = 0.00
        this.totalSelfAmount = 0.00
        this.manufactureList.forEach(e => {
          if (e.unitPrice >= 5)
            this.fiftyUpSelfAmount += e.selfAmount
          else
            this.fiftyDownSelfAmount += e.selfAmount
  
          this.totalSelfAmount += e.selfAmount
        })
      }
    },
    // watch: {
    //   manufactureList: {
    //     handler(manufactureList) {
    //       if (!!manufactureList) {
    //         this.calTotalNumber()
    //         this.calTotalAmount()
    //         this.calTotalFundAmount()
    //         this.calTotalSelfAmount()
    //       }
    //     },
    //   },
    // },
  };
  </script>