const info = {
    template: /*language=HTML*/
        `
            <div>

                <van-cell-group>
                    <van-cell title="姓名">{{ viewData.userName }}</van-cell>
                    <van-cell title="工号">{{ viewData.loginName }}</van-cell>
                    <van-cell title="性别">{{ viewData.sex }}</van-cell>
                    <van-cell title="单位">{{ viewData.unitName }}</van-cell>
                    <van-cell title="分工会">{{ viewData.unionName }}</van-cell>
                    <van-cell title="月收入">{{ viewData.monthlyIncome }}</van-cell>
                    <van-cell title="出生年月">{{ viewData.birthday }}</van-cell>
                    <van-cell title="手机号码">{{ viewData.mobile }}</van-cell>
                    <van-cell title="家庭地址">{{ viewData.homeAddress }}</van-cell>
                    <van-cell title="款项">{{ viewData.subsidyStandards }}</van-cell>
                    <van-cell title="申请原因">{{ viewData.reason }}</van-cell>
                    <van-cell title="备注">{{ viewData.remarks }}</van-cell>
                    <van-cell title="家庭成员收入" class="column-cell">
                        <table class="family-table">
                            <thead>
                            <tr>
                                <th class="table-header">序号</th>
                                <th class="table-header">姓名</th>
                                <th class="table-header">年龄(岁)</th>
                                <th class="table-header">关系</th>
                                <th class="table-header">月收入(元)</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr class="table-row" v-for="(item, index) in viewData.familyList" :key="index">
                                <td class="table-cell">{{ index + 1 }}</td>
                                <td class="table-cell">{{ item.name }}</td>
                                <td class="table-cell">{{ item.age }}</td>
                                <td class="table-cell">{{ item.relation }}</td>
                                <td class="table-cell">{{ item.monthlyIncome }}</td>
                            </tr>
                            </tbody>
                        </table>
                    </van-cell>
                    <van-cell title="附件" class="column-cell">
                        <vant-file-upload :files.sync="viewData.files" view :del="false"
                                          v-if="viewData.files&&viewData.files.length"></vant-file-upload>
                        <span v-else>暂无</span>
                    </van-cell>
                    <van-cell title="签字" class="column-cell">
                        <van-image width="200" height="100" :src="CREATE_PREVIEW_URL(viewData.signature)"
                                   v-if="viewData.signature"></van-image>
                        <span v-else>暂无</span>
                    </van-cell>
                </van-cell-group>

                <van-cell-group v-if="viewData.branchUnionAudit">
                    <div class="van-cell-group__title mt20">
                        <div class="van-sidebar-item van-sidebar-item--select">
                            分工会审核信息
                        </div>
                    </div>
                    <van-cell title="审核人">{{ viewData.branchUnionAudit.username }}</van-cell>
                    <van-cell title="审核时间">{{ viewData.branchUnionAudit.auditTime }}</van-cell>
                    <van-cell title="审核金额">{{ viewData.branchUnionAudit.ext?.money }}元</van-cell>
                    <van-cell title="审核意见">{{ viewData.branchUnionAudit.auditOpinion }}</van-cell>
                    <van-cell title="签字" class="column-cell">
                        <van-image width="200" height="100" :src="CREATE_PREVIEW_URL(viewData.branchUnionAudit.auditSign)"
                                   v-if="viewData.branchUnionAudit.auditSign"></van-image>
                        <span v-else>暂无</span>
                    </van-cell>
                </van-cell-group>

                <van-cell-group v-if="viewData.schoolUnionInitialAudit">
                    <div class="van-cell-group__title mt20">
                        <div class="van-sidebar-item van-sidebar-item--select">
                            校工会初审信息
                        </div>
                    </div>
                    <van-cell title="审核人">{{ viewData.schoolUnionInitialAudit.username }}</van-cell>
                    <van-cell title="审核时间">{{ viewData.schoolUnionInitialAudit.auditTime }}</van-cell>
                    <van-cell title="审核金额">{{ viewData.schoolUnionInitialAudit.ext?.money }}元</van-cell>
                    <van-cell title="审核意见">{{ viewData.schoolUnionInitialAudit.auditOpinion }}</van-cell>
                    <van-cell title="签字" class="column-cell">
                        <van-image width="200" height="100" :src="CREATE_PREVIEW_URL(viewData.schoolUnionInitialAudit.auditSign)"
                                   v-if="viewData.schoolUnionInitialAudit.auditSign"></van-image>
                        <span v-else>暂无</span>
                    </van-cell>
                </van-cell-group>

                <van-cell-group v-if="viewData.schoolUnionFinalAudit">
                    <div class="van-cell-group__title mt20">
                        <div class="van-sidebar-item van-sidebar-item--select">
                            工会常委会审核审核信息
                        </div>
                    </div>
                    <van-cell title="审核人">{{ viewData.schoolUnionFinalAudit.username }}</van-cell>
                    <van-cell title="审核时间">{{ viewData.schoolUnionFinalAudit.auditTime }}</van-cell>
                    <van-cell title="审核金额">{{ viewData.schoolUnionInitialAudit.ext?.money }}元</van-cell>
                    <van-cell title="审核意见">{{ viewData.schoolUnionFinalAudit.auditOpinion }}</van-cell>
                    <van-cell title="签字" class="column-cell">
                        <van-image width="200" height="100" :src="CREATE_PREVIEW_URL(viewData.schoolUnionFinalAudit.auditSign)"
                                   v-if="viewData.schoolUnionFinalAudit.auditSign"></van-image>
                        <span v-else>暂无</span>
                    </van-cell>
                </van-cell-group>
            </div>
        `,
    data() {
        return {
            activeName: 'info',
            viewData: {}
        }
    },
    methods: {
        CREATE_PREVIEW_URL,
        onOpen(id, activeName = '1') {
            this.activeName = activeName
            $.get('/platform/difficulty/common/findOne', {id}).then(res => {
                if (res.code === 0) {
                    try {
                        res.data.familyList = JSON.parse(res.data.familyList)
                        res.data.files = JSON.parse(res.data.files)
                    } catch (e) {
                    }
                    this.viewData = res.data
                    console.log(this.viewData)
                }
            })
        }
    },
    style: /*language=CSS*/
        `
            .column-cell {
                flex-direction: column;
            }
            .family-table {
                width: 100%;
                max-width: 100%;
                border-collapse: collapse;
                table-layout: auto;
                text-align: center;
                font-family: 'Arial', sans-serif;
                margin: 20px 0;
            }
            .table-header {
                background-color: #1867b0;
                color: white; 
                font-weight: bold; 
                text-transform: uppercase; 
            }
            .table-row {
                background-color: #f9f9f9;
                transition: background-color 0.3s;
            }
            .table-row:hover {
                background-color: #f1f1f1;
            }
            .table-cell {
                padding: 10px 20px;
                border: 1px solid #ddd;
                text-align: center;
            }
        `
}