<template>
  <div>
    <el-dialog
      :close-on-click-modal="false"
      :title="outDialogTiltle"
      :visible.sync="outDialogVisible"
      :append-to-body="true"
      @close="handleCloseDetail"
      fullscreen
    >
      <div class="dialog-content">
        <!-- 基本信息 -->
        <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-date-picker
                  v-model="sizeForm.outDate"
                  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="outDialogType != '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="outDialogType != '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-select
                  v-model="sizeForm.departmentId"
                  placeholder="请选择部门"
                  style="width: 100%"
                  :disabled="outDialogType != 'add'"
                  @change="deptChange"
                  clearable
                  filterable
                >
                  <el-option
                    v-for="item in departmentOptions"
                    :key="item.departmentId"
                    :label="item.department"
                    :value="item.departmentId"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="领用人">
                <!-- userOptions -->
                <el-select
                  v-model="sizeForm.lingyongren"
                  placeholder="请选择物资名称"
                  style="width: 100%"
                  v-if="outDialogType != 'details'"
                  :disabled="sizeForm.departmentId == ''"
                  value-key="id"
                  clearable
                  filterable
                >
                  <el-option
                    v-for="item in userOptions"
                    :key="item.materialId"
                    :label="item.materialName"
                    :value="item"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="填报人">
                <el-input
                  v-model="sizeForm.submitName"
                  :disabled="outDialogType != 'add'"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <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="materialCode" label="物资编码" width="100">
            </el-table-column>
            <el-table-column prop="str2" label="物资名称" width="140">
              <template slot-scope="scope">
                <el-select
                  v-model="scope.row.materialitem"
                  placeholder="请选择物资名称"
                  style="width: 100%"
                  @change="
                    handleMaterialChange(scope.row.materialitem, scope.$index)
                  "
                  v-if="outDialogType != 'details'"
                  value-key="id"
                >
                  <el-option
                    v-for="item in materials"
                    :key="item.materialId"
                    :label="item.materialName"
                    :value="item"
                  >
                  </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="str6" label="申请数量"> </el-table-column>
            <el-table-column prop="str9" label="已出库"> </el-table-column>
            <el-table-column prop="str7" label="出库数量">
              <template slot-scope="scope">
                <el-input-number
                  size="mini"
                  v-model="scope.row.str7"
                  :min="1"
                  style="width: 100%"
                  :disabled="outDialogType != 'add'"
                  v-if="scope.row.str7"
                  @change="numberChange($event)"
                ></el-input-number>
              </template>
            </el-table-column>
            <el-table-column prop="unitPrice" 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="str1" label="编码"> </el-table-column>
              <el-table-column prop="str2" label="名称">
                <template slot-scope="scope">
                  <el-select
                    v-model="sizeForm.type"
                    placeholder="请选择"
                    style="width: 100%"
                    :disabled="outDialogType != 'add'"
                  >
                    <el-option label="办公室物资" value="1"></el-option>
                    <el-option label="其他物资" value="2"></el-option>
                  </el-select>
                </template>
              </el-table-column>
              <el-table-column prop="str3" label="规格"> </el-table-column>
              <el-table-column prop="str4" label="类别"> </el-table-column>
              <el-table-column prop="str5" label="单位"> </el-table-column>
              <el-table-column prop="str6" label="数量"> </el-table-column>
              <el-table-column prop="str7" label="单价"> </el-table-column>
            </el-table-column>
            <el-table-column prop="date" label="出库信息">
              <el-table-column prop="str8" label="数量"> </el-table-column>
              <el-table-column prop="str9" label="单价"> </el-table-column>
            </el-table-column>
            <el-table-column prop="date" label="出库后库存">
              <el-table-column prop="str10" label="数量"> </el-table-column>
              <el-table-column prop="str11" label="单价"> </el-table-column>
            </el-table-column>
          </el-table>
        </el-form>
      </div>

      <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 { getDetailedItems, getMaterialList } from "@/api/firstOrder/outbound";
import { getUserList } from "@/api/secondOrder/outbound";
export default {
  props: {
    repairVisible: {
      type: Boolean,
      default: false,
    },
    outDialogTiltle: {
      type: String,
      default: "",
    },
    outDialogType: {
      type: String,
      default: "",
    },
    type: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      outDialogVisible: false,
      sizeForm: {
        code: "", //入库单号
        applyNmae: "", //审批人
        submitName: "", //填报人
        waNmae: "", //仓库名称
        argument: "", //事由
        inAccountsTableData: [], //总计
        inTableData: [],
        departmentId: "", //部门id
      },
      inTableData: [],
      inBatchDialogVisible: false, //选择采购单的数据
      batchType: "", //批量选择类型
      materials: [], //物资列表
      userOptions: [], //领用人列表
      departmentOptions: [], //部门列表
    };
  },
  mounted() {
    this.outDialogVisible = this.repairVisible;
    if (this.outDialogType == "add") {
      this.addInit();
    } else {
      this.inInit();
    }
    this.getMaterialList();
    this.getDetailedItems();
  },
  methods: {
    //获取单条选择的物资名称列表
    async getMaterialList() {
      this.loading = true;
      try {
        const res = await getMaterialList();
        this.materials = res.data.result;
      } catch (error) {
        this.$message.error("获取数据来源失败，请重试");
      } finally {
        this.loading = false;
      }
    },
    // 选中物资获取数据
    handleMaterialChange(row, index) {
      this.sizeForm.inTableData[index].materialId = row.materialId;
      this.sizeForm.inTableData[index].model = row.model;
      this.sizeForm.inTableData[index].materialCode = row.materialCode;
      this.sizeForm.inTableData[index].materialName = row.materialName;
      this.sizeForm.inTableData[index].type = row.type;
      this.sizeForm.inTableData[index].unit = row.unit;
    },
    // 获取领用人列表
    getUserList(value) {
      getUserList({ departmentId: value }).then((res) => {
        this.userOptions = res.data.result;
      });
    },
    // 获取部门列表
    getDetailedItems() {
      getDetailedItems().then((res) => {
        this.departmentOptions = res.data.result;
      });
    },
    // 选中部门之后 获取领用人列表
    deptChange(value) {
      this.getUserList(value);
    },
    handleCloseDetail() {
      this.outDialogVisible = false;
      this.$emit("handleCloseDetail");
    },
    inInit() {},

    addInit() {
      this.sizeForm.outDate = new Date(); //入库时间
    },
    handleCloseDetail() {
      this.inDialogVisible = false;
      this.$emit("handleCloseDetail");
    },
    // 添加入库数据
    inTableAdd() {
      this.sizeForm.inTableData.push({});
    },
    // 提交
    sumbit() {
      this.$message({
        type: "success",
        message: "提交成功",
      });
      this.handleCloseDetail();
    },
  },
};
</script>
<style lang="scss" scoped>
.form-title {
  margin: 20px 0;
}
::v-deep.el-dialog__footer {
  position: fixed !important;
  bottom: 0 !important;
  right: 0 !important;
}

::v-deep.dialog-content {
  max-height: calc(100vh - 200px); /* 减去标题栏和底部按钮的高度 */
  overflow-y: auto;
  padding-right: 10px; /* 预留滚动条空间 */
}

</style>
