<template>
  <div class="content-info">
    <div>
      <h2 class="com-h2">
        <i></i>
        <span>退保证金信息</span>
      </h2>
      <el-row>
        <el-col align="right" class="el-show-style">
          <el-button
            type="primary"
            size="small"
            class="iconfont iconchakan2"
            @click="btnShowModal"
          >查看退保证金委托函</el-button>
        </el-col>
      </el-row>
      <div class="form-content">
        <el-row class="el-row-style">
          <el-col :span="8">
            <span class="span-label">场次:</span>
            <span>{{detailInfo.apcc}}</span>
          </el-col>
          <el-col :span="8">
            <span class="span-label">报名单位:</span>
            <span>{{detailInfo.dwmc}}</span>
          </el-col>
          <el-col :span="8">
            <span class="span-label">缴纳保证金金额（元）:</span>
            <span>{{detailInfo.je}}</span>
          </el-col>
        </el-row>
        <el-row class="el-row-style">
          <el-col :span="8">
            <span class="span-label">交易品种:</span>
            <span>{{detailInfo.lspzmc}}</span>
          </el-col>
          <el-col :span="8">
            <span class="span-label">交易数量（吨）:</span>
            <span>{{detailInfo.sl}}</span>
          </el-col>
          <el-col :span="8">
            <span class="span-label">汇款时间:</span>
            <span>{{detailInfo.hksj}}</span>
          </el-col>
        </el-row>
        <el-row class="el-row-style">
          <el-col :span="8">
            <span class="span-label">手续费率:</span>
            <span>{{detailInfo.sxfl}}</span>
          </el-col>
        </el-row>
      </div>
    </div>
    <div>
      <h2 class="com-h2">
        <i></i>
        <span>业务部退款</span>
      </h2>
      <div class="form-content">
        <el-form
          :model="businessRuleForm"
          :rules="businessRules"
          ref="businessRuleForm"
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-row>
            <el-col :span="12">
              <el-form-item label="退款金额:" prop="tkje">
                <el-input
                  v-model="businessRuleForm.tkje"
                  class="input-width"
                  clearable
                  @input="onInput"
                  :disabled="isDisable"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="备注:" prop="remark">
                <el-input
                  type="textarea"
                  v-model="businessRuleForm.remark"
                  class="input-width"
                  clearable
                  :disabled="isDisable"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="退款时间:" prop="tksj">
                <el-date-picker
                  style="width: 100%"
                  :disabled="true"
                  v-model="businessRuleForm.tksj"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  type="datetime"
                  placeholder="选择日期时间"
                ></el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="操作人:" prop="czr">
                <el-input v-model="businessRuleForm.czr" class="input-width" clearable disabled></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
    </div>
    <div v-if="pageType==2">
      <h2 class="com-h2">
        <i></i>
        <span>财务部确认退款</span>
      </h2>
      <div class="form-content">
        <el-form
          :model="financialRuleForm"
          :rules="financialRules"
          ref="financialRuleForm"
          label-width="120px"
          class="demo-ruleForm"
        >
          <el-row>
            <el-col :span="24">
              <el-form-item label="退款凭证上传:" :show-message="showMessage">
                <el-upload
                  :disabled="isDisableOne"
                  class="upload-demo"
                  style="width: 35%"
                  :action="fileUrl"
                  :on-success="handleSuccess"
                  :on-remove="handleRemove"
                  :on-preview="handlePreview"
                  :file-list="fileList"
                >
                  <el-button
                    size="small"
                    type="primary"
                    class="iconfont iconfujian"
                    :disabled="isDisableOne"
                  >点击上传</el-button>
                  <!--<div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>-->
                </el-upload>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
    </div>
    <el-row class="el-show-style">
      <el-col align="center">
        <el-button
          v-if="!isDisable||type==2"
          type="primary"
          @click="btnSubmit"
          class="iconfont icontijiao"
        >{{pageType==1?'提交给财务':'保存'}}</el-button>
        <el-button type="primary" @click="jumpPage" class="iconfont iconfanhui">取 消</el-button>
      </el-col>
    </el-row>
    <el-dialog title="提示" :visible.sync="dialogVisible" width="80%">
      <refundDelegationComponent v-if="dialogVisible" :page-object="pageObject" />
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" class="iconfont iconfanhui" @click="dialogVisible = false">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { FileApi } from "@/api/index";
import {
  enumStatus,
  getMarginRefundDetail,
  confirmMarginRefundBusiness,
  confirmFinancial,
  fileInfo,
  fileDownload
} from "@/api/transaction/ensureManage";
import refundDelegationComponent from "./refundDelegationComponent.vue";
import { dateTimeFormat } from "@/utils";

export default {
  name: "marginRefundComponent",
  props: {
    pageType: Number //1.业务部 2.财务部
  },
  components: {
    refundDelegationComponent
  },
  data() {
    let self = this;
    return {
      //type 1.查看 2.确认
      type: self.$route.query.type,
      isDisable: self.$route.query.type == 1 || self.pageType == 2,
      isDisableOne: self.$route.query.type == 1,
      detailInfo: {
        apcc: "",
        dwmc: "",
        je: "",
        lspzmc: "",
        sl: "",
        hksj: "",
        sxfl: ""
      },
      businessRuleForm: {
        tkbm: self.$route.query.tkbm,
        tkje: "",
        remark: "",
        czr: sessionStorage.getItem("userName"),
        tkfl: 0
      },
      businessRules: {
        tkje: [{ required: true, message: "请输入退款金额", trigger: "blur" }],
        // remark: [
        //     {required: true, message: '请输入备注', trigger: 'blur'}
        // ],
        czr: [{ required: true, message: "请输入操作人", trigger: "blur" }],
        tksj: [{ required: true, message: "请选择退款时间", trigger: "change" }]
      },
      financialRuleForm: {
        tkbm: self.$route.query.tkbm
      },
      financialRules: {
        tkpz: [
          {
            required: true,
            message: "请上传附件",
            validator: self.validCheck,
            trigger: "change"
          }
        ]
      },
      fileList: [],
      dialogVisible: false,
      pageObject: {
        type: 3,
        wthbm: ""
      },
      fileUrl: FileApi + "/file/upload",
      showMessage: true
    };
  },
  mounted() {
    this.getDetail();
  },
  methods: {
    jumpPage() {
      this.$router.push({
        name: this.$route.query.backUrl || "marginRefundList"
      });
    },
    onInput(value) {
      var self = this;
      // 通过正则过滤小数点后两位
      value = value.match(/^\d*(\.?\d{0,2})/g)[0] || null;
      self.businessRuleForm.tkje = value;
      console.log("e", value);
    },
    handleSuccess(response, file, fileList) {
      let self = this;
      self.showMessage = false;
      if (response && response.infoCode === 200) {
        self.fileList.push(response.data);
        // self.$message.success("上传成功");
      }
    },
    handleRemove(file, fileList) {
      this.removeByValue(this.fileList, "id", file.id);
      if (!this.fileList.length) {
        this.showMessage = true;
      }
    },
    handlePreview(file, fileList) {
      this.downLoad(file.id);
    },
    removeByValue: function(arr, attr, value) {
      //数组，属性，属性值
      var index = 0;
      for (var i in arr) {
        if (arr[i][attr] == value) {
          index = i;
          break;
        }
      }
      arr.splice(index, 1);
    },
    validCheck(rule, value, callback) {
      if (!this.fileList.length) {
        return callback(new Error("请上传附件"));
      } else {
        return callback();
      }
    },
    btnSubmit() {
      let self = this;
      if (this.pageType == 1) {
        self.$refs["businessRuleForm"].validate(valid => {
          if (valid) {
            self.confirmBusiness();
          }
        });
      } else {
        self.$refs["financialRuleForm"].validate(valid => {
          if (valid) {
            self.confirmFinancialInfo();
          }
        });
      }
    },
    btnShowModal() {
      if (!this.detailInfo.wthbm) {
        this.$message.error("请先创建退保金委托函");
        return;
      }
      this.dialogVisible = true;
      this.pageObject.wthbm = this.detailInfo.wthbm;
    },
    getDetail() {
      let self = this,
        params = {
          tkbm: self.businessRuleForm.tkbm
        };
      getMarginRefundDetail(params)
        .then(actionMethod)
        .catch(actionMethod);

      function actionMethod(response) {
        if (response && response.infoCode === 200) {
          self.detailInfo = response.data;
          self.businessRuleForm = response.data;
          if (!response.data.tksj) {
            self.businessRuleForm.tksj = dateTimeFormat(new Date());
          }
          self.businessRuleForm.czr = sessionStorage.getItem("userName");
          if (self.pageType == 2 && self.type == 1) {
            self.getFileInfo(response.data.tkpz);
          }
        }
      }
    },
    //业务部确认
    confirmBusiness() {
      // alert("111");
      this.businessRuleForm.tkfl = 0;
      let self = this,
        params = self.businessRuleForm;
      confirmMarginRefundBusiness(params)
        .then(actionMethod)
        .catch(actionMethod);

      function actionMethod(response) {
        if (response && response.infoCode === 200) {
          self.$message.success("提交成功");
          self.jumpPage();
        } else {
          self.$message.error(response.msg);
        }
      }
    },
    confirmFinancialInfo() {
      let file = [];
      for (let elem of this.fileList) {
        file.push(elem.id);
      }
      let self = this,
        params = {
          tkbm: self.financialRuleForm.tkbm,
          tkpz: file.join("|"),
          tkzt: "1",
          tkztmc: "已确认"
        };
      confirmFinancial(params)
        .then(actionMethod)
        .catch(actionMethod);

      function actionMethod(response) {
        if (response && response.infoCode === 200) {
          self.$message.success("提交成功");
          self.jumpPage();
        } else {
          self.$message.error(response.msg);
        }
      }
    },
    //文件回显
    getFileInfo(data) {
      let self = this;
      fileInfo(data)
        .then(actionMethod)
        .catch(actionMethod);
      function actionMethod(response) {
        if (response && response.infoCode === 200) {
          self.fileList = response.data;
        }
      }
    },
    downLoad(id) {
      window.open(`${FileApi}/file/download?id=${id}`);
      // return;
      // fileDownload(id)
      //   .then(actionMethod)
      //   .catch(actionMethod);
      // function actionMethod(response) {
      //   if (response && response.infoCode === 200) {
      //     window.open(response.data, "_blank");
      //   }
      // }
    }
  }
};
</script>

<style scoped>
.content-main .com-h2 {
  font-size: 16px;
  line-height: 20px;
  color: #333;
  font-weight: normal;
  letter-spacing: 1px;
  padding: 0 20px;
  position: relative;
}

.com-h2 i {
  position: absolute;
  width: 3px;
  height: 20px;
  background: #56a9d6;
  left: 0;
  top: 20px;
  margin-left: 10px;
}

.com-h2 span {
  display: block;
  border-bottom: 1px solid #eaeaea;
  padding: 20px 0 5px;
}

.form-content {
  border: 1px solid #eaeaea;
  margin: auto;
  padding: 10px;
  width: 95%;
  margin-top: 10px;
}

.form-content .el-row-style {
  margin-bottom: 20px;
}

.form-content .span-label {
  display: inline-block;
  width: 150px;
  color: #555555;
}

.content-main .el-show-style {
  width: 98%;
  margin: auto;
  margin-top: 10px;
}
</style>
