<section>
    <div class="navigation">
        <h1>投放宝</h1>
        <ul>
            <li @click="newVersion"><i class="new"></i>新建版本</li>
            <li @click="codeFn"><i class="code"></i>二维码</li>
            <li @click="bindCode"><i class="apps"></i>绑定小程序</li>
        </ul>
        <div class="customer" @mouseover="overFn" @mouseout="outFn">
            <span class="overflow">{{hello}}，{{userName}}</span>
            <img :src=customerhead alt=""  v-if="flag">
            <img :src="serverUrl+'/detail/default.png'" alt="" v-else>
        </div>
    </div>
    <div class="bindNav" v-if="bindFlag">
        <div></div>
        <ul>
            <li></li>
            <li></li>
            <li @click="bindCode"><i class="apps"></i>绑定小程序</li>
        </ul>
    </div>
    <div class="logOut" v-if="logFlag">
        <p class="text-center" @click="logOut"><i class="b-out"></i>退出登录</p>
    </div>
    <div class="main">
        <h2>大麦投放内容管理后台</h2>
        <p class="bind-notes" v-if="bindFlag">请选择要绑定小程序的版本</p>
        <el-table :data="tableData" stripe style="width: 100%" @row-click="rowClick">
            <el-table-column prop="date" label="名称" width="190">
                <template slot-scope="scope">
                    <i class="apps-icon after" v-if="scope.row.bindingStatus" ></i>

                    <div class="channel-notes channel-mes">
                        <p v-if="!scope.row.onlineStatus">已下线版本内容无法绑定小程序，请先上线该版本</p>
                        <span class="know-btn channel-know" v-if="!scope.row.onlineStatus" @click.stop="channelFn(scope.$index,scope.row,0)">知道了</span>

                        <p v-if="scope.row.onlineStatus && !scope.row.firstBindStatus">若将小程序绑定新的版本，之前绑定的版本将会失效。</p>
                        <span class="save-btn" v-if="scope.row.onlineStatus && !scope.row.firstBindStatus" @click.stop="channelFn(scope.$index,scope.row,1)">确定修改</span>
                        <span class="quite-btn" v-if="scope.row.onlineStatus && !scope.row.firstBindStatus" @click.stop="channelFn(scope.$index,scope.row,2)">取消</span>

                        <p v-if="scope.row.onlineStatus && scope.row.firstBindStatus">确认绑定小程序？</p>
                        <span v-if="scope.row.onlineStatus && scope.row.firstBindStatus" class="save-btn" @click.stop="channelFn(scope.$index,scope.row,1)">确定</span>
                        <span v-if="scope.row.onlineStatus && scope.row.firstBindStatus" class="quite-btn" @click.stop="channelFn(scope.$index,scope.row,2)">取消</span>


                        <i class="arrow1"></i>
                    </div>
                    <span class="apps-data overflow" :title="scope.row.date.length>4?scope.row.date:''">{{scope.row.date}}</span>
                    <span class="apps-name">
                        <i class="icon-edit befter apps-pre" @click="preview(scope.$index,scope.row)" v-if="!bindFlag">
                            <p class="notes">预览</p>
                        </i>
                        <i class="icon-edit befter apps-edit" @click="editModel(scope.$index,scope.row)" v-if="!bindFlag">
                            <p class="notes">编辑</p>
                        </i>
                        <i class="icon-edit befter apps-copy" @click="copyUrl(scope.$index,scope.row)" v-if="!bindFlag">
                            <el-button type="text" class="notes">复制链接</el-button>
                        </i>
                        <i class="icon-edit befter apps-copy" @click="getQRCode" v-if="scope.row.bindingStatus" >
                            <el-button type="text" class="notes">生成二维码</el-button>
                        </i>
                    </span>
                </template>
            </el-table-column>
            <el-table-column prop="name" label="创建时间"></el-table-column>
            <el-table-column prop="time" label="修改时间"></el-table-column>
            <el-table-column prop="user" label="修改人" width="80"></el-table-column>
            <el-table-column prop="channel" label="渠道" width="170">
                <template slot-scope="scope">
                    <el-input v-model="scope.row.channel" :title="scope.row.channel.length>7?scope.row.channel:''" maxlength="50" v-if="!channelFlag" class="overflow" @blur.stop="editFul(scope.$index,scope.row)" @focus.stop="editing(scope.$index)"/>
                    <label v-else>{{scope.row.channel}}</label>
                    <div class="channel-notes channel-edite">
                        <p>请填写您的投放渠道，不同渠道以“，”间隔，如今日头条，网易，</p>
                        <span class="no-btn" @click="reminderFn(scope.$index)">不再提示</span>
                        <span class="know-btn" @click="knowFn(scope.$index)">知道了</span>
                        <i class="arrow"></i>
                    </div>
                    <i class="icon-edit befter apps-channel" @click="editChannel(scope.$index)" v-if="!bindFlag">
                        <p class="notes">编辑渠道</p>
                    </i>
                </template>
            </el-table-column>
            <el-table-column prop="tiks" label="点击量" width="90">
                <template slot-scope="scope">
                    <p>PV:{{scope.row.tiks[0]}}</p>
                    <p>UV:{{scope.row.tiks[1]}}</p>
                </template>
            </el-table-column>
            <el-table-column prop="telNum" label="电话量" width="100">
                <template slot-scope="scope">
                    <p>拨打:{{scope.row.telNum[0]}}</p>
                    <p>留电:{{scope.row.telNum[1]}}</p>
                    <!-- <i class="befter apps-tel">
                        <p class="notes">在线留电列表</p>
                    </i> -->
                </template>
            </el-table-column>
            <el-table-column prop="chat" label="聊天数" width="90">
                <template slot-scope="scope">
                    <p>PV:{{scope.row.chat[0]}}</p>
                    <p>UV:{{scope.row.chat[1]}}</p>
                </template>
            </el-table-column>
            <el-table-column prop="video" label="视频连接数" width="80"></el-table-column>
            <el-table-column prop="totalNum" label="视频人均时长(秒)" width="130"></el-table-column>
            <el-table-column  width="140">
                <template slot-scope="scope">
                    <div v-if="scope.row.bindingStatus" class="offline">
                        <i class="apps-note" @mouseover="overNote(scope.$index)" @mouseout="outNote(scope.$index)"></i>
                        <span class="note-mes">已绑定小程序不能下线</span>
                    </div>
                    <el-switch
                    v-model="scope.row.onlineStatus"
                    active-text="上线"
                    inactive-text="下线"  @change="switchFn(scope.$index,scope.row)" v-else :disabled="channelFlag?true:false">
                    </el-switch>
                </template>
            </el-table-column>
        </el-table>
        <el-row class="text-right right-row" :class="clas">
            <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page.sync="pages.current"
            :page-size="10"
            layout="total, prev, pager, next"
            :total="rowTotal">
            </el-pagination>
        </el-row>
    </div>
    <div class="gray" v-if="codeFlag"></div>
    <!-- 二维码 -->
    <div class="code-main" v-if="codeFlag">
        <img :src="codeImg" class="code-img"/>

        <span class="close-btn" @click="closeCode"></span>
        <a :href="codeImg" download class="download-btn">
            <img :src="codeImg" style="display:none;">
            <img border="0" :src="serverUrl+'/detail/a-download.png'" class="download-img">
            <p>下载二维码</p>
        </a>
    </div>
    <!-- 二维码 -->
    <div class='loadData' v-if='loadData'>
        <img src="http://skyforest.static.elab-plus.com/detail/loading.gif" alt="">
    </div>
</section>
