<template>
  <el-dialog
    title="详情"
    :visible.sync="open"
    width="80%"
    :close-on-click-modal="false"
    @close="handleClose"
  >
    <el-form
      ref="form"
      :model="form"
      label-width="100px"
      style="display: flex; flex-wrap: wrap"
    >
      <el-form-item label="所属单位" class="form-item">
        <el-input v-model="form.orgName" disabled></el-input>
      </el-form-item>
      <el-form-item label="申报单位" class="form-item">
        <el-input v-model="form.declareOrgName" disabled></el-input>
      </el-form-item>
      <el-form-item label="补货计划编码" class="form-item">
        <el-input v-model="form.orderNo" disabled></el-input>
      </el-form-item>
      <el-form-item label="申报人员" class="form-item">
        <el-input v-model="form.nickName" disabled></el-input>
      </el-form-item>
      <el-form-item label="创建时间" class="form-item">
        <el-input v-model="form.createTime" disabled></el-input>
      </el-form-item>
      <el-form-item label="备注" class="form-item">
        <el-input v-model="form.remark" type="textarea"></el-input>
      </el-form-item>
    </el-form>
    <div style="margin-bottom: 10px; display: flex">
      <el-button type="primary" @click="handleExport">导出修改</el-button>
      <el-upload
        style="margin-left: 10px"
        class="upload-demo"
        :action="importUrl"
        :headers="headersToken"
        :data="importMaterialData"
        :on-success="handleImportSuccess"
        :show-file-list="false"
      >
        <el-button class="exelIn" type="primary">导入</el-button>
      </el-upload>
    </div>
    <div class="formContent">
      <Com-table
        ref="table"
        :tableFormat="tableFormat"
        :tableData="tableData"
      ></Com-table>
    </div>
    <span slot="footer">
      <el-button @click="open = false">取 消</el-button>
      <el-button type="primary" :loading="btnLoading" @click="handleSubmit"
        >提交</el-button
      >
    </span>
  </el-dialog>
</template>

<script>
import { tableFormat2 } from "../utils/index.json";
import { getToken } from "@/utils/auth";
import {
  replenishmentDqueryByIdItem,
  replenishmentDupdateById,
} from "@/api/home";
export default {
  props: {
    getData: Function,
  },
  data() {
    return {
      form: {
        orgName: "",
        declareOrgName: "",
        nickName: "",
        createTime: "",
        remark: "",
      },
      open: false,
      tableFormat: tableFormat2,
      tableData: [],
      btnLoading: false,
      importUrl: `${process.env.VUE_APP_BASE_API}/adsMatReplenishmentD/importReplenishmentItem`,
      headersToken: {
        Authorization: "Bearer " + getToken(),
      },
      currentRow: {},
      importMaterialData: null,
    };
  },
  methods: {
    handleImportSuccess(res) {
      if (res && res.code == 200) {
        this.tableData = res.data || [];
        this.$message.success("导入成功");
      } else {
        this.$message.warning(res.msg || "导入失败");
      }
    },
    handleExport() {
      let params = {
        id: this.currentRow.id,
      };
      this.download(
        "adsMatReplenishmentD/exportReplenishmentItem",
        {
          ...params,
        },
        `${new Date().getTime()}.xlsx`
      );
    },
    handleClose() {},
    async handleSubmit() {
      this.btnLoading = true;
      let params = {
        ...this.form,
        id: this.currentRow.id,
        orgNo: this.currentRow.orgNo,
        orgName: this.currentRow.orgName,
        itemList: this.tableData || [],
      };
      await replenishmentDupdateById(params)
        .then((res) => {
          if (res && res.code == 200) {
            this.open = false;
            this.btnLoading = false;
            this.$message.success("操作成功");
            this.getData();
          } else {
            this.btnLoading = false;
            this.$message.warning(res.msg || "操作失败");
          }
        })
        .catch((err) => {
          this.btnLoading = false;
        });
    },
    handleInit({ data }) {
      this.currentRow = data;
      this.btnLoading = false;
      this.form = JSON.parse(JSON.stringify(data));
      this.getDetail();
      this.open = true;
    },
    getDetail() {
      let params = {
        id: this.currentRow.id,
      };
      replenishmentDqueryByIdItem(params).then((res) => {
        if (res && res.code == 200) {
          this.tableData = res.data || [];
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.formContent {
  height: 600px;
}

::v-deep {
  .el-dialog__footer {
    text-align: center;
  }
  .form-item {
    width: 50%;
    // .el-input__inner {
    // height: 40px;
    // }
  }
}
</style>
