<style>
.approvalBox{
    height: 100%;
    position: absolute;
    width: 100%;
}
.approvalBox .head{
    height: 83px;
    background-color: white;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    position: absolute;
    top: 0;
    width: 100%;
}
.approvalBox .head div{
    display: flex;
    align-items: center;
    font-weight:bold;
}
.approvalBox .head div img{
    padding-right: 10px;
}
.approvalBox .body{
    padding: 31px 20px;
    background:rgba(244,245,249,1);
    height: calc(100% - 147px);
    box-sizing: border-box;
    position: absolute;
    top: 83px;
    width: 100%;
}
.approvalBox .body .content{
    height: calc(100%);
    box-sizing: border-box;
    padding: 20px;
    background-color: white;
    overflow: auto;
}
.approvalBox .body .content .top{
    display: flex;
    align-items: center;
    color:rgba(17,17,17,1);
    padding-bottom: 15px;
    border-bottom: 1px solid rgba(226,226,226,1);
}
.approvalBox .body .content .top>div:nth-child(1){
    margin-right: 10px;
}
.approvalBox .body .content .top .contact{
    font-size:14px;
    font-weight:bold;
    margin-bottom: 5px;
}
.approvalBox .body .content .top .phone{
    font-size:12px;
    font-weight:400;
}
.approvalBox .body .content .top .phone .iconfont{
    padding-right: 5px;
    font-size:12px;
}
.approvalBox .body .content .bottom .item .tit{
    margin-top: 20px;
    font-size: 12px;
    display: flex;
    align-items: center;
}
.approvalBox .body .content .bottom>div{
    overflow: auto;
    height: 100%;
}
.approvalBox .body .content .bottom .item .tit img{
    padding-right: 10px;
}
.approvalBox .body .content .bottom .item .neirong{
    padding-top: 10px;
}
.approvalBox .body .content .bottom .item .neirong img{
    width: 110px;
    height: 110px;
    margin-top: 7px;
    margin-right: 7px;
}
.approvalBox .body .content .bottom .item .neirong p{
    padding: 12px 10px;
    font-size:12px;
    font-weight:400;
    color:rgba(17,17,17,1);
    background:rgba(243,246,253,1);
}
.approvalBox .body .content .bottom .item .shenhe .shenhe_top{
    margin: 10px 0;
    display: flex;
    align-items: center;
}
.approvalBox .body .content .bottom .item .shenhe .shenhe_top .pad{
    display: inline-block;
    padding: 0 5px;
}
.approvalBox .body .content .bottom .item .shenhe .shenhe_top .shenhe_head{
    border-radius: 50%;
}
.approvalBox .body .content .bottom .item  .shenhe .neirong{
    padding-left: 30px;
    padding-top: 0;
}
.tongguo{
    display: flex;
    align-items: center;
    text-align: center;
    justify-content: space-between;
    width: 250px;
    margin: 0 auto;
}
.tongguo>div{
    line-height: 18px;
    color: #333;
    font-size: 12px;
    text-align: center;
    border: 2px solid #fff;
    cursor: pointer;
    background: #fff;
    height: 110px;
    width: 110px;
    margin-top: 20px;
    box-sizing: border-box;
}
.tongguo>div.cked {
    border: 2px solid #E95252;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
.tongguo>div img {
    float: left;
    margin: 10px 23px;
    width: 63px;
    height: 63px;
}
.approvalBox .footer{
    height: 54px;
    padding-bottom: 10px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    position: absolute;
    bottom: 0;
    width: 100%;
}
</style>
<template>
  <div class="approvalBox"  v-if="!loading">
    <div class="head">
        <div>
            <img src="../../assets/img/cust/a-head1.png" alt="">
            <h1>{{details.CustomerInfo.CustomerName}}</h1>
        </div>
        <img src="../../assets/img/cust/close.png" alt="">
    </div>
    <div class="body">
        <div class="content">
            <div class="top">
                <div>
                    <img v-if='!details.photo' src="../../assets/img/cust/litheader.png"/>
                    <img v-if='details.photo' :onerror="defaultImg" :src='details.photo'/>
                </div>
                <div>
                    <p class="contact">{{details.CustomerInfo.CustomerName}}</p>
                    <p class="phone"><i class="iconfont icondianhua"></i>{{details.CustomerInfo.Contact}}  {{details.CustomerInfo.ContactNumber}}</p>
                </div>
            </div>
            <div class="bottom">
                <div>
                    <div class="item">
                        <div class="tit">
                            <img src="../../assets/img/cust/a_mp.png" alt="">
                            <span>名片照片</span>
                        </div>
                        <div class="neirong" v-if="details.CustomerInfo.BusinessCardPhotos">
                            <img v-for="(item, index) in details.CustomerInfo.BusinessCardPhotos" :key="index" :src="item" alt="">
                        </div>
                        <div v-else class="neirong">
                            <p>无</p>
                        </div>
                    </div>
                    <div class="item">
                        <div class="tit">
                            <img src="../../assets/img/cust/a-mp1.png" alt="">
                            <span>门牌照片</span>
                        </div>
                        <div class="neirong" v-if="details.CustomerInfo.HousePhotos">
                            <img v-for="(item, index) in details.CustomerInfo.HousePhotos" :key="index" :src="item" alt="">
                        </div>
                        <div v-else class="neirong">
                            <p>无</p>
                        </div>
                    </div>
                    <div class="item">
                        <div class="tit">
                            <img src="../../assets/img/cust/a-zz.png" alt="">
                            <span>营业执照</span>
                        </div>
                        <div class="neirong" v-if="details.CustomerInfo.Images">
                            <img v-for="(item, index) in details.CustomerInfo.Images" :key="index" :src="item" alt="">
                        </div>
                        <div v-else class="neirong">
                            <p>无</p>
                        </div>
                    </div>
                    <div class="item">
                        <div class="tit">
                            <img src="../../assets/img/cust/a-zz.png" alt="">
                            <span>开发说明</span>
                        </div>
                        <div class="neirong">
                            <p>{{details.CustomerInfo.Remark==''?'无':details.CustomerInfo.Remark}}</p>
                        </div>
                    </div>
                    <div class="item">
                        <div class="tit">
                            <img src="../../assets/img/cust/a-zz.png" alt="">
                            <span>拜访结果</span>
                        </div>
                        <div class="neirong">
                            <p>{{details.CustomerInfo.VisitRecord==''?'暂无':details.CustomerInfo.VisitRecord}}</p>
                        </div>
                    </div>
                    <div class="item">
                        <div class="tit">
                            <img src="../../assets/img/cust/a-sp.png" alt="">
                            <span>审批意见</span>
                        </div>
                        <div class="shenhe" v-for="(item, index) in answerDetailList" :key="index">
                            <div class="font-size-12 shenhe_top">
                                <img v-if='!item.emPhoto' width="24px" height="24px" src="../../assets/img/cust/litheader.png"/>
                                <img v-else class="shenhe_head" width="24px" height="24px" :src="item.emPhoto" alt="">
                                <span class="pad">{{item.createBy}}</span>
                                <span class="pad font-color-info">{{item.createDate}}</span>
                                <span class="pad font-color-success" v-if="item.adviceStatus==1">审批已通过</span>
                                <span class="pad font-color-warning" v-if="item.adviceStatus==2">审批已拒绝</span>
                            </div>
                            <div class="neirong">
                                <P>{{item.adviceContent ? item.adviceContent : '无'}}</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="footer" v-show="CustomerStatus==0||CustomerStatus==1">
        <el-button class="crm-btn crm-btn-mini query-btn" @click="addMsg.AdviceStatus=1, dialogTableVisible = true">通过</el-button>
        <el-button class="crm-btn query-btn crm-btn-mini easy-btn" @click="addMsg.AdviceStatus=2, dialogTableVisible = true">拒绝</el-button>
    </div>
    <el-dialog :title="`审批意见(${addMsg.AdviceStatus === 1 ? '通过' : '拒绝'})`" :visible.sync="dialogTableVisible" :modal="false">
        <el-form :model="addMsg" ref="addMsg" v-if="addMsg.AdviceStatus === 2">
            <el-form-item >
                <el-input placeholder="请输入拒绝缘由" type="textarea"  v-model="addMsg.AdviceContent" ></el-input>
            </el-form-item>
        </el-form>
        <div v-else class="tongguo">
            <div :class="{cked:addMsg.IsMember==2}" @click="addMsg.IsMember=2">
                <div>
                    <img src="../../assets/img/cust/notVip.png" alt="">
                </div>
                <div>
                    <span>普通客户</span>
                </div>
            </div>
            <div :class="{cked:addMsg.IsMember==1}" @click="addMsg.IsMember=1">
                <div>
                    <img src="../../assets/img/cust/isVip.png" alt="">
                </div>
                <div>
                    <span>会员客户</span>
                </div>
            </div>
        </div>
        <div slot="footer" class="dialog-footer">
            <el-button type="primary" class="add-box-btn" @click="addData">确 定</el-button>
            <el-button class="add-box-btn add-box-cancel" @click="dialogTableVisible = false, addMsg.AdviceContent = ''">取 消</el-button>
        </div>
    </el-dialog>
  </div>
</template>
<script>
export default {
    props: ['CustomerId', 'CustomerStatus'],
  data() {
    return {
        loading: true,
        dialogTableVisible: false,
        addMsg:{
            CustomerId:0,
            AdviceStatus:0,
            AdviceContent:'',
            FollowupID:-1,
            IsMember:2,
        },
        details: {},
        answerDetailList: []
    };
  },watch:{
        CustomerId: {
            handler(val, oldVal){
                this.getDetails()
                this.getsh()
            },
            deep:true
        },
        CustomerStatus: {
            handler(val, oldVal){
            }
        }
    },
  mounted() {
      this.getDetails()
      this.getsh()
    },
  methods: {
    getDetails(){
        this.loading = true
        this.apipost('/api/CustomerExamine/GetCustomerAdvice', {CustomerId: this.CustomerId},res=>{
            if(res.data.resultCode==1){
                this.loading = false
                this.details = res.data.data
            }else{
                this.$message.error(res.data.message)
            }
        },err=>{})
    },
    getsh(){
        this.apipost2('app_today_visit_GetCustomerAdvice',{CustomerId:this.CustomerId},res=>{
            if(res.data.resultCode==1){
                this.answerDetailList=res.data.data
            }
        },err=>{})
    },
    addData(){
        if(this.addMsg.AdviceStatus==1){
            this.addMsg.AdviceContent=''	
        }else{
            if(this.addMsg.AdviceContent==='') {
                this.$message.error('请输入拒绝缘由!')
                return 
            }
            this.addMsg.IsMember=2	
        }
        this.addMsg.CustomerId = this.CustomerId
        this.apipost('/api/CustomerExamine/SetCustomerAdvice',this.addMsg,res=>{
            if(res.data.resultCode==1){
                this.$message.success(res.data.message)
                this.dialogTableVisible = false
                this.$emit('getList')
            }else{
                this.$message.error(res.data.message)
            }
        },err=>{})
    },
  }
};
</script>
