<template>
  <vxe-modal :value="show" title="批次录入" width="60%" @close="cancel">
    <template #default>
      <div class="goods-name">
        <span class="label">商品名称</span>
        <span class="value">{{ goodsData.materielName }}</span>
      </div>
      <div class="goods-name">
        <span class="label">单位属性</span>
        <span class="value">
          {{ goodsData.unitName }};{{ goodsData.skuName }}
        </span>
      </div>
      <vxe-table
        stripe
        show-overflow
        max-height="500"
        :edit-config="{ trigger: 'click', mode: 'cell' }"
        :data="goods_list"
        @edit-closed="editChange"
      >
        <vxe-table-column
          field="productionData"
          title="生产日期"
          min-width="200"
          :edit-render="{
            name: '$input',
            placeholder: '请选择日期',
            props: { type: 'date' },
          }"
        ></vxe-table-column>
        <vxe-table-column
          field="inNum"
          title="入库数量"
          min-width="200"
          :edit-render="{
            name: '$input',
            placeholder: '请输入入库数量',
            props: {
              type: 'float',
              digits: 2,
              min: 0,
            },
          }"
        ></vxe-table-column>
        <vxe-table-column
          v-if="goodsData.isEq === 5"
          field="otherNum"
          title="其他单位"
          min-width="200"
          :edit-render="{
            name: '$input',
            placeholder: '请输入其他单位入库数量',
            props: {
              type: 'float',
              digits: 2,
              min: 0,
            },
          }"
        ></vxe-table-column>
        <vxe-table-column width="120" title="操作">
          <template #default="{ row, rowIndex }">
            <el-button
              type="text"
              size="mini"
              :disabled="goods_list.length === 1"
              @click="delData(row, rowIndex)"
            >
              删除
            </el-button>
            <el-button type="text" size="mini" @click="addListGoods">
              新增
            </el-button>
          </template>
        </vxe-table-column>
      </vxe-table>
      <div class="float_right" style="margin-top: 20px">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="confirm">确 定</el-button>
      </div>
    </template>
  </vxe-modal>
</template>

<script>
  const batchItem = {
    skuId: "",
    unitName: "",
    skuName: "",
    inNum: "",
    inCostTotal: 0,
    otherNum: "",
    productionData: "",
  };
  export default {
    name: "ProductionData",
    model: {
      prop: "show",
      event: "change",
    },
    props: {
      show: {
        type: Boolean,
        default: false,
      },
      goodsData: {
        type: Object,
        default: () => {
          return {};
        },
      },
    },
    data() {
      return {
        goods_list: [],
      };
    },
    mounted() {
      for (let i = 1; i <= 10; i++) {
        this.goods_list.push(this.$_common.deepClone(batchItem));
      }
    },
    created() {
      console.log(this.goods_list);
    },
    methods: {
      change() {},
      cancel() {
        this.$emit("cancel");
      },
      confirm() {
        console.log(this.goods_list);
        const arr = this.$_common
          .deepClone(this.goods_list)
          .filter((item) => !!item.skuId)
          .map((item) => {
            delete item.id;
            return {
              ...item,
              productionData: parseInt(new Date(item.productionData).getTime()),
            };
          });
        this.$emit("confirm", arr);
        this.cancel();
      },
      delData(row, index) {
        this.goods_list.splice(index, 1);
      },
      addListGoods() {
        this.goods_list.push(this.$_common.deepClone(batchItem));
      },
      // 改变数量
      editChange({ row, rowIndex, column }) {
        if (column.title === "入库数量") {
          this.$set(this.goods_list, rowIndex, {
            ...row,
            inCostTotal: this.$NP.times(Number(row.inCost), Number(row.inNum)),
          });
        }
        if (column.title !== "生产日期" || !row.productionData) {
          return;
        }
        const goodsItem = this.$_common.deepClone(this.goodsData);
        this.$set(this.goods_list, rowIndex, {
          ...goodsItem,
          inCostTotal: 0,
          inNum: "",
          otherNum: "",
          productionData: row.productionData,
        });
      },
    },
  };
</script>

<style scoped lang="scss">
  .goods-name {
    height: 32px;
    line-height: 32px;
    padding: 0 15px;
    display: inline-block;
    font-size: 12px;
    border: 1px solid #dcdfe6;
    border-radius: 4px;
    color: #666666;
    margin: 10px 0;
    margin-right: 10px;
    .value {
      color: #2d405e;
      margin-left: 10px;
    }
  }
</style>
