<template>
    <div>
        <div  v-show="isShow">
            <!-- <div >
                <h2 style="float:left">基本信息</h2>
                <el-button style="float:right;margin-right:65px" type="primary"   @click="addQuestion">新增反馈记录</el-button>
            <br/>
            </div>

            <br/>
            <br/>
            <el-row :gutter="20"  :data="loanUserBasicList" style="margin-left:50px">
                <el-col :span="8"><div class="grid-content bg-purple">姓名：{{loanUserBasicList.clientName}}</div></el-col>
                <el-col :span="8"><div class="grid-content bg-purple">身份证号：{{loanUserBasicList.certNo}}</div></el-col>
                <el-col :span="8"><div class="grid-content bg-purple">手机号：{{loanUserBasicList.clientCell}}</div></el-col>
             </el-row>
             <br/>
             <el-row :gutter="20"   style="margin-left:50px">
                <el-col :span="8"><div class="grid-content bg-purple">住宅地址：{{basicInfo.houseAddress}}</div></el-col>
                <el-col :span="8"><div class="grid-content bg-purple">客户单位名称：{{companyInfo.companyName}}</div></el-col>
                <el-col :span="8"><div class="grid-content bg-purple">客户单位地址：{{companyInfo.companyAddress}}</div></el-col>
             </el-row>
             <br/>
             <el-row :gutter="20"  :data="basicInfo" style="margin-left:50px">
                <el-col :span="8">
                    <div class="grid-content bg-purple">第一联系人姓名：{{basicInfo.firstName}}</div>
                 </el-col>
                <el-col :span="8">
                    <div class="grid-content bg-purple">第一联系人电话：{{basicInfo.firstPhone}}</div>
                </el-col>
            </el-row>
            <br/>
            <el-row :gutter="20"  :data="basicInfo" style="margin-left:50px">
                <el-col :span="8">
                    <div class="grid-content bg-purple">第二联系人姓名：{{basicInfo.secondName}}</div>
                </el-col>
                <el-col :span="8">
                    <div class="grid-content bg-purple">第二联系人电话：{{basicInfo.secondPhone}}</div>
                </el-col>
            </el-row>
            <br/><br/>
            <div >
                <h2 style="float:left">用户身份信息</h2><br/>
            </div>
            <br/><br/>

            <el-row :gutter="20" style="margin-left:50px">
                <el-col :span="6">
                    <div class="grid-content bg-purple">身份证地址：{{identifyInfo.address}}</div>
                </el-col>
                <el-col :span="6">
                    <div class="grid-content bg-purple">身份证发证处：{{identifyInfo.issuedBy}}</div>
                </el-col>
            </el-row>
            <br/><br/>
            <el-row :gutter="20" style="margin-left:50px">
                <el-col :span="8">
                    <div class="grid-content bg-purple">
                        <el-popover placement="right" title="身份证图片正面" trigger="hover">
                            <img :src="identifyInfo.frontFile" width="400px" height="350px"/>
                            <img slot="reference" :src="identifyInfo.frontFile" :alt="identifyInfo.frontFile"
                                    style="max-height: 200px;max-width: 200px">
                        </el-popover>
                    </div>
                </el-col>
                <el-col :span="8">
                    <div class="grid-content bg-purple">
                        <el-popover placement="right" title="身份证图片反面" trigger="hover">
                            <img :src="identifyInfo.backFile" width="400px" height="350px"/>
                            <img slot="reference" :src="identifyInfo.backFile" :alt="identifyInfo.backFile"
                                    style="max-height: 200px;max-width: 200px">
                        </el-popover>
                    </div>
                </el-col>
                <el-col :span="8">
                    <div class="grid-content bg-purple">
                        <el-popover placement="right" title="身份证手持照" trigger="hover">
                            <img :src="identifyInfo.natureFile" width="400px" height="350px"/>
                            <img slot="reference" :src="identifyInfo.natureFile" :alt="identifyInfo.natureFile"
                                    style="max-height: 200px;max-width: 200px">
                        </el-popover>
                    </div>
                </el-col>
            </el-row>

            <el-divider></el-divider> -->
            
            <h2>申请信息</h2>
            <br/>
            <p style="margin-left:50px"><strong>当前借款</strong></p>
            <br/>
            <el-row :gutter="20"  :data="loanModel" style="margin-left:50px">
                <el-col :span="6" ><div class="grid-content bg-purple"  >申请日期：{{loanModel.startDate | dateFilter}}</div></el-col>
                <el-col :span="6"><div class="grid-content bg-purple">绑定银行卡：{{loanUserBasicList.bankAccount}}</div></el-col>
                 <el-col :span="6">
                    <div class="grid-content bg-purple">借款渠道：{{loanUserBasicList.channelSign}}</div>
                </el-col>
            </el-row>
            <br/>
            <el-row :gutter="20"  :data="loanModel" style="margin-left:50px">
                <el-col :span="6"><div class="grid-content bg-purple">本金：{{loanModel.raiseAmt}}</div></el-col>
                <el-col :span="6"><div class="grid-content bg-purple">总服务费：{{loanModel.serviceAmt}}</div></el-col>
                <el-col :span="6"><div class="grid-content bg-purple">总利息：{{loanModel.rateAmt}}</div></el-col>
                <el-col :span="6"><div class="grid-content bg-purple">期数：{{loanModel.loanLimit}}</div></el-col>
            </el-row>
            <br/>

             <el-table :data="loanApplyList" stripe style="width: 100%;margin-left:50px">
                <el-table-column prop="planNo" label="计划编号" ></el-table-column>
                <el-table-column prop="planIndex" label="期数" ></el-table-column>
                <el-table-column prop="planAmt" label="应还总金额" ></el-table-column>
                <el-table-column prop="planBen" label="本金" ></el-table-column>
                <el-table-column prop="planFu" label="服务费" ></el-table-column>
                <el-table-column prop="planXi" label="利息" ></el-table-column>
                <el-table-column prop="planDate" label="最后还款日"  :formatter="dateFormat" ></el-table-column>
                <el-table-column prop="status" label="状态" :formatter="statusFormat" ></el-table-column>
                <el-table-column label="操作">
                    <template scope="scope">
                        <!-- <el-button type="text" size="small" @click="offineTransfer(scope.row)"  v-if="scope.row.isCanTransfer == 'YES'" >线下转账</el-button>
                        <el-button type="text" size="small" @click="offineTransfer(scope.row)"  v-else disabled>线下转账</el-button> -->
                        <el-button type="text" size="small" @click="readDetail(scope.row)">查看详情</el-button>
                    </template>
                </el-table-column>
            </el-table>

             <el-divider></el-divider>

            <h2>认证信息</h2>
            <br/>
            <el-row :gutter="20" style="margin-left:50px">
                <el-col :span="6"><div class="grid-content bg-purple">实名认证：已认证</div></el-col>
                <el-col :span="6"><div class="grid-content bg-purple">基础信息：已认证</div></el-col>
                <el-col :span="6"><div class="grid-content bg-purple">活体识别：已认证</div></el-col>
                <el-col :span="6"><div class="grid-content bg-purple">运营商：已认证</div></el-col>
            </el-row>

            <el-divider></el-divider>

            <h2>反馈问题记录</h2>
            <br/>
            <el-table :data="loanBackedList" stripe style="width: 100%;">
                <el-table-column prop="code" label="问题编号" ></el-table-column>
                <el-table-column prop="gmtCreated" label="记录时间"  :formatter="dateFormat" ></el-table-column>
                <el-table-column prop="creator" label="跟进人" ></el-table-column>
                <el-table-column prop="pointName" label="功能点" ></el-table-column>
                <el-table-column prop="title" label="问题标题" ></el-table-column>
                <el-table-column prop="problemDescription" label="问题描述" ></el-table-column>
                <el-table-column prop="solve" label="解决方式" ></el-table-column>
                <el-table-column prop="status" label="状态"  :formatter="serviceFormat"></el-table-column>
                <el-table-column label="操作">
                    <template scope="scope">
                        <el-button type="text" size="small" @click="getBackedDetails(scope.row)">反馈到微信</el-button>
                        <!-- <el-button type="text" size="small" @click="updateQueDialog(scope.row)">修改</el-button> -->
                    </template>
                </el-table-column>
            </el-table>
            

            
        </div>

        
    <!--窗口组件-->
    <template>
      <!--新增窗口-->
      <addQuestion
        v-if="ui.addQuestion.visible"
        :dialogVisible.sync="ui.addQuestion.visible"
        >
      </addQuestion>
    </template>

     <!--窗口组件-->
    <template>
      <!--修改窗口-->
      <updateQueDialog
        v-if="ui.updateQueDialog.visible"
        :pointName="ui.updateQueDialog.pointName"
        :title="ui.updateQueDialog.title"
        :code="ui.updateQueDialog.code"
        :problemDescription="ui.updateQueDialog.problemDescription"
        :solve="ui.updateQueDialog.solve"
        :status="ui.updateQueDialog.status"
        :creator="ui.updateQueDialog.creator"
        :dialogVisible.sync="ui.updateQueDialog.visible">
      </updateQueDialog>
    </template>

    <!-- 详情组件 -->

    <template>
      <readDetail
        v-if="ui.readDetail.visible"
        :planNo="ui.readDetail.planNo"
        :planIndex="ui.readDetail.planIndex"
        :planAmt="ui.readDetail.planAmt"
        :backedBen="ui.readDetail.backedBen"
        :backedFu="ui.readDetail.backedFu"
        :planXi="ui.readDetail.planXi"
        :planFu="ui.readDetail.planFu"
        :planBen="ui.readDetail.planBen"
        :backedXi="ui.readDetail.backedXi"
        :loanLimit="ui.readDetail.loanLimit"
        :dialogVisible.sync="ui.readDetail.visible">
      </readDetail>
    </template>
<!-- 线下转账 -->
    <template>
      <offineTransfer
        v-if="ui.offineTransfer.visible"
        :orderNo="ui.offineTransfer.orderNo"
        :periodNo="ui.offineTransfer.periodNo"
        :planNo="ui.offineTransfer.planNo"
        :planAmt="ui.offineTransfer.planAmt"
        :planFu="ui.offineTransfer.planFu"
        :planBen="ui.offineTransfer.planBen"
        :planXi="ui.offineTransfer.planXi"
        :dialogVisible.sync="ui.offineTransfer.visible">
      </offineTransfer>
    </template>


    </div>
</template>

<script>
    import * as moment from "moment";
    import addQuestion from "../byh/AddQuestion";
    import updateQueDialog from "../byh/UpdateQueDialog";
    import readDetail from "../byh/readDetail";
    import offineTransfer from "../byh/offineTransfer";
    export default {
        name: "ByhLoanBackedList",
        components: {
            addQuestion,
            updateQueDialog,
            readDetail,
            offineTransfer,
        },
        data(){
            return {
                flag: false,
                isShow:true,
                page: {
                    current: 1,
                    size: 10,
                    total: 0
                },
                loanBackedList:[],
                loanUserBasicList:[{
                    clientName:'',
                    certNo:'',
                    clientCell:'',
                    channelSign:'',
                }],
                basicInfo:[{
                    houseAddress:'',
                    firstName:'',
                    firstPhone:'',
                    secondName:'',
                    secondPhone:'',
                }],
                identifyInfo:[{
                    address:'',
                    issuedBy:'',
                    frontFile:'',
                    backFile:'',
                    natureFile:'',
                    frontFile:'',
                }],
                loanApplyList:[{
                    planNo:'',
                    planIndex:'',
                    planAmt:'',
                    backedBen:'',
                    backedFu:'',
                    planXi:'',
                    planDate:'',
                    status:'',
                    backedBen:'',
                }],
                companyInfo:[{
                    companyName:'',
                    companyAddress:'',
                }],
                loanModel:[{
                    startDate:'',
                    raiseAmt:'',
                    serviceAmt:'',
                    rateAmt:'',
                    loanLimit:'',
                    orderNo:''
                }],
                formInline: {
                    clientCell: '',
                },
                 ui: {
                    addQuestion: {
                        visible: false
                    },
                    updateQueDialog: {
                        visible: false,
                        pointCode: '',
                        pointName:'',
                        title: '',
                        problemDescription:'',
                        solve:'',
                        creator:'',
                        code:'',
                        status:''
                    },
                    readDetail: {
                        visible: false,
                        planNo: '',
                        planIndex: '',
                        planAmt: '',
                        backedBen: '',
                        backedFu: '',
                        planXi: '',
                        loanLimit:'',
                        planFu:'',
                        backedXi:'',
                        planBen:'',
                    },
                    offineTransfer:{
                        visible: false,
                        orderNo: '',
                        periodNo: '',
                        planAmt:'',
                        planFu:'',
                        planBen:'',
                        planXi:'',
                        planNo: '',
                    },
                },
            }
        },
        filters:{
            
            dateFilter: function (row) {
                var date = row
                if (date == undefined) {
                    return ''
                }
                return moment(date).format("YYYY-MM-DD")
            }

        },
        methods: {
            // 反馈弹窗
             addQuestion() {
                this.ui.addQuestion = {
                    visible: true,
                };
            },
            readDetail(record){
                this.ui.readDetail = {
                    visible: true,
                    planNo: record.planNo,
                    planIndex: record.planIndex,
                    planAmt: record.planAmt,
                    backedBen: record.backedBen,
                    backedFu: record.backedFu,
                    planXi: record.planXi,
                    planBen: record.planBen,
                    loanLimit: record.loanLimit,
                    planFu: record.planFu,
                    backedXi: record.backedXi,
                };
            },
            offineTransfer(record){
                record.orderNo = this.loanModel.orderNo
                this.ui.offineTransfer = {
                    visible: true,
                    orderNo: record.orderNo,
                    planNo: record.planNo,
                    periodNo: record.planIndex,
                    planAmt: record.planAmt,
                    planFu: record.planFu,
                    planBen: record.planBen,
                    planXi: record.planXi,
                };
            },
            toggle:function(){
                this.isShow = !this.isShow;
            },
            /** 加载数据 */
            backedData(params) {
                this.$$get('/customer/getUserDetails', this.buildParam()).then(res => {
                    if (res.data.code < 1) {
                        this.isShow = false;
                        this.$message.error(res.data.msg);
                        return
                    }else{
                        this.loanUserBasicList = res.data.data;
                        this.basicInfo  = res.data.data.basicInfo ? res.data.data.basicInfo : '';
                        this.loanApplyList = res.data.data.planRemindModels;
                        this.loanBackedList = res.data.data.questionVOList;
                        this.identifyInfo = res.data.data.identifyInfo;
                        this.loanModel = res.data.data.loanModel
                        this.companyInfo = res.data.data.companyInfo;
                        this.loanModel.bankAccount  = res.data.data.bankAccount;
                        this.isShow = true;
                        this.loanChannelStatus(this.loanUserBasicList.channelSign)
                        localStorage.setItem('clientNo', this.loanUserBasicList.clientNo)

                    }
                    
                }).catch(error => {
                    this.isShow = false;
                    this.$Message.error(error || '系统异常');
                });
            },

            /*查看详情*/
            getBackedDetails(record) {
                record.clientName = this.loanUserBasicList.clientName;
                record.clientCell = localStorage.getItem("clientNo");
                let messageName  = record.clientName+' '+record.clientCell;
                let operateName = '问题描述：'+record.problemDescription+'';
                //1.我们要将后台返回的数据转存成数组，格式为： data=['错误提示一！！！','错误提示二！！！','错误提示三！！！'];
                let data = [messageName,operateName];
                //2.新建newDatas数组
                let newDatas = [];
                const h = this.$createElement;
                //3.通过循环data数组，调用h方法，将每项值传给h,h('标签名',样式,具体内容)
                for(let i in data){
                //4.将data数据push进newDatas数组中
                    newDatas.push(h('p',null,data[i]));
                };
                    this.$msgbox({
                    title: '选中后复制内容',
                    message: h('div',null, newDatas),
                    showCancelButton: true,
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    }).then(action => {
                            this.$message({
                                type: 'success',
                                message: '请发送给技术人员解决相关问题'
                            });
                    }).catch(() => {});
            },
            // 修改用户的反馈问题
             updateQueDialog(record) {
                
                this.ui.updateQueDialog = {
                    visible: true,
                    pointCode: record.pointCode,
                    pointName: record.pointName,
                    title: record.title,
                    status: record.status,
                    problemDescription: record.problemDescription,
                    solve: record.solve,
                    creator: record.creator,
                    code: record.code
                };
            },

            /*搜索条件*/
            onSubmit() {
                this.backedData();
            },

            /** 处理分页操作*/
            handleCurrentChange() {
                this.loanBackedList = this.backedData()
            },

            dateFormatText: function (param) {
                return moment(param).format("YYYY-MM-DD");
            },

            getDate(param, num) {
                if (param && param[num] !== '') {
                    return moment(param[num]).format("YYYY-MM-DD")
                }
                return ""
            },

            mergeDate(param1, param2) {
                if (param1 == "") {
                    return ""
                }
                var array = new Array();
                array[0] = new Date(param1)
                array[1] = new Date(param2)
                return array;
            },

            /*日期*/
            dateFormat: function (row, column) {
                var date = row[column.property]
                if (date == undefined) {
                    return ''
                }
                return moment(date).format("YYYY-MM-DD")
            },
            loanChannelStatus: function (row) {
                var status = row;
                this.loanUserBasicList.channelSign =  this.$enumUtils.toMsg('loanChannel', status);
            },
            //客服状态
            serviceFormat: function (row, column) {
                var status = row['status'];
                return this.$enumUtils.toMsg('ServiceStatus', status);
            },
            //还款单状态
            statusFormat: function (row, column) {
                var status = row['status'];
                return this.$enumUtils.toMsg('LoanStatusEnum', status);
            },
            //结果状态
            resultFormat: function (row, column) {
                var result = row['result'];
                if(result!=null){
                    return this.$enumUtils.toMsg('SuccessAndFail', result);
                }else{
                    return '未处理';
                }

            },

            /** 处理分页操作*/
            handleCurrentChange() {
                this.loanBackedList = this.backedData()
            },

            //参数
            buildParam() {
                var return_hash = {
                    clientCell: this.formInline.backedType,
                };
                if (this.formInline.clientCell != '') {
                    return_hash['clientCell'] = this.formInline.clientCell
                }
                return return_hash;
            },
        },
        created() {
            this.formInline.clientCell = this.$route.query.phone;
        },

        mounted: function () {
            this.onSubmit();
        },
    }


</script>

<style scoped>

</style>