<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"><a-button icon="close" type="primary" shape="circle" size="small" @click="deleteEquipment(item)"></a-button>&nbsp;{{ index + 1 }}</div>
      </a-col>
      <a-col :span="2">
        <a-form-model-item :prop="'deviceList.' + index + '.name'" :rules="{required: true, message: '*', trigger: 'blur',}">
          <a-input v-model="item.name" :maxLength="100" style="width: 90%;" />
        </a-form-model-item>
      </a-col>
      <a-col :span="2">
        <a-form-model-item :prop="'deviceList.' + index + '.functionTarget'" :rules="{required: true, message: '*', trigger: 'blur',}">
          <a-input v-model="item.functionTarget" :maxLength="200" style="width: 90%;" />
        </a-form-model-item>
      </a-col>
      <a-col :span="2">
        <a-form-model-item :prop="'deviceList.' + index + '.unitPrice'" :rules="{required: true, message: '*', trigger: 'blur',}">
          <a-input-number v-model="item.unitPrice" @change="outUnitPriceChange(index)" :min="0" :step="0.01" style="width: 90%" />
        </a-form-model-item>
      </a-col>
      <a-col :span="1">
        <a-form-model-item :prop="'deviceList.' + index + '.quantity'" :rules="{required: true, message: '*', trigger: 'blur',}">
          <a-input-number v-model="item.quantity" @change="outNumberChange(index)" :min="1" :step="1" style="width: 90%" />
        </a-form-model-item>
      </a-col>
      <a-col :span="2">
        <div class="special-middle">
          <div>{{ parseFloat(item.totalBudget).toFixed(2) }}</div>
        </div>
      </a-col>
      <a-col :span="2">
        <a-form-model-item :prop="'deviceList.' + index + '.buyUnit'" :rules="{required: true, message: '*', trigger: 'blur',}">
          <a-input v-model="item.buyUnit" :maxLength="100" style="width: 90%;" />
        </a-form-model-item>
      </a-col>
      <a-col :span="2">
        <a-form-model-item :prop="'deviceList.' + index + '.storageLocation'" :rules="{required: true, message: '*', trigger: 'blur',}">
          <a-input v-model="item.storageLocation" :maxLength="200" style="width: 90%;" />
        </a-form-model-item>
      </a-col>
      <a-col :span="2">
        <a-form-model-item :prop="'deviceList.' + index + '.equipmentType'" :rules="{required: false, message: '*', trigger: 'blur',}">
          <a-input v-model="item.equipmentType" :maxLength="100" style="width: 90%;" />
        </a-form-model-item>
      </a-col>
      <a-col :span="2">
        <a-form-model-item :prop="'deviceList.' + index + '.manufacturer'" :rules="{required: false, message: '*', trigger: 'blur',}">
          <a-input v-model="item.manufacturer" :maxLength="100" style="width: 90%;" />
        </a-form-model-item>
      </a-col>
      <a-col :span="2">
        <a-form-model-item :prop="'deviceList.' + index + '.specificationType'" :rules="{required: false, message: '*', trigger: 'blur',}">
          <a-input v-model="item.specificationType" :maxLength="100" style="width: 90%;" />
        </a-form-model-item>
      </a-col>
      <a-col :span="2">
        <a-form-model-item :prop="'deviceList.' + index + '.sharedScope'" :rules="{required: false, message: '*', trigger: 'blur',}">
          <a-input v-model="item.sharedScope" :maxLength="100" style="width: 90%;" />
        </a-form-model-item>
      </a-col>
      <a-col :span="2">
        <a-form-model-item :prop="'deviceList.' + index + '.useFrom'" :rules="{required: false, message: '*', trigger: 'blur',}">
          <a-input v-model="item.useFrom" :maxLength="200" style="width: 90%;" />
        </a-form-model-item>
      </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">
      <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 Device = {
  id: "",
  objectId: "",
  name: "",
  functionTarget: "",
  specificationType: "",
  quantity: 1,
  totalBudget: 0.00,
  useFrom: "",
  buyUnit: "",
  storageLocation: "",
  equipmentType: "",
  manufacturer: "",
  sharedScope: "",
  unitPrice: 0.00,
}

export default {
  name: 'deviceEdit',
  data () {
    return {
      fiftyUpNumber: 0,
      fiftyUpAmount: 0.00,
      fiftyDownNumber: 0,
      fiftyDownAmount: 0.00,
      totalNumber: 0,
      totalAmount: 0.00,
    };
  },
  props: {
    deviceList: {
      type: Array,
      default: () => {
        return [];
      },
    },
  },
  created () {
    
  },
  methods: {
    calNumberAmount () {
      this.fiftyUpAmount = 0.00
      this.fiftyDownAmount = 0.00
      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()
    },
    addArray () {
      this.deviceList.push({ ...Device })
      this.calNumberAmount()
    },
    deleteEquipment (item) {
      let index = this.deviceList.indexOf(item)
      if (index !== -1) {
        this.deviceList.splice(index, 1)
      }
      this.calNumberAmount()
    },
  },
  watch: {
    deviceList: {
        handler(deviceList) {
          if (!!deviceList) {
            this.calNumberAmount()
          }
        },
      },
    },
}
</script>