<template>
  <div class="card table-box" style="padding: 0 40px">
    <div class="flex justify-end mt-2">
        <template v-if="route.query.id">
          <el-button type="warning" plain size="mini" v-print="printContent"
            >打印客户信息
          </el-button>
          <el-button type="warning" plain size="mini" v-print="printContentWd" :disabled="!form.lending.length"
            >打印网贷信息
          </el-button>
          <el-button type="warning" plain size="mini" v-print="printContentXyk" :disabled="!form.creditCard.length"
            >打印信用卡信息
          </el-button>
        </template>
        <el-button type="primary" @click="submit()" v-if="form.complete !== 'Y'">保存</el-button>
        <!-- <template v-if="route.query.id"> -->
    </div>
    <p class=" text-lg text-center mb-5">客户信息</p>
    <!-- <div class=" text-xs flex justify-around"><span class=" ml-5">收单单位：</span><span class=" ml-5">收单时间：</span></div> -->
    <table>
      <tbody>
        <tr>
          <td class="label">录入人</td>
          <td colspan="2"><el-input class="line-input" v-model="form.inputUserName" placeholder="" disabled/></td>
          <td class="label">推荐人</td>
          <td colspan="2"><el-input class="line-input" v-model="form.referee" placeholder="" :disabled="form.complete === 'Y'"/></td>
        </tr>
        <tr>
          <td class="label">部门</td>
          <td colspan="2">
            <el-input class="line-input" v-model="form.inputOrg" placeholder="" disabled />
          </td>
          <td class="label">角色</td>
          <td colspan="2"><el-input class="line-input" v-model="form.inputRole" placeholder="" disabled /></td>
        </tr>
        <tr>
          <td class="label">姓名</td>
          <td colspan="2"><el-input class="line-input" v-model="form.name" placeholder="" :disabled="form.complete === 'Y'"/></td>
          <td class="label">年龄</td>
          <td colspan="2"><el-input class="line-input" v-model="form.age" placeholder="" :disabled="form.complete === 'Y'"/></td>
        </tr>
        <tr>
          <td class="label">身份证号</td>
          <td colspan="2">
            <div class="flex items-center">
              <el-input class="line-input" v-model="form.idCard" placeholder="" :disabled="form.complete === 'Y'">
              </el-input>
              <el-button :icon="Search" @click="handleQuery" :disabled="form.complete === 'Y'"></el-button>
            </div>
          </td>
          <td class="label">属相</td>
          <td colspan="2"><el-input class="line-input" v-model="form.zodiac" placeholder="" :disabled="form.complete === 'Y'"/></td>
        </tr>
        <tr>
          <td class="label">婚姻状况</td>
          <td colspan="2">
            <el-select v-model="form.marriage" class="line-input" placeholder="" :disabled="form.complete === 'Y'">
              <el-option
                :label="item.label"
                v-for="(item, index) in Marriage" :key="index"
                :value="item.value"
              />
            </el-select>
          </td>
          <td class="label">电话</td>
          <td colspan="2"><el-input class="line-input" v-model="form.phone" placeholder="" :disabled="form.complete === 'Y'"/></td>
        </tr>
        <tr>
          <td class="label">学历</td>
          <td colspan="2"><el-input class="line-input" v-model="form.qualification" placeholder="" :disabled="form.complete === 'Y'"/></td>
          <td class="label">职业</td>
          <td colspan="2"><el-input class="line-input" v-model="form.career" placeholder="" :disabled="form.complete === 'Y'"/></td>
        </tr>
        <tr>
          <td class="label">是否为公检法系统人员、教师、医生、律师、企业法人</td>
          <td colspan="2">
            <el-radio-group v-model="form.functionary" :disabled="form.complete === 'Y'">
                <el-radio value="Y">是</el-radio>
                <el-radio value="N">否</el-radio>
            </el-radio-group></td>
          <td class="label">如职业为企事业单位人员是否同意催收</td>
          <td colspan="2"><el-radio-group v-model="form.collection" :disabled="form.complete === 'Y'">
                <el-radio value="Y">是</el-radio>
                <el-radio value="N">否</el-radio>
            </el-radio-group><br />
            企事业单位的需客户本人同意纪委联系与谈话、去单位或者给单位打电话催收</td>
        </tr>
        <tr>
          <td class="label">电子邮箱</td>
          <td colspan="2"><el-input class="line-input" v-model="form.email" placeholder="" :disabled="form.complete === 'Y'"/></td>
          <td class="label">性别</td>
          <td colspan="2"><el-select v-model="form.sex" class="line-input" placeholder="" :disabled="form.complete === 'Y'">
              <el-option
                :label="item.label"
                v-for="(item, index) in Sex" :key="index"
                :value="item.value"
              />
            </el-select></td>
        </tr>
        <tr>
          <td class="label">预留工作单位</td>
          <td colspan="2"><el-input class="line-input" v-model="form.reserveWorkUnit" placeholder="" :disabled="form.complete === 'Y'"/></td>
          <td class="label">预留家庭住址</td>
          <td colspan="2"><el-input class="line-input" v-model="form.reserveAddress" placeholder="" :disabled="form.complete === 'Y'"/></td>
        </tr>
        <tr>
          <td class="label">是否有起诉案件</td>
          <td colspan="2">
            <el-radio-group v-model="form.hasSueCase" :disabled="form.complete === 'Y'">
                <el-radio value="Y">是</el-radio>
                <el-radio value="N">否</el-radio>
              </el-radio-group>
            </td>
          <td class="label">案件描述</td>
          <td colspan="2"><el-input class="line-input" v-model="form.caseDesc" placeholder="" :disabled="form.complete === 'Y'"/></td>
        </tr>
        <tr>
          <td class="label">打卡收入</td>
          <td colspan="2"><el-input class="line-input" v-model="form.checkInIncome" placeholder="" :disabled="form.complete === 'Y'"/></td>
          <td class="label">打卡银行</td>
          <td colspan="2"><el-input class="line-input" v-model="form.checkInBank" placeholder="" :disabled="form.complete === 'Y'"/></td>
        </tr>
        <tr>
          <td class="label">打卡银行和借款银行是否为同一银行</td>
          <td colspan="5">
            <el-radio-group v-model="form.borrowCheckInBank" :disabled="form.complete === 'Y'">
                <el-radio value="Y">是</el-radio>
                <el-radio value="N">否</el-radio>
              </el-radio-group>
          </td>
        </tr>
        <tr>
          <td class="label">个人及夫妻名下车辆数量</td>
          <td colspan="2"><el-input class="line-input" v-model="form.carNum" placeholder="" :disabled="form.complete === 'Y'"/></td>
          <td class="label">个人及夫妻名下房产数量</td>
          <td colspan="2"><el-input class="line-input" v-model="form.houseNum" placeholder="" :disabled="form.complete === 'Y'"/></td>
        </tr>
        <tr>
          <td class="label">个人及夫妻名下车辆总价值</td>
          <td colspan="2"><el-input class="line-input" v-model="form.carPrice" placeholder="" :disabled="form.complete === 'Y'"/></td>
          <td class="label">个人及夫妻名下房产总价值</td>
          <td colspan="2"><el-input class="line-input" v-model="form.housePrice" placeholder="" :disabled="form.complete === 'Y'"/></td>
        </tr>
        <tr>
          <td class="label">公积金及金额</td>
          <td colspan="2"><el-input class="line-input" v-model="form.providentFund" placeholder="" :disabled="form.complete === 'Y'"/></td>
          <td class="label">月收入</td>
          <td colspan="2"><el-input class="line-input" v-model="form.monthlyIncome" placeholder="" :disabled="form.complete === 'Y'"/></td>
        </tr>
        <tr>
          <td class="label">是否有理财型保单 、股票、基金 、大额存款</td>
          <td colspan="2">
            <el-radio-group v-model="form.hasBigQuota" :disabled="form.complete === 'Y'">
                <el-radio value="Y">是</el-radio>
                <el-radio value="N">否</el-radio>
              </el-radio-group>
            </td>
          <td class="label">具体描述</td>
          <td colspan="2"><el-input class="line-input" v-model="form.bigQuotaDesc" placeholder="" :disabled="form.complete === 'Y'"/></td>
        </tr>
        <tr>
          <td class="label">是否有营业执照</td>
          <td colspan="2">
            <el-radio-group v-model="form.hasBusinessLicense" :disabled="form.complete === 'Y'">
                <el-radio value="Y">是</el-radio>
                <el-radio value="N">否</el-radio>
            </el-radio-group>
          </td>
          <td class="label">子女工作是否需要政审</td>
          <td colspan="2">
            <el-radio-group v-model="form.needPoliticalReview" :disabled="form.complete === 'Y'">
                <el-radio value="Y">是</el-radio>
                <el-radio value="N">否</el-radio>
            </el-radio-group>
          </td>
        </tr>
        <tr>
          <td class="label">贷款类型</td>
          <td colspan="5"
            >是否为抵押类贷款，人保贷款，公积金贷款，经营贷，担保、联名担保、保证类贷款，保险类贷款（保单贷），对应名下有理财保险，分红保险，现金分期，装修贷，网贷/信用贷/信用卡与资产相关联的（如与房、车、营业执照（法人/个体）、商铺、公积金等），先息后本、按期结息自由还本<br />
            <el-radio-group v-model="form.hasLoan" :disabled="form.complete === 'Y'">
                <el-radio value="Y">是</el-radio>
                <el-radio value="N">否</el-radio>
            </el-radio-group>
          </td>
        </tr>
        <tr>
          <td class="label">信用卡数量</td>
          <td colspan="2"><el-input class="line-input" v-model="cardConfig.data.length" placeholder="" disabled /></td>
          <td class="label">信用贷、网贷机构数量</td>
          <td colspan="2"><el-input class="line-input" v-model="creditArr.length" placeholder="" disabled/></td>
        </tr>
        <tr>
          <td class="label">特殊原因备注</td>
          <td colspan="5"><el-input class="line-input" v-model="form.remark" placeholder="" :disabled="form.complete === 'Y'"/></td>
        </tr>
      </tbody>
    </table>
    <p class="text-center my-3 py-1" style="background: #bdd6ec;">信用卡网贷状况统计*<span class=" text-xs text-red-600">(涉及金额部分单位为：元)</span></p>
    <div class="creditcard">
        <!-- <ProTable
            :config="cardConfig"
            :data="cardArr"
            :showPagination="false"
            :showToolBar="false"
        >
        <template #table_top>
            
        </template>
        </ProTable> -->
        <div class="flex justify-between mb-3">
                <div class="flex items-center">
                    <div class="ml-5">信用卡数量</div>
                    <div>
                        <el-input disabled v-model="cardConfig.data.length" >
                            <template #append>张</template>
                        </el-input>
                    </div>

                    <div class="ml-10">信用卡欠款合计</div>
                    <div>
                        <el-input disabled v-model="cardSUM" >
                        </el-input>
                    </div>
                </div>
                <div>
                    <el-button type="primary" @click="pushCreditcard({})" :disabled="form.complete === 'Y'">新建信用卡</el-button>
                </div>
            </div>
        <vxe-grid v-bind="cardConfig" />
    </div>
    <div class="credit">
        <ProTable
            :config="creditConfig"
            :data="creditArr"
            :showPagination="false"
            :showToolBar="false"
        >
        <template #table_top>
            <div class="flex justify-between mb-3">
                <div class="flex items-center">
                    <div class="ml-5">信用贷、网贷机构数量</div>
                    <div>
                        <el-input disabled v-model="creditArr.length" >
                            <template #append>张</template>
                        </el-input>
                    </div>

                    <div class="ml-10">信用贷、网贷欠款合计</div>
                    <div>
                        <el-input disabled v-model="creditSUM" >
                        </el-input>
                    </div>
                </div>
                <div>
                    <el-button type="primary" @click="pushCredit({})" :disabled="form.complete === 'Y'">新建网贷&信用贷</el-button>
                </div>
            </div>
        </template>
        </ProTable>
    </div>
    <table>
      <tbody>
        <tr>
          <td class="label">合计欠款总额</td>
          <td colspan="5">{{creditSUM + cardSUM}}</td>
        </tr>
      </tbody>
    </table>
    <Credit
      ref="CreditRef"
      @success="changeCredit"
    ></Credit>
    <Creditcard
      ref="CreditcardRef"
      @success="changeCreditcard"
    ></Creditcard>
    <div >
    <div style="overflow: hidden;width: 0;height: 0;">
      <div id="customerStatic" style="padding: 10px">
        <h1 style="text-align: center;font-size: 20px">信用卡、网贷状况统计表</h1>
        <table style="table-layout:fixed">
          <customerPrint :data="form"></customerPrint>
          <cardAndCredit :data="form"></cardAndCredit>
          <!-- <productOrderDetail :workOrderTable="workOrderTable[index]" style="page-break-after:always"></productOrderDetail> -->
        </table>
      </div>
      <div id="customerStaticWd" style="padding: 10px">
        <h1 style="text-align: center;font-size: 20px">客户信息收集表(信用贷、网贷版)</h1>
        <table style="table-layout:fixed; page-break-after:always">
          <customerPrint :data="form"></customerPrint>
          <template v-for="(item, index) in form.lending" :key="'lending' + index">
            <creditPrint :data="item" :index="index" :sum="form.lending.length" style="page-break-after:always"></creditPrint>
          </template>
        </table>
      </div>
      <div id="customerStaticXyk" style="padding: 10px">
        <h1 style="text-align: center;font-size: 20px">客户信息收集表(信用卡)</h1>
        <table style="table-layout:fixed; page-break-after:always">
          <customerPrint :data="form"></customerPrint>
          <template v-for="(item, index) in form.creditCard" :key="'creditCard' + index">
              <cardPrint :data="item" :index="index" :sum="form.creditCard.length" style="page-break-after:always"></cardPrint>
          </template>
        </table>
      </div>
    </div>
    </div>
    <idCardModel ref="idCardModelRef"/>
  </div>
</template>
<script setup name="Customer" lang="jsx">
  import { Search } from '@element-plus/icons-vue';
  import { useTabsStore } from '@/stores/modules/tabs';
  import { ElButton, ElTag, ElMessage } from 'element-plus';
  import Credit from './Credit.vue';
  import { saveCustomer, getgetByIdCustomer, getDebtInfo } from '@/api/customer';
  import { useRoute } from 'vue-router';
  import { useRouter } from 'vue-router';
  import { useUserStore } from '@/stores/modules/user';
  import Creditcard from './Creditcard.vue';
  import idCardModel from './idCardModel.vue';
  import customerPrint from './customerPrint.vue';
  import cardAndCredit from './cardAndCredit.vue';
  import creditPrint from './creditPrint.vue';
  import { getdepartmentTree } from '@/api/departmentManage';
  import cardPrint from './cardPrint.vue';
import { ref, computed, reactive, onBeforeMount } from 'vue';
import { useDict } from '@/hooks/useDict';
const userStore = useUserStore();
const { LoanStatus, Marriage,Sex } = useDict("LoanStatus", "Marriage", "Sex");
const idCardModelRef = ref()
const printContent = ref({
  id: 'customerStatic',
  // preview: true, // 预览工具是否启用
  // previewTitle: '储能服务费结算单', // 预览页面的标题
  popTitle: '',
  extraHead: ``,
  isRetainOriginData: true, // 是否保留原始数据
  preview: false, // 是否开启预览
  beforeOpenCallback: () => {
    console.log('开始打印之前的callback')
  }
})
const departlist = ref([]);
const printContentWd = ref({
  id: 'customerStaticWd',
  // preview: true, // 预览工具是否启用
  // previewTitle: '储能服务费结算单', // 预览页面的标题
  popTitle: '',
  extraHead: ``,
  isRetainOriginData: true, // 是否保留原始数据
  preview: false, // 是否开启预览
  beforeOpenCallback: () => {
    console.log('开始打印之前的callback')
  }
})
const printContentXyk = ref({
  id: 'customerStaticXyk',
  // preview: true, // 预览工具是否启用
  // previewTitle: '储能服务费结算单', // 预览页面的标题
  popTitle: '',
  extraHead: ``,
  isRetainOriginData: true, // 是否保留原始数据
  preview: false, // 是否开启预览
  beforeOpenCallback: () => {
    console.log('开始打印之前的callback')
  }
})
getdepartmentTree().then(res => {
  if (res.success) {
    departlist.value = res.result
  }
})
const form = ref({
  "name": "",
  "age": 0,
  "idCard": "",
  "zodiac": "",
  "sex": "",
  "marriage": "",
  "phone": "",
  "qualification": "",
  "hasBigQuota": "N",
  "career": "",
  "functionary": "N",
  "collection": "N",
  "email": "",
  "monthlyIncome": 0,
  "reserveAddress": "",
  "hasSueCase": "N",
  "caseDesc": "",
  "checkInIncome": 0,
  "checkInBank": "",
  "borrowCheckInBank": "N",
  "carNum": 0,
  "carPrice": 0,
  "houseNum": 0,
  "housePrice": 0,
  "providentFund": 0,
  "bigQuotaDesc": 0,
  "hasBusinessLicense": "N",
  "needPoliticalReview": "N",
  "hasLoan": "N",
  "remark": "",
  "creditCard": [],
  lending: [],
  inputUserName: userStore.userInfo.username,
  inputUser: userStore.userInfo,
  "inputOrg": "",
  "inputRole": "",
  "referee": "",
  "tenantId": 0,
  "tenant": {
  },
  reserveWorkUnit: ''
});
const handlePrint = () => {
  document.getElementById('printbtn').click()
}
const router = useRouter();
const tabStore = useTabsStore();
const route = useRoute();
const CreditRef = ref();
const CreditcardRef = ref();
const creditArr = ref([]);
const cardSUM = computed(() => cardConfig.data.reduce((pre, cur) => pre + Number(cur.debt),0));
const creditSUM = computed(() => creditArr.value.reduce((pre, cur) => pre + Number(cur.debt),0));
const pushCreditcard = ({row, rowIndex}) => {
    CreditcardRef.value.openModal(row, rowIndex, form.value.complete
    );
};
const pushCredit = ({row, rowIndex}) => {
    CreditRef.value.openModal(row, rowIndex, form.value.complete
    );
};
const handleQuery = () => {
  // idCardModelRef.value.openModal()
  if (!form.value.idCard) {
    ElMessage.warning({
      message: '请填写身份证号',
      plain: true,
    });
    return
  }
  getDebtInfo(form.value.idCard).then(res => {
    if(res.result) {
      res.result.creditCard = []
      res.result.lending = []
      form.value = res.result
      cardConfig.data = res.result.creditCard
      creditArr.value = res.result.lending
    } else {
      ElMessage.warning({
        message: '您输入的身份证不存在，请手工输入详细信息',
        plain: true,
      });
    }
  })
  
}
const changeCredit = (row, index, del) => {
  if (del) {
    const arr = JSON.parse(JSON.stringify(creditArr.value))
    arr.splice(index, 1)
    creditArr.value = arr
    form.value.lending = arr
    return
  }
  if (index || index === 0) {
    const arr = JSON.parse(JSON.stringify(creditArr.value))
    arr[index] = row
    creditArr.value = arr
  } else {
    creditArr.value.push(row)
  }
  form.value.lending = creditArr.value

}
const changeCreditcard = (row, index, del) => {
  if (del) {
    const arr = JSON.parse(JSON.stringify(cardConfig.data))
    arr.splice(index, 1)
    cardConfig.data = arr
    form.value.creditCard = arr
    return
  }
  if (index || index === 0) {
    const arr = JSON.parse(JSON.stringify(cardConfig.data))
    arr[index] = row
    cardConfig.data = arr
  } else {
    cardConfig.data.push(row)
  }
  form.value.creditCard = cardConfig.data
}
const submit = () => {
    saveCustomer({...form.value, creditCard: cardConfig.data, lending:creditArr.value}).then(res => {
      if (res.success) {
        ElMessage.success({
          message: '保存成功',
          plain: true,
        });
        tabStore.removeTabs(route.fullPath).then(res => {
          router.push({
              path: '/infoGather/customerGather'
          });
        });
      }
    })
}
const query = async (type) => {
  console.log('route.query.id', route.query)
    getgetByIdCustomer(route.query.id).then(res => {
      if(res.success) {
        form.value = res.result
        cardConfig.data = res.result.creditCard
        creditArr.value = res.result.lending
      }
    })
}
onBeforeMount(async () => {
    if (route.query.id) {
      query()
    }
})
const cardConfig = reactive({
    align: 'center',
    onCellClick: pushCreditcard,
    minHeight: 250,
    rowConfig: {
      height: 40,
    },
    cellConfig: {
      height: 40,
    },
    columns: [
      { type: 'seq', width: 60, title: '序号', slots: {
          default: ({ row, rowIndex }) => {
            return (
              <>
                {rowIndex + 1}
              </>
            );
          },
        }  
      },
      {
        field: 'bank',
        width: 100,
        title: '发卡银行',
        showOverflow: 'tooltip',
      },
      {
        field: 'quota',
        width: 110,
        title: '授信额度',
        showOverflow: 'tooltip',
      },
      {
        field: 'usedQuota',
        width: 110,
        title: '已用额度',
        showOverflow: 'tooltip',
      },{
        field: 'debt',
        width: 110,
        title: '未还金额',
        showOverflow: 'tooltip',
      },{
        field: 'bigQuotaStagesAmount',
        width: 110,
        title: '大额专项欠款金额',
        showOverflow: 'tooltip',
      },{
        field: 'beOverduePeriod',
        width: 110,
        title: '逾期期数',
        showOverflow: 'tooltip',
      },{
        field: 'sixDevUsedQuota',
        width: 110,
        title: '近6个月平均使用额度',
        showOverflow: 'tooltip',
      },
      {
        field: 'hasNegotiate',
        width: 110,
        title: '有无协商方案',
        showOverflow: 'tooltip',
        slots: {
          default: ({ row }) => {
            return <ElTag>{row.hasNegotiate == 'Y' ? '是' : '否'}</ElTag>;
          },
        },
      },
      {
        field: 'creditCardStatus',
        title: '卡片状态(逾期/正常)',
        slots: {
          default: ({ row }) => {
            return (
              <>
                {row.creditCardStatus
                  ? LoanStatus.value?.find((v) => v.value === row.creditCardStatus)?.label
                  : ''}
              </>
            );
          },
        },
        showOverflow: 'tooltip',
      },
      {
        field: 'operation',
        title: '操作',
        width: 100,
        fixed: 'right',
        slots: {
          default({ row, rowIndex }) {
            return (
              <>
                <ElButton type="primary" link onClick={() => changeCreditcard(row, rowIndex, true)} disabled={form.value.complete === 'Y'}>
                  删除
                </ElButton>
              </>
            );
          },
        },
      },
    ],
    data: [],
    toolbarConfig: { enabled: false },
  });
  const creditConfig = reactive({
    onCellClick: pushCredit,
    minHeight: 200,
    columns: [
    { type: 'seq', width: 60, title: '序号', slots: {
          default: ({ row, rowIndex }) => {
            return (
              <>
                {rowIndex + 1}
              </>
            );
          },
        }  
      },
      {
        field: 'loanPlatform',
        width: 100,
        title: '贷款机构',
        showOverflow: 'tooltip',
      },
      {
        field: 'quota',
        width: 110,
        title: '审批额度',
        showOverflow: 'tooltip',
      },
      {
        field: 'lendingNum',
        width: 110,
        title: '贷款笔数',
        showOverflow: 'tooltip',
      },{
        field: 'period',
        width: 110,
        title: '贷款期数',
        showOverflow: 'tooltip',
      },{
        field: 'repayPeriod',
        width: 110,
        title: '已还期数',
        showOverflow: 'tooltip',
      },{
        field: 'debt',
        width: 110,
        title: '未还金额',
        showOverflow: 'tooltip',
      },
      {
        field: 'kinship',
        title: '状态(逾期/正常)',
        showOverflow: 'tooltip',
        slots: {
          default: ({ row }) => {
            return (
              <>
                {row.loanStatus
                  ? LoanStatus.value?.find((v) => v.value === row.loanStatus)?.label
                  : ''}
              </>
            );
          },
        },
      },
      {
        field: 'operation',
        title: '操作',
        width: 100,
        fixed: 'right',
        slots: {
          default({ row, rowIndex }) {
            return (
              <>
                <ElButton type="primary" link onClick={() => changeCredit(row, rowIndex, true)} disabled={form.value.complete === 'Y'}>
                  删除
                </ElButton>
              </>
            );
          },
        },
      }
    ],
    toolbarConfig: { enabled: false },
  });
</script>
<style lang="scss" scoped>
table {
  width: calc(100%);
  border-collapse: collapse;
}
td {
  border: 1px solid rgba(5, 5, 5, 0.06);
  background: #fff;
  color: #606268;
  width: 240px;
  line-height: 11px;
  height: 40px;
  font-size: 14px;
  padding-left: 5px;
  &.label {
    text-align: center;
    background: #dfeaf5;
    color: #000;
  }
}
.creditcard {
    :deep(.card) {
        // background: #fff3cc;
    }
}
.credit {
    :deep(.card) {
        // background: #e1f1d9;
    }
}
</style>