<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="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="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="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>主要生产<br />厂家及国别</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>购置必要性及<br />对项目研究的<br />作用和用途</div>
        </div>
      </a-col>
    </a-row>
    <a-row v-for="(item, index) in deviceList" :key="'deviceList' + 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="2">
        <div class="special-middle">{{ item.functionTarget }}</div>
      </a-col>
      <a-col :span="2">
        <div class="special-middle">
          {{ parseFloat(item.unitPrice).toFixed(2) }}
        </div>
      </a-col>
      <a-col :span="1">
        <div class="special-middle">{{ item.quantity }}</div>
      </a-col>
      <a-col :span="2">
        <div class="special-middle">
          {{ parseFloat(item.totalBudget).toFixed(2) }}
        </div>
      </a-col>
      <a-col :span="2">
        <div class="special-middle">{{ item.buyUnit }}</div>
      </a-col>
      <a-col :span="2">
        <div class="special-middle">{{ item.storageLocation }}</div>
      </a-col>
      <a-col :span="2">
        <div class="special-middle">{{ item.equipmentType }}</div>
      </a-col>
      <a-col :span="2">
        <div class="special-middle">{{ item.manufacturer }}</div>
      </a-col>
      <a-col :span="2">
        <div class="special-middle">{{ item.specificationType }}</div>
      </a-col>
      <a-col :span="2">
        <div class="special-middle">{{ item.sharedScope }}</div>
      </a-col>
      <a-col :span="2">
        <div class="special-middle">{{ item.useFrom }}</div>
      </a-col>
    </a-row>

    <a-row type="flex" class="row_center">
      <a-col :span="5">
        <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="1">
        <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>/</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>/</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>/</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>/</div></div>
      </a-col>
    </a-row>
    <a-row type="flex" class="row_center">
      <a-col :span="5">
        <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="1">
        <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>/</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>/</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>/</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>/</div></div>
      </a-col>
    </a-row>
    <a-row type="flex" class="row_center">
      <a-col :span="5">
        <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="1">
        <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>/</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>/</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>/</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>/</div></div>
      </a-col>
    </a-row>
    <a-row type="flex" class="item_inner">
      <a-col :span="24">
        <span style="color: red">
          注:1.本表只填写省级财政科技资金购置的设备;涉及自筹经费购买的设备，请在资金预算编制说明中说明。<br />
          2.单价5万元以下的设备不填写明细。</span>
      </a-col>
    </a-row>
  </div>
</template>
  
  <script>
const Equipment = {
  id: "",
  objectId: "",
  name: "",
  functionTarget: "",
  specificationType: "",
  quantity: 1,
  totalBudget: 0.0,
  useFrom: "",
  buyUnit: "",
  storageLocation: "",
  equipmentType: "",
  manufacturer: "",
  sharedScope: "",
  unitPrice: 0.0,
};

export default {
  name: "deviceInfo",
  data() {
    return {
      fiftyUpNumber: 0,
      fiftyUpAmount: 0.0,
      fiftyDownNumber: 0,
      fiftyDownAmount: 0.0,
      totalNumber: 0,
      totalAmount: 0.0,
    };
  },
  props: {
    deviceList: {
      type: Array,
      default: () => {
        return [];
      },
    },
  },
  created() {
    if (this.deviceList) 
      this.calNumberAmount()
  },
  methods: {
    calNumberAmount() {
      this.fiftyUpAmount = 0.0;
      this.fiftyDownAmount = 0.0;
      this.fiftyUpNumber = 0;
      this.fiftyDownNumber = 0;
      this.deviceList.forEach((e) => {
        if (e.unitPrice >= 5) {
          this.fiftyUpAmount += e.unitPrice * e.quantity;
          this.fiftyUpNumber += e.quantity;
        } else {
          this.fiftyDownAmount += e.unitPrice * e.quantity;
          this.fiftyDownNumber += e.quantity;
        }
      });
      this.totalNumber = this.fiftyUpNumber + this.fiftyDownNumber;
      this.totalAmount = this.fiftyUpAmount + this.fiftyDownAmount;
    },
    outUnitPriceChange(index) {
      this.deviceList[index].totalBudget =
        this.deviceList[index].unitPrice * this.deviceList[index].quantity;
      this.calNumberAmount();
    },
    outNumberChange(index) {
      this.deviceList[index].totalBudget =
        this.deviceList[index].unitPrice * this.deviceList[index].quantity;
      this.calNumberAmount();
    },
  },
  // watch: {
  //   deviceList: {
  //     handler(deviceList) {
  //       if (!!deviceList) this.calNumberAmount();
  //     },
  //   },
  // },
};
</script>