<template>
  <div style="width:100%;">
    <table border="1" style="width:100%">
      <tr>
        <td style="width:55px;">序号</td>
        <td>采购内容</td>
        <td style="width:50px;" v-if="taskName == '采购申请'|| taskName == '编制计划'">操作</td>
      </tr>
      <tr v-for="(item, index) in itemList" :key="index">
        <td>
          {{ index + 1 }}
        </td>
        <td>
          <el-descriptions :column="4" border size="mini">
            <el-descriptions-item label="名称" :span="4">
              <el-input v-model="item.name"></el-input>
            </el-descriptions-item>
            <el-descriptions-item label="规格型号" :span="4">
              <el-input v-model="item.series"></el-input>
            </el-descriptions-item>
            <el-descriptions-item label="单位">
              <el-input v-model="item.unit" maxlength="5" show-word-limit></el-input>
            </el-descriptions-item>
            <el-descriptions-item label="参考单价">
              <el-input v-model="item.price" @blur="getAmount(item)"></el-input>
            </el-descriptions-item>
            <el-descriptions-item label="数量">
              <el-input v-model="item.num" @blur="getAmount(item)"></el-input>
            </el-descriptions-item>
            <el-descriptions-item label="总价">
              <el-input v-model="item.amount"></el-input>
            </el-descriptions-item>
            <el-descriptions-item label="购买方式">
              <el-input v-model="item.procureWay" maxlength="5" show-word-limit></el-input>
            </el-descriptions-item>
            <el-descriptions-item label="用途">
              <el-input type="textarea" v-model="item.usage" maxlength="10" show-word-limit></el-input>
            </el-descriptions-item>
            <el-descriptions-item label="备注" :span="3">
              <el-input type="textarea" v-model="item.remark"></el-input>
            </el-descriptions-item>
          </el-descriptions>
        </td>
        <td v-if="taskName == '采购申请' || taskName == '编制计划'">
          <div class="delete-btn" @click="deleItem(index)">
            <i class="el-icon-circle-close"></i>
          </div>
        </td>
      </tr>
    </table>
    <el-button @click="addItem" icon="el-icon-plus" type="primary" size="mini"></el-button>
  </div>
</template>

<script>
import { listProcurePlan, getProcurePlan, addProcurePlan, updateProcurePlan, delProcurePlan } from "@/api/oa/procure/procurePlan";
export default {
  props: {
    procureApplyId: {
      type: String,
      default: ''
    },
    taskName: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      itemList: [],
      formTotal: 0
    }
  },
  created() {
    this.initList()
  },
  methods: {
    initList() {
      const queryParams = {
        pageSize: 999,
        procureApplyId: this.procureApplyId
      }
      listProcurePlan(queryParams).then(res => {
        if (res.total != 0) {
          this.formTotal = 1
          this.itemList = res.rows;
        } else {
          this.itemList = [{
            name: '',
            series: '',
            unit: '',
            price: 0,
            num: 1,
            amount: 0,
            procureWay: '',
            usage: '',
            remark: ''
          }]
        }
      })
    },
    getAmount(item) {
      const price = Number(item.price);
      const num = Number(item.num);
      if (!isNaN(price) && !isNaN(num)) {
        // 计算总价  
        const amount = price * num;
        this.$set(item, 'amount', amount)
      }
    },
    addItem() {
      this.itemList.push({
        name: '',
        series: '',
        unit: '',
        price: 0,
        num: 1,
        amount: 0,
        procureWay: '',
        usage: '',
        remark: ''
      })
    },
    deleItem(index) {
      let arr = this.itemList;
      if (arr.length == 1) {
        return;
      }
      if (index >= 0 && index < arr.length) {
        arr.splice(index, 1);
      }
    }
  },
}
</script>

<style lang="scss" scoped>
@import "@/assets/styles/element-reset.scss";

table {
  /*边框*/
  /* border: 1px solid black; */
  text-align: center;
  border-collapse: collapse;
  border: 1px solid #a5abb0;

  /*设置背景颜色*/
  /* background-color: #bfa; */
  td {
    padding: 5px;
    font-size: 14px;
  }
}

.delete-btn {
  color: #F56C6C;
  cursor: pointer;

  i {
    font-size: 25px;
  }
}
</style>