<template>
  <el-dialog
    v-loading="loading"
    :title="title"
    :center="true"
    align="left"
    top="12vh"
    width="1224px"
    :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-row :gutter="10">
        <el-col :span="24">
          <el-form
            ref="ruleForm"
            :model="ruleForm"
            status-icon
            :rules="rulesThis"
            :disabled="isDetail !== '003'"
            label-width="110px"
            class="demo-ruleForm"
          >
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="关联方式" prop="status">
                  <el-select
                    style="width: 100%"
                    v-model="ruleForm.status"
                    clearable
                    :disabled="isDetail !== '003'"
                    @change="statusChange"
                    placeholder="请选择关联方式"
                  >
                    <el-option
                      v-for="item in relationBasisType"
                      :key="item.code"
                      :label="item.name"
                      :value="item.code"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="选择企业" prop="companyNo">
                  <el-select
                    v-model="code"
                    multiple
                    filterable
                    remote
                    :disabled="isDetail !== '003'"
                    style="width: 100%"
                    :multiple-limit="1"
                    reserve-keyword
                    placeholder="公司名称搜索"
                    :remote-method="remoteMethod"
                    :loading="selectLoading"
                    @change="selectChange"
                    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
                class="myCard"
                :span="24"
                v-if="activeRelation && activeRelation.length === 0"
              >
                <div class="excelUploadBox">
                  <i class="el-icon-receiving"></i>
                  <span class="boxM"> 请选择关联方式！</span>
                </div>
              </el-col>

              <el-col :span="24" v-else>
                <el-row :gutter="20">
                  <el-col :span="12" v-for="item in activeRelation" :key="item">
                    <div class="myCard" v-if="item === 'order'">
                      <div class="title tc" style="padding: 0 0 5px 0">
                        <el-badge class="item lan fl" style="">确认单</el-badge>
                        <el-badge  
                          >当前核销：{{ order_total }} 元</el-badge
                        >
                        <el-button
                          type="primary"
                          size="mini"
                          plain
                          v-if="isDetail === '003'"
                          class="fr"
                          @click="openModel(1)"
                          >添 加</el-button
                        >
                      </div>
                      <el-table
                        :data="orderList"
                        ref="multipleTable"
                        stripe
                        border
                        :size="'mini'"
                        style="width: 100%"
                        row-key="id"
                        :expand-row-keys="expands"
                      >
                        <el-table-column type="expand">
                          <template #default="props">
                            <el-table
                              style="width: 100%"
                              :size="'mini'"
                              :data="props.row.good"
                              stripe
                              max-height="350"
                              border
                            >
                              <el-table-column
                                label="产品编号"
                                prop="goodNo"
                                show-overflow-tooltip
                                width="125"
                              >
                              </el-table-column>
                              <el-table-column
                                label="商品名称"
                                prop="goodname"
                                show-overflow-tooltip
                              >
                              </el-table-column>
                              <el-table-column
                                label="品牌"
                                prop="brand"
                                width="80"
                                show-overflow-tooltip
                              >
                              </el-table-column>
                              <el-table-column
                                label="单位"
                                prop="unit"
                                width="80"
                                show-overflow-tooltip
                              >
                              </el-table-column>
                              <el-table-column
                                label="数量"
                                prop="num"
                                width="65"
                                show-overflow-tooltip
                              />
                              <el-table-column
                                label="单价"
                                width="90"
                                show-overflow-tooltip
                              >
                                <template #default="scope"
                                  >{{ scope.row.price }}
                                </template></el-table-column
                              >
                              <el-table-column
                                label="总价"
                                width="105"
                                show-overflow-tooltip
                                ><template #default="scope"
                                  >{{ scope.row.total_fee }}
                                </template>
                              </el-table-column>
                              <el-table-column
                                label="资金已核销金额"
                                width="105"
                                show-overflow-tooltip
                                ><template #default="scope"
                                  >{{ scope.row.apay_fee }}
                                </template>
                              </el-table-column>
                              <el-table-column
                                label="资金待核销金额"
                                width="105"
                                show-overflow-tooltip
                                ><template #default="scope"
                                  >{{ scope.row.wpay_fee }}
                                </template>
                              </el-table-column>
                              <el-table-column
                                label="关联资金状态"
                                width="105"
                                show-overflow-tooltip
                                ><template #default="scope">
                                  <el-tag
                                    type="danger"
                                    :size="'mini'"
                                    v-if="scope.row.pay_status === '1'"
                                    >未核销</el-tag
                                  >
                                  <el-tag
                                    type="warning"
                                    :size="'mini'"
                                    v-else-if="scope.row.pay_status === '2'"
                                    >部分核销</el-tag
                                  >
                                  <el-tag type="" :size="'mini'" v-else
                                    >全部核销</el-tag
                                  >
                                </template>
                              </el-table-column>
                              <el-table-column
                                label="发票已核销数量"
                                width="105"
                                show-overflow-tooltip
                                ><template #default="scope"
                                  >{{ scope.row.inv_num }}
                                </template>
                              </el-table-column>

                              <el-table-column
                                label="发票已核销金额"
                                width="105"
                                show-overflow-tooltip
                                ><template #default="scope"
                                  >{{ scope.row.ainv_fee }}
                                </template>
                              </el-table-column>
                              <el-table-column
                                label="发票待核销金额"
                                width="105"
                                show-overflow-tooltip
                                ><template #default="scope"
                                  >{{ scope.row.winv_fee }}
                                </template>
                              </el-table-column>
                              <el-table-column
                                label="关联发票状态"
                                width="105"
                                show-overflow-tooltip
                                ><template #default="scope">
                                  <el-tag
                                    type="danger"
                                    :size="'mini'"
                                    v-if="scope.row.inv_status === '1'"
                                    >未核销</el-tag
                                  >
                                  <el-tag
                                    type="warning"
                                    :size="'mini'"
                                    v-else-if="scope.row.inv_status === '2'"
                                    >部分核销</el-tag
                                  >
                                  <el-tag type="" :size="'mini'" v-else
                                    >全部核销</el-tag
                                  >
                                </template>
                              </el-table-column>
                            </el-table>
                          </template>
                        </el-table-column>

                        <el-table-column
                          prop="sequenceNo"
                          label="确认单号"
                          show-overflow-tooltip
                          width="140"
                        ></el-table-column>
                        <el-table-column
                          prop="customer"
                          label="企业名称"
                          show-overflow-tooltip
                          min-width="170"
                        ></el-table-column>
                        <el-table-column
                          prop="total_fee"
                          label="确认单总金额"
                          show-overflow-tooltip
                          min-width="110"
                        ></el-table-column>

                        <el-table-column
                          label="关联资金信息"
                          show-overflow-tooltip
                          align="center"
                        >
                          <el-table-column
                            prop="apay_fee"
                            label="已核销金额"
                            show-overflow-tooltip
                            min-width="110"
                          ></el-table-column>
                          <el-table-column
                            prop="wpay_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.pay_status === '1'"
                                >未核销</el-tag
                              >
                              <el-tag
                                type="warning"
                                :size="'mini'"
                                v-else-if="scope.row.pay_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="ainv_fee"
                            label="已核销金额"
                            show-overflow-tooltip
                            min-width="110"
                          ></el-table-column>
                          <el-table-column
                            prop="winv_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.inv_status === '1'"
                                >未核销</el-tag
                              >
                              <el-tag
                                type="warning"
                                :size="'mini'"
                                v-else-if="scope.row.inv_status === '2'"
                                >部分核销</el-tag
                              >
                              <el-tag type="" :size="'mini'" v-else
                                >全部核销</el-tag
                              >
                            </template>
                          </el-table-column>
                        </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, 1)"
                              ></i>
                            </el-tooltip>
                          </template>
                        </el-table-column>
                      </el-table>
                      <order-change
                        :show-model="showModel1"
                        :trade_status="order_trade_status"
                        :order_status="order_order_status"
                        :inv_status="order_inv_status"
                        :onces="order_onces"
                        :id="modelId"
                        :isAll="true"
                        @refresh="orderListUpdate"
                        @cancel="showModel1 = false"
                      />
                    </div>
                    <div class="myCard" v-else-if="item === 'capital'">
                      <div class="title tc" style="padding: 0 0 5px 0">
                        <el-badge class="item lan fl">资金</el-badge>
                        <el-badge  
                          >当前核销：{{ trade_total }} 元</el-badge
                        >
                        <el-button
                          type="primary"
                          plain
                          v-if="isDetail === '003'"
                          size="mini"
                          class="fr"
                          @click="openModel(2)"
                          >添 加</el-button
                        >
                      </div>
                      <el-table
                        :data="capitalList"
                        stripe
                        border
                        :size="'mini'"
                        style="width: 100%"
                      >
                        <el-table-column
                          prop="traNo"
                          label="资金编号"
                          show-overflow-tooltip
                          width="190"
                        ></el-table-column>
                        <el-table-column
                          prop="customer"
                          label="企业名称"
                          show-overflow-tooltip
                          min-width="170"
                        ></el-table-column>
                        <el-table-column
                          prop="trade_account"
                          label="付款账号"
                          show-overflow-tooltip
                          width="170"
                        ></el-table-column>
                        <el-table-column
                          prop="trade_out"
                          label="付款方"
                          show-overflow-tooltip
                          min-width="170"
                        ></el-table-column>
                        <el-table-column
                          prop="trade_used"
                          label="付款备注"
                          show-overflow-tooltip
                          width="270"
                        ></el-table-column>
                        <el-table-column
                          prop="total_fee"
                          label="资金总额度"
                          show-overflow-tooltip
                          min-width="110"
                        ></el-table-column>

                        <el-table-column
                          label="关联发票信息"
                          show-overflow-tooltip
                          align="center"
                        >
                          <el-table-column
                            prop="inv_fee"
                            label="已核销金额"
                            show-overflow-tooltip
                            min-width="110"
                          ></el-table-column>
                          <el-table-column
                            prop="winv_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.inv_status === '1'"
                                >未核销</el-tag
                              >
                              <el-tag
                                type="warning"
                                :size="'mini'"
                                v-else-if="scope.row.inv_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="order_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, 2)"
                              ></i>
                            </el-tooltip>
                          </template>
                        </el-table-column>
                      </el-table>
                      <capital-change
                        :show-model="showModel2"
                        :id="modelId"
                        :trade_status="trade_trade_status"
                        :order_status="trade_order_status"
                        :inv_status="trade_inv_status"
                        :onces="trade_onces"
                        :status="'3'"
                        @refresh="capitalListUpdate"
                        @cancel="showModel2 = false"
                      />
                    </div>
                    <div class="myCard" v-else>
                      <div class="title tc" style="padding: 0 0 5px 0">
                        <el-badge class="item lan fl">发票</el-badge>

                        <el-badge  
                          >当前核销：{{ inv_total }} 元</el-badge
                        >
                        <el-button
                          type="primary"
                          plain
                          size="mini"
                          v-if="isDetail === '003'"
                          class="fr"
                          @click="openModel(3)"
                          >添 加</el-button
                        >
                      </div>
                      <el-table
                        :data="invoiceList"
                        stripe
                        border
                        :size="'mini'"
                        style="width: 100%"
                      >
                        <el-table-column
                          prop="invNo"
                          label="发票编号"
                          show-overflow-tooltip
                          width="250"
                        ></el-table-column>
                        <el-table-column
                          prop="company"
                          label="企业名称"
                          show-overflow-tooltip
                          min-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>
                      <invoice-change
                        :show-model="showModel3"
                        :trade_status="inv_trade_status"
                        :order_status="inv_order_status"
                        :inv_status="inv_inv_status"
                        :onces="inv_onces"
                        :id="modelId"
                        @refresh="invoiceListUpdate"
                        @cancel="showModel3 = false"
                      />
                    </div>
                  </el-col>
                </el-row>
              </el-col>
            </el-row>
          </el-form>
        </el-col>
        <el-col :span="24" style="text-align: right" v-if="isDetail === '029'">
          <el-form
            ref="examForm"
            :model="examForm"
            status-icon
            :rules="examRules"
            label-width="110px"
            style="padding: 20px 0 0 0"
            class="demo-examForm"
          >
            <el-form-item label="审核状态" prop="status">
              <el-select
                v-model="examForm.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="examForm.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="examSubmitForm"
                >保 存
              </el-button>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
      <div class="tr" style="padding: 10px 0 0 0">
        <el-button
          v-if="isDetail === '003'"
          size="medium"
          type="primary"
          @click="submitForm"
          >保 存
        </el-button>
      </div>
    </el-card>
  </el-dialog>
</template>
<script>
import asyncRequest from "@/apis/service/InvoiceSales/relation";
import orderChange from "@/components/changeDialog/order";
import capitalChange from "@/components/changeDialog/capital";
import invoiceChange from "@/components/changeDialog/invoice";
import { relationBasisType, relationList } from "@/assets/js/linkType";
import resToken from "@/mixins/resToken";
export default {
  name: "relation",
  props: ["showModel", "id", "isDetail", "newTime"],
  mixins: [resToken],
  components: {
    orderChange,
    capitalChange,
    invoiceChange,
  },
  data() {
    return {
      showModel1: false,
      showModel2: false,
      showModel3: false,
      order_trade_status: "",
      order_order_status: "",
      order_inv_status: "",

      trade_order_status: "",
      trade_trade_status: "",
      trade_inv_status: "",

      inv_order_status: "",
      inv_trade_status: "",
      inv_inv_status: "",
      order_onces: true,
      trade_onces: true,
      inv_onces: true,
      order_total: 0,
      trade_total: 0,
      inv_total: 0,
      orderList: [],
      capitalList: [],
      invoiceList: [],
      roleList: [],
      code: [],
      options: [
        {
          value: "3",
          label: "通过",
        },
        {
          value: "2",
          label: "驳回",
        },
      ],
      examForm: {
        status: "", // 真实姓名
        remark: "",
      },
      examRules: {
        status: [
          {
            required: true,
            message: "请选择审核状态",
            trigger: "change",
          },
        ],
        remark: [
          {
            required: false,
            message: "请输入审核备注",
            trigger: "blur",
          },
        ],
      },
      loading: false,
      relationList: relationList,
      activeRelation: [],
      resData: null,
      title: "添加关联",
      selectLoading: false,
      activeOptions: [],
      relationBasisType: relationBasisType,
      showModelThis: this.showModel,
      ruleForm: {
        status: "",
        companyNo: "",
      },
      rulesThis: this.rules,
      rules: {
        companyNo: [
          {
            required: true,
            message: "请选择企业",
            trigger: "change",
          },
        ],
        status: [
          {
            required: true,
            message: "请选择关联方式",
            trigger: "change",
          },
        ],
      },
    };
  },
  watch: {
    showModel: function (val) {
      this.showModelThis = val;
      if (val) {
        this.initForm();
      }
    },
    showModelThis(val) {
      if (!val) {
        this.$emit("cancel");
      }
    },
    newTime: function (old, val) {
      if (old !== val) {
        this.initForm();
      }
    },
  },
  methods: {
    closeModel() {
      console.log("closeModel!!");
    },
    seChange() {
      if (this.examForm.status === "2") {
        this.examRules.remark[0].required = true;
      } else {
        this.examRules.remark[0].required = false;
      }
    },
    async initForm() {
      this.loading = true;
      console.log(this.isDetail);
      console.log(this.isDetail);
      this.activeRelation = [];
      if (this.isDetail === "003") {
        this.title = "添加关联";
        this.rulesThis = this.rules;
        await this.resetForm();
      } else {
        this.rulesThis = {};
        this.title = "关联详情";
        await this.resetForm();
        await this.initData();
      }

      this.loading = false;
    },
    //删除一条数据
    deleteRow(index, type) {
      console.log(index, type);
      if (type === 1) {
        this.orderList.splice(index, 1);
      } else if (type === 2) {
        this.capitalList.splice(index, 1);
      } else {
        this.invoiceList.splice(index, 1);
      }
      this.getTotal();
    },
    openModel(type) {
      if (this.code && this.code.length === 1) {
        this.modelId = this.code[0];
        if (type === 1) {
          this.showModel1 = true;
        } else if (type === 2) {
          this.showModel2 = true;
        } else {
          this.showModel3 = true;
        }
      } else {
        this.$message.warning("请选择企业！");
      }
    },
    selectChange() {
      this.ruleForm.companyNo = this.code.join(",");
      this.$refs.ruleForm.validateField("companyNo");
      this.orderList = [];
      this.capitalList = [];
      this.invoiceList = [];
      this.getTotal();
    },
    getTotal() {
      this.order_total = 0;
      this.trade_total = 0;
      this.inv_total = 0;
      if (this.ruleForm.status === "2" || this.ruleForm.status === "3") {
        this.inv_total = 0;
        if (this.isDetail === "003") {
          this.orderList.forEach((v1) => {
            this.order_total += v1.wpay_fee * 1;
          });
        } else {
          this.order_total =
            this.resData && this.resData.cancel_total
              ? this.resData.cancel_total
              : 0;
        }

        this.capitalList.forEach((v2) => {
          this.trade_total +=
            this.isDetail !== "003" ? v2.cancel_fee * 1 : v2.worder_fee * 1;
        });
      } else if (this.ruleForm.status === "4" || this.ruleForm.status === "5") {
        this.order_total = 0;
        this.capitalList.forEach((v3) => {
          this.trade_total +=
            this.isDetail !== "003" ? v3.cancel_fee * 1 : v3.winv_fee * 1;
        });
        this.invoiceList.forEach((v4) => {
          this.inv_total +=
            this.isDetail !== "003" ? v4.cancel_fee * 1 : v4.wtrade_fee * 1;
        });
      } else {
        this.order_total = 0;
        this.trade_total = 0;
        this.inv_total = 0;
      }
    },

    statusChange() {
      let index = this.relationList.findIndex(
        (v1) => v1.code === this.ruleForm.status
      );
      if (index !== -1) {
        this.activeRelation = this.relationList[index].active;
        this.order_order_status = this.relationList[index].orderType[0];
        this.order_trade_status = this.relationList[index].orderType[1];
        this.order_inv_status = this.relationList[index].orderType[2];

        this.trade_order_status = this.relationList[index].capitalType[0];
        this.trade_trade_status = this.relationList[index].capitalType[1];
        this.trade_inv_status = this.relationList[index].capitalType[2];

        this.inv_order_status = this.relationList[index].invoiceType[0];
        this.inv_trade_status = this.relationList[index].invoiceType[1];
        this.inv_inv_status = this.relationList[index].invoiceType[2];
        this.order_onces = this.relationList[index].onces[0];
        this.trade_onces = this.relationList[index].onces[1];
        this.inv_onces = this.relationList[index].onces[2];
      } else {
        this.activeRelation = [];
        this.order_trade_status = "";
        this.order_order_status = "";
        this.order_inv_status = "";

        this.trade_trade_status = "";
        this.trade_order_status = "";
        this.trade_inv_status = "";

        this.inv_trade_status = "";
        this.inv_order_status = "";
        this.inv_inv_status = "";
        this.order_onces = true;
        this.trade_onces = true;
        this.inv_onces = true;
      }
      this.getTotal();
    },
    orderListUpdate(e) {
      if (this.order_onces) {
        this.orderList = [];
        this.orderList = e;
      } else {
        let arr = JSON.parse(JSON.stringify(this.orderList));
        e.forEach((v1) => {
          let fi = arr.findIndex(
            (v2) => v2.sequenceNo === v1.sequenceNo && v2.orderNo === v1.orderNo
          );
          if (fi > -1) {
            arr.splice(fi, 1);
          }
        });
        this.orderList = [].concat(arr).concat(e);
      }
      this.getTotal();
    },
    capitalListUpdate(e) {
      console.log(e);
      if (this.trade_onces) {
        this.capitalList = [];
        this.capitalList = e;
      } else {
        let arr = JSON.parse(JSON.stringify(this.capitalList));
        e.forEach((v1) => {
          let fi = arr.findIndex(
            (v2) => v2.sequenceNo === v1.sequenceNo && v2.orderNo === v1.orderNo
          );
          if (fi > -1) {
            arr.splice(fi, 1);
          }
        });
        this.capitalList = [].concat(arr).concat(e);
      }
      this.getTotal();
    },
    invoiceListUpdate(e) {
      console.log(e);
      if (this.inv_onces) {
        this.invoiceList = [];
        this.invoiceList = e;
      } else {
        let arr = JSON.parse(JSON.stringify(this.capitalList));
        e.forEach((v1) => {
          let fi = arr.findIndex(
            (v2) => v2.sequenceNo === v1.sequenceNo && v2.orderNo === v1.orderNo
          );
          if (fi > -1) {
            arr.splice(fi, 1);
          }
        });
        this.invoiceList = [].concat(arr).concat(e);
      }
      this.getTotal();
    },
    async initData() {
      const res = await asyncRequest.detail({ id: this.id });
      if (res && res.code === 0) {
        let data = res.data;
        this.resData = data;
        this.ruleForm.status = data.rela_form;
        this.statusChange();
        this.ruleForm.companyNo = data.companyNo;
        this.code = [data.companyName];
        this.orderList = data.order_info;
        this.capitalList = data.tra_info;
        if (this.capitalList.length > 0) {
          this.capitalList.map((v1) => {
            v1.customer = v1.companyName;
            return v1;
          });
        }

        this.invoiceList = data.inv_info;
        if (this.invoiceList.length > 0) {
          this.invoiceList.map((v1) => {
            v1.company = v1.companyName;
            return v1;
          });
        }

        this.getTotal();
      } else if (res && res.code >= 100 && res.code <= 104) {
        await this.logout();
      } else {
        this.resData = null;
        this.$message.warning(res.message);
      }
    },
    async resetForm() {
      // 重置
      await this.$nextTick(() => {
        if (this.$refs.ruleForm) {
          this.orderList = [];
          this.capitalList = [];
          this.invoiceList = [];
          this.active = [];
          this.activeOptions = [];
          this.code = [];
          this.$refs.ruleForm.resetFields();
          this.$refs.ruleForm.clearValidate();
          this.ruleForm = {
            status: "",
            companyNo: "",
          };
          this.getTotal();
        }
        if (this.$refs.examForm) {
          this.examForm = {
            status: "",
            remark: "",
          };
          this.seChange();
        }
      });
    },
    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;
    },
    async submitForm() {
      await this.$refs.ruleForm.validate(async (valid) => {
        if (valid) {
          if (this.ruleForm.status === "2" || this.ruleForm.status === "3") {
            if (this.orderList && this.orderList.length === 0) {
              this.$message.error("请选择确认单！");
              return;
            }
            if (this.capitalList && this.capitalList.length === 0) {
              this.$message.error("请选择资金！");
              return;
            }
            if (this.order_total === 0) {
              this.$message.error("确认单核销总额不能为0！");
              return;
            }
            if (this.trade_total === 0) {
              this.$message.error("资金核销总额不能为0！");
              return;
            }

            if (
              this.ruleForm.status === "2" &&
              this.order_total < this.trade_total
            ) {
              this.$message.error("资金核销总额不得大于确认单核销总额！");
              return;
            }

            if (
              this.ruleForm.status === "3" &&
              this.trade_total < this.order_total
            ) {
              this.$message.error("确认单核销总额不得大于资金核销总额！");
              return;
            }
          }
          if (this.ruleForm.status === "4" || this.ruleForm.status === "5") {
            if (this.invoiceList && this.invoiceList.length === 0) {
              this.$message.error("请选择发票！");
              return;
            }
            if (this.capitalList && this.capitalList.length === 0) {
              this.$message.error("请选择资金！");
              return;
            }
            if (this.inv_total === 0) {
              this.$message.error("发票核销总额不能为0！");
              return;
            }
            if (this.trade_total === 0) {
              this.$message.error("资金核销总额不能为0！");
              return;
            }
            if (
              this.ruleForm.status === "4" &&
              this.inv_total < this.trade_total
            ) {
              this.$message.error("资金核销总额不得大于发票核销总额！");
              return;
            }
            if (
              this.ruleForm.status === "5" &&
              this.trade_total < this.inv_total
            ) {
              this.$message.error("发票核销总额不得大于资金核销总额！");
              return;
            }
          }

          this.loading = true;
          const obj = JSON.parse(JSON.stringify(this.ruleForm));

          let res = {};
          if (obj.status === "2" || obj.status === "3") {
            let modelA = {
              type: obj.status,
              companyNo: obj.companyNo,
              tradid: "",
              good: "",
            };
            this.orderList.forEach((v1) => {
              v1.good.forEach((v2) => {
                modelA.good +=
                  modelA.good === "" ? v2.sequenceNo : `,${v2.sequenceNo}`;
              });
            });
            this.capitalList.forEach((v3) => {
              modelA.tradid += modelA.tradid === "" ? v3.id : `,${v3.id}`;
            });
            res = await asyncRequest.assoccreate(modelA);
          } else {
            let modelB = {
              type: obj.status,
              companyNo: obj.companyNo,
              tradid: "",
              invid: "",
            };
            this.capitalList.forEach((v3) => {
              modelB.tradid += modelB.tradid === "" ? v3.id : `,${v3.id}`;
            });
            this.invoiceList.forEach((v3) => {
              modelB.invid += modelB.invid === "" ? v3.id : `,${v3.id}`;
            });
            res = await asyncRequest.assocadd(modelB);
          }
          this.loading = false;
          if (res && res.code === 0) {
            const title = this.id === "add" ? "添加成功" : "修改成功";
            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 examSubmitForm() {
      await this.$refs.examForm.validate(async (valid) => {
        if (valid) {
          this.loading = true;
          const obj = JSON.parse(JSON.stringify(this.examForm));
          const model = {
            id: this.id,
            status: obj.status,
            remark: obj.remark,
          };
          const res = await asyncRequest.exam(model);
          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;
        }
      });
    },
  },
};
</script>

   <style lang="scss" scoped>
.relation {
  .po {
    position: relative;
    width: 100%;
    box-sizing: border-box;
    height: 100%;
  }
  .item {
    height: 32px;
    line-height: 32px;
    &.lan {
      margin: 0 35px 0 15px;
      color: #63cbe7;
      font-weight: bold;
    }
  }
  .myCard {
    border-radius: 4px;
    border: 1px solid #e6ebf5;
    background-color: #ffffff;
    padding: 18px;
    color: #303133;
    box-sizing: border-box;
    // margin: 0 20px;
  }
  .excelUploadBox {
    position: relative;
    width: 100%;
    height: 120px;
    line-height: 120px;

    box-sizing: border-box;
    &:hover {
      cursor: pointer;
    }
    .el-icon-receiving {
      width: 100%;
      text-align: center;
      height: 50px;
      display: block;
      font-size: 32px;
      line-height: 90px;
      color: #d3d4d6;
    }
    .boxM {
      width: 100%;
      display: block;
      text-align: center;
      line-height: 65px;
      height: 60px;
      color: #909399;
    }
  }
}
</style>
