<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.waNmae" :disabled="true"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="入库单号">
              <el-input v-model="sizeForm.code" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="入库时间">
              <el-date-picker
                v-model="sizeForm.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.argument"
                :disabled="inDialogType != 'add'"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="物资类型">
              <el-select
                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>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="填报人">
              <el-input
                v-model="sizeForm.submitName"
                :disabled="inDialogType != 'add'"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="审批人">
              <el-input v-model="sizeForm.applyNmae" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="选项">
              <el-radio-group
                v-model="sizeForm.radio"
                @change="radioChange()"
                :disabled="inDialogType != 'add'"
              >
                <el-radio :label="1" :disabled="sizeForm.type == 2">批量选择</el-radio>
                <el-radio :label="2">单项选择</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="12" v-if="sizeForm.radio == 1">
            <el-form-item label="采购单名称">
              <el-input v-model="sizeForm.caigoudanmingcheng" disabled></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <div class="form-title">2025年04月05日入库信息：</div>

        <!-- <el-button type="primary" size="mini" style="margin-bottom: 18px;" @click="inTableAdd()">新增</el-button> -->
        <el-table :data="sizeForm.inTableData" border style="width: 100%">
          <el-table-column prop="str1" label="编码" width="100"> </el-table-column>
          <el-table-column prop="str2" label="名称" width="140">
            <template slot-scope="scope">
              <el-select
                v-model="scope.row.str2"
                placeholder="请选择"
                style="width: 100%"
                size="mini"
                @change="changeName(scope.$index)"
              >
                <el-option label="物资1" value="1"></el-option>
                <el-option label="物资2" value="2"></el-option>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column prop="str3" label="规格" width="100"> </el-table-column>
          <el-table-column prop="str4" label="类别" width="100"> </el-table-column>
          <el-table-column prop="str5" label="单位" width="100"> </el-table-column>
          <el-table-column prop="str6" label="需求数量" width="100"> </el-table-column>
          <el-table-column prop="yirukushuliang" label="已入库数量" width="100">
          </el-table-column>
          <el-table-column prop="str7" label="入库数量" width="140">
            <template slot-scope="scope">
              <el-input-number
                size="mini"
                v-model="scope.row.str7"
                :min="1"
                style="width: 100%"
                :disabled="scope.row.status != 1"
              ></el-input-number>
            </template>
          </el-table-column>
          <el-table-column prop="str8" label="单价" width="100"> </el-table-column>
          <el-table-column prop="str9" label="需求部门" width="100"> </el-table-column>
          <el-table-column prop="status" label="入库情况">
            <template slot-scope="scope">
              <el-button
                type="text"
                @click="putIn(scope.row)"
                v-if="scope.row.status == 1"
                >入库</el-button
              >
              <span v-else>已入库</span>
            </template>
          </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="当前库存" width="100">
            <el-table-column prop="str1" label="编码" width="100"> </el-table-column>
            <el-table-column prop="str2" label="名称" width="100">
              <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.str2 }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="str3" label="规格" width="100"> </el-table-column>
            <el-table-column prop="str4" label="类别" width="100"> </el-table-column>
            <el-table-column prop="str5" label="单位" width="100"> </el-table-column>
            <el-table-column prop="str6" label="数量" width="100"> </el-table-column>
            <el-table-column prop="str7" label="单价" width="100"> </el-table-column>
          </el-table-column>
          <el-table-column prop="date" label="入库信息" width="100">
            <el-table-column prop="str8" label="数量" width="100"> </el-table-column>
            <el-table-column prop="str9" label="单价" width="100"> </el-table-column>
          </el-table-column>
          <el-table-column prop="date" label="入库后库存" width="100">
            <el-table-column prop="str10" label="数量" width="100"> </el-table-column>
            <el-table-column prop="str11" label="单价" width="100"> </el-table-column>
          </el-table-column>
          <el-table-column prop="date" label="入库信息" width="100">
            <el-table-column prop="str12" label="入库人" width="100"> </el-table-column>
            <el-table-column prop="str13" label="入库时间" width="100"> </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="save()">保 存</el-button> -->
        <el-button type="primary" @click="sumbit()">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 批量出库  选择 -->
    <el-dialog
      :close-on-click-modal="false"
      title="选择数据来源"
      :visible.sync="inBatchDialogVisible"
      :append-to-body="true"
      width="40%"
      @close="handleBatchClose"
    >
      <el-select v-model="batchType" placeholder="请选择数据来源" style="width: 100%">
        <el-option label="2025年1季度" value="1"></el-option>
        <el-option label="2025年2季度" value="2"></el-option>
        <el-option label="2025年3季度" value="3"></el-option>
      </el-select>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleBatchClose()">取 消</el-button>
        <el-button type="primary" @click="batchSumbit()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
export default {
  props: {
    repairVisible: {
      type: Boolean,
      default: false,
    },
    inDialogTiltle: {
      type: String,
      default: "",
    },
    inDialogType: {
      type: String,
      default: "",
    },
    type: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      inDialogVisible: false,
      sizeForm: {
        code: "", //入库单号
        applyNmae: "", //审批人
        submitName: "", //填报人
        waNmae: "", //仓库名称
        argument: "", //事由
        inAccountsTableData: [], //总计
        inTableData: [],
      },
      inTableData: [],
      inBatchDialogVisible: false, //选择采购单的数据
      batchType: "", //批量选择类型
    };
  },
  mounted() {
    this.inDialogVisible = this.repairVisible;
    if (this.inDialogType == "add") {
      this.addInit();
    } else {
      this.inInit();
    }
  },
  methods: {
    inInit() {
      const randomNum = Math.floor(Math.random() * 100000000) + 1;
      this.sizeForm.code = String(randomNum).padStart(8, "0"); //入库单号
      this.sizeForm.applyNmae = "审批人一";
      this.sizeForm.submitName = "填报人一";
      this.sizeForm.radio = 1;
      this.sizeForm.waNmae = "仓库一";
      this.sizeForm.argument = "入库";
      this.sizeForm.type = "1";
      this.sizeForm.inDate = new Date(); //入库时间

      this.sizeForm.inTableData.push({
        str1: "000001",
        str2: "物品1",
        str3: "规格1",
        str4: "类别1",
        str5: "单位1",
        str6: "11",
        yirukushuliang: "4",
        str7: "5",
        str8: "3",
        str9: "部门一",
        name: "审批人",
        status: "1", //
      });
    },
    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");
    },
    // 添加入库数据
    inTableAdd() {
      this.sizeForm.inTableData.push({
        str1: "",
        str2: "",
        str3: "",
        str4: "",
        str5: "",
        str6: "",
        str7: 0,
        str8: "",
        str9: "",
        name: "",
        status: "", //
      });
    },
    // 点击入库
    putIn(row) {
      row.status = 0;
      // 更改总表的数据
      this.sizeForm.inAccountsTableData.push({
        str1: "000001",
        str2: "物品1",
        str3: "规格1",
        str4: "类别1",
        str5: "单位1",
        str6: "12",
        str7: "3",
        str8: row.str7,
        str9: "3",
        str10: row.str7 + 12,
        str11: "3",
        str12: "审批人1",
        str13: "2025-04-05",
      });
    },
    // 采购单选择弹框关闭
    handleBatchClose() {
      this.inBatchDialogVisible = false;
    },
    // 采购单选择确定
    batchSumbit() {
      this.sizeForm.inTableData.push(
        {
          str1: "000001",
          str2: "物品1",
          str3: "规格1",
          str4: "低值耐用品",
          str5: "单位1",
          str6: "11",
          str7: "3",
          str8: "3",
          str9: "部门一",
          name: "审批人",
          status: "1", //
        },
        {
          str1: "000001",
          str2: "物品1",
          str3: "规格1",
          str4: "易耗品",
          str5: "单位1",
          str6: "15",
          str7: "3",
          str8: "3",
          str9: "部门一",
          name: "审批人",
          status: "1", //
        }
      );

      this.inBatchDialogVisible = false;
    },
    changeName(index) {
      console.log(9999, index);
      this.sizeForm.inTableData.forEach((item, i) => {
        if (i == index) {
          item.str1 = "000001";
          item.str2 = "物资1";
          item.str3 = "规格1";
          item.str4 = "类别1";
          item.str5 = "单位1";
          item.str6 = "11";
          item.str7 = 22;
          item.str8 = "3";
          item.str9 = "部门一";
          item.name = "审批人";
          item.status = "1";
          this.$set(item, "str7", 22);
        }
      });
      console.log(888888, this.sizeForm.inTableData);
    },
    // 保存  暂存
    save() {
      this.$message({
        type: "success",
        message: "保存成功",
      });
      this.handleCloseDetail();
    },
    // 提交
    sumbit() {
      this.$message({
        type: "success",
        message: "提交成功",
      });
      this.handleCloseDetail(this.sizeForm.inTableData);
    },
    // 选项选择
    radioChange(val) {
      this.sizeForm.inTableData = [];
      if (this.sizeForm.radio == 1) {
        this.inBatchDialogVisible = true;
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.form-title {
  font-size: 16px;
  font-weight: 600;
  padding: 18px 0;
}
</style>
