<template>
  <div>
    <el-dialog
      :close-on-click-modal="false"
      :title="inDialogTiltle"
      :visible.sync="inDialogVisible"
      :append-to-body="true"
      width="70%"
      @close="handleCloseDetail"
      fullscreen
    >
      <!-- 基本信息 -->
      <el-form
        :model="sizeForm"
        ref="dynamicValidateForm"
        label-width="100px"
        class="demo-dynamic"
      >
        <div class="form-title">基本信息</div>
        <el-row>
          <el-col :span="12">
            <el-form-item label="仓库名称">
              <el-input
                v-model="sizeForm.ldTwoPutStorage.warehouseName"
                :disabled="true"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="入库单号">
              <el-input
                v-model="sizeForm.ldTwoPutStorage.orderNo"
                disabled
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="入库时间">
              <el-date-picker
                v-model="sizeForm.ldTwoPutStorage.inDate"
                type="date"
                placeholder="选择日期"
                style="width: 100%"
                disabled
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="事由">
              <el-input
                v-model="sizeForm.ldTwoPutStorage.reason"
                :disabled="inDialogType != 'add'"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <div class="form-title">{{ inDate }}入库信息：</div>
        <el-table
          :data="sizeForm.ldTwoPutStorageDetails"
          border
          style="width: 100%"
        >
          <el-table-column prop="twoPutStorageNo" label="编码">
          </el-table-column>
          <el-table-column prop="materialName" label="名称"> </el-table-column>
          <el-table-column prop="model" label="规格/型号"> </el-table-column>
          <el-table-column prop="type" label="类别"> </el-table-column>
          <el-table-column prop="unit" label="单位"> </el-table-column>
          <el-table-column prop="applicationQuantity" label="需求数量">
          </el-table-column>
          <el-table-column prop="yirukushuliang" label="已入库数量">
          </el-table-column>
          <el-table-column prop="inboundQuantity" label="入库数量" width="140">
            <template slot-scope="scope">
              <el-input-number
                size="mini"
                v-model="scope.row.inboundQuantity"
                :min="1"
                style="width: 100%"
              ></el-input-number>
            </template>
          </el-table-column>
          <el-table-column prop="amount" label="单价"> </el-table-column>
          <el-table-column prop="demandDepartmentName" label="需求部门">
          </el-table-column>
        </el-table>
        <div class="form-title">入库账目表格：</div>
        <el-table
          :data="sizeForm.inAccountsTableData"
          border
          style="width: 100%"
        >
          <el-table-column prop="date" label="当前库存">
            <el-table-column prop="twoPutStorageNo" label="编码">
            </el-table-column>
            <el-table-column prop="materialName" label="名称">
              <template slot-scope="scope">
                <el-select
                  v-if="sizeForm.radio == 2"
                  v-model="sizeForm.type"
                  placeholder="请选择"
                  style="width: 100%"
                  :disabled="inDialogType != 'add'"
                >
                  <el-option label="办公室物资" value="1"></el-option>
                  <el-option label="其他物资" value="2"></el-option>
                </el-select>
                <span v-else>{{ scope.row.materialName }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="model" label="规格"> </el-table-column>
            <el-table-column prop="type" label="类别"> </el-table-column>
            <el-table-column prop="unit" label="单位"> </el-table-column>
            <el-table-column prop="applicationQuantity" label="数量">
            </el-table-column>
            <el-table-column prop="inboundQuantity" label="单价">
            </el-table-column>
          </el-table-column>
          <el-table-column prop="date" label="入库信息">
            <el-table-column prop="amount" label="数量"> </el-table-column>
            <el-table-column prop="department" label="单价"> </el-table-column>
          </el-table-column>
          <el-table-column prop="date" label="入库后库存">
            <el-table-column prop="twoPutStorageNo0" label="数量">
            </el-table-column>
            <el-table-column prop="twoPutStorageNo1" label="单价">
            </el-table-column>
          </el-table-column>
          <el-table-column prop="date" label="入库信息">
            <el-table-column prop="twoPutStorageNo2" label="入库人">
            </el-table-column>
            <el-table-column prop="twoPutStorageNo3" label="入库时间">
            </el-table-column>
          </el-table-column>
        </el-table>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleCloseDetail()">取 消</el-button>
        <el-button type="primary" @click="sumbit()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { getDetails } from "@/api/secondOrder/inbound";
export default {
  props: {
    repairVisible: {
      type: Boolean,
      default: false,
    },
    inDialogTiltle: {
      type: String,
      default: "",
    },
    inDialogType: {
      type: String,
      default: "",
    },
    type: {
      type: String,
      default: "",
    },
    inDialogData: {
      type: Object,
      default: {},
    },
  },
  data() {
    return {
      inDialogVisible: false,
      sizeForm: {
        code: "", //入库单号
        applyNmae: "", //审批人
        submitName: "", //填报人
        waNmae: "", //仓库名称
        argument: "", //事由
        inAccountsTableData: [], //总计
        inTableData: [],
      },
    };
  },
  computed: {
    inDate() {
      const now = new Date();
      const year = now.getFullYear();
      const month = String(now.getMonth() + 1).padStart(2, "0");
      const day = String(now.getDate()).padStart(2, "0");
      return `${year}年${month}月${day}日`;
    },
  },
  mounted() {
    this.inDialogVisible = this.repairVisible;
    if (this.inDialogType == "add") {
      this.addInit();
    } else {
      this.inInit();
    }
  },
  methods: {
    inInit() {
      getDetails({ twoPutStorageId: this.inDialogData.id }).then((res) => {
        console.log(9898989, res.data.result);
        this.sizeForm = res.data.result;
      });
    },
    addInit() {
      // 生成入库单号
      const randomNum = Math.floor(Math.random() * 100000000) + 1;
      this.sizeForm.code = String(randomNum).padStart(8, "0"); //入库单号
      this.sizeForm.inDate = new Date(); //入库时间
      if (this.type == "一级库") {
        this.sizeForm.waNmae = "仓库一";
      }
    },
    handleCloseDetail() {
      this.inDialogVisible = false;
      this.$emit("handleCloseDetail");
    },

    // 采购单选择弹框关闭
    handleBatchClose() {
      this.inBatchDialogVisible = false;
    },
    // 提交
    sumbit() {
      this.$message({
        type: "success",
        message: "提交成功",
      });
      this.handleCloseDetail(this.sizeForm.inTableData);
    },
  },
};
</script>
<style lang="scss" scoped>
.form-title {
  font-size: 16px;
  font-weight: 600;
  padding: 18px 0;
}
</style>
