<template>
    <view class="detail-page">
        <view class="section">
            <text class="row company">{{ form.companyName }}</text>
            <view class="row"><text class="label">编号</text><text class="value">{{ form.serialNumber }}</text></view>
            <view class="row"><text class="label">办事处</text><text class="value">{{ form.deptName }}</text></view>
            <view class="row"><text class="label">区域</text><text class="value">{{ form.regionName }}</text></view>
            <view class="row"><text class="label">简写名称</text><text class="value">{{ form.customerShortName }}</text>
            </view>
            <view class="row"><text class="label">企业类型</text><text class="value">{{ getDicName('ENTERPRISE_TYPE',
                form.enterpriseType, enterpriseTypeOptions) }}</text></view>
            <view class="row"><text class="label">企业操作类型</text><text class="value">{{ form.enterpriseOperationType
                    }}</text></view>
            <view class="row"><text class="label">登记日期</text><text class="value">{{ form.registerDate }}</text></view>
        </view>

        <view class="title-header">
            <image class="title-header_icon" src="/static/images/title.png" />
            <span>基础资料</span>
        </view>
        <view class="section">
            <view class="row"><text class="label">企业性质</text><text class="value">{{ form.companyNature }}</text></view>
            <view class="row"><text class="label">注册资本</text><text class="value">{{ form.registeredCapital }}</text>
            </view>
            <view class="row"><text class="label">账号</text><text class="value">{{ form.bankAccount }}</text></view>
            <view class="row"><text class="label">开户行</text><text class="value">{{ form.bankName }}</text></view>
            <view class="row"><text class="label">税号</text><text class="value">{{ form.taxNumber }}</text></view>
            <view class="row"><text class="label">注册时间</text><text class="value">{{ form.registrationTime }}</text>
            </view>
            <view class="row"><text class="label">经营年限</text><text class="value">{{ form.businessYears }}</text></view>
            <view class="row"><text class="label">单位地址</text><text class="value">{{ form.companyAddress }}</text></view>
            <view class="row"><text class="label">经营范围</text><text class="value">{{ form.businessScope }}</text></view>
            <view class="row"><text class="label">工商信息</text><text class="value act">{{ form.businessFileName }}</text>
            </view>
            <view class="row"><text class="label">股东信息</text><text class="value act">{{ form.shareholderFileName
                    }}</text>
            </view>
        </view>

        <view class="mgb10">
            <CorePersonnel mode="view" :options="genderOptions" :list="form.corePersonnelList" />
        </view>

        <view class="title-header">
            <image class="title-header_icon" src="/static/images/title.png" />
            <span>资产经营情况</span>
        </view>
        <view class="section">
            <view class="row"><text class="label">经营场地属性</text><text class="value">{{ form.businessProperty }}</text>
            </view>
            <view class="row"><text class="label">占地面积</text><text class="value">{{ form.landArea }} 平方米</text></view>
            <view class="row"><text class="label">仓储条件</text><text class="value">{{ form.storageConditions }}</text>
            </view>
            <view class="row"><text class="label">员工人数</text><text class="value">{{ form.employeeCount }}</text></view>
            <view class="row"><text class="label">设备属性</text><text class="value">{{ form.equipmentAttributes }}</text>
            </view>
            <view class="row"><text class="label">资产评估</text><text class="value">{{ form.assetEvaluation }}</text>
            </view>
            <view class="row"><text class="label">上年度销售额</text><text class="value">{{ form.lastYearSales }}</text>
            </view>
            <view class="row"><text class="label">月均销量</text><text class="value">{{ form.monthlyAvgSales }}</text>
            </view>
            <view class="row"><text class="label">销项发票所开品名与计量单位</text><text class="value">{{ form.invoiceItemUnit
                    }}</text></view>
            <view class="row"><text class="label">认证证书</text><text class="value">{{ form.certificationCertificate
                    }}</text></view>
            <view class="row"><text class="label">我司售与产品于经营范围是否匹配</text><text class="value">{{ form.productMatch
                    }}</text>
            </view>
            <view class="row"><text class="label">主要客户</text><text class="value">{{ form.majorCustomers }}</text></view>
            <view class="row"><text class="label">主营项目</text><text class="value">{{ form.mainProjects }}</text></view>
            <view class="row"><text class="label">从事行业</text><text class="value">{{ form.industryInvolved }}</text>
            </view>
            <view class="row"><text class="label">在该行业中的经验</text><text class="value">{{ form.industryExperience
                    }}</text>
            </view>
            <view class="row"><text class="label">是否与其他企业有经济纠纷 违规信息 拖欠员工薪资</text><text class="value">{{ form.hasDispute
                    }}</text></view>
        </view>

        <view class="title-header">
            <image class="title-header_icon" src="/static/images/title.png" />
            <span>与我司合作</span>
        </view>
        <view class="section">
            <view class="row"><text class="label">与我司合作时间</text><text class="value">{{ form.cooperationStartDate
                    }}</text>
            </view>
            <view class="row"><text class="label">月均操作量</text><text class="value">{{ form.monthlyAvgVolume }}</text>
            </view>
            <view class="row"><text class="label">是否口头协议操作</text><text class="value">{{ form.isVerbalAgreement }}</text>
            </view>
            <view class="row"><text class="label">是否签订其他协议</text><text class="value">{{ form.otherAgreements }}</text>
            </view>
            <view class="row"><text class="label">与我司操作是否签订长年合同</text><text class="value">{{ form.hasLongTermContract
                    }}</text></view>
            <view class="row"><text class="label">合同类型</text><text class="value">{{ form.contractType }}</text></view>
            <view class="row"><text class="label">是否有过中断及中断原因</text><text class="value">{{ form.hasInterruption
                    }}</text>
            </view>
        </view>

        <view class="title-header">
            <image class="title-header_icon" src="/static/images/title.png" />
            <span>办事处意见</span>
        </view>
        <view class="section">
            <view class="row"><text class="label">建议客户分类</text>
                <text class="value">
                    <text
                        :class="[form.suggestedCategory ? 'category' : '', getCategoryClass(getDicName('CUSTOMER_CATEGORY', form.suggestedCategory, categoryOptions))]">{{
                            getDicName('CUSTOMER_CATEGORY', form.suggestedCategory, categoryOptions) }}</text>
                </text>
            </view>
            <view class="row"><text class="label">授信额度</text><text class="value">{{ form.creditLimit }} 万元</text></view>
            <view class="row"><text class="label">结算期限</text><text class="value">{{ form.settlementPeriod }}</text>
            </view>
            <view class="row"><text class="label">加工操作方案</text><text class="value">{{ form.materialSupplyPlan }}</text>
            </view>
            <view class="row"><text class="label">调查人</text><text class="value">{{ form.investigatorName }}</text>
            </view>
            <view class="row"><text class="label">审核主管</text><text class="value">{{ form.supervisorReviewName }}</text>
            </view>
        </view>

        <view class="title-header">
            <image class="title-header_icon" src="/static/images/title.png" />
            <span>职能核对</span>
        </view>
        <view class="section">
            <view class="row"><text class="label">年度总销量</text><text class="value">{{ form.annualTotalSales }}</text>
            </view>
            <view class="row"><text class="label">主要行业</text><text class="value">{{ form.mainIndustry }}</text></view>
            <view class="row"><text class="label">年度款料概况</text><text class="value">{{ form.annualMaterialOverview
                    }}</text></view>
        </view>

        <view class="title-header">
            <image class="title-header_icon" src="/static/images/title.png" />
            <span>公司评审</span>
        </view>
        <view class="section">
            <view class="row"><text class="label">客户分类</text>
                <text class="value">
                    <text
                        :class="[form.companySuggestedCategory ? 'category' : '', getCategoryClass(getDicName('CUSTOMER_CATEGORY', form.companySuggestedCategory, categoryOptions))]">{{
                            getDicName('CUSTOMER_CATEGORY', form.companySuggestedCategory, categoryOptions) }}</text>
                </text>
            </view>
            <view class="row"><text class="label">授信额度</text><text class="value">{{ form.companyCreditLimit }}</text>
            </view>
            <view class="row"><text class="label">结算期限</text><text class="value">{{ form.companySettlementPeriod
                    }}</text>
            </view>
            <view class="row"><text class="label">加工操作方案</text><text class="value">{{ form.companyMaterialSupplyPlan
                    }}</text></view>
        </view>

        <view class="title-header">
            <image class="title-header_icon" src="/static/images/title.png" />
            <span>变更记录</span>
        </view>
        <view class="section">
            <view class="history-header">
                <text class="col col1">序号</text>
                <text class="col col2">变更时间</text>
                <text class="col col3">操作</text>
            </view>
            <view v-for="(h, i) in historyList" :key="(h && (h.id || h.code)) || i" class="history-row">
                <text class="col col1">{{ i + 1 }}</text>
                <text class="col col2">{{ h.createTime || '' }}</text>
                <text class="col col3 link" @click="onViewHistory(h)">查看</text>
            </view>
        </view>
    </view>
</template>

<script>
import { getExamineById, getByIdExamineCustomerCreditHistoryList } from '@/api/credit_manage.js'
import { getDicName } from '@/utils/dic.js'
import { getDicByCodeApi } from '@/api/base.js'
import CorePersonnel from './corePersonnel.vue'

export default {
    name: 'CustomerCreditApprove',
    props: { id: { type: [String, Number], default: '' } },
    components: { CorePersonnel },
    data() {
        return {
            form: {},
            enterpriseTypeOptions: [],
            regionOptions: [],
            genderOptions: [],
            categoryOptions: [],
            historyList: []
        }
    },
    created() {
        this.loadRegionOptions()
        this.loadEnterpriseTypeOptions()
        this.loadGenderOptions()
        this.loadCategoryOptions()
    },
    watch: {
        id: {
            immediate: true,
            handler(val) {
                const v = (val !== undefined && val !== null) ? String(val) : ''
                if (v) this.loadDetail(v)
            }
        }
    },
    methods: {
        async loadDetail(id) {
            try {
                const res = await getExamineById(id)
                const data = res.data || {}
                this.form = { ...data }
                const cid = this.form.id || this.form.code || id
                if (cid) this.loadHistoryList(cid)
            } catch (e) {
                this.form = {}
            }
        },
        async loadEnterpriseTypeOptions() {
            try {
                const res = await getDicByCodeApi('ENTERPRISE_TYPE')
                const list = res.data || []
                this.enterpriseTypeOptions = Array.isArray(list) ? list : []
            } catch (e) {
                this.enterpriseTypeOptions = []
            }
        },
        async loadRegionOptions() {
            try {
                const res = await getDicByCodeApi('CREDIT_ZONE')
                const list = res.data || []
                this.regionOptions = Array.isArray(list) ? list : []
            } catch (e) {
                this.regionOptions = []
            }
        },
        async loadGenderOptions() {
            try {
                const res = await getDicByCodeApi('GENDER_TYPE')
                const list = res.data || []
                this.genderOptions = Array.isArray(list) ? list : []
            } catch (e) {
                this.genderOptions = []
            }
        },
        async loadCategoryOptions() {
            try {
                const res = await getDicByCodeApi('CUSTOMER_CATEGORY')
                const list = res.data || []
                this.categoryOptions = Array.isArray(list) ? list : []
            } catch (e) {
                this.categoryOptions = []
            }
        },
        async loadHistoryList(creditId) {
            try {
                const res = await getByIdExamineCustomerCreditHistoryList(creditId)
                const _data = res.data || []
                this.historyList = Array.isArray(_data) ? _data : []
            } catch (e) {
                this.historyList = []
            }
        },
        onViewHistory(item) {
            const id = item && (item.id)
            if (!id) return
            const query = '?id=' + encodeURIComponent(id)
            uni.navigateTo({ url: '/pages/credit_manage/history_detail' + query })
        },
        getDicName,
        getCategoryClass(categoryName) {
            if (!categoryName) return ''
            if (categoryName.includes('A') || categoryName.includes('a')) {
                return 'category_A'
            } else if (categoryName.includes('B') || categoryName.includes('b')) {
                return 'category_B'
            } else if (categoryName.includes('C') || categoryName.includes('c')) {
                return 'category_C'
            } else if (categoryName.includes('D') || categoryName.includes('d')) {
                return 'category_D'
            }
        },
        getFormValues() {
            const m = this.form || {}
            return JSON.parse(JSON.stringify(m))
        }
    }
}
</script>

<style lang="scss" scoped>

.detail-page {
    background: #f3f3f3;
}

.section {
    padding: 32rpx;
    background: #fff;
    margin-bottom: 20rpx;
    position: relative;

    .row {
        display: flex;
        margin-bottom: 28rpx;

        &:last-child {
            margin-bottom: 0;
        }

        &.company {
            font-size: 36rpx;
            font-weight: 600;
            color: rgba(0, 0, 0, 0.9);
        }

        .label {
            max-width: 420rpx;
            line-height: 32rpx;
            font-size: 28rpx;
            color: rgba(0, 0, 0, 0.6);
        }

        .value {
            flex: 1;
            line-height: 32rpx;
            font-size: 28rpx;
            color: rgba(0, 0, 0, 0.9);
            text-align: right;

            .category {
                display: inline-block;
                padding: 4rpx 12rpx;
                border-radius: 6rpx;
                font-size: 24rpx;
                width: auto;

                &.category_A {
                    background: #FFF0ED;
                    color: #D54941;
                }

                &.category_B {
                    background: #FFF1E9;
                    color: #E37318;
                }

                &.category_C {
                    background: #F2F3FF;
                    color: $theme-primary;
                }

                &.category_D {
                    background: #E3F9E9;
                    color: #2BA471;
                }
            }
        }

        .act {
            color: $theme-primary;
        }
    }
}

.title-header {
    background-color: #fff;
    display: flex;
    align-items: center;
    padding: 32rpx 32rpx 22rpx;
    border-bottom: 1rpx dashed #f0f0f0;

    &_icon {
        width: 32rpx;
        height: 28rpx;
        margin-right: 16rpx;
    }

    span {
        color: rgba(0, 0, 0, 0.9);
        font-size: 32rpx;
        line-height: 44rpx;
        font-weight: 600;
    }
}

.history-header {
    display: flex;
    margin-bottom: 20rpx;
    font-size: 28rpx;
    color: rgba(0, 0, 0, 0.6);

    .col1 {
        width: 120rpx;
    }

    .col2 {
        flex: 1;
        text-align: center;
    }

    .col3 {
        width: 160rpx;
        text-align: right;
    }
}

.history-row {
    display: flex;
    align-items: center;
    margin-bottom: 16rpx;
    font-size: 28rpx;

    .col1 {
        width: 120rpx;
    }

    .col2 {
        flex: 1;
        text-align: center;
    }

    .col3 {
        width: 160rpx;
        text-align: right;
    }

    .link {
        color: $theme-primary;
    }
}

.mgb10 {
    margin-bottom: 20rpx;
}
</style>