<template>
  <div>
    <el-dialog
      title="详情"
      :visible.sync="open"
      width="90%"
      :close-on-click-modal="false"
      @close="handleClose"
    >
      <div style="margin-bottom: 10px; display: flex">
        <!-- <el-button type="primary" @click="openImportTable">导入</el-button> -->
        <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-form ref="myForm" :form="form" :rules="{}" :formList="formList">
      </com-form> -->
        <Com-table
          ref="table"
          :tableFormat="tableFormat"
          :tableData="tableData"
        >
          <template #weekUseConfirmNum="scope">
            <el-input-number
              size="small"
              v-model="scope.row.weekUseConfirmNum"
            ></el-input-number>
          </template>
          <template #monthUseConfirmNum="scope">
            <el-input-number
              size="small"
              v-model="scope.row.monthUseConfirmNum"
            ></el-input-number>
          </template>
          <template #quartUseConfirmNum="scope">
            <el-input-number
              size="small"
              v-model="scope.row.quartUseConfirmNum"
            ></el-input-number>
          </template>
        </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>
  </div>
</template>

<script>
import { formList, tableFormat2 } from "../utils/index.json";
import { batchUpdate, queryByIdItem, updateById } from "@/api/home";
import { getToken } from "@/utils/auth";
export default {
  props: {
    getData: Function,
  },
  data() {
    return {
      btnLoading: false,
      open: false,
      form: {
        weekUseConfirmNum: "",
        monthUseConfirmNum: "",
        quartUseConfirmNum: "",
      },
      formList: formList,
      selectList: [],
      tableData: [],
      tableFormat: tableFormat2,
      currentRow: {},
      importUrl: `${process.env.VUE_APP_BASE_API}/adsMatRationRecommendD/importRecommendItem`,
      headersToken: {
        Authorization: "Bearer " + getToken(),
      },
      importMaterialData: null,
    };
  },
  methods: {
    // 导出
    handleExport() {
      let params = {
        id: this.currentRow.id,
      };
      this.download(
        "adsMatRationRecommendD/exportRecommendItem",
        {
          ...params,
        },
        `${new Date().getTime()}.xlsx`
      );
    },
    handleImportSuccess(res) {
      if (res && res.code == 200) {
        this.tableData = res.data || [];
        this.$message.success("导入成功");
      } else {
        this.$message.warning(res.msg || "导入失败");
      }
    },
    handleClose() {
      this.open = false;
    },
    handleInit({ data }) {
      this.currentRow = data;
      this.btnLoading = false;
      // this.tableData = data;
      this.getDetail();
      this.open = true;
    },
    getDetail() {
      let params = {
        id: this.currentRow.id,
      };
      queryByIdItem(params).then((res) => {
        if (res && res.code == 200) {
          this.tableData = res.data || [];
        }
      });
    },
    handleSubmit() {
      this.btnLoading = true;
      let params = {
        id: this.currentRow.id,
        orgNo: this.currentRow.orgNo,
        orgName: this.currentRow.orgName,
        itemList: this.tableData,
      };
      updateById(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;
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.formContent {
  height: 600px;
}
::v-deep {
  .el-dialog__footer {
    text-align: center;
  }
}
</style>
