<template>
  <div class="content-main">
    <header>
      <h1 class="header">退还保证金通知单</h1>
    </header>
    <el-form :model="dform" label-position="right" label-width="9em" ref="dform" :rules="rules">
      <el-table border stripe highlight-current-row style="margin-top: 10px;" :data="detailList">
        <el-table-column align="center" label="序号" width="60">
          <template slot-scope="scope">
            <span>{{ scope.row.sxh = scope.$index + 1 }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="单位名称">
          <template slot-scope="scope">
            <el-select
              @change="dwbmChange($event,scope.row)"
              disabled
              v-model="scope.row.dwbm"
              class="w90"
            >
              <el-option
                v-for="item in dwOptions"
                :key="item.dwbm"
                :label="item.dwmc"
                :value="item.dwbm"
              ></el-option>
            </el-select>
          </template>
        </el-table-column>
        <el-table-column align="center" label="缴款额">
          <template slot-scope="scope">
            <el-input
              disabled
              clearable
              v-model="scope.row.jkje"
              v-bind:value="
                String(scope.row.jkje).indexOf('.') > -1
                  ? Number(scope.row.jkje).toFixed(2)
                  : scope.row.jkje
              "
            ></el-input>
          </template>
        </el-table-column>
        <el-table-column align="center" label="成交量">
          <template slot-scope="scope">
            <el-input disabled v-model="scope.row.cjsl"></el-input>
          </template>
        </el-table-column>
        <el-table-column align="center" label="成交单价">
          <template slot-scope="scope">
            <el-input disabled v-model="scope.row.cjje"></el-input>
          </template>
        </el-table-column>
        <el-table-column align="center" label="冻结金额">
          <template slot-scope="scope">
            <el-input disabled v-model="scope.row.djje"></el-input>
          </template>
        </el-table-column>
        <el-table-column align="center" label="手续费">
          <template slot-scope="scope">
            <el-input disabled v-model="scope.row.sxf"></el-input>
          </template>
        </el-table-column>
        <el-table-column align="center" label="清退金额">
          <template slot-scope="scope">
            <el-input disabled v-model="scope.row.qtje"></el-input>
          </template>
        </el-table-column>
        <el-table-column align="center" label="备注">
          <template slot-scope="scope">
            <el-input disabled v-model="scope.row.bz"></el-input>
          </template>
        </el-table-column>
        <!-- <el-table-column align="center" label="操作" fixed="right">
          <template slot-scope="scope">
            <el-button
              @click="dataAdd(scope.$index)"
              size="mini"
              title="添加"
              type="text"
              class="el-icon-plus"
            ></el-button>
            <el-button
              @click="dataDlete(scope.$index)"
              size="mini"
              title="删除"
              type="text"
              class="el-icon-minus"
            ></el-button>
          </template>
        </el-table-column>-->
      </el-table>
      <el-row style="margin-top:20px;">
        <el-col :span="12">
          <el-form-item label="经办人">
            <el-input v-model="dform.jyjbr" 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.jyjbsj" disabled></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <!-- 交易部 -->
      <el-row>
        <el-row class="lineTop"></el-row>
        <el-form-item label="交易部审核结果" prop="jyfz">
          <el-radio-group v-model="dform.jyfz" :disabled="isView">
            <el-radio :label="1">通过</el-radio>
            <el-radio :label="0">驳回</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-row>
          <el-form-item label="交易部审核意见" prop="jyfzyj">
            <el-input type="textarea" v-model="dform.jyfzyj" class="w90" :disabled="isView"></el-input>
          </el-form-item>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="交易部负责人">
              <el-input v-model="dform.jyfzr" class="w90" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="交易审核时间">
              <el-input v-model="dform.jyfzsj" class="w90" disabled></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-row>
      <!-- 财务部 -->
      <el-row
        v-if="$route.query.type=='detail'&&[ztOptions[3].value,ztOptions[4].value,ztOptions[4].value].indexOf(dform.tkzt)>-1"
      >
        <el-row class="lineTop"></el-row>
        <el-form-item label="财务审批结果">
          <el-radio-group v-model="dform.jycw" disabled>
            <el-radio :label="1">通过</el-radio>
            <el-radio :label="0">驳回</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-row>
          <el-form-item label="财务审批意见">
            <el-input type="textarea" v-model="dform.jycwyj" class="w90" disabled></el-input>
          </el-form-item>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="财务审批人">
              <el-input v-model="dform.jycwr" class="w90" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="财务审批时间">
              <el-input v-model="dform.jycwsj" class="w90" disabled></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-row>
      <!-- //结算部 -->
      <el-row
        v-if="$route.query.type=='detail'&&[ztOptions[4].value,ztOptions[5].value].indexOf(dform.tkzt)>-1"
      >
        <el-row class="lineTop"></el-row>
        <el-form-item label="结算审核结果">
          <el-radio-group v-model="dform.jyjs" disabled>
            <el-radio :label="1">通过</el-radio>
            <el-radio :label="0">驳回</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-row>
          <el-form-item label="结算审核意见">
            <el-input type="textarea" v-model="dform.jyjsyj" class="w90" disabled></el-input>
          </el-form-item>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="结算部负责人">
              <el-input v-model="dform.jyjsr" class="w90" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="结算审核时间">
              <el-input v-model="dform.jyjssj" class="w90" disabled></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-row>
      <!-- 副总裁 -->
      <el-row v-if="$route.query.type=='detail'&&[ztOptions[5].value].indexOf(dform.tkzt)>-1">
        <el-row class="lineTop"></el-row>
        <el-form-item label="副总裁签批结果">
          <el-radio-group v-model="dform.jyzc" disabled>
            <el-radio :label="1">通过</el-radio>
            <el-radio :label="0">驳回</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-row>
          <el-form-item label="副总裁签批意见">
            <el-input type="textarea" v-model="dform.jyzcyj" class="w90" disabled></el-input>
          </el-form-item>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="分管财务副总裁">
              <el-input v-model="dform.jyzcr" class="w90" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="签批时间">
              <el-input v-model="dform.jyzcsj" class="w90" disabled></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-row>
    </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 {
  confirmMarginRefundBusiness,
  getMarginRefundDetail,
  selectGiveBackPass,
  updateGiveBackPass,
  selectGivePassAll,
  selectPassBack,
} from "@/api/transaction/ensureManage/index.js";
import { dateTimeFormat } from "@/utils/index";
import { status } from "@/utils/statusList";

export default {
  data() {
    return {
      dform: {
        remark: `结算部
      XXXX签订的XXX合同已履约完成，共计XXX吨，单价XXX元/吨，请扣除合同手续费sss元，剩余保证金ssss元。`,
      },
      isView: false,
      dwmc: "",
      detailList: [],
      rules: {
        jyfz: [
          { required: true, message: "请选择审核结果", trigger: "change" },
        ],
        jyfzyj: [{ required: true, message: "请输入意见", trigger: "blur" }],
      },
      dwOptions: [],
      ztOptions: [
        status.djyjb,
        status.djysh,
        status.dcwsp,
        status.djssh,
        status.dcwqp,
        status.wcgtk,
      ],
    };
  },
  created() {
    this.isView = this.$route.query.state == "show";
    // alert("111");
    this.getInit();
    this.getDetail();
  },
  methods: {
    async getInit() {
      let res = await selectGivePassAll({ ccbm: this.$route.query.ccbm });
      this.dwOptions = res.data;
    },
    dwbmChange(val, row) {
      console.log(val, row);
      selectPassBack({ dwbm: val, ccbm: this.$route.query.ccbm }).then(
        (res) => {
          if (res.infoCode == 200) {
            row.qtje = res.data.qtje;
            row.jkje = res.data.jkje;
            row.cjje = res.data.cjje;
            row.cjsl = res.data.cjsl;
            row.djje = res.data.djje;
            row.dwmc = res.data.dwmc;
            row.sxf = res.data.sxf;
            row.bz = res.data.bz;
          }
        }
      );
    },
    handleSubmit() {
      //   alert("111");
      this.$refs["dform"].validate((valid) => {
        if (valid) {
          // console.log(this.dform);
          // this.dform.tkfl = 1;
          // this.dform.tkzt = "91000056";
          // this.dform.tkztmc = "待退款";
          this.dform.url = `/transaction/untradedMarginRefund/transactionFinance/detail`;
          this.dform.itemUrlHaveDone = `/transaction/untradedMarginRefund/transactionResponsibility/detail`;
          this.dform.itemQuery = JSON.stringify({
            state: "edit",
            idKey: "tkbm",
            ccbm: this.$route.query.ccbm,
          });
          this.dform.itemQueryHaveDone = JSON.stringify({
            state: "show",
            idKey: "tkbm",
            ccbm: this.$route.query.ccbm,
          });
          if (this.dform.jyfz == 1) {
            this.dform.url = `/transaction/untradedMarginRefund/transactionFinance/detail`;
            this.dform.itemQuery = JSON.stringify({
              state: "edit",
              idKey: "tkbm",
              ccbm: this.$route.query.ccbm,
            });
            this.dform.tkzt = this.ztOptions[2].value;
            this.dform.tkztmc = this.ztOptions[2].name;
          } else {
            this.dform.url = `/transaction/untradedMarginRefund/transactionHandling/detail`;
            this.dform.itemQuery = JSON.stringify({
              state: "edit",
              idKey: "tkbm",
              ccbm: this.$route.query.ccbm,
            });
            this.dform.tkzt = this.ztOptions[0].value;
            this.dform.tkztmc = this.ztOptions[0].name;
          }

          this.dform.itemUrlHaveDone = `/transaction/untradedMarginRefund/transactionResponsibility/detail`;

          this.dform.itemQueryHaveDone = JSON.stringify({
            state: "show",
            idKey: "tkbm",
            ccbm: this.$route.query.ccbm,
          });
          updateGiveBackPass({
            ...this.dform,
            childs: JSON.stringify(this.detailList),
          }).then((res) => {
            if (res.infoCode == 200) {
              this.$message.success("提交成功!");
              this.$router.push("index");
            }
          });
        }
      });
    },
    async getDetail() {
      let res = await selectGiveBackPass({
        tkbm: this.$route.query.tkbm,
        ccbm: this.$route.query.ccbm,
      });
      if (res.infoCode == 200) {
        this.dform = res.data;
        this.detailList = res.data.childVOS;
        if (!this.isView) {
          this.dform.jyfzsj = dateTimeFormat(new Date());
          this.dform.jyfzr = sessionStorage.getItem("userName");
          //   this.dform.dwmc = this.dwmc;
        }
      }
    },
    dataAdd(index) {
      let data = {
        qtje: "",
        jkje: "",
        cjje: "",
        cjsl: "",
        djje: "",
        dwmc: "",
        dwbm: "",
        sxf: "",
        bz: "",
      };
      this.detailList.splice(index + 1, 0, data);
    },
    dataDlete(index) {
      if (index == 0 && this.detailList.length == 1) {
        this.$message({
          type: "warning",
          message: "请至少保留一条",
        });
      } else {
        this.detailList.splice(index, 1);
      }
    },
  },
};
</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;
}
.lineTop {
  margin: 10px 0 20px 0;
  border-top: 1px solid;
}
.w220 {
  width: 220px;
}
</style>
