<template>
  <ele-modal
    custom-class="ele-dialog-form long-dialog-form"
    :centered="true"
    v-if="visible"
    :visible.sync="visible"
    :title="title"
    :close-on-click-modal="false"
    width="80%"
    @close="cancel"
  >
    <el-form ref="form" :model="form" :rules="rules" label-width="120px">
      <headerTitle title="合同信息"></headerTitle>
      <el-row>
        <el-col :span="12">
          <el-form-item
            label="合同类型"
            prop="type"
            style="margin-bottom: 22px"
          >
            <DictSelection
              dictName="合同类型"
              clearable
              v-model="form.type"
              @itemChange="dictChange"
              :disabled="create"
            >
            </DictSelection>
          </el-form-item>
          <el-form-item
            label="合同名称"
            prop="contractName"
            style="margin-bottom: 22px"
          >
            <el-input
              clearable
              v-model="form.contractName"
              placeholder="请输入"
            />
          </el-form-item>
          <el-form-item
            label="合同编号"
            prop="contractNumber"
            style="margin-bottom: 22px"
          >
            <el-input
              clearable
              v-model="form.contractNumber"
              placeholder="请输入"
            />
          </el-form-item>
          <el-form-item prop="contractFile" label="合同附件">
            <fileUpload
              v-model="form.contractFile"
              module="main"
              :showLib="false"
              :limit="10"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item
            label="合同分类"
            prop="categoryId"
            style="margin-bottom: 22px; width: 340px"
          >
            <ele-tree-select
              :data="categoryTreeList"
              v-model="form.categoryId"
              valueKey="id"
              labelKey="name"
              @change="treeChange"
              placeholder="请选择"
              default-expand-all
            />
          </el-form-item>
          <el-form-item
            label="签订日期"
            prop="contractStartDate"
            style="margin-bottom: 22px"
          >
            <el-date-picker
              v-model="form.contractStartDate"
              @change="setDeliveryDays"
              type="date"
              placeholder="选择日期"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item
            label="结束日期"
            prop="contractEndDate"
            style="margin-bottom: 22px"
          >
            <el-date-picker
              v-model="form.contractEndDate"
              type="date"
              placeholder="选择日期"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item
            :label="form.type == '2' ? '付款类型' : '收款类型'"
            prop="receiptPaymentType"
            style="margin-bottom: 22px"
          >
            <el-select v-model="form.receiptPaymentType" placeholder="请选择">
              <el-option
                v-for="item in paymentTypeOptions"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <headerTitle title="基本信息"></headerTitle>
      <el-row>
        <el-col :span="12">
          <el-form-item
            label="甲方名称"
            prop="partaName"
            style="margin-bottom: 22px"
          >
            <template v-if="form.type == '2'">
              <el-input
                clearable
                v-model="form.partaName"
                placeholder="请输入"
                v-if="enterprisePage.length <= 1"
              />
              <el-select
                v-if="enterprisePage.length > 1"
                style="width: 100%"
                v-model="form.partaName"
                placeholder="请选择"
                @change="getEnterprise(1)"
              >
                <el-option
                  v-for="item in enterprisePage"
                  :key="item.id"
                  :label="item.name"
                  :value="item.name"
                >
                </el-option>
              </el-select>
            </template>
            <template v-else>
              <el-input
                clearable
                v-model="form.partaName"
                @click.native="handParent"
                placeholder="请选择"
              />
            </template>
          </el-form-item>
          <el-form-item
            label="甲方统一社会信用代码"
            prop="partaUnifiedSocialCreditCode"
            label-width="160px"
            style="margin-bottom: 22px"
          >
            <el-input
              clearable
              v-model="form.partaUnifiedSocialCreditCode"
              placeholder="请输入"
            />
          </el-form-item>
          <el-form-item
            label="甲方联系人"
            prop="partaLinkName"
            style="margin-bottom: 22px"
          >
            <template v-if="form.type == '2'">
              <el-input
                clearable
                v-model="form.partaLinkName"
                @click.native="handHead"
                placeholder="请选择"
              />
            </template>
            <template v-else>
              <el-select
                v-model="form.partaLinkName"
                placeholder="请选择"
                @change="onchangeLink"
                @focus="selectFocus"
              >
                <el-option
                  v-for="item in linkNameOptions"
                  :key="item.id"
                  :label="item.linkName"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </template>
          </el-form-item>
          <el-form-item
            label="甲方电话"
            prop="partaTel"
            style="margin-bottom: 22px"
          >
            <el-input
              clearable
              :maxlength="20"
              v-model="form.partaTel"
              placeholder="请输入"
            />
          </el-form-item>
          <el-form-item
            label="甲方传真"
            prop="partaFax"
            style="margin-bottom: 22px"
          >
            <el-input clearable v-model="form.partaFax" placeholder="请输入" />
          </el-form-item>
          <el-form-item
            label="	甲方Email"
            prop="partaEmail"
            style="margin-bottom: 22px"
          >
            <el-input
              clearable
              v-model="form.partaEmail"
              placeholder="请输入"
            />
          </el-form-item>
          <el-form-item
            label="甲方地址"
            prop="partaAddress"
            style="margin-bottom: 22px"
          >
            <el-input
              clearable
              v-model="form.partaAddress"
              placeholder="请输入"
            />
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <template v-if="form.type == '2'">
            <el-form-item
              label="乙方名称"
              prop="partbName"
              style="margin-bottom: 22px"
            >
              <el-input
                clearable
                v-model="form.partbName"
                @click.native="handSupplier"
                placeholder="请输入"
              />
            </el-form-item>
          </template>
          <template v-else>
            <el-form-item
              label="乙方名称"
              prop="partbName"
              style="margin-bottom: 22px"
            >
              <el-input
                clearable
                v-model="form.partbName"
                placeholder="请输入"
                v-if="enterprisePage.length <= 1"
              />
              <el-select
                v-if="enterprisePage.length > 1"
                style="width: 100%"
                v-model="form.partbName"
                placeholder="请选择"
                @change="getEnterprise(1)"
              >
                <el-option
                  v-for="item in enterprisePage"
                  :key="item.id"
                  :label="item.name"
                  :value="item.name"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </template>

          <el-form-item
            label="乙方统一社会信用代码"
            prop="partbUnifiedSocialCreditCode"
            label-width="160px"
            style="margin-bottom: 22px"
          >
            <el-input
              clearable
              v-model="form.partbUnifiedSocialCreditCode"
              placeholder="请输入"
            />
          </el-form-item>
          <el-form-item
            label="乙方联系人"
            prop="partbLinkName"
            style="margin-bottom: 22px"
          >
            <template v-if="form.type == '2'">
              <el-select
                v-model="form.partbLinkName"
                placeholder="请选择"
                @change="onchangeLink"
                @focus="selectFocus"
              >
                <el-option
                  v-for="item in linkNameOptions"
                  :key="item.id"
                  :label="item.linkName"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </template>
            <template v-else>
              <el-input
                clearable
                v-model="form.partbLinkName"
                @click.native="handHead"
                placeholder="请输入"
              />
            </template>
          </el-form-item>
          <el-form-item prop="partbTel" label="乙方联系电话">
            <el-input clearable v-model="form.partbTel" placeholder="请输入" />
          </el-form-item>
          <el-form-item prop="partbFax" label="乙方传真">
            <el-input clearable v-model="form.partbFax" placeholder="请输入" />
          </el-form-item>

          <el-form-item
            label="乙方Email"
            prop="partbEmail"
            style="margin-bottom: 22px"
          >
            <el-input
              clearable
              v-model="form.partbEmail"
              placeholder="请输入"
            />
          </el-form-item>

          <el-form-item
            label="乙方地址"
            prop="partbAddress"
            style="margin-bottom: 22px"
          >
            <el-input
              clearable
              v-model="form.partbAddress"
              placeholder="请输入"
            />
          </el-form-item>
        </el-col>
      </el-row>

      <headerTitle title="产品清单" style="margin-top: 30px"></headerTitle>
      <inventoryTable
        ref="inventoryTable"
        :contractStartDate="this.form.contractStartDate"
      ></inventoryTable>
      <headerTitle
        :title="form.type == '2' ? '付款清单' : '收款清单'"
        style="margin-top: 30px"
      ></headerTitle>
      <paymentList ref="paymentListTable" />
    </el-form>

    <div slot="footer" class="footer">
      <el-button type="primary" @click="save">保存</el-button>
      <el-button type="primary" @click="save('sub')">提交</el-button>
      <el-button @click="cancel">返回</el-button>
    </div>

    <parentList ref="parentRef" @changeParent="changeParent"></parentList>
    <supplierList
      ref="supplierListRef"
      :classType="2"
      @changeParent="changeSupplier"
    ></supplierList>
    <head-list ref="headRef" @changeParent="changePersonel"></head-list>
  </ele-modal>
</template>

<script>
  import { emailReg, phoneReg, numberReg } from 'ele-admin';
  import { acceptUnpackoptions } from '@/enum/dict';
  import inventoryTable from './inventoryTable.vue';
  import { categoryData } from 'element-china-category-data';
  import fileUpload from '@/components/upload/fileUpload';
  import { cityData } from 'ele-admin/packages/utils/regions';
  import dictMixins from '@/mixins/dictMixins';
  import deptSelect from '@/components/CommomSelect/dept-select.vue';
  import personSelect from '@/components/CommomSelect/person-select.vue';
  import parentList from '@/views/saleManage/contact/components/parentList.vue';
  import {
    getDetail,
    UpdateInformation,
    addInformation,
    submit
  } from '@/api/contractManage/contractBook';
  import { getcontactlink } from '@/api/saleManage/businessFollow';
  import headList from '@/views/saleManage/businessOpportunity/components/headList.vue';
  import supplierList from '@/views/purchasingManage/supplierManage/components/parentList.vue';
  import paymentList from './paymentList.vue';
  import { copyObj } from '@/utils/util';
  import { enterprisePage } from '@/api/contractManage/contractBook';

  export default {
    props: {
      categoryTreeList: Array
    },
    mixins: [dictMixins],
    components: {
      fileUpload,
      headList,
      paymentList,
      inventoryTable,
      supplierList,
      deptSelect,
      parentList,
      personSelect
    },
    data() {
      let formDef = {
        id: '',
        contractEndDate: '',
        contractFile: [],
        contractName: '',
        contractNumber: '',
        contractStartDate: '',
        opportunityId: '',
        categoryName: '',
        categoryId: '',

        partaUnifiedSocialCreditCode: '',
        partbUnifiedSocialCreditCode: '',
        partaAddress: '',
        partaEmail: '',
        partaFax: '',
        partaId: '',
        partaLinkId: '',
        partaLinkName: '',
        partaName: '',
        partaTel: '',
        partbAddress: '',
        partbEmail: '',
        partbFax: '',
        partbId: '',
        partbLinkId: '',
        partbLinkName: '',
        partbName: '',
        partbTel: '',

        receiptPaymentType: '',
        sourceId: '',
        sourceType: '',
        totalPrice: null,
        type: '', //1=销售合同  2=采购合同
        typeName: ''
      };

      return {
        payWayOptions: [],
        delDetailIds: [],
        paymentTypeOptions: [
          { id: 1, name: '固定' },
          { id: 2, name: '分期' }
        ],
        linkNameOptions: [],
        acceptUnpackoptions,
        visible: false,
        title: '',
        row: {},
        activeName: 'base',
        formDef,
        form: copyObj(formDef),
        // removeBankList: [],
        // removeLinkList: [],
        tableBankData: [],
        tableLinkData: [],

        rules: {
          type: [
            { required: true, message: '请选择合同类型', trigger: 'change' }
          ],
          receiptPaymentType: [
            { required: true, message: '请选择收付款类型', trigger: 'change' }
          ],
          categoryId: [
            { required: true, message: '请选择合同分类', trigger: 'change' }
          ],
          contractNumber: [
            { required: true, message: '请输入自带编号', trigger: 'change' }
          ],
          contractName: [
            { required: true, message: '请输入合同名称', trigger: 'blur' }
          ],
          partaName: [
            { required: true, message: '请选择甲方名称', trigger: 'change' }
          ],
          partaLinkName: [
            { required: true, message: '请选择甲方联系人', trigger: 'change' }
          ],
          acceptUnpack: [
            { required: true, message: '请选择是否接受', trigger: 'change' }
          ],
          partaTel: [
            {
              required: true,
              pattern: numberReg,
              message: '请输入甲方联系电话',
              trigger: 'blur'
            }
          ],
          deliveryDate: [
            { required: true, message: '请选择交货日期', trigger: 'change' }
          ],

          partbName: [
            { required: true, message: '请输入乙方名称', trigger: 'change' }
          ],
          partbLinkName: [
            { required: true, message: '请输入乙方联系人', trigger: 'change' }
          ],
          partbTel: [
            {
              required: true,
              pattern: numberReg,
              message: '请输入乙方联系电话',
              trigger: 'blur'
            }
          ],
          partaEmail: [
            { pattern: emailReg, message: '邮箱格式不正确', trigger: 'blur' }
          ],
          contractStartDate: [
            {
              required: true,
              validator: this.validateStartDate,
              trigger: 'blur'
            }
          ],
          contractEndDate: [
            { validator: this.validateEndDate, trigger: 'blur' }
          ]
        },
        enterprise: {
          address: '',
          unifiedSocialCreditCode: '',
          tel: '',
          name: ''
        },
        options: {
          cityData,
          categoryData
        },
        // 提交状态
        loading: false,
        // 是否是修改
        isUpdate: false,

        // 组织机构树形结构数据
        groupTreeData: [],
        // 组织机构平铺数据
        groupData: [],
        enterprisePage: [],
        create: false,
        businessId:''
      };
    },
    created() {
      enterprisePage({
        pageNum: 1,
        size: 200
      }).then((res) => {
        this.enterprisePage = [];
        this.enterprisePage.push(...res.list);
        this.getEnterprise();
      });
    },

    methods: {
      //开始日期验证
      validateStartDate(rule, value, callback) {
        if (this.form.contractEndDate && value > this.form.contractEndDate) {
          callback(new Error('开始日期不能大于结束日期'));
        } else {
          callback();
        }
      },
      //结束日期验证
      validateEndDate(rule, value, callback) {
        if (
          this.form.contractEndDate &&
          this.form.contractStartDate &&
          value < this.form.contractStartDate
        ) {
          callback(new Error('结束日期不能小于开始日期'));
        } else {
          callback();
        }
      },

      //选择供应商
      changeSupplier(obj) {
        this.form = Object.assign({}, this.form, {
          partbId: obj.id,
          partbName: obj.name,
          partbAddress: obj.addressName + obj.address,
          partbLinkId: '',
          partbLinkName: '',
          partbEmail: '',
          partbTel: ''
        });
        this.getLinkInfo(obj.id);
      },
      //获取详情
      async getDetailData(id) {
        this.businessId = id;

        this.loading = true;
        const data = await getDetail(id);
        this.loading = false;
        if (data) {
          this.$nextTick(() => {
            let { contractVO } = data;
            this.form = contractVO;
            this.$refs.inventoryTable &&
              this.$refs.inventoryTable.putTableValue(data);
            this.$refs.paymentListTable &&
              this.$refs.paymentListTable.putTableValue(
                data.receiptPaymentList
              );
            this.getLinkInfo(
              data.type == '2' ? contractVO.partbId : contractVO.partaId
            );
          });
        }
      },
      //签订日期 更新
      setDeliveryDays() {
        this.$refs.inventoryTable.setDeliveryDays('', '', '', true);
      },

      //更新联系人数据
      async getLinkInfo(contactId) {
        const data = await getcontactlink({ contactId });
        if (data && data?.length) {
          this.linkNameOptions = data;
        }
      },
      selectFocus() {
        if (this.linkNameOptions.length === 0) {
          return this.$message.error('请先选择名称');
        }
      },
      //选择合同类型
      dictChange(val) {
        this.form = Object.assign({}, this.form, {
          typeName: val.dictValue,
          partaAddress: '',
          partaEmail: '',
          partaFax: '',
          partaId: '',
          partaLinkId: '',
          partaLinkName: '',
          partaName: '',
          partaTel: '',
          partbAddress: '',
          partbEmail: '',
          partbFax: '',
          partbId: '',
          partbLinkId: '',
          partbLinkName: '',
          partbName: '',
          partbTel: '',
          partaUnifiedSocialCreditCode: '',
          partbUnifiedSocialCreditCode: '',
          categoryName: '',
          categoryId: ''
        });
        this.getEnterprise();
      },
      getEnterprise(type) {
        let key = this.form.type == '1' || !this.form.type ? 'partb' : 'parta';
        let keyArr = [
          key + 'Name',
          key + 'UnifiedSocialCreditCode',
          key + 'Fax',
          key + 'Address'
        ];
        if (type === 1) {
          let data = this.enterprisePage.find(
            (item) => item.name == this.form[keyArr[0]]
          );
          this.form[keyArr[0]] = data.name;
          this.form[keyArr[1]] = data.unifiedSocialCreditCode;
          this.form[keyArr[2]] = data.fax;
          this.form[keyArr[3]] = data.address;
          return;
        }
        if (this.enterprisePage.length > 0) {
          console.log('dsds');
          this.form[keyArr[0]] =
            this.form[keyArr[0]] || this.enterprisePage[0].name;
          this.form[keyArr[1]] =
            this.form[keyArr[1]] ||
            this.enterprisePage[0].unifiedSocialCreditCode;
          this.form[keyArr[2]] =
            this.form[keyArr[2]] || this.enterprisePage[0].fax;
          this.form[keyArr[3]] =
            this.form[keyArr[3]] || this.enterprisePage[0].address;
        }
      },
      //选择合同分类
      treeChange(val) {
        //这里eladmin组件有bug，要手动验证下
        this.$set(this.form, 'categoryId', val);
        this.$refs.form.validateField('categoryId');
      },
      //选择下拉框
      onchangeLink(selectedOptions) {
        if (this.form.type == '2') {
          const option = this.linkNameOptions.find(
            (opt) => opt.id === selectedOptions
          );
          this.form = Object.assign({}, this.form, {
            partbEmail: option?.email,
            partbLinkName: option?.linkName || '',
            partbTel: option?.mobilePhone || option?.phone || '',
            partbLinkId: option?.id
          });
        } else {
          const option = this.linkNameOptions.find(
            (opt) => opt.id === selectedOptions
          );
          this.form = Object.assign({}, this.form, {
            partaEmail: option?.email,
            partaLinkName: option?.linkName || '',
            partaTel: option?.mobilePhone || option?.phone || '',
            partaLinkId: option?.id
          });
        }
      },

      handHead(title) {
        if (this.form.type == '2') {
          let item = {
            id: this.form.partaLinkId
          };
          this.$refs.headRef.open(item,0,title);
        } else {
          let item = {
            id: this.form.partbLinkId
          };
          this.$refs.headRef.open(item,0,title);
        }
      },

      //选择乙方人和采购合同下的甲方人回调
      changePersonel(obj,index, title) {

        if (this.form.type == '2') {
          this.$set(this.form, 'partaLinkId', obj.id);
          this.$set(this.form, 'partaLinkName', obj.name);
          this.$set(this.form, 'partaTel', obj.phone);
          this.$set(this.form, 'partaEmail', obj.email);
        } else {
          this.$set(this.form, 'partbLinkId', obj.id);
          this.$set(this.form, 'partbLinkName', obj.name);
          this.$set(this.form, 'partbTel', obj.phone);
          this.$set(this.form, 'partbEmail', obj.email);
        }
      },
      //选择客户回调
      changeParent(obj) {
        this.form = Object.assign({}, this.form, {
          partaId: obj.id,
          partaName: obj.name,
          partaAddress: obj.addressName + obj.address,
          partaLinkId: '',
          partaLinkName: '',
          partaEmail: '',
          partaTel: ''
        });
        this.getLinkInfo(obj.id);
      },

      //选择采购合同的乙方
      handSupplier() {
        let item = {
          id: this.form.partbId
        };
        this.$refs.supplierListRef.open(item);
      },
      handParent() {
        let item = {
          id: this.form.contactId
        };
        this.$refs.parentRef.open(item);
      },

      async open(type, row, create = false) {
        this.title = type === 'add' ? '新增' : '修改';
        this.row = row;
        this.visible = true;
        this.create = create;
        if (type == 'add') {
          this.isUpdate = false;
          if (create) {
            this.create = create;
            //核价单生成的合同
            this.$nextTick(() => {
              let { contractVO } = row;
              console.log(row, 'row');
              this.form = contractVO;
              this.$refs.inventoryTable &&
                this.$refs.inventoryTable.putTableValue(row);
              this.$refs.paymentListTable &&
                this.$refs.paymentListTable.putTableValue(
                  row.receiptPaymentList
                );
              this.getEnterprise();
              this.getLinkInfo(
                contractVO.type == '2' ? contractVO.partbId : contractVO.partaId
              );
            });
          }
        } else {
          this.isUpdate = true;
          this.getDetailData(row.id);
        }
      },

      salesmanChange(val, info) {
        this.otherForm.salesmanName = info.name;
      },
      settlementModeChange(info) {
        this.otherForm.settlementModeName = info.dictValue;
      },
      ifChiefChange(value, idx) {
        if (value === 1) {
          this.tableLinkData.forEach((e) => (e.ifChief = 0));
          this.tableLinkData[idx].ifChief = 1;
        }
      },

      getValidate() {
        return new Promise((resolve, reject) => {
          this.$refs.form.validate((valid) => {
            if (!valid) {
              reject(false);
            } else {
              resolve(true);
            }
          });
        });
      },
      getValidate() {
        return Promise.all([
          new Promise((resolve, reject) => {
            this.$refs.form.validate((valid) => {
              if (!valid) {
                reject(false);
              } else {
                resolve(true);
              }
            });
          }),
          new Promise((resolve, reject) => {
            this.$refs.inventoryTable.validateForm((valid) => {
              if (!valid) {
                reject(false);
              } else {
                resolve(true);
              }
            });
          }),
          new Promise((resolve, reject) => {
            this.$refs.paymentListTable.validateForm((valid) => {
              if (!valid) {
                reject(false);
              } else {
                resolve(true);
              }
            });
          })
        ]);
      },
      async save(type) {
        try {
          await this.getValidate();
          // 表单验证通过，执行保存操作
          this.loading = true;

          if (!this.isUpdate) {
            delete this.form.id;
          }
          let [totalPrice, discountTotalPrice] =
            this.$refs.inventoryTable.getPrice();
          this.form.totalPrice = totalPrice;
          this.form.discountTotalPrice = discountTotalPrice;
          if (this.form.categoryId) {
            this.form.categoryName = this.findNameById(
              this.categoryTreeList,
              this.form.categoryId
            );
          }

          let commitData = Object.assign(
            {},
            {
              contract: this.form,
              productList: this.$refs.inventoryTable.getTableValue(),
              receiptPaymentList: this.$refs.paymentListTable.getTableValue()
            }
          );
          if (this.isUpdate) {
            UpdateInformation(commitData)
              .then((res) => {
                this.loading = false;
                this.$message.success('修改成功');
                if (type === 'sub') {
                  this.contractBookSubmit(res);
                  return;
                }
                this.cancel();
                this.$emit('done');
              })
              .catch((e) => {
                //this.loading = false;
              });
          } else {
            addInformation(commitData)
              .then((res) => {
                this.loading = false;
                this.$message.success('新增成功');
                if (type === 'sub') {
                  this.contractBookSubmit(res);
                  return;
                }
                this.cancel();
                this.$emit('done');
              })
              .catch((e) => {
                //this.loading = false;
              });
          }
        } catch (error) {
          console.log(error);
          // 表单验证未通过，不执行保存操作
        }
      },
      contractBookSubmit(res) {
        submit({
          businessId: this.businessId || res,
          // productionSupervisorId
        }).then((res) => {
          this.cancel();
          this.$emit('done');
        });
      },
      cancel() {
        this.$nextTick(() => {
          this.activeName = 'base';
          // 关闭后，销毁所有的表单数据
          this.$refs['otherForm'] && this.$refs['otherForm'].resetFields();
          this.$refs['formRef'] && this.$refs['formRef'].resetFields();
          this.form = copyObj(this.formDef);
          this.$store.commit('concact/setDiscountAmount', 0);
          this.visible = false;
        });
      },
      //查找合同分类对应name
      findNameById(tree, targetId) {
        for (let i = 0; i < tree.length; i++) {
          const node = tree[i];
          if (node.id === targetId) {
            return node.name;
          }
          if (node.children && node.children.length > 0) {
            const name = this.findNameById(node.children, targetId);
            if (name) {
              return name;
            }
          }
        }
        return null;
      }
    }
  };
</script>
<style scoped lang="scss">
  .TotalAmount {
    font-size: 16px;
    padding-right: 30px;
  }
</style>
