<template>
    <div class="card content-box">
      <div class="navigation-box">
        <el-affix :offset="140">
            <div @click="anchor('baseinfo')" class="anchor-item">案人基本信息</div>
            <div @click="anchor('caserelation')" class="anchor-item">案件联系人</div>
            <div @click="anchor('casedetail')" class="anchor-item">案件明细</div>
            <div @click="anchor('callrecord')" class="anchor-item">跟进记录</div>
            <div @click="anchor('reducerecord')" class="anchor-item">减免记录</div>
            <div @click="anchor('splitrecord')" class="anchor-item">分期记录</div>
            <div @click="anchor('returnrecord')" class="anchor-item">还款记录</div>
            
        </el-affix>
      </div>
      <div class="content1">
        <div class="btn-grps">
            <el-button type="primary" >修复申请</el-button>
            <el-button type="primary" >减免申请</el-button>
            <el-button type="primary" >分期申请</el-button>
        </div>
        <div class="detail-steps">
            <el-steps style="max-width: 600px" :active="activeStep">
                <el-step :title="item.title" :description="item.desc" :class="{current: (index+1) === activeStep}" v-for="(item, index) in stepList" :key="item.title"/>
            </el-steps>
        </div>
        <div id="baseinfo">
            <div class="box-title">案人基本信息</div>
            <div class="box-content">
                <table>
                    <tr>
                        <td class="label">姓名</td>
                        <td>John Doe</td>
                        <td class="label">电话</td>
                        <td>30</td>
                        <td class="label">户籍区域</td>
                        <td>30</td>
                    </tr>
                    <tr>
                        <td class="label">证件号</td>
                        <td>johndoe@example.com</td>
                        <td class="label">户籍地址</td>
                        <td colspan="3">johndoe@example.com</td>
                    </tr>
                    <!-- Add more rows as needed -->
                </table>
            </div>
        </div>
        <div id="caserelation">
            <div class="box-title">案件联系人</div>
            <div class="box-content">
                <ProTable :config="relationConfig" :data="relationData" :showPagination="false" :showToolBar="false">
                </ProTable>
            </div>
        </div>
        <div id="casedetail">
            <div class="box-title">案件明细
                <el-button type="primary" @click="foldCaseTree"
                >展开/折叠
                </el-button>
            </div>
            <div class="box-content">
                <vxe-grid v-bind="caseDetailConfig" ref="caseDetailRef">
                    <template #expand_content="{ row }">
                        <div class="expand-box">
                            <div>User Info</div>
                            <div class="expand-table">
                                <table>
                                    <tr>
                                        <td>
                                            <span class="label">User Name：</span>
                                            <span>John Doe</span>
                                        </td>
                                        <td>
                                            <span class="label">Telephone：</span>
                                            <span>John Doe</span>
                                        </td>
                                        <td>
                                            <span class="label">Live：</span>
                                            <span>John Doe</span>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <span class="label">Remark：</span>
                                            <span>John Doe</span>
                                        </td>
                                        <td colspan="2">
                                            <span class="label">Address：</span>
                                            <span>John Doe</span>
                                        </td>
                                    </tr>
                                    <!-- Add more rows as needed -->
                                </table>
                            </div>
                        </div>
                    </template>
                </vxe-grid>
            </div>
        </div>
        <div id="callrecord">
            <div class="box-title">跟进记录</div>
            <div class="box-content">
                <ProTable :config="recordConfig" :data="recordData" :showPagination="false" :showToolBar="false">
                </ProTable>
            </div>
        </div>
        <div id="reducerecord">
            <div class="box-title">减免记录</div>
            <div class="box-content">
                <table>
                    <tr>
                        <td class="label">减免类型</td>
                        <td>John Doe</td>
                        <td class="label">减免申请ID</td>
                        <td>30</td>
                        <td class="label">减免申请时间</td>
                        <td>30</td>
                    </tr>
                    <tr>
                        <td class="label">减免金额（总计）</td>
                        <td>johndoe@example.com</td>
                        <td class="label">减免案件数</td>
                        <td>johndoe@example.com</td>
                        <td class="label">减免生效时间</td>
                        <td>johndoe@example.com</td>
                    </tr>
                    <!-- Add more rows as needed -->
                </table>
                <ProTable :config="recordConfig" :data="recordData" :showPagination="false" :showToolBar="false">
                </ProTable>
            </div>
        </div>
        <div id="splitrecord">
            <div class="box-title">分期记录</div>
            <div class="box-content">
                <table>
                    <tr>
                        <td class="label">分期申请ID</td>
                        <td>John Doe</td>
                        <td class="label">还款总额</td>
                        <td>30</td>
                        <td class="label">分期申请时间</td>
                        <td>30</td>
                    </tr>
                    <tr>
                        <td class="label">还款期数</td>
                        <td>johndoe@example.com</td>
                        <td class="label">首期还款日</td>
                        <td>johndoe@example.com</td>
                        <td class="label">分期生效时间</td>
                        <td>johndoe@example.com</td>
                    </tr>
                    <!-- Add more rows as needed -->
                </table>
                <ProTable :config="recordConfig" :data="recordData" :showPagination="false" :showToolBar="false">
                </ProTable>
            </div>
        </div>
        <div id="returnrecord">
            <div class="box-title">还款记录</div>
            <div class="box-content">
                <ProTable :config="returnConfig" :data="returnData" :showPagination="false" :showToolBar="false">
                </ProTable>
            </div>
        </div>        
      </div>
    </div>
  </template>

<script setup lang="jsx" name="caseDetail">
    import { useRoute } from 'vue-router'
    import { reactive, ref } from 'vue';
  import { ElButton } from 'element-plus';

    const relationData = ref([]);
    const returnData = ref([]);
    const recordData = ref([]);
    const caseDetailRef = ref()
    const route = useRoute()
    const detail = JSON.parse(route.query.item)
    console.log('detail', detail)
    const activeStep = ref(2)
    const stepList = ref([
        {title: '已分派', desc: 'sadas'},
        {title: '跟进中', desc: 'sadas1'},
        {title: '还款中', desc: 'sadas1'}
    ])
    const callTelephone = (row) => {}
    const returnConfig = reactive({
        columns: [
            {
                field: 'code',
                title: '还款记录ID'
            },
            {
                field: 'code',
                title: '实际还款金额'
            },
            {
                field: 'code',
                title: '实际还款时间'
            },
            {
                field: 'code',
                title: '关联减免ID'
            },
            {
                field: 'code',
                title: '关联分期ID'
            },
            {
                field: 'code',
                title: '关联分期期次'
            },
            {
                field: 'code',
                title: '应还金额'
            },
            {
                field: 'code',
                title: '借款机构'
            }
        ],
        toolbarConfig: {enabled: false}
    });
    const recordConfig = reactive({
        columns: [
            {
                field: 'code',
                title: '跟进记录ID'
            },
            {
                field: 'code',
                title: '跟进日期'
            },
            {
                field: 'code',
                title: '下次跟进时间'
            },
            {
                field: 'code',
                title: '联系人姓名'
            },
            {
                field: 'code',
                title: '联系人号码'
            },
            {
                field: 'code',
                title: '拨打跟进结果'
            },
            {
                field: 'code',
                title: '拨打处置状态'
            },
            {
                field: 'code',
                title: '备注'
            },
            {
                field: 'code',
                title: '通话录音'
            },
            {
                field: 'code',
                title: '微信图片附件',
                slots: {
                    default: ({row, rowIndex}) => {
                        return (
                            <>
                            <ElButton type="primary" link onClick={() => callTelephone(row)}>
                            下载
                            </ElButton>
                            </>
                        );
                    }
                }
            }
        ],
        toolbarConfig: {enabled: false}
    });
    const relationConfig = reactive({
        columns: [
            { type: 'seq', width: 70 },
            {
                field: 'code',
                title: '联系人姓名'
            },
            {
                field: 'code',
                title: '与债权人关系'
            },
            {
                field: 'code',
                title: '号码类型'
            },
            {
                field: 'code',
                title: '号码'
            },
            {
                field: 'code',
                title: '',
                slots: {
                    default: ({row, rowIndex}) => {
                        return (
                            <>
                            <ElButton type="primary" onClick={() => callTelephone(row)}>
                            拨打跟进
                            </ElButton>
                            </>
                        );
                    }
                }
            }
        ],
        toolbarConfig: {enabled: false}
    });
    const returnCrash = (row) => {

    }
    const caseDetailConfig = reactive({
        columns: [
            { type: 'expand', width: 80, slots: { content: 'expand_content' } },
            {
                field: 'code',
                title: '案件ID'
            },
            {
                field: 'code',
                title: '产品'
            },
            {
                field: 'code',
                title: '借款机构'
            },
            {
                field: 'code',
                title: '备案金额'
            },
            {
                field: 'code',
                title: '累计减免金额'
            },
            {
                field: 'code',
                title: '累计还款金额'
            },
            {
                field: 'code',
                title: '剩余待还金额'
            },
            {
                field: 'code',
                title: '',
                slots: {
                    default: ({row, rowIndex}) => {
                        return (
                            <>
                            <ElButton type="primary" onClick={() => returnCrash(row)}>
                            还款
                            </ElButton>
                            </>
                        );
                    }
                }
            }
        ],
        data: [
            { id: 10001, name: 'Test1', role: 'Develop', sex: 'Man', age: 28, address: 'test abc' },
            { id: 10002, name: 'Test2', role: 'Test', sex: 'Women', age: 22, address: 'Guangzhou' },
            { id: 10003, name: 'Test3', role: 'PM', sex: 'Man', age: 32, address: 'Shanghai' },
            { id: 10004, name: 'Test4', role: 'Designer', sex: 'Women', age: 24, address: 'Shanghai' }
        ],
        toolbarConfig: {enabled: false}
    });
    const anchor = (type) => {
        console.log('sadasda0', type)
        document.querySelector(`#${type}`).scrollIntoView(true)
    }
    const foldCaseTree = () => {
        if(caseDetailRef.value?.getRowExpandRecords().length === caseDetailConfig.data.length){
            caseDetailRef.value?.setAllRowExpand(false)
        } else {
            caseDetailRef.value?.setAllRowExpand(true)
        }
        
    }
    recordData.value = [
    { name: 'admin', code: 'admin', role: 'superadmin',num: 1 },
    { name: 'account1', code: 'account1', role: 'user',num: 1 },
    { name: 'account2', code: 'account2', role: 'user',num: 1 },
    { name: 'account3', code: 'account3', role: 'user',num: 1 },
  ];
    relationData.value = [
    { name: 'admin', code: 'admin', role: 'superadmin',num: 1 },
    { name: 'account1', code: 'account1', role: 'user',num: 1 },
    { name: 'account2', code: 'account2', role: 'user',num: 1 },
    { name: 'account3', code: 'account3', role: 'user',num: 1 },
  ];
  returnData.value = [
    { name: 'admin', code: 'admin', role: 'superadmin',num: 1 },
    { name: 'account1', code: 'account1', role: 'user',num: 1 },
    { name: 'account2', code: 'account2', role: 'user',num: 1 },
    { name: 'account3', code: 'account3', role: 'user',num: 1 },
  ];
</script>
  
<style lang="scss" scoped>
.content-box {

    .navigation-box {
        position: absolute;
        right: 33px;
        z-index: 2;
        width: 200px;
        border-radius: 5px;
        padding-left: 40px;
        background: #fff;
        font-size: 14px;
        color: rgba(0,0,0,0.88);
        .anchor-item {
            position: relative;
            padding-bottom: 20px;
            cursor: pointer;
            &::before {
                display: block;
                content: '';
                position: absolute;
                width: 10px;
                height: 10px;
                border-radius: 100%;
                border: 3px solid rgba(22, 119, 255, 1);
                left: -30px;
                top: 7px;
            }
            &::after {
                position: absolute;
                height: 100%;
                width: 1px;
                background: rgba(0,0,0,0.06);
                display: block;
                top: 10px;
                content: '';
                left: -25px;
            }
            &:last-child::after{
                display: none;
            }
        }
    }
    .content1{
        width: 100%;
        height: 100%;
    }
}
.detail-steps {
    margin-top: 20px;
    margin-left: 10px;
    :deep(.el-step__icon) {
        height: 8px;
        border: none;
        width: 8px; 
        overflow: hidden;
        background: #1677FF;
        .el-step__icon-inner{
            display: none;
        }
    }
    :deep(.is-process), :deep(.is-wait)  {
        .el-step__icon {
            background: rgba(0,0,0,0.45); 
        }
    }
    :deep(.el-step__title.is-finish) {
        color: #000;
        font-weight: 400;
    }
    :deep(.el-step__title.is-process), :deep(.el-step__title.is-process) {
        color: rgba(0,0,0,0.45);
        font-weight: 400;
    }
    :deep(.el-step__head) {
        left: 20px;
        .el-step__line {
            left: 14px;
            top: 13px;
            height: 1px;
            right: 8px;
        }
    }
    :deep(.el-step__description) {
        color: rgba(0,0,0,0.45);
    }
    .el-step.current {
        :deep(.el-step__icon) {
            height: 10px;
            width: 10px;
        }
        :deep(.el-step__title.is-finish) {
            color: #000;
            font-weight: 600;
        }
        :deep(.el-step__description) {
            color: #000;
        }
    }
}
.btn-grps {
    padding-left: 30px;
}
.box-title {
    font-weight: 600;
    font-size: 18px;
    color: #000000;
    line-height: 70px;
    border-bottom: 1px solid rgba(0,0,0,0.06);
    margin-bottom: 10px;
    margin-top: 10px;
}
.box-content {
    padding-right: 40px;
    :deep(.card) {
        padding: 0;
        border: none;
    }
}
#baseinfo, #reducerecord, #splitrecord {
    table {
        width: 100%;
        border-collapse: collapse;
    }
    td {
        border: 1px solid rgba(5,5,5,0.06);
        background: #fff;
        padding: 8px;
        width: 240px;
        &.label {
            width: 125px;
            background: #f5f7f9;
        }
    }
}

.expand-box{
    background: #F0EAEA;
    padding: 20px;
    .expand-table {
        color: #000;
        table {
            width: 100%;
        }
        tr {
            line-height: 32px;
        }
        td {
            border: none;
            span.label {
                color: rgba(0,0,0,0.45);
                font-size: 14px;
            }
        }
    }
}
</style>