<template>
    <div>
        <navbar title="报告"></navbar>
        <div class="wrapper">
            <div class="header">
                <div class="header_left">
                    <div class="company-middle-item mb-10">
                        <div class="company-item-left bg-2372eb" v-if="colorNum == 1">
                            <img name="wap-home" src="../../images/part_one/icon_company.png" alt="">
                            <div class="baogao">报告</div>
                        </div>
                        <div class="company-item-left bg-ee8c15" v-else-if="colorNum == 2">
                            <img name="wap-home" src="../../images/part_one/icon_company.png" alt="">
                        </div>
                        <div class="company-item-left bg-11c95f" v-else-if="colorNum == 3">
                            <img name="wap-home" src="../../images/part_one/icon_company.png" alt="">
                        </div>
                        <div class="company-item-left bg-e21183" v-else-if="colorNum == 4">
                            <img name="wap-home" src="../../images/part_one/icon_company.png" alt="">
                        </div>
                        <div class="company-item-left bg-fde809" v-else-if="colorNum == 5">
                            <img name="wap-home" src="../../images/part_one/icon_company.png" alt="">
                        </div>
                        <div class="company-item-left bg-17b9d7" v-else-if="colorNum == 6">
                            <img name="wap-home" src="../../images/part_one/icon_company.png" alt="">
                        </div>
                        <div class="company-item-left bg-db2c2c" v-else-if="colorNum == 7">
                            <img name="wap-home" src="../../images/part_one/icon_company.png" alt="">
                        </div>
                        <div class="company-item-left bg-9232db" v-else-if="colorNum == 8">
                            <img name="wap-home" src="../../images/part_one/icon_company.png" alt="">
                        </div>
                        <div class="company-item-left bg-8c8c8c" v-else>
                            <img name="wap-home" src="../../images/part_one/icon_company.png" alt="">
                            
                        </div>

                    </div>
                </div>
                <div class="header_right">
                    <div class="header_item_box">
                        <div class="item_box_left">
                            <van-icon name="idcard" class="header_icon" />
                            <span class="header_right_title">企业名称:</span>

                        </div>
                        <div class="item_box_right">{{ baseInfo.companyName }}</div>
                    </div>
                    <div class="header_item_box">
                        <div class="item_box_left">
                            <van-icon name="paid" class="header_icon" />
                            <span class="header_right_title">存续状态:</span>
                        </div>
                        <div class="item_box_right">{{ baseInfo.status }}</div>
                    </div>
                    <div class="header_item_box">
                        <div class="item_box_left">
                            <van-icon name="underway-o" class="header_icon" />
                            <span class="header_right_title">更新时间:</span>
                        </div>
                        <div class="item_box_right">{{ formateDate(baseInfo.updateDate) }}</div>
                    </div>
                </div>
            </div>
            <div class="mian">
                <div class="main_item" v-for="(item, index) in mainList" :key="index" @click="goDetail(item)">
                    <div class="main_item_left">{{ item.title }}</div>
                    <div class="main_item_right"><van-icon name="arrow" class="header_icon" /></div>
                </div>
            </div>
        </div>
        <van-popup v-model="dialogShow" class='popDialog'>
            <div class="dialog-title-box">{{ dialogTitle }}</div>
            <van-field v-model="dialogRemark" placeholder="请输入" type="textarea" :row="10" class="dialogField"></van-field>
            <div class="dialog-footer-box">
                <div class="cancel-btn" @click="handleDialogCancel">取消</div>
                <div class="ok-btn" @click="handleDialogCommit">确定</div>
            </div>
        </van-popup>
        <van-popup v-model="otherDialogShow" class='popDialog'>
            <div class="night_box">开发中，请等待</div>
            <div @click="handleOtherClose"
                style="height: 42px;line-height: 42px;text-align: center;font-size: 16px;color: #2372eb">关闭</div>
        </van-popup>
    </div>
</template>
<script>
import navbar from '../../components/navbar/navbar.vue';
import { queryReportCompanyInfo, queryOperateCase, addOperateCase, updateOperateCase } from "@/service/api/report";
import {
    Icon,
    Field,
    Toast
} from 'vant';
export default {
    components: {
        navbar: navbar,
        VanIcon: Icon,
        VanField: Field,
    },
    data() {
        return {
            colorNum: 1,
            mainList: [
                {
                    title: '基本信息',
                    key: '1'
                },
                {
                    title: '经营情况',
                    key: '2'
                },
                {
                    title: '资产负债情况',
                    key: '3'
                },
                {
                    title: '其他(风险)事项说明',
                    key: '4'
                },
                {
                    title: '企业反馈及需求',
                    key: '5'
                },
                {
                    title: '走访意见',
                    key: '6'
                },
                {
                    title: '预授信意见',
                    key: '7'
                },
                {
                    title: '授信分析',
                    key: '8'
                },
                {
                    title: '调查结论',
                    key: '9'
                },
                {
                    title: '贷审小组结论',
                    key: '10'
                },
            ],
            dialogShow: false,
            dialogTitle: '',
            dialogRemark: '',
            baseInfo: {
                companyName: '',
                status: '',
                updateDate: ''
            },
            status: '',
            otherDialogShow: false,
        }
    },
    created() {
        this.initQueryReportCompanyInfo()
        this.initQueryOperateCase()
    },
    methods: {
        async initQueryReportCompanyInfo() {
            const params = {
                companyId: sessionStorage.getItem('companyId')
            }
            let result = await queryReportCompanyInfo(params);
            console.log(result, 'sssssssss')
            this.baseInfo = result
            this.colorNum = result.colorNum
        },
        formateDate(time) {
            const date = new Date(time)
            const year = date.getFullYear()
            const month = String(date.getMonth() + 1).padStart(2, '0')
            const day = String(date.getDate()).padStart(2, '0')
            const hour = String(date.getHours()).padStart(2, '0')
            const minute = String(date.getMinutes()).padStart(2, '0')
            const second = String(date.getSeconds()).padStart(2, '0')
            return `${year}-${month}-${day} ${hour}:${minute}:${second}`
        },
        async initQueryOperateCase() {
            const params = {
                companyId: sessionStorage.getItem('companyId'),
            }
            let result = await queryOperateCase(params);
            if (result) {
                this.status = 2
                this.baseFeedbackDemand = result.feedbackDemand
                this.baseVisitingOpinion = result.visitingOpinion
            } else {
                this.status = 1
            }
        },
        goDetail(item) {
            if (item.key == 1) {
                this.$router.push({ path: '/BaseInfo' })
            } else if (item.key == 2) {
                this.$router.push({ path: '/BusinessSituation' })
            } else if (item.key == 3) {
                this.$router.push({ path: '/Indebtendness' })
            } else if (item.key == 4) {
                this.otherDialogShow = true
            } else if (item.key == 5) {
                this.dialogShow = true
                this.dialogTitle = item.title
                this.dialogRemark = this.baseFeedbackDemand
            } else if (item.key == 6) {
                this.dialogShow = true
                this.dialogTitle = item.title
                this.dialogRemark = this.baseVisitingOpinion
            } else if (item.key == 7) {
                this.$router.push({ path: '/PreCreditAdvice' })
            } else if (item.key == 8) {
                this.$router.push({ path: '/CreditAnalysis' })
            } else if (item.key == 9) {
                this.$router.push({ path: '/Conclusion' })
            } else if (item.key == 10) {
                this.$router.push({ path: '/LoanConclusion' })
            }
        },
        async handleDialogCommit() {
            debugger
            if (this.dialogTitle == '企业反馈及需求') {
                if (this.status == 1) {
                    const params = {
                        companyId: sessionStorage.getItem('companyId'),
                        feedbackDemand: this.dialogRemark
                    }
                    let result = await addOperateCase(params);
                    if (result) {
                        Toast.success('企业反馈及需求新增成功');
                        this.handleDialogCancel()
                        this.initQueryOperateCase()
                    }
                } else {
                    const params = {
                        companyId: sessionStorage.getItem('companyId'),
                        feedbackDemand: this.dialogRemark
                    }
                    let result = await updateOperateCase(params);
                    if (result) {
                        Toast.success('企业反馈及需求修改成功');
                        this.handleDialogCancel()
                        this.initQueryOperateCase()
                    }
                }
            } else if (this.dialogTitle == '走访意见') {
                if (this.status == 1) {
                    const params = {
                        companyId: sessionStorage.getItem('companyId'),
                        visitingOpinion: this.dialogRemark
                    }
                    let result = await addOperateCase(params);
                    if (result) {
                        Toast.success('走访意见新增成功');
                        this.handleDialogCancel()
                        this.initQueryOperateCase()
                    }
                } else {
                    const params = {
                        companyId: sessionStorage.getItem('companyId'),
                        visitingOpinion: this.dialogRemark
                    }
                    let result = await updateOperateCase(params);
                    if (result) {
                        Toast.success('走访意见修改成功');
                        this.handleDialogCancel()
                        this.initQueryOperateCase()
                    }
                }
            }
        },
        handleDialogCancel() {
            this.dialogShow = false
            this.dialogRemark = ''
        },
        handleOtherClose(){
            this.otherDialogShow = false
        }
    }
}
</script>
<style lang="less" scoped>
.wrapper {
    padding-top: 46px;
    min-height: 100vh;
    font-size: 16px;

}

.bg-2372eb {
    background: #2372EB;
}

.bg-ee8c15 {
    background: #ee8c15;
}

.bg-11c95f {
    background: #11c95f;
}

.bg-e21183 {
    background: #e21183;
}

.bg-fde809 {
    background: #fde809;
}

.bg-17b9d7 {
    background: #17b9d7;
}

.bg-db2c2c {
    background: #db2c2c;
}

.bg-9232db {
    background: #9232db;
}

.bg-8c8c8c {
    background: #8c8c8c;
}

.header {
    background: #fff;
    padding: 15px 5px 15px 15px;
    display: flex;
}

.company-item-left {
    width: 26px;
    height: 26px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 4px;
    flex-direction: column;
}
.header_left{
    padding-top: 15px;
}
.company-item-left img {
    width: 16px;
}

.header_right {
    padding: 10px 5px 10px 20px;


}

.header_item_box {
    display: flex;
}

.item_box_left {
    flex: none;
}

.item_box_right {
    color: rgb(89, 89, 89);
    line-height: 28px;
    font-size: 14px;
    margin-left: 10px;
}

.header_right div {
    color: rgb(89, 89, 89);
    line-height: 28px;
    vertical-align: middle;
}

.header_icon {
    font-size: 16px;

}

.header_right_title {
    font-size: 14px;
    margin-left: 10px;
}

.mian {
    margin-top: 20px;

}

.main_item {
    background: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 15px;
    color: rgb(89, 89, 89);
    line-height: 45px;
    margin-top: 1px;
}

.popDialog {
    width: 300px;
    padding: 10px;

}

.dialog-title-box {
    font-size: 0.9rem;
    font-weight: bold;
    text-align: center;
    margin: 16px 0 20px;
}

.dialog-label-box {
    color: rgb(140, 140, 140);
    font-size: 14px;
}

.dialogField {
    border: 1px solid #ccc;
    border-radius: 5px;
    margin-top: 5px;
    padding: 5px 16px;
}

.dialog-footer-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 40px;
    border-top: solid 1px #dddddd;
    margin-top: 20px;
}

.dialog-footer-box .cancel-btn {
    font-size: 0.9rem;
    color: #999999;
    border-right: solid 1px #dddddd;
    text-align: center;
    width: 50%;
}


.dialog-footer-box .ok-btn {
    width: 50%;
    font-size: 0.9rem;
    color: #2372EB;
    text-align: center;
}

.baogao {
    margin-top: 5px;
    color: #fff;
    font-size: 12px;
    font-weight: 600;
}
.night_box {
  padding: 5px 20px 5px;
  font-size: 14px;
  color: #666666;
}
</style>