<template>
  <div class="content-main">
    <header>
      <h1 class="header">退款信息</h1>
    </header>
    <el-form :model="dform" label-position="right" label-width="6em" ref="dform" :rules="rule">
      <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" :disabled="isView">点击上传</el-button>
          </el-upload>
        </el-form-item>
      </el-col>
      <el-col :span="24">
        <el-form-item label="退款说明" prop="tksm">
          <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.push('index')">返回</el-button>
    </footer>
  </div>
</template>
<script>
import {
  confirmFinancial,
  getMarginRefundDetail,
  fileInfo
} from "@/api/transaction/ensureManage/index.js";
import { dateTimeFormat } from "@/utils/index";
import { file } from "@/api";
export default {
  data() {
    var checkName = (rule, value, callback) => {
      let len = 0;
      for (let i = 0; i < value.length; i++) {
        let c = value.charCodeAt(i);
        //单字节加1
        if ((c >= 0x0001 && c <= 0x007e) || (0xff60 <= c && c <= 0xff9f)) {
          len++;
        } else {
          len += 2;
        }
      }
      if (len > 2000) {
        //重点重点，下面就是填写提示的文字
        callback(new Error("长度为2000个字符，一个中文字等于2个字符"));
      } else {
        callback();
      }
    };
    return {
      dform: {
        tkpz: "",
        pageType: 2,
        hksj: ""
      },
      isView: false,
      fileList: [],
      fileUrl: `${file}/file/upload`,
      rule: {
        tksm: [{ validator: checkName, trigger: "blur" }]
      }
    };
  },
  created() {
    let { state, tkbm } = this.$route.query;
    this.isView = state == "show";
    this.dform.tkbm = tkbm;

    this.getDetail();
  },
  methods: {
    handleSubmit() {
      this.$refs.dform.validate(valid => {
        if (valid) {
          this.dform.tkfl = 1;
          this.dform.tkzt = "91000058";
          this.dform.tkztmc = "未成交退款";
          this.dform.tkpz = this.fileList.map(d => d.id).join(",");
          confirmFinancial(this.dform).then(res => {
            if (res.infoCode == 200) {
              this.$message.success("提交成功!");
              this.$router.push("index");
            }
          });
        }
      });
    },
    async getDetail() {
      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;
          });
        }
      }
    },
    handlePreview(file, fileList) {},
    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("上传成功!");
      }
    },
    handleError(err, file, fileList) {
      this.$message.error("上传失败!");
    }
  }
};
</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>
