<template>
  <el-dialog
    v-loading="loading"
    :title="title"
    :center="true"
    align="left"
    top="15vh"
    width="900px"
    :close-on-click-modal="false"
    :visible.sync="showModelThis"
    element-loading-text="拼命加载中"
    element-loading-spinner="el-icon-loading"
    element-loading-background="rgba(0, 0, 0, 0.8)"
    @close="closeModel"
  >
    <el-card class="add" style="margin-top: -25px">
      <el-collapse v-model="activeNames">
        <el-collapse-item title="资金详情" name="1">
          <el-row :gutter="20" v-if="resData !== null">
            <el-col :span="11" :offset="1" class="clear">
              <div class="fp-title">流水编码:</div>
              <div class="fp-name">{{ resData.logNo }}</div>
            </el-col>
            <el-col :span="11" class="clear">
              <div class="fp-title">交易类型:</div>
              <div class="fp-name">
                {{ resData.trade_type === "1" ? "支出" : "收入" }}
              </div>
            </el-col>

            <el-col :span="11" :offset="1" class="clear">
              <div class="fp-title">对方公司:</div>
              <div class="fp-name">{{ resData.trade_out }}</div>
            </el-col>
            <el-col :span="11" class="clear">
              <div class="fp-title">对方账户:</div>
              <div class="fp-name">{{ resData.trade_account }}</div>
            </el-col>

            <el-col :span="11" :offset="1" class="clear">
              <div class="fp-title">对方银行:</div>
              <div class="fp-name">{{ resData.trade_bank }}</div>
            </el-col>

            <el-col :span="11" class="clear">
              <div class="fp-title">交易时间:</div>
              <div class="fp-name">{{ resData.trade_time }}</div>
            </el-col>

            <el-col :span="23" :offset="1" class="clear">
              <div class="fp-title">交易备注:</div>
              <div class="fp-name">{{ resData.trade_used }}</div>
            </el-col>
            <el-col :span="11" :offset="1" class="clear">
              <div class="fp-title">交易金额:</div>
              <div class="fp-name">{{ resData.total_fee }}元</div>
            </el-col>

            <el-col :span="11" class="clear">
              <div class="fp-title">认领金额:</div>
              <div class="fp-name">{{ resData.btra_fee }}元</div>
            </el-col>
            <el-col
              :span="24"
              v-if="
                (resData && resData.status && resData.status === '2') ||
                (resData && resData.status && resData.status === '4')
              "
            >
              <el-row
                :gutter="20"
                v-if="resData.userinfo && resData.userinfo.companyNo"
              >
                <el-col :span="11" :offset="1" class="clear">
                  <div class="fp-title">认领企业编码:</div>
                  <div class="fp-name">{{ resData.userinfo.companyNo }}</div>
                </el-col>
                <el-col :span="11" class="clear">
                  <div class="fp-title">认领客户名称:</div>
                  <div class="fp-name">{{ resData.userinfo.companyName }}</div>
                </el-col>
              </el-row>
              <el-table
                v-if="invList && invList.length > 0"
                :data="invList"
                stripe
                border
                :size="'mini'"
                style="width: 100%"
              >
                <el-table-column
                  prop="invNo"
                  label="发票编号"
                  show-overflow-tooltip
                  width="170"
                ></el-table-column>
                <el-table-column
                  prop="inv_value"
                  label="发票额度"
                  show-overflow-tooltip
                  min-width="110"
                ></el-table-column>

                <el-table-column
                  label="关联资金信息"
                  show-overflow-tooltip
                  align="center"
                >
                  <el-table-column
                    prop="atrade_fee"
                    label="已核销金额"
                    show-overflow-tooltip
                    min-width="110"
                  ></el-table-column>
                  <el-table-column
                    prop="wtrade_fee"
                    label="未核销金额"
                    show-overflow-tooltip
                    min-width="110"
                  ></el-table-column>
                  <el-table-column
                    label="核销状态"
                    show-overflow-tooltip
                    min-width="95"
                  >
                    <template slot-scope="scope">
                      <el-tag
                        type="danger"
                        :size="'mini'"
                        v-if="scope.row.trade_status === '1'"
                        >未核销</el-tag
                      >
                      <el-tag
                        type="warning"
                        :size="'mini'"
                        v-else-if="scope.row.trade_status === '2'"
                        >部分核销</el-tag
                      >
                      <el-tag type="" :size="'mini'" v-else>全部核销</el-tag>
                    </template>
                  </el-table-column>
                </el-table-column>
                <el-table-column
                  label="关联确认单信息"
                  show-overflow-tooltip
                  align="center"
                >
                  <el-table-column
                    prop="aorder_fee"
                    label="已核销金额"
                    show-overflow-tooltip
                    min-width="110"
                  ></el-table-column>
                  <el-table-column
                    prop="worder_fee"
                    label="未核销金额"
                    show-overflow-tooltip
                    min-width="110"
                  ></el-table-column>
                  <el-table-column
                    label="核销状态"
                    show-overflow-tooltip
                    min-width="95"
                  >
                    <template slot-scope="scope">
                      <el-tag
                        type="danger"
                        :size="'mini'"
                        v-if="scope.row.order_status === '1'"
                        >未核销</el-tag
                      >
                      <el-tag
                        type="warning"
                        :size="'mini'"
                        v-else-if="scope.row.order_status === '2'"
                        >部分核销</el-tag
                      >
                      <el-tag type="" :size="'mini'" v-else>全部核销</el-tag>
                    </template>
                  </el-table-column>
                </el-table-column>
                <el-table-column
                  prop="addtime"
                  label="创建时间"
                  show-overflow-tooltip
                  width="150"
                ></el-table-column>
                <el-table-column
                  fixed="right"
                  label="操作"
                  width="50"
                  v-if="isDetail === '003'"
                >
                  <template slot-scope="scope">
                    <el-tooltip effect="dark" content="删除" placement="top">
                      <i
                        class="el-icon-delete tb-icon"
                        @click="deleteRow(scope.$index, 3)"
                      ></i>
                    </el-tooltip>
                  </template>
                </el-table-column>
              </el-table>
              <!-- <el-table
                v-if="refundList && refundList.length > 0"
                :data="refundList"
                stripe
                border
                :size="'mini'"
                style="width: 100%"
              >
                <el-table-column
                  prop="refundNo"
                  label="退款编号"
                  show-overflow-tooltip
                  width="180"
                ></el-table-column>

                <el-table-column
                  prop="traNo"
                  label="原资金编号"
                  show-overflow-tooltip
                  width="230"
                ></el-table-column>

                <el-table-column
                  prop="customerNo"
                  label="客户企业编码"
                  show-overflow-tooltip
                  width="130"
                ></el-table-column>
                <el-table-column
                  prop="customer"
                  label="客户企业名称"
                  show-overflow-tooltip
                  min-width="170"
                ></el-table-column>

                <el-table-column
                  prop="refund_fee"
                  label="退款总额度"
                  show-overflow-tooltip
                  width="120px"
                ></el-table-column>
                <el-table-column
                  prop="back_fee"
                  label="退款认领额度"
                  show-overflow-tooltip
                  width="120"
                ></el-table-column>

                <el-table-column
                  prop="addtime"
                  label="申请时间"
                  show-overflow-tooltip
                  width="150"
                ></el-table-column>
              </el-table> -->
            </el-col>
          </el-row>
        </el-collapse-item>
        <el-collapse-item v-if="isDetail === '039'" title="资金认领" name="2">
          <el-form
            ref="claimForm"
            :model="claimForm"
            status-icon
            :rules="claimRules"
            label-width="90px"
            class="demo-claimForm"
            style="padding: 0 20px 0 10px"
          >
            <el-row>
              <el-col :span="trade_type === '0' ? 16 : 24">
                <el-form-item label="认领客户" prop="companyNo">
                  <el-select
                    v-model="code"
                    multiple
                    filterable
                    remote
                    style="width: 50%"
                    :multiple-limit="1"
                    reserve-keyword
                    @change="handleChange"
                    placeholder="请输入公司名称"
                    :remote-method="remoteMethod"
                    :loading="selectLoading"
                    class="setWidth"
                  >
                    <el-option
                      v-for="item in activeOptions"
                      :key="item.companyNo"
                      :label="item.companyName"
                      :value="item.companyNo"
                    />
                  </el-select>
                </el-form-item>
              </el-col>

              <el-col v-if="trade_type === '0'" :span="8">
                <el-form-item label="认领金额" prop="total_fee">
                  <el-input-number
                    step-strictly
                    controls-position="right"
                    style="width: 100%"
                    v-model="claimForm.total_fee"
                    :precision="2"
                    :step="0.01"
                    :min="0"
                    :max="resData && resData.total_fee ? resData.total_fee : 0"
                  ></el-input-number>
                </el-form-item>
              </el-col>
            </el-row>

            <el-form-item
              label="关联发票"
              :size="'mini'"
              v-if="trade && trade.trade_inv_status === 1 && trade_type === '0'"
              prop="invid"
              class="noMargin"
              :label-position="'top'"
            >
              <div style="padding: 0 0 7px 0">
                <el-tag type="warning"
                  >该企业客户已欠款{{
                    trade.trade_inv
                  }}元，请关联以资金为依据开具的发票！</el-tag
                >
                <el-button type="primary" class="fr" @click="openInvoice"
                  >选择发票</el-button
                >
              </div>
              <el-table
                :data="invTableData"
                stripe
                border
                :size="'mini'"
                style="width: 100%"
              >
                <el-table-column
                  prop="invNo"
                  label="发票编号"
                  show-overflow-tooltip
                  width="170"
                ></el-table-column>
                <el-table-column
                  prop="company"
                  label="企业名称"
                  show-overflow-tooltip
                  min-width="170"
                ></el-table-column>
                <el-table-column
                  prop="contactor"
                  label="联系人"
                  show-overflow-tooltip
                  min-width="70"
                ></el-table-column>
                <el-table-column
                  prop="apply_name"
                  label="处理人"
                  show-overflow-tooltip
                  min-width="70"
                ></el-table-column>

                <el-table-column
                  prop="inv_value"
                  label="发票额度"
                  show-overflow-tooltip
                  min-width="110"
                ></el-table-column>

                <el-table-column
                  label="关联资金信息"
                  show-overflow-tooltip
                  align="center"
                >
                  <el-table-column
                    prop="atrade_fee"
                    label="已核销金额"
                    show-overflow-tooltip
                    min-width="110"
                  ></el-table-column>
                  <el-table-column
                    prop="wtrade_fee"
                    label="未核销金额"
                    show-overflow-tooltip
                    min-width="110"
                  ></el-table-column>
                  <el-table-column
                    label="核销状态"
                    show-overflow-tooltip
                    min-width="95"
                  >
                    <template slot-scope="scope">
                      <el-tag
                        type="danger"
                        :size="'mini'"
                        v-if="scope.row.trade_status === '1'"
                        >未核销</el-tag
                      >
                      <el-tag
                        type="warning"
                        :size="'mini'"
                        v-else-if="scope.row.trade_status === '2'"
                        >部分核销</el-tag
                      >
                      <el-tag type="" :size="'mini'" v-else>全部核销</el-tag>
                    </template>
                  </el-table-column>
                </el-table-column>
                <el-table-column
                  prop="addtime"
                  label="创建时间"
                  show-overflow-tooltip
                  width="150"
                ></el-table-column>
                <el-table-column fixed="right" label="操作" width="50">
                  <template slot-scope="scope">
                    <el-tooltip effect="dark" content="删除" placement="top">
                      <i
                        class="el-icon-delete tb-icon"
                        @click="deleteRow(scope.$index, invTableData, 1)"
                      ></i>
                    </el-tooltip>
                  </template>
                </el-table-column>
              </el-table>
              <invoice-change-dialog
                :id="invoiceModelId"
                :show-model="showInvoiceModel"
                :type_check="'2'"
                :order_status="''"
                :trade_status="'4'"
                :onces="true"
                @refresh="invoiceRefresh"
                @cancel="showInvoiceModel = false"
              />
            </el-form-item>
            <el-form-item
              label="退票记录"
              :size="'mini'"
              v-if="trade_type === '1'"
              prop="invid"
              class="noMargin"
              style="margin-top: -15px"
              :label-position="'top'"
            >
              <div style="padding: 0 0 7px 0">
                <el-tag type="warning">支出交易记录，需关联退款记录！</el-tag>
                <el-button type="primary" class="fr" @click="openrefund"
                  >选择退款记录</el-button
                >
              </div>
              <el-table
                :data="refundData"
                stripe
                border
                :size="'mini'"
                style="width: 100%"
              >
                <el-table-column
                  prop="refundNo"
                  label="退款编号"
                  show-overflow-tooltip
                  width="180"
                ></el-table-column>

                <el-table-column
                  prop="traNo"
                  label="原资金编号"
                  show-overflow-tooltip
                  width="230"
                ></el-table-column>

                <el-table-column
                  prop="customerNo"
                  label="客户企业编码"
                  show-overflow-tooltip
                  width="130"
                ></el-table-column>
                <el-table-column
                  prop="customer"
                  label="客户企业名称"
                  show-overflow-tooltip
                  min-width="170"
                ></el-table-column>

                <el-table-column
                  prop="refund_fee"
                  label="退款总额度"
                  show-overflow-tooltip
                  width="120px"
                ></el-table-column>
                <el-table-column
                  prop="back_fee"
                  label="退款认领额度"
                  show-overflow-tooltip
                  width="120"
                ></el-table-column>

                <el-table-column
                  prop="addtime"
                  label="申请时间"
                  show-overflow-tooltip
                  width="150"
                ></el-table-column>
                <el-table-column fixed="right" label="操作" width="50">
                  <template slot-scope="scope">
                    <el-tooltip effect="dark" content="删除" placement="top">
                      <i
                        class="el-icon-delete tb-icon"
                        @click="deleteRow(scope.$index, refundData, 2)"
                      ></i>
                    </el-tooltip>
                  </template>
                </el-table-column>
              </el-table>
              <refund-change-dialog
                :id="invoiceModelId"
                :show-model="showRefundModel"
                :refund_status="'3'"
                :onces="true"
                @refresh="refundRefresh"
                @cancel="showRefundModel = false"
              />
            </el-form-item>

            <el-form-item :size="'mini'" class="noMargin">
              <el-row>
                <el-col :span="18" v-if="status === '4'">
                  <el-alert
                    title="财务驳回理由："
                    type="error"
                    :size="'mini'"
                    :closable="false"
                    :description="exam_remark"
                    show-icon
                  >
                  </el-alert>
                </el-col>
                <el-col
                  :span="status === '4' ? 6 : 24"
                  style="text-align: right"
                >
                  <el-button
                    size="medium"
                    type="primary"
                    @click="submitClaimForm"
                    >保 存
                  </el-button>
                  <el-button size="medium" @click="showModelThis = false">
                    取 消</el-button
                  >
                </el-col>
              </el-row>
            </el-form-item>
          </el-form>
        </el-collapse-item>
        <el-collapse-item v-if="isDetail === '040'" title="认领审核" name="3">
          <el-form
            ref="ruleForm"
            :model="ruleForm"
            status-icon
            :rules="rules"
            label-width="90px"
            class="demo-ruleForm"
            style="padding: 0 20px 0 10px"
          >
            <el-form-item label="审核状态" prop="status">
              <el-select
                v-model="ruleForm.status"
                style="width: 100%"
                @change="seChange"
                placeholder="请选择审核状态"
              >
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="审核备注" prop="remark">
              <el-input
                v-model="ruleForm.remark"
                type="textarea"
                maxlength="250"
                show-word-limit
                :autosize="{ minRows: 6, maxRows: 6 }"
              />
            </el-form-item>
            <el-form-item style="text-align: right">
              <el-button type="primary" @click="submitForm">保 存 </el-button>
              <el-button @click="showModelThis = false"> 取 消</el-button>
            </el-form-item>
          </el-form>
        </el-collapse-item>
      </el-collapse>
    </el-card>
  </el-dialog>
</template>
<script>
import asyncRequest from "@/apis/service/InvoiceSales/capitalClaim";
import invoiceChangeDialog from "@/components/changeDialog/invoice";
import refundChangeDialog from "@/components/changeDialog/refund";
import resToken from "@/mixins/resToken";
export default {
  name: "capitalClaim",
  props: [
    "showModel",
    "id",
    "isDetail",
    "logNo",
    "exam_remark",
    "status",
    "trade_type",
  ],
  components: { invoiceChangeDialog, refundChangeDialog },
  mixins: [resToken],
  data() {
    return {
      showInvoiceModel: false,
      showRefundModel: false,
      invoiceModelId: "",
      refundData: [],
      // refundList: [],
      trade: null,
      options: [
        {
          value: "3",
          label: "通过",
        },
        {
          value: "4",
          label: "驳回",
        },
      ],
      code: [],
      activeOptions: [],
      invTableData: [],
      invList: [],
      selectLoading: false,
      activeNames: ["2"],
      loading: false,
      title: "资金详情",
      showModelThis: this.showModel,
      resData: null,
      claimForm: {
        companyNo: "",
        id: this.id,
        invid: "",
        total_fee: 0,
      },

      claimRules: {
        companyNo: [
          {
            required: true,
            message: "请选择企业客户",
            trigger: "change",
          },
        ],
        invid: [
          {
            required: true,
            message: "请选择发票",
            trigger: "change",
          },
        ],
        total_fee: [
          {
            required: true,
            message: "请输入认领金额",
            trigger: "blur",
          },
        ],
      },
      ruleForm: {
        status: "",
        remark: "",
        invid: this.id,
      },
      rules: {
        status: [
          {
            required: true,
            message: "请选择审核状态",
            trigger: "change",
          },
        ],
        remark: [
          {
            required: false,
            message: "请输入审核备注",
            trigger: "blur",
          },
        ],
      },
    };
  },
  watch: {
    showModel: function (val) {
      this.showModelThis = val;
      if (val) {
        this.initForm();
      }
    },
    showModelThis(val) {
      if (!val) {
        this.$emit("cancel");
      }
    },
  },
  methods: {
    closeModel() {
      console.log("closeModel!!");
    },
    deleteRow(index, rows, type) {
      rows.splice(index, 1);
      this.claimForm.invid = "";
      if (type === 1) {
        this.invTableData.forEach((v1, i) => {
          this.claimForm.invid += i === 0 ? v1.id : `,${v1.id}`;
        });
      } else {
        this.refundData.forEach((v4, i4) => {
          this.claimForm.invid += i4 === 0 ? v4.refundNo : `,${v4.refundNo}`;
        });
      }
      // this.$set(rows, index, rows[index]);
      this.$refs.claimForm.validateField("invid");
    },
    handleChange() {
      this.claimForm.companyNo = this.code.join(",");
      this.$refs.claimForm.validateField("companyNo");
      if (this.code === []) {
        this.trade = null;
        this.claimRules.invid[0].required = false;
      } else {
        let key = this.code[0];
        let index = this.activeOptions.findIndex((v1) => v1.companyNo === key);
        if (index !== -1) {
          this.trade = {
            trade_inv: this.activeOptions[index].trade_inv,
            trade_inv_status: this.activeOptions[index].trade_inv_status,
          };
          this.claimRules.invid[0].required = true;
        } else {
          this.trade = null;
          this.claimRules.invid[0].required = false;
        }
      }
      this.invTableData = [];
    },
    invoiceRefresh(e) {
      if (e && e.length === 1) {
        this.invTableData = e;
      }
      this.claimForm.invid = "";
      this.invTableData.forEach((v1, i) => {
        this.claimForm.invid += i === 0 ? v1.id : `,${v1.id}`;
      });
      this.$refs.claimForm.validateField("invid");
    },
    refundRefresh(e) {
      if (this.refundData.length === 0) {
        this.refundData = e;
      } else {
        let arr = JSON.parse(JSON.stringify(this.refundData));
        e.forEach((v1) => {
          let index = arr.findIndex((v2) => v2.refundNo === v1.refundNo);
          if (index === -1) {
            arr.push(v1);
          }
        });
        this.refundData = arr;
        this.refundData.forEach((v3, i3) => {
          this.$set(this.refundData, i3, v3);
        });
      }
      this.claimForm.invid = "";
      this.refundData.forEach((v4, i4) => {
        this.claimForm.invid += i4 === 0 ? v4.refundNo : `,${v4.refundNo}`;
      });
      this.$refs.claimForm.validateField("invid");
    },
    openInvoice() {
      if (this.code && this.code.length === 1) {
        this.invoiceModelId = this.code[0];
        this.showInvoiceModel = true;
      } else {
        this.$message.warning("请选择认领客户！");
      }
    },
    openrefund() {
      if (this.code && this.code.length === 1) {
        this.invoiceModelId = this.code[0];
        this.showRefundModel = true;
      } else {
        this.$message.warning("请选择认领客户！");
      }
    },
    async remoteMethod(query) {
      this.selectLoading = true;
      if (query !== "") {
        this.activeOptions = [];
        const res = await asyncRequest.clist({
          page: 1,
          size: 100,
          company: query,
        });
        if (res && res.code === 0 && res.data && res.data.list) {
          this.activeOptions = res.data.list;
        } else if (res && res.code >= 100 && res.code <= 104) {
          await this.logout();
        } else {
          this.$message.warning(res.message);
        }
      } else {
        this.activeOptions = [];
      }
      this.selectLoading = false;
    },
    seChange() {
      if (this.ruleForm.status === "4") {
        this.rules.remark[0].required = true;
      } else {
        this.rules.remark[0].required = false;
      }
    },
    async initForm() {
      await this.resetForm();
      if (this.trade_type === "1") {
        this.claimRules.invid[0].message = "请选择退款记录！";
      } else {
        this.claimRules.invid[0].message = "请选择发票！";
      }

      this.code = [];
      this.activeOptions = [];
      if (this.isDetail === "039") {
        this.activeNames = ["2"];
        this.title = "资金认领";
      } else if (this.isDetail === "040") {
        this.activeNames = ["3"];
        this.title = "认领审核";
      } else {
        this.activeNames = ["1"];
        this.title = "资金详情";
      }
      this.loading = true;
      this.resData = null;
      if (this.logNo.indexOf("-") === -1) {
        await this.tradelog();
      } else {
        await this.initData();
        await this.getTradein();
      }
      if (this.trade_type === "1") {
        this.claimRules.total_fee[0].required = false;
      } else {
        this.claimRules.total_fee[0].required = true;
      }
      this.loading = false;
    },
    async initData() {
      const res = await asyncRequest.detail({ traNo: this.logNo });
      if (res && res.code === 0) {
        this.resData = res.data;
        let userinfo = this.resData.userinfo;
        let total = this.resData.btotal_fee;
        this.resData.btotal_fee = this.resData.total_fee;
        this.resData.total_fee = total;

        if (
          this.isDetail === "039" &&
          userinfo &&
          !Array.isArray(userinfo) &&
          typeof userinfo === "object" &&
          userinfo.companyNo !== "" &&
          userinfo.companyName !== ""
        ) {
          this.code = [userinfo.companyNo];
          this.claimForm.companyNo = userinfo.companyNo;
          await this.remoteMethod(userinfo.companyName);
          this.$refs.claimForm.validateField("companyNo");
        }
        // this.refundList = res.data.refundinfo;
      } else if (res && res.code >= 100 && res.code <= 104) {
        await this.logout();
      } else {
        this.resData = null;
        this.$message.warning(res.message);
      }
    },

    async tradelog() {
      const res = await asyncRequest.tradelog({ traNo: this.logNo });
      if (res && res.code === 0) {
        console.log(res.data);
        this.resData = res.data;
        // let userinfo = this.resData.userinfo;
        this.claimForm.total_fee =
          this.status === "1"
            ? this.resData.total_fee * 1
            : this.resData.balance * 1;
      } else if (res && res.code >= 100 && res.code <= 104) {
        await this.logout();
      } else {
        this.resData = null;
        this.$message.warning(res.message);
      }
    },
    async getTradein() {
      this.invList = [];

      const res = await asyncRequest.tradein({ traNo: this.logNo });

      if (res && res.code === 0 && res.data) {
        let inv = res.data.inv;
        if (!Array.isArray(inv) && typeof inv === "object") {
          this.invList.push(inv);
        }
      } else if (res && res.code >= 100 && res.code <= 104) {
        await this.logout();
      } else {
        this.$message.warning(res.message);
      }
      console.log(this.invList);
    },

    async resetForm() {
      // 重置
      await this.$nextTick(() => {
        if (this.$refs.claimForm && this.isDetail === "039") {
          this.$refs.claimForm.resetFields();
          this.$refs.claimForm.clearValidate();
          this.code = [];
          this.activeOptions = [];
          this.claimForm = {
            companyNo: "",
            invid: "",
            id: this.id,
            total_fee: 0,
          };
          this.trade = null;
          this.claimRules.invid[0].required = false;
        } else if (this.$refs.ruleForm && this.isDetail === "040") {
          this.$refs.ruleForm.resetFields();
          this.$refs.ruleForm.clearValidate();
          this.ruleForm = {
            status: "",
            remark: "",
            invid: this.id,
          };
          this.seChange();
        }
      });
    },
    async submitClaimForm() {
      await this.$refs.claimForm.validate(async (valid) => {
        if (valid) {
          console.log(parseFloat(this.claimForm.total_fee) === 0);
          if (
            parseInt(this.claimForm.total_fee) === 0 &&
            this.trade_type === "0"
          ) {
            this.$message.warning("认领资金不能为0！");
            return;
          }
          if (
            this.refundData &&
            this.refundData.length === 1 &&
            parseFloat(this.resData.total_fee) <
              parseFloat(this.refundData[0].refund_fee) &&
            this.trade_type === "1"
          ) {
            this.$message.warning("认领资金不能小于退款资金！");
            return;
          }
          this.loading = true;
          const obj = JSON.parse(JSON.stringify(this.claimForm));
          obj.id = this.id;
          let res = {};
          if (this.trade_type !== "1") {
            res = await asyncRequest.tradesave(obj);
          } else {
            let model = {
              id: this.id,
              refundid: obj.invid,
              companyNo: obj.companyNo,
            };
            res = await asyncRequest.traderefund(model);
          }

          this.loading = false;
          if (res && res.code === 0) {
            this.$notify.success({
              title: "资金认领成功！",
              message: "",
            });
            this.showModelThis = false;
            // 刷新
            this.$emit("refresh");
          } else if (res && res.code >= 100 && res.code <= 104) {
            await this.logout();
          } else {
            this.$message.warning(res.message);
          }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    async submitForm() {
      await this.$refs.ruleForm.validate(async (valid) => {
        if (valid) {
          this.loading = true;
          const obj = JSON.parse(JSON.stringify(this.ruleForm));
          const model = {
            traNo: this.logNo,
            status: obj.status,
            remark: obj.remark,
          };
          const res = await asyncRequest.status(model);
          if (res && res.code === 0) {
            this.$notify.success({
              title: "认领审核提交成功!",
              message: "",
            });
            this.showModelThis = false;
            this.$emit("refresh");
          } else if (res.code === 1004) {
            this.$notify.warning({
              title: "认领审核提交失败!",
              message: "未到申请时间！",
            });
          } else if (res && res.code >= 100 && res.code <= 104) {
            await this.logout();
          } else {
            this.$message.warning(res.message);
          }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
  },
};
</script>

   <style lang="scss" scoped>
.capitalClaim {
  .fp-title {
    float: left;
    width: 100px;
    text-align: right;
    line-height: 40px;
    box-sizing: border-box;
    color: #99a9bf;
    padding: 0 10px 0 0;
    font-size: 14px;
  }
  .fp-name {
    width: calc(100% - 100px);
    font-size: 14px;
    float: left;
    padding: 7px 0;
    line-height: 26px;
  }
  .add {
    .survey-title {
      line-height: 35px;
      font-size: 18px;
      font-weight: bold;
    }
    .el-row {
      margin-bottom: 20px;
      &:last-child {
        margin-bottom: 0;
      }
    }
    .lh40 {
      line-height: 40px;
      font-size: 16px;
    }
    .el-col {
      border-radius: 4px;
    }
    .bg-purple-dark {
      background: #99a9bf;
    }
    .bg-purple {
      background: #d3dce6;
      padding: 30px;
    }
    .bg-purple-light {
      background: #e5e9f2;
    }
    .grid-content {
      border-radius: 4px;
      min-height: 36px;
    }
    .row-bg {
      padding: 10px 0;
      background-color: #f9fafc;
    }
  }
  .setWidth {
    width: 100% !important;
    // display: flex;
    // display: block !important;
    // .el-input__inner {
    //   display: flex;
    //   width: 1000px !important;
    //   display: block !important;
    // }
  }
}
</style>
