<template>
  <div class="content-main">
    <header>
      <h1 class="header">退款信息</h1>
    </header>
    <el-form :model="dform" label-position="right" label-width="6em" ref="dform">
      <el-col :span="12">
        <el-form-item label="退款单位:">
          <el-input v-model="dform.dwmc" disabled clearable class="w90"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="退款金额:">
          <el-input v-model="dform.tkje" disabled clearable class="w90"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="24">
        <el-form-item label="退款说明">
          <el-input
            disabled
            type="textarea"
            :autosize="{ minRows: 3, maxRows: 4 }"
            v-model="dform.remark"
            class="w95"
          ></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="退款时间">
          <el-input v-model="dform.tksj" class="w90" disabled></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="操作人">
          <el-input class="w90" v-model="dform.czr" disabled></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="汇款凭证">
          <el-upload
            :action="fileUrl"
            :on-preview="handlePreview"
            :on-remove="handleRemove"
            :before-remove="beforeRemove"
            :file-list="fileList"
            :on-success="handleSuccess"
            :on-error="handleError"
            :disabled="isView"
          >
            <el-button size="small" type="primary" v-if="!isView">点击上传</el-button>
          </el-upload>
        </el-form-item>
      </el-col>
      <el-col :span="24">
        <el-form-item label="退款说明">
          <el-input
            class="w95"
            type="textarea"
            v-model="dform.tksm"
            :autosize="{ minRows: 3, maxRows: 4 }"
            :disabled="isView"
          ></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="退款时间">
          <el-input class="w90" v-model="dform.hksj" disabled></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="财务联系人">
          <el-input class="w90" v-model="dform.cwczr" disabled></el-input>
        </el-form-item>
      </el-col>
    </el-form>
    <footer>
      <el-button type="primary" class="iconfont icontijiao" v-if="!isView" @click="handleSubmit">提交</el-button>
      <el-button type="primary" class="iconfont iconfanhui" @click="$router.go(-1)">返回</el-button>
    </footer>
  </div>
</template>
<script>
import {
  confirmFinancial,
  getMarginRefundDetail,
  fileInfo
} from "@/api/transaction/ensureManage/index.js";
import { dateTimeFormat, getNowDate } from "@/utils/index";
import { file } from "@/api";
export default {
  data() {
    return {
      dform: {
        tkpz: "",
        pageType: 2,
        hksj: ""
      },
      isView: false,
      fileList: [],
      fileUrl: `${file}/file/upload`
    };
  },
  created() {
    let { state, tkbm, type } = this.$route.query;
    this.isView = state == "show" || type == 1;
    this.dform.tkbm = tkbm;
    this.getDetail();
  },
  methods: {
    async handleSubmit() {
      this.dform.tkpz = this.fileList.map(d => d.id).join(",");

      let res = await confirmFinancial(this.dform);
      if (res.infoCode == 200) {
        this.$message.success("提交成功!");
        this.$router.go(-1);
      }
    },
    async getDetail() {
      // alert("111");
      let res = await getMarginRefundDetail({ tkbm: this.dform.tkbm });
      if (res.infoCode == 200) {
        this.dform = res.data;
        if (!this.isView) {
          this.dform.hksj = dateTimeFormat(new Date());
          this.dform.cwczr = sessionStorage.orgName;
        }
        if (this.dform.tkpz) {
          fileInfo(this.dform.tkpz).then(res => {
            this.fileList = res.data;
          });
        }
        this.dform.wthbm = res.data.wthbm;
        this.dform.tkzt = "91000055";
        this.dform.tkztmc = "已确认";
        this.dform.tkfl = 0;
      }
    },
    handlePreview(fil, fileList) {
      window.location.href = `${file}/file/download?id=${
        fil.response ? fil.response.data.id : fil.id
      }`;
    },
    handleRemove(file) {
      this.fileList.splice(
        this.fileList.findIndex(d => d.id == file.id),
        1
      );
    },
    beforeRemove(file) {
      return this.$confirm(`确定移除 ${file.name}？`, "提示");
    },
    handleSuccess(res, file, fileList) {
      if (res && res.infoCode == 200) {
        this.fileList.push(res.data);
        this.$message.success("上传成功");
        // console.log("上传成功");
      }
    },
    handleError(err, file, fileList) {}
  }
};
</script>
<style lang="scss" scoped>
.header {
  font-size: 20px;
  text-align: center;
  margin-bottom: 20px;
}
.w90 {
  width: 90% !important;
}
.w95 {
  width: 95%;
}
.el-form {
  overflow: hidden;
}
footer {
  text-align: center;
  margin: 20px;
}
</style>
