{extend name="Public/wx_base" /}
{block name="title"}客资排程详情{/block}
{block name="main"}
	<!--标准mui.css-->
	<link rel="stylesheet" href="__PUBLIC__/mobile/mui/css/mui.min.css?v={$Think.const.APP_VERSION}">
	<style>
		html, body {
			background-color: #f7f7f7;
		}
		#create_order{
			background-color: #16d0de;
			color:#fff;
		}
		.dt #order{
			background-color: #5CFF4A;;
			color:#fff;
			border: 1px solid #FFF;
		}
		.dt #hx{
			background-color: #21E1FF;
			color:#fff;
			border: 1px solid #FFF;
		}
		.dt #qx{
			background-color: #BDBDBD;
			color:#fff;
			border: 1px solid #FFF;
		}
		/*跨webview需要手动指定位置*/
		.mui-plus header.mui-bar {
			display: none!important;
		}
		.mui-plus .mui-bar-nav~.mui-content {
			padding: 0!important;
		}

		.mui-plus .plus{
			display: inline;
		}

		.plus{
			display: none;
		}

		#topPopover {
			position: fixed;
			top: 16px;
			right: 6px;
		}
		#topPopover .mui-popover-arrow {
			left: auto;
			right: 6px;
		}
		p {
			text-indent: 22px;
		}
		span.mui-icon {
			font-size: 14px;
			color: #007aff;
			margin-left: -15px;
			padding-right: 10px;
		}
		.mui-popover {
			height: 200px;
		}
		.mui-content {
			padding: 10px;
		}
        .mui-input-row label {
            font-family: 'Helvetica Neue', Helvetica, sans-serif;
            line-height: 1.3rem;
            float: left;
            width: 36%;
            padding: 11px 15px;
        }
	    .sub .submit,.sub .cancer{
	        background-color: #16d0de;
	        color: #fff;
	        border-radius: 4px;
	        padding: 0 5px;
	        display: inline-block;
	        margin: 0 5px;
	        width: 80px;
	        line-height: 30px;
	    }
	    .sub .cancer{
	        background: #ccc;
	    }
		.crm_tb_ra{
			float: none;
			white-space: nowrap;
			width: 120px;
			clear: both;
		}
	</style>
	<script>
		mui('body').on('tap','a',function(){
			window.top.location.href=this.href;
		});
	</script>
<div class="mui-content">
	<div class="dt">
		<strong>上门状态</strong>
		<small class="dt_zt">
			{if condition="$info.status eq 1"}
			未上门
			{elseif condition="$info.status eq 2"}
			已成交
			{elseif condition="$info.status eq 3"}
			未成交
			{elseif condition="$info.status eq 4"}
			已取消
			{/if}
		</small>
	</div>
	<div class="dt">
		<strong>上门反馈</strong>
		<span class="dt_normal" id="new_feed">
			{$info.reason}
		</span>
	</div>
	<div class="dt"><strong>上门类型</strong><span class="dt_normal">{$info.sm_type}</span></div>
	<div class="dt"><strong>消费类型</strong><span class="dt_normal">{$info.consulation_type}</span></div>
	<div class="dt"><strong>上门日期</strong><span class="dt_normal">{$info.pc_time}</span></div>
	<div class="dt">
		<strong>宝宝姓名</strong>
		<span class="dt_normal">
			{$info.baby_name}
		</span>
	</div>
	<div class="dt">
		<strong>宝宝生日</strong>
		<span class="dt_normal">
			{$info.baby_birthday}
		</span>
	</div>
	<div class="dt">
		<strong>客户姓名</strong>
		<span class="dt_normal">{$info.customer_name}</span>
	</div>
	<div class="dt"><strong>客资店面</strong><span class="dt_normal">{$info.shop_name}</span></div>
	<div class="dt"><strong>服务店面</strong><span class="dt_normal">{$info.pc_shop_name}</span></div>
	<div class="dt">
		<strong>客户手机</strong>
		<span class="dt_orange">
		<a href="tel:{$info.customer_tel}">{$info.customer_tel}</a>
		</span>
	</div>

	<div class="dt"><strong>客资类型</strong><span class="dt_normal">{if $info.customer_type eq 1}新单{else/}转介绍{/if}</span></div>
	<div class="dt"><strong>微信</strong><span class="dt_normal">{$info.customer_wechat}</span></div>
	<div class="dt"><strong>地址</strong><span class="dt_normal">{$info.county}&nbsp;&nbsp;{$info.customer_address}</span></div>
	<div class="dt"><strong>备注</strong><span class="dt_normal">{$info.customer_remark}</span></div>
	{if $info.customer_type eq 2}<div class="dt"><strong>介绍人</strong><span class="dt_normal">{$info.introducer_name}</span></div>{/if}
	<div class="dt"><strong>上门人员</strong><span class="dt_normal">{$info.cameraman_name}/{$info.tutor_name}</span></div>
	<!-- <div class="dt"><strong>销售</strong><span class="dt_normal">{$info.sale_name}</span></div> -->
	<div class="dt"><strong>网销</strong><span class="dt_normal">{$info.sales_staff}</span></div>
</div>
<div id="middlePopover" class="mui-popover">
	<div class="mui-popover-arrow"></div>
	<div class="mui-scroll-wrapper">
		<div class="mui-scroll">
			<ul class="mui-table-view">
			<!--	<li class="mui-table-view-cell">
                    <div class="mui-input-row">
                        <label>操&nbsp;&nbsp;作</label>
                        <div style="float: left">
                            &lt;!&ndash;<div class="mui-radio mui-left crm_tb_ra">&ndash;&gt;
                                &lt;!&ndash;<label>核销</label>&ndash;&gt;
                                &lt;!&ndash;<input class="radio-item" name="tan_status" value="2" type="radio"checked>&ndash;&gt;
                            &lt;!&ndash;</div>&ndash;&gt;
                            &lt;!&ndash;<div class="mui-radio mui-left crm_tb_ra">&ndash;&gt;
                                &lt;!&ndash;<label>改期</label>&ndash;&gt;
                                &lt;!&ndash;<input class="radio-item" name="tan_status"value="3" type="radio">&ndash;&gt;
                            &lt;!&ndash;</div>&ndash;&gt;
                            <div class="mui-radio mui-left crm_tb_ra">
                                <label>取消</label>
                                <input class="radio-item" name="tan_status"value="4" type="radio" checked>
                            </div>
                        </div>
                    </div>
				</li>-->
				<!--<li class="mui-table-view-cell">-->
                    <!--<div class="mui-input-row">-->
                        <!--<label>核销码：</label>-->
                        <!--<input type="text" value="{$info.code}" placeholder="请输入核销码"name="code"style="background: #fff;width:60%">-->
                    <!--</div>-->
				<!--</li>-->
				<!--<li class="mui-table-view-cell gq" style="display: none;">-->
                    <!--<div class="mui-input-row">-->
                    <!--<label>改期原因</label>-->
                    <!--<select class="mui-btn mui-btn-block"style="width:60%" name="" id="gq">-->
                        <!--<option value="">请选择改期原因</option>-->
                        <!--{volist name="$gq" id="gq"}-->
                        <!--<option value="{$gq.reason}">{$gq.reason}</option>-->
                        <!--{/volist}-->
                    <!--</select>-->
                    <!--</div>-->
				<!--</li>-->
				<li class="mui-table-view-cell qx" style="display: block;">
                    <div class="mui-input-row">
                        <label>取消原因</label>
                        <!--<select class="mui-btn mui-btn-block"style="width:60%"  name="" id="qx">
                            <option value="">请选择取消原因</option>
                            {volist name="$cancel" id="in"}
                            <option value="{$in.reason}">{$in.reason}</option>
                            {/volist}
                        </select>-->
						<textarea name="qx" id="reason" cols="10" rows="3" style="margin-top: -20px;">{$info.reason}</textarea>
                    </div>
				</li>
			</ul>
            <ul class="mui-table-view">
                <li class="mui-table-view-cell sub" style="text-align: center">
                    <button class="submit" id="error">确定</button>
                    <!-- <button class="cancer">取消</button> -->
                </li>
            </ul>

		</div>
	</div>

</div>
<div id="middlePopover2" class="mui-popover">
	<div class="mui-popover-arrow"></div>
	<div class="mui-scroll-wrapper">
		<div class="mui-scroll">
			<ul class="mui-table-view">

				<li class="mui-table-view-cell qx" style="display: block;">
                    <div class="mui-input-row">
                        <label>反馈内容</label>
						<textarea name="feedback" id="feedback" cols="10" rows="3" style="margin-top: -20px;">{$info.reason}</textarea>
                    </div>
				</li>
			</ul>
            <ul class="mui-table-view">
                <li class="mui-table-view-cell sub" style="text-align: center">
                    <button class="submit" id="feedback_sub">确定</button>
                    <button class="cancer">取消</button>
                </li>
            </ul>

		</div>
	</div>

</div>
<div id="middlePopover1" class="mui-popover">
	<div class="mui-popover-arrow"></div>
	<div class="mui-scroll-wrapper">
		<div class="mui-scroll">
			<ul class="mui-table-view">
				<li class="mui-table-view-cell">
					<div class="mui-input-row">
						<input type="text" placeholder="请输入核销码" id="code" value="">
						<input type="hidden" value="{$info.code}">
					</div>
				</li>
				<li class="mui-table-view-cell qx" style="display: block;">
                    <div class="mui-input-row">
						<button id="create_order" class="mui-btn-primary mui-btn-block mui-btn-outlined">开单</button>
						<button class="mui-btn-primary mui-btn-block mui-btn-outlined cancer" id="hx">核销</button>
                    </div>
				</li>
			</ul>
		</div>
	</div>

</div>
<div class="dt" style="margin-top:10px;">
	{if $info.status == '1'}
<a href="/crm/Visit/mobileOrder/id/{$info.id}" id="order" class="mui-btn mui-btn-primary mui-btn-block mui-btn-outlined" style="padding: 5px 20px;">开单</a>
	<a href="#middlePopover1" id="hx" class="mui-btn mui-btn-primary mui-btn-block mui-btn-outlined" style="padding: 5px 20px;">核销</a>
	<a href="#middlePopover" id="qx" class="mui-btn mui-btn-primary mui-btn-block mui-btn-outlined" style="padding: 5px 20px;">上门取消</a>
	{/if}
	{if $info.status == '2' || $info.status == '3'}
	<a href="/crm/Visit/mobileOrder/id/{$info.id}" id="order" class="mui-btn mui-btn-primary mui-btn-block mui-btn-outlined" style="padding: 5px 20px;">开单</a>
	{/if}
	<a href="#middlePopover2" id="fk" class="mui-btn mui-btn-primary mui-btn-block mui-btn-outlined" style="padding: 5px 20px;">上门反馈</a>
</div>
<!--
<div class="dt" style="margin-top:10px;">客户 {$info.customer_name} 的追踪记录</div>
<div class="mui-content">
	<div class="dt_nav_con">
		<div class="dt_nav_cc">
			{volist name="track" id="trackInfos"}
			<div class="dt_nav">
				<span class="dt_span dt_now">
                    沟通方式：
                    {if $trackInfos.gtType eq 1}电话{/if}
                    {if $trackInfos.gtType eq 2}微信{/if}
                    {if $trackInfos.gtType eq 3}QQ{/if}
                    {if $trackInfos.gtType eq 4}其他{/if}
                    <strong>{$trackInfos.sales_remark}</strong>
                </span>
				<small>{$trackInfos.sales_day}</small>
			</div>
			{/volist}
            {if $trackInfos eq false}
                <div style="text-align: center">暂无记录</div>
            {/if}
		</div>
		<div class="dt_nav_line"></div>
	</div>
</div>
-->


<script>
	$('input:radio[name="tan_status"]').change(function(){
        var status = $('input[name=tan_status]:checked').val();
        if(status == 3){
            $('.gq').css('display','block');
            $('.qx').css('display','none');
        }else if(status == 4){
            $('.qx').css('display','block');
            $('.gq').css('display','none');
        }else{
            $('.gq').css('display','none');
            $('.qx').css('display','none');
        }
    })
    //取消上门
	$('#error').click(function(){
		var reason = $('#reason').val();
		if(!reason){
			mui.alert('取消原因不能为空');
			return false;
		}
		var cid = "{$info.cid}";
		var code = "{$info.code}";
		$.ajax({
			type: "POST",
			url: "{:Url('crm/Visit/markHXHome')}",
			data: {cid:cid,code:code,reason:reason},
			dataType:'json',
			success: function(ret){
				if(ret.code == 200){
					mui('.mui-popover').popover('hide');
					mui.alert(ret.msg);
					$('.mui-btn-block').css('display','none');
				}else{
					mui('.mui-popover').popover('hide');
					mui.alert(ret.msg);
				}
			},
			error:function(XMLHttpRequest, textStatus, errorThrown){
				var ret = XMLHttpRequest.responseJSON
				mui.alert('操作失败');
			}
		})
	})
    $('#create_order').click(function(){
		var cid = "{$info.cid}";
		var visit_id = "{$info.id}";
		var code = $('#code').val();
		if(!code){
			mui.alert('核销码不能为空');
			mui('.mui-popover').popover('hide');
			return false;
		}
        $.ajax({
            type: "POST",
            url: "{:Url('crm/Visit/markHX')}",
            data: {cid:cid,code:code},
            dataType:'json',
            success: function(ret){
                if(ret.code == 200){
					mui('.mui-popover').popover('hide');
                    //mui.alert(ret.msg);
					//页面的重新加载
					window.location.href="/crm/Visit/mobileOrder/id/"+visit_id;
                }else{
					mui('.mui-popover').popover('hide');
					mui.alert(ret.msg);
                }
            },
            error:function(XMLHttpRequest, textStatus, errorThrown){
                var ret = XMLHttpRequest.responseJSON
				mui.alert('操作失败');
            }
        })
    })

    //核销
    $('#hx').click(function(){
        var cid = "{$info.cid}";
		var code = $('#code').val();
		if(!code){
			mui.alert('核销码不能为空');
			mui('.mui-popover').popover('hide');
			return false;
		}
        $.ajax({
            type: "POST",
            url: "{:Url('crm/Visit/markHX')}",
            data: {cid:cid,code:code},
            dataType:'json',
            success: function(ret){
                if(ret.code == 200){
                    mui('.mui-popover').popover('hide');
                    mui.alert(ret.msg);
                }else{
                    mui('.mui-popover').popover('hide');
                    mui.alert(ret.msg);
                }
            },
            error:function(XMLHttpRequest, textStatus, errorThrown){
                var ret = XMLHttpRequest.responseJSON
                mui.alert('操作失败');
            }
        })
        mui('.mui-popover').popover('hide');
    })
    //反馈
    $('#feedback_sub').click(function(){
		var feedback = $('#feedback').val();
		if(!feedback){
			mui.alert('反馈内容不能为空');
			return false;
		}
		var id = "{$info.id}";
		$.ajax({
			type: "POST",
			url: "{:Url('crm/Visit/visitFeedback')}",
			data: {id:id,reason:feedback},
			dataType:'json',
			success: function(ret){
				if(ret.code == 200){
					mui('.mui-popover').popover('hide');
					$('#new_feed').html(feedback);
					mui.alert(ret.msg);
					$('.mui-btn-block').css('display','none');
				}else{
					mui('.mui-popover').popover('hide');
					mui.alert(ret.msg);
				}
			},
			error:function(XMLHttpRequest, textStatus, errorThrown){
				var ret = XMLHttpRequest.responseJSON
				mui.alert('操作失败');
			}
		})
    })
	$('.cancer').click(function(){
		mui('.mui-popover').popover('hide');
	})
	mui.init({
		swipeBack: true //启用右滑关闭功能
	});
	mui('.mui-scroll-wrapper').scroll();
	mui('body').on('shown', '.mui-popover', function(e) {
		//console.log('shown', e.detail.id);//detail为当前popover元素
	});
	mui('body').on('hidden', '.mui-popover', function(e) {
		//console.log('hidden', e.detail.id);//detail为当前popover元素
	});

</script>
</body>
{/block}