<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- index.css -->
<link rel="stylesheet" href="{{ url_for('static',filename='css/index.css') }}"></link>
<!-- <link rel="stylesheet" href="./css/index.css"> -->
<!-- 引入element-ui样式 -->
<!-- <link rel="stylesheet" href="./css/element.css"> -->
<link rel="stylesheet" href="{{ url_for('static',filename='css/element.css') }}"></link>
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<script src="/static/live2d/autoload.js"></script>
<title>自动商品介绍控制器</title>
</head>
<body>
<div id="app">
<div class="main">
<div class="title">
<h2>Fay控制器2.0</h2>
</div>
<div class="main_box">
<div class="left">
<div class="left_top">
<p class="left_top_p">人设：</p>
<div class="character">
<div class="character_top">
<div class="character_left">
<ul>
<li>
<p>姓名：</p>
<el-input v-model="attribute_name" placeholder="请输入内容"></el-input>
</li>
<li>
<p>性别：</p>
<el-input v-model="attribute_gender" placeholder="请输入内容"></el-input>
</li>
<li>
<p>年龄：</p>
<el-input v-model="attribute_age" placeholder="请输入内容"></el-input>
</li>
<li>
<p>出生地：</p>
<el-input v-model="attribute_birth" placeholder="请输入内容"></el-input>
</li>
<li>
<p>生肖：</p>
<el-input v-model="attribute_zodiac" placeholder="请输入内容"></el-input>
</li>
<li>
<p>星座：</p>
<el-input v-model="attribute_constellation" placeholder="请输入内容"></el-input>
</li>
<li>
<p>职业：</p>
<el-input v-model="attribute_job" placeholder="请输入内容"></el-input>
</li>
<li>
<p>喜好：</p>
<el-input v-model="attribute_hobby" placeholder="请输入内容"></el-input>
</li>
<li>
<p>联系方式：</p>
<el-input v-model="attribute_contact" placeholder="请输入内容"></el-input>
</li>
</ul>
</div>
<div class="character_right">
<ul>
<li>
<p>送礼敏感度：</p>
<el-slider v-model="interact_perception_gift"></el-slider>
</li>
<li>
<p>关注敏感度：</p>
<el-slider v-model="interact_perception_follow"></el-slider>
</li>
<li>
<p>进入敏感度：</p>
<el-slider v-model="interact_perception_join"></el-slider>
</li>
<li>
<p>留言敏感度：</p>
<el-slider v-model="interact_perception_chat"></el-slider>
</li>
<li>
<p>冷场敏感度：</p>
<el-slider v-model="interact_perception_indifferent"></el-slider>
</li>
<li>
<p>单次互动时长：</p>
<el-input-number v-model="interact_maxInteractTime" @change="handleChange" :min="1" :max="60" label="描述文字"></el-input-number>
<span style=" padding-left: 10px;
line-height: 40px;">秒</span>
</li>
<li>
<p>声音选择：{{attribute_voice}}</p>
<el-select v-model="attribute_voice" placeholder="请选择">
<el-option v-for="item in voice_list" :key="item.value" :label="item.label" :value="item.value">
</el-option>
</el-select>
</li>
<br>
<li>
<p>使用面板播放：</p>
<el-switch v-model="play_sound_enabled" active-color="#13ce66" inactive-color="#ff4949">
</el-switch>
</li>
</ul>
</div>
</div>
<div class="character_box">
<p>Q&A文件：</p>
<el-input v-model="interact_QnA" placeholder="请输入内容"></el-input>
<!-- <el-upload class="upload-demo" action="http://127.0.0.1:5000/"-->
<!-- :on-success="handlePreview">-->
<!-- <el-input v-model="interact_QnA" placeholder="请输入内容"></el-input>-->
<!-- </el-upload>-->
</div>
</div>
</div>
<div class="left_box">
<p> </p>
<div class="source">
<ul>
<li class="url">
<el-switch v-model="source_liveRoom_enabled" active-color="#13ce66" inactive-color="#ff4949">
</el-switch>
<p>抖 音</p>
<el-input v-model="source_liveRoom_url" placeholder="请输入内容"></el-input>
</li>
<li class="url">
<el-switch v-model="source_record_enabled" active-color="#13ce66" inactive-color="#ff4949">
</el-switch>
<p>麦克风</p>
<el-select v-model="source_record_device" placeholder="请选择">
<el-option v-for="item in device_list" :key="item.value" :label="item.label"
:value="item.value">
</el-option>
</el-select>
</li>
<li class="url">
<p style="margin-left: 40px">消 息</p>
<el-input v-model="panel_msg" :disabled="true"></el-input>
</li>
<li class="but">
<el-button v-if="live_state == 1" type="success" class="btn_close" style="width:200px" @click=postStopLive()>关闭（运行中）</el-button>
<el-button v-else-if="live_state == 2" type="primary" plain disabled style="width:200px">正在开启...</el-button>
<el-button v-else-if="live_state == 3" type="success" plain disabled style="width:200px">正在关闭...</el-button>
<el-button v-else type="primary" style="width:200px" class="btn_open" @click=postStartLive()>开启</el-button>
<el-button type="button" style="width:200px" @click=postData()>保存配置</el-button>
</li>
<li class="p_red">
<p>注：启动后请选中场景客户端，让其前端运行，否则可能会卡顿，或者无声音。</p>
</li>
</ul>
</div>
</div>
</div>
<div class="right">
<div class="right_main">
<el-tabs v-model="activeName" type="card" @tab-click="handleClick" editable @edit="handleTabsEdit">
<el-tab-pane :label="'商品'+(index+1)" :name="itme.tab_name" v-for="(itme, index) in items_data" :key="index">
<ul>
<li>
<p>名称：</p>
<el-input v-model='itme.name' placeholder="请输入内容"></el-input>
</li>
<li>
<p>商品简介：</p>
<el-input type="textarea" :rows="3" placeholder="请输入内容" v-model='itme.explain.intro'>
</el-input>
</li>
<li>
<p>使用场景：</p>
<el-input type="textarea" :rows="3" placeholder="请输入内容" v-model='itme.explain.usage'>
</el-input>
</li>
<li>
<p>售价说明：</p>
<el-input type="textarea" :rows="3" placeholder="请输入内容" v-model='itme.explain.price'>
</el-input>
</li>
<li>
<p>促销：</p>
<el-input type="textarea" :rows="3" placeholder="请输入内容" v-model='itme.explain.discount'>
</el-input>
</li>
<li>
<p>主播担保：</p>
<el-input type="textarea" :rows="3" placeholder="请输入内容" v-model='itme.explain.promise'>
</el-input>
</li>
<li>
<p>商品特点：</p>
<el-input type="textarea" :rows="3" placeholder="请输入内容" v-model='itme.explain.character'>
</el-input>
</li>
<li>
<p>展示视频：</p>
<el-input v-model="itme.demoVideo" placeholder="请输入内容"></el-input>
</li>
<li>
<p>Q&A文件：</p>
<el-input v-model="itme.QnA" placeholder="请输入内容"></el-input>
</li>
<li>
<p>是否启用：</p>
<el-switch v-model='itme.enabled' active-color="#13ce66" inactive-color="#ff4949">
</el-switch>
</li>
</ul>
</el-tab-pane>
</el-tabs>
<br v-if="items_data.length==0">
</div>
</div>
</div>
</div>
</div>
</body>
<!-- 开发环境vue.js -->
<script src="{{ url_for('static',filename='js/vue.js') }}"></script>
<!--<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>-->
<!-- 发行环境vue.js -->
<!-- <script src="https://cdn.jsdelivr.net/npm/vue@2"></script> -->
<!-- 引入element-ui组件库 -->
<!-- <script src="./js/element.js"></script> -->
<script src="{{ url_for('static',filename='js/element.js') }}"></script>
<!-- index.js -->
<!-- <script src="./js/index.js"></script> -->
<!-- <script src="./js/self-adaption.js"></script> -->
<script src="{{ url_for('static',filename='js/index.js') }}"></script>
<script src="{{ url_for('static',filename='js/self-adaption.js') }}"></script>
</html>