<template>
  <el-dialog
    title="新建领料单"
    :visible.sync="visible"
    :before-close="handleClose"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    append-to-body
    width="80%"
  >
    <div>
      <el-form :model="pickForm" ref="pickForm">
        <el-row :gutter="24">
          <el-col :span="6">
            <el-form-item label="领料单编号" prop="pickCode" label-width="90px">
              <el-input v-model="pickForm.pickCode" disabled=""></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="6">
            <el-form-item label="领料单名称" prop="pickName" label-width="90px">
              <el-input v-model="pickForm.pickName"></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="6">
            <el-button type="primary" @click="openPicking">添加物料</el-button>
          </el-col>
        </el-row>
      </el-form>

      <el-form>
        <el-table
          ref="form222"
          class="table_content"
          :max-height="300"
          :data="objPick.pickList"
          tooltip-effect="dark"
          style="width: 100%"
          stripe
          border
        >
          <el-table-column label="序号" type="index" width="60">
            <template slot-scope="{ row, $index }">
              {{ $index }}
            </template>
          </el-table-column>

          <el-table-column label="类型" prop="rootCategoryLevelId" width="80">
            <template slot-scope="{ row, $index }">
              <el-tag size="mini">{{
                typeName[Number(row.rootCategoryLevelId)]
              }}</el-tag>
            </template>
          </el-table-column>

          <el-table-column label="编码" prop="assetCode">
            <template slot-scope="{ row, $index }">
              <span
                v-if="
                  Object.prototype.hasOwnProperty.call(row, 'isBom') &&
                  row.isBom == 1
                "
                style="color: #faad14"
              >
                {{ row.categoryCode }}
              </span>
              <span>
                {{
                  row.rootCategoryLevelId == 4 ? row.codeNumber : row.code
                }}</span
              >
            </template>
          </el-table-column>

          <el-table-column label="名称" prop="name">
            <template slot-scope="{ row, $index }">
              <span
                v-if="
                  Object.prototype.hasOwnProperty.call(row, 'isBom') &&
                  row.isBom == 1
                "
              >
                {{ row.categoryName }}
              </span>
              <span> {{ row.name }}</span>
            </template>
          </el-table-column>
          <el-table-column label="型号" prop="modelType"> </el-table-column>
          <el-table-column label="规格" prop="specification"> </el-table-column>
          <el-table-column label="批次号" prop="batchNo"> </el-table-column>

          <el-table-column label="数量" prop="demandQuantity">
            <template slot-scope="{ row, $index }">
              <el-form-item>
                <el-input
                  v-model="row.demandQuantity"
                  @input="
                    row.demandQuantity > row.availableCountBase
                      ? (row.demandQuantity = row.availableCountBase)
                      : row.demandQuantity
                  "
                  size="mini"
                >
                  <template slot="append">{{ row.measuringUnit }}</template>
                </el-input>
              </el-form-item>
            </template>
          </el-table-column>

          <el-table-column label="计量库存数量" prop="availableCountBase">
            <template slot-scope="{ row, $index }">
              {{ row.availableCountBase }} {{ row.measuringUnit }}
            </template>
          </el-table-column>

          <el-table-column label="领料仓库" prop="warehouseId">
            <template slot-scope="{ row, $index }">
              <div>
                <el-select
                  v-model="row.warehouseId"
                  placeholder="请选择"
                  filterable
                >
                  <el-option
                    v-for="item in row.warehouseLists"
                    :label="item.warehouse_name"
                    :value="item.warehouse_id"
                    :key="item.warehouse_id"
                  >
                  </el-option>
                </el-select>
              </div>
            </template>
          </el-table-column>

          <el-table-column label="操作" fixed="right" width="100px">
            <template slot-scope="{ $index, row }">
              <el-link type="danger" @click="removeItem($index)">删除</el-link>
            </template>
          </el-table-column>
        </el-table>
      </el-form>
    </div>

    <template slot="footer">
      <el-button size="mini" @click="handleClose">取 消</el-button>
      <el-button size="mini" type="primary" @click="save()">确 定</el-button>
    </template>

    <pickingList
      isType="pick"
      ref="pickingListRef"
      @allSelection="allSelection"
    ></pickingList>
  </el-dialog>
</template>

<script>
  import { getCode } from '@/api/produce/workOrder';
  import pickingList from '@/views/produce/components/picking/pickingList.vue';
  import { typeName } from '@/views/produce/components/common.js';

  import { unproductive } from '@/api/produce/picking';
  export default {
    components: {
      pickingList
    },
    data() {
      return {
        visible: true,

        typeName,

        pickForm: {
          pickCode: null,
          pickName: null
        },
        objPick: {
          pickList: []
        }
      };
    },
    created() {
      this.getOrderCode();
    },

    methods: {
      async getOrderCode() {
        this.pickForm.pickCode = await getCode('pick_order_code');
      },

      openPicking() {
        this.$refs.pickingListRef.open(null, this.objPick);
      },

      allSelection(id, list) {
        this.objPick = {
          pickList: list
        };
      },

      removeItem(index) {
        this.objPick.pickList.splice(index, 1);
      },

      save() {
        if (this.objPick.pickList.length == 0) {
          this.$message.warning('请选择物料');
          return false;
        }
        if (this.objPick.pickList.length > 0) {
          let name;
          let bol2;
          let _i;

          bol2 = this.objPick.pickList.every((e, i) => {
            _i = i;
            name = e.name;
            e.categoryId = e.id;
            return (
              Object.prototype.hasOwnProperty.call(e, 'demandQuantity') &&
              Number(e.demandQuantity) > 0 &&
              e.warehouseId
            );
          });

          if (!bol2) {
            this.$message.warning(
              `${this.objPick.pickList[_i].code}的${name}数据不能为空`
            );
            return false;
          }
        }

        let param = {
          detailList: this.objPick.pickList,
          name: this.pickForm.pickName,
          code: this.pickForm.pickCode
        };

        unproductive(param).then((res) => {
          this.$message.success('领料成功');
          this.$emit('close', true);
        });
      },

      handleClose() {
        this.$emit('close');
      }
    }
  };
</script>

<style lang="scss" scoped></style>
