@extends('layout.basic.main')
@push('css')
    <link rel="stylesheet" href="/css/friendlist/style.css?v={{config("sns-line.version")}}">
@endpush
@section('content')
    <div class="container-fluid">
        <div class="col-xs-12 col-sm-12 col-md-12  main">
            <div class="row" id="table-url" v-cloak>
                <div class="col-sm-12">
                </div>
                <div class="row">
                    <div class="col-sm-12">
                        <div class="row">
                            <div class="col-sm-4">
                                <h2 class="diff">URL分析(個人)
                                </h2>
                                <br>
                                <table class="table table-bordered">
                                    <thead>
                                    <tr>
                                        <th>送信サイト数</th>
                                        <th>訪問サイト数</th>
                                        <th>訪問率</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    <tr>
                                        <td>@{{url_total}}</td>
                                        <td>@{{url_detail_total}}</td>
                                        <td>
                                            @{{rate}}%
                                        </td>
                                    </tr>
                                    </tbody>
                                </table>
                            </div>
                            <div class="col-sm-4">
                                <div class="profile-box" style="margin-bottom: 0.5em;">
                                    <div class="face">
                                        <img :src="line_info['avatar_url'] ? line_info['avatar_url'] : '/images/blank_avatar.png'" onerror="this.onerror=null;this.src='/images/blank_avatar.png'"
                                             width="150px;" id="member_face">
                                    </div>
                                    <div class="names">
                                        <b class="primary-name"><span id="member_display_name" class="has_emoji">@{{line_info['view_name']}}</span></b>
                                        <small>
                                            <br>
                                            LINE登録名
                                            <b id="member_name" class="has_emoji">@{{line_info['name']}}</b>
                                            本名
                                            <b>@{{line_info['real_name']}}</b>
                                        </small>
                                    </div>
                                </div>
                                <p class="has_emoji text-center" style="background-color: #f0f0f0;">
                                    <small>@{{line_info['status_message']}}</small>
                                </p>
                            </div>
                            <div class="col-sm-4">

                            </div>
                        </div>
                        <hr>
                        <h5 class="diff">送信サイト一覧</h5>
                        <table class="table">
                            <thead>
                                <tr>
                                    <th style="width: 30%;min-width: 100px">サイト名</th>
                                    <th style="width:10%;min-width:110px">訪問状況(配信)</th>
                                    <th style="width:50%;min-width:300px">初回クリックメッセージ</th>
                                    <th style="width:10%">初回訪問時間</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr class="" v-for="value in items">
                                    <td>
                                        <b>
                                            @{{value['name']}}
                                        </b>
                                        <br>
                                        <small>
                                            <a :href="value['url']" target="_blank">@{{value['url']}}</a>
                                        </small>
                                    </td>
                                    <td>
                                        <b>@{{(value['is_viewed']==null)?0:value['num_clicked']}}</b>訪問 / <b>
                                            @{{(value['total_send'])}}
                                        </b>送信<br>
                                        <small>(@{{(value['is_viewed']==null)?0:value['sum_clicked']}}クリック)</small>
                                    </td>
                                    <td  style="width: 300px!important;text-align: left!important;" v-html="displayMessage(value.type,value.content)">
                                        @{{ (value['content_message']==null)?'-':value['content_message'] }}
                                    </td>
                                    <td>
                                        @{{ (value['time_first_click']==null)?'-':value['time_first_click'] }}
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                        <a href="{{route('friendlistMypage',['line_id'=>Request::route('line_user_id')])}}">戻る</a>
                    </div>
                </div>
            </div>
        </div>
    </div>

@endsection
@push('js')
<script src="/plugins/vuejs/vue-resource@1.3.4.js"></script>
<script>
    Vue.http.headers.common['X-CSRF-TOKEN'] = $("meta[name='csrf-token']").attr("content");

    var table = new Vue({
        el:'#table-url',
        data:{
            items:[],
            line_info:'',
            url_total:'',
            rate:'',
            url_detail_total:''
        },
        created:function(){
            this.getData();
        },
        methods:{
            getData:function(){
                url = location.url;
                this.$http.post(url).then(function(response){
                    body = response.body;
                    if(body.success){
                        this.items = body.data;
                        this.line_info = body.line_info;
                        this.rate = body.rate;
                        this.url_detail_total = body.url_detail_total;
                        this.url_total = body.url_total;
                    }

                }, function (errorCallBack) {
                    checkStatus(errorCallBack.status);
                });
            },
            displayMessage:function (type,content) {
                console.log(content);
                return messageTable(type,content);
            }
        }
    });
</script>
@endpush