<template>
    <div class="demo-tabs-style right_con">
        <div>
            <p class="title_summny"></p>
            <Tabs type="card" @on-click="changeTab">
                <TabPane label="申请通过" name="1">
                <div class="searchContainer">
                  <div>
                    <!-- <button class="integratePromote">集成推广</button> -->
                  </div>
                  <div>
                    <Input class="wid_120" v-model="search.game_name" placeholder="请输入游戏名称"></Input>
                     <Select class="wid_120" placeholder="选择平台" clearable v-model="search.platform_id" :transfer='true' filterable v-for="item in this.list" :key="item.id">
                        <Option  :value="item.platform_id">{{item.platform_name}}</Option>
                      </Select>
                     <Select class="wid_120" placeholder="平台来源" clearable v-model="search.sdk_version" :transfer='true' filterable>
                        <Option  :value="1">安卓</Option>
                        <Option  :value="2">IOS</Option>
                        <Option  :value="3">H5</Option>
                        <Option  :value="4">页游</Option>
                    </Select>
                    <Button type="primary" @click="getGameList()">搜索</Button>
                    <Button class="clear_btn" @click="removeSearch">清空</Button>
                  </div>
                </div>
                <Table :columns="gameList" :data="gameData" class="clear game_table" border></Table>
                <div class="page">
                    <Page :total="count" :current="pindex" :page-size="10" size="small" show-total show-elevator @on-change="getGameList"/>
                </div>
                </TabPane>
                <TabPane label="申请中" name="2">
                     <Table :columns="applyList" :data="applyData" class="clear game_table" border></Table>
                    <div class="page">
                        <Page :total="applyCount" :current="pindex" :page-size="10" size="small" show-total show-elevator @on-change="getGameList"/>
                    </div>
                </TabPane>
        </Tabs>
        </div>
        <!-- 禁止弹窗 -->
         <Modal
            v-model="disabledDialog"
            class="game_mimeDialog"
            >
            <p slot="header">
                <span class="header_title" style="font-size:16px">禁止申请员工</span>
                <span class="hearder_remark" style="font-size:14px">（选中的员工将不在推广后台展示，且不能进行该游戏的推广）</span>
            </p>
            <Form ref="banEmployee" :model="banEmployeeForm" :label-width="110" class="add-admin-form banEmployeeBox">
                <FormItem label="游戏名称：" prop="name" class="game_nameFirst">{{this.banEmployeeForm.name}}</FormItem>
                 <FormItem label="选择员工：" prop="employee">
                      <CheckboxGroup v-model="banEmployeeForm.employee">
                          <Checkbox :label="item.id"  v-for="item in this.staffList" :key="item.id">{{item.name}}</Checkbox>
                      </CheckboxGroup>
                 </FormItem>
            </Form>
            <div slot="footer">
                <Button type="primary" class="game_mimeConfirm" @click="confirmSubmit()">确认</Button>
            </div>
        </Modal>
        <!-- 推广配置弹窗 -->
         <Modal
          v-model="promoteDialog" 
          title="推广配置"
          class="promoteDialog"
          :footer-hide= "true"
          width="1351px"
         >
         <div class="promoteContainer">
           <div class="templateBox">
             <p>模板选择</p>
             <div class="templateBox-total">
                <ul>
                  <li class="templateItem">
                    <img src="../../assets/image/timg.jpg" alt="">
                  </li>
                  <li class="templateItem"></li>
                  <li class="templateItem"></li>
                  <li class="templateItem"></li>
                  <li class="templateItem"></li>
                  <li class="templateItem"></li>
                  <li class="templateItem"></li>
                  <li class="templateItem"></li>
                </ul>
             </div>
           </div>
           <div class="previewSave">
             <div class="phoneBox">
               <div class="phoneBox-content">
                 <img src="../../assets/image/timg.jpg" alt="">
               </div>
             </div>
              <p class="previewMark">（本模板最多支持8个游戏信息）</p>
               <div class="bottomBtns">
                <button class="previewBtn previewColor">预览</button>
                <button class="previewBtn saveColor">保存</button> 
                <button class="previewBtn publishColor">发布</button>
               </div>
           </div>
           <div class="configuration">
             <div class="configuration-title">
                <Form ref="configurationForm" :model="configurationForm" :label-width="77" class="configurationBox">
                  <p>配置信息</p>
                  <div class="avatarBox" >
                    <div v-if="isHaveImg" style="display:flex">
                      <div class="avatarItem" >
                       <Upload
                        ref="configurationForm" 
                        :show-upload-list="false"
                        :on-success="handleSuccess()"
                        :format="['jpg','jpeg','png']"
                        :max-size="2048"
                        :on-format-error="handleFormatError"
                        :on-exceeded-size="handleMaxSize"
                        :before-upload="handleBeforeUpload"
                        :action="uploadImage">
                        <div>
                          <i class="clearImg" @click.stop="clearPhotoImg"></i>
                          <img :src="configurationForm.firstImg" alt="" >
                          <span class="replaceImg">替换图片</span>
                        </div>
                      </Upload>
                      </div>
                      <div class="defaultBox" >
                      <img src="" alt="" >
                       <Upload
                        ref="configurationForm"
                        :show-upload-list="false"
                        :on-success="handleSuccess()"
                        :format="['jpg','jpeg','png']"
                        :max-size="2048"
                        :on-format-error="handleFormatError"
                        :on-exceeded-size="handleMaxSize"
                        :before-upload="handleBeforeUpload"
                        :action="uploadImage">
                        <Button class="defaultImg" >
                        </Button>
                      </Upload>
                    </div>
                    </div>
                    
                    <div class="defaultBox" v-else>
                      <img src="" alt="" >
                       <Upload
                        ref="configurationForm"
                        :show-upload-list="false"
                        :on-success="handleSuccess()"
                        :format="['jpg','jpeg','png']"
                        :max-size="2048"
                        :on-format-error="handleFormatError"
                        :on-exceeded-size="handleMaxSize"
                        :before-upload="handleBeforeUpload"
                        :action="uploadImage">
                        <Button class="defaultImg" >
                        </Button>
                      </Upload>
                    </div>
                  </div>
                  <FormItem label="游戏背景：" prop="backGround" class="">
                     <div>
                     <Upload
                      ref="configurationForm"
                      :show-upload-list="false"
                      :on-success="handleSuccess()"
                      :format="['jpg','jpeg','png']"
                      :max-size="2048"
                      :on-format-error="handleFormatError"
                      :on-exceeded-size="handleMaxSize"
                      :before-upload="handleBeforeUpload"
                      :action="uploadImage">
                      <a class="uploadImg" href="jacaScript:;">上传图片</a>
                    </Upload>
                  </div>
                  </FormItem>
                   <FormItem label="游戏名称：" prop="name" class="">
                    <Input class=""  placeholder="请输入游戏名称" v-model="configurationForm.name"></Input>
                  </FormItem>
                   <FormItem label="游戏简介：" prop="remark" class="">
                     <Input v-model="configurationForm.remark" type="textarea"  placeholder="请输入游戏简介，字数50字以内"></Input>
                  </FormItem>
                  <FormItem label="游戏热度：" prop="rate" class="game_hotNum">
                     <Rate v-model="configurationForm.rate" />
                  </FormItem>
                  <p>高级配置</p>
                  <div style="margin: 14px 0;position:relative" @click="chooseMusicList">背景音乐： <i class="upDownIcon" id="iconUpDown"></i></div>
                  <div v-if="showMusicList">
                       <a href="javaScript:;" class="localMusic"> + 本地音乐</a>
                       <div class="musicPlayList">
                          <div class="playListItem" >
                            <span @click="playMusic"><i :class="{stopMusic:stopMusic, active:isActive}" id="musicNameIcon"><audio src="../../assets/image/music.mp3" id="audioMusic"></audio></i> 我们的时光</span>
                            <span class="timeShow">06:36  <input type="checkbox" v-model="this.musicId" value="1" @change="changeCheckBox(1)"/> <i class="chooseMusicIcon" ></i></span>
                          </div>
                           <div class="playListItem">
                            <span><i class="stopMusic"></i> 我们的时光</span>
                            <span class="timeShow">06:36 <input type="checkbox" v-model="this.musicId"  value="2" @change="changeCheckBox(2)"/> <i class="chooseMusicIcon"></i></span>
                          </div>
                           <div class="playListItem">
                            <span><i class="stopMusic"></i> 我们的时光</span>
                           <span class="timeShow">06:36 <input type="checkbox" v-model="this.musicId"  value="3" @change="changeCheckBox(3)"/> <i class="chooseMusicIcon"></i></span>
                          </div>
                           <div class="playListItem">
                            <span><i class="stopMusic"></i> 我们的时光</span>
                          <span class="timeShow">06:36 <input type="checkbox" v-model="this.musicId"  value="4" @change="changeCheckBox(4)"/> <i class="chooseMusicIcon"></i></span>
                          </div>
                       </div>
                  </div>
                  <FormItem label="弹幕评论：" prop="comment" class="bulletComment" >
                    <i-switch v-model="this.switchNum" @on-change="switchChange" />
                    <template>
                      <div v-if="this.switchNum" >
                        <div class="commentBox" v-for="item in this.configurationForm.comment" :key="item.id">
                          <Input v-model="item.content" placeholder="请输入评论"></Input>
                          <i class="addComment" @click="createNewComment"></i>
                        </div>
                      </div>
                     
                    </template>
                  </FormItem>
                </Form>
             </div>
             <div></div>
           </div>
         </div>

         </Modal>
    </div>
</template>

<script>
import { removeSearch } from "@/assets/js/common";
import gamePic from "@/assets/image/game.jpg"
import androidImg from "../../../static/image/icon_android.png"
import IOSImg from "../../../static/image/icon_iphone.png"
import fiveImg from "../../../static/image/icon_H5.png"
import finalDoubleImg from "../../../static/image/icon_yy.png"
import gameImg from '@/assets/image/game.jpg'
import { getStore } from "@/utils/utils";
export default {
    name: "game_mine",
     data() {
    return {
      count: 0,
      applyCount:0,
      pindex: 1,
      list:[],
      is_error_tip: false,
      disabledDialog: false,
      errorTipText: "",
      search: {
        game_name: "",
        platform_id:'',
        sdk_version:'',
        page:1,
        limit:10,
        is_pass:1
      },
      curInfo: {},
      gameList:[],
      gameData: [],
      applyList:[],
      applyData:[],
      banEmployeeForm:{
          name:'重装上阵',
          employee:[]
      },
      staffData:{},
      staffList:[],
      // 推广配置弹窗
      promoteDialog:false,
      configurationForm: {
        name:'',
        backGround:'',
        remark:'',
        rate:0,
        chooseId:'',
        comment:[
          {
            content:'',
            id:1
          }
        ],
        firstImg:gameImg
      },
      isHaveImg:true,
      index:1,
      uploadImage:'',
      switchNum: false,
      showMusicList: false,
      comment: '',
      isActive:false,
      stopMusic: true,
      musicId:[],
      manager_id:getStore('userInfo').id
    };
  },
    methods: {
    setColumns() {
        const that = this
        this.gameList = [
        {
          title: "ICON",
          align: "left",
          render(h,params) {
              return <div><img src={params.row.icon} style="width:40px;height:40px"/></div>
          }
        },
        {
          title: "游戏名称",
          key: "game_name",
          align: "left"
        },
        {
          title: "游戏类型",
          align: "left",
          key: "game_type_name"
        },
        {
          title: "游戏平台",
          align: "left",
          render(h,params) {
             if(params.row.sdk_version == 1) {
               return <div><img src={ androidImg }/></div>

             }else if(params.row.sdk_version == 2) {
              return <div><img src={ IOSImg }/></div>
             }else if(params.row.sdk_version == 3) {
                return <div><img src={ fiveImg }/></div>
             }else {
                return <div><img src={ finalDoubleImg }/></div>
             }
          }

        },
        {
          title: "分成比例",
          key: "promote_ratio",
          align: "left"
        },
        {
          title: "分包状态",
          key: "status",
          align: "left",
          width: 150,
          render: (h,params) => {
              if(params.row.enable_status === 2 || params.row.enable_status === 3 ) {
                  return h('span',{
                    class: 'packingIcon' , 
                    style: { 
                      color:'#FF7900',
                      position:'relative',
                      display:'inline-block',
                      'padding-left':'20px'
                    }
                  },'打包中')
              }else if(params.row.enable_status === 1) {
                  return h('span',{
                    class: 'developNew' , 
                    style: { 
                        color:'#246EEA', 
                        background:'#D0E0FC',
                        width:'92px',
                        height:'27px',
                        'line-height':'27px',
                        'text-align':'center',
                        'border-radius':'4px',
                        position:'relative',
                        display:'inline-block',
                        'padding-left':'10px',
                        cursor:'pointer'
                    },
                    on: {
                      click: () => {
                        that.packageGame(params.row.platform_id,params.row.game_id)
                      }
                    }
                },'重新生成')
              }else {
                if(params.row.sdk_version == 3 || params.row.sdk_version == 4) {
                  return <div>--</div>
                }else {
                    return h('div',{
                      class: 'developDone' , 
                      style: { 
                        color:'#F35656',
                        background:'#FCD4D4',
                        width:'106px',
                        heigth:'27px',
                        'text-align':'center',
                        'border-radius':'4px',
                        position:'relative',
                        'padding-left':'10px',
                        cursor:'pointer'
                      },
                      on: {
                        click: () => {
                          that.packageGame(params.row.platform_id,params.row.game_id)
                        }
                    }
                },'生成平台包')
                }
              }
          }
        },
        {
          title: "游戏来源",
          key: "platform_name",
          align: "left"
        },
        {
          title: "推广注册",
          align: "left",
          render(h,params) {
            if(params.row.sdk_version == 1 || params.row.sdk_version == 2 ) {
              if(params.row.enable_status == 1) {
                return h('a', {
                  class: {
                    tableBtn: true,
                    editBtn: true
                  },
                  style:{
                    display:'block',
                    width: '90px',
                    height: '35px',
                    background: 'rgba(0, 156, 255, 1)',
                    'line-height': '35px',
                    'text-align': 'center',
                    'border-radius': '5px',
                    color: '#fff',
                  },
                  on: {
                    click () {
                      let href = params.row.channel_page_url
                      window.open(href,'_blank')
                    }
                  }
                }, '推广注册') 
              }else {
                return <div></div>
              }

            }else {
                return h('a', {
                class: {
                  tableBtn: true,
                  editBtn: true
                },
                style:{
                  display:'block',
                  width: '90px',
                  height: '35px',
                  background: 'rgba(0, 156, 255, 1)',
                  'line-height': '35px',
                  'text-align': 'center',
                  'border-radius': '5px',
                  color: '#fff',
                },
                on: {
                  click () {
                    let href = params.row.channel_page_url
                    window.open(href,'_blank')
                  }
                }
              }, '推广注册') 
            }
          }
        },
        // {
        //   title: "H5推广",
        //   key: "promote",
        //   align: "left",
        //   render:(h,params) => {
        //       if(params.row.promote === 1) {
        //           return h('div',{
        //             class:'promoteDefault',
        //             style:{
        //                 width:'74px',height:'28px',
        //                 'line-height':'28px',border:'1px solid #3B82FF',
        //                 'border-radius':'4px',color:'#3B82FF','text-align':'center',
        //                 cursor: 'pointer'
        //               },
        //               on: {
        //                 click() {
        //                   that.promoteDialog = true
        //                 }
        //               }
        //           },'推广配置')
        //       }else {
        //             return [
        //                 h('span', {
        //                   class:'promoteStatus', 
        //                   style:{
        //                     display:'inline-block',width:'54px','margin-right':'12px',height:'28px',
        //                     'line-height':'28px',border:'1px solid #3B82FF','border-radius':'4px',
        //                     color:'#3B82FF','text-align':'center',cursor: 'pointer'
        //                   }
        //                 },'配置'),
        //                 h('span',{
        //                   calss:'previewPromote',
        //                   style:{
        //                     display:'inline-block',width:'54px',height:'28px','line-height':'28px',
        //                     border:'1px solid #3B82FF','border-radius':'4px',
        //                     color:'#3B82FF','text-align':'center',cursor: 'pointer'
        //                     }
        //                   },'预览')
        //             ]
        //       }
        //   }
        // },
        //  {
        //   title: "禁止推广员工",
        //   key: "disabledPerson",
        //   align: "left",
        //     render(h,params) {
        //     const row = params.row
        //     const id = row.id
        //     return h('a', {
        //       class: {
        //         tableBtn: true,
        //         editBtn: true
        //       },
        //       style: {
        //           color:'#3B82FF',
        //           'text-decoration':'underline'
        //       },
        //        on: {
        //         click () {
        //             that.disabledDialog = true
        //         }
        //       }
        //     }, row.disabledPerson)
        //   }
        // },
      ]
    },
    setApplyColumns() {
        const that = this
        this.applyList = [
             {
                title: "ICON",
                align: "left",
                render(h,params) {
                    return <div><img src={ params.row.icon} style="width:40px;height:40px"/></div>
            }
                },
            {
                title: "游戏名称",
                key: "game_name",
                align: "left"
            },
            {
                title: "游戏类型",
                align: "left",
                key: "game_type_name"
            },
            {
                title: "游戏平台",
                align: "left",
                render(h,params) {
                  if(params.row.sdk_version == 1) {
                    return <div><img src={ androidImg }/></div>

                  }else if(params.row.sdk_version == 2) {
                    return <div><img src={ IOSImg }/></div>
                  }else if(params.row.sdk_version == 3) {
                      return <div><img src={ fiveImg }/></div>
                  }else {
                      return <div><img src={ finalDoubleImg }/></div>
                  }
                }
            },
            {
                title: "分成比例",
                key: "promote_ratio",
                align: "left"
            },
        ]
    },
    // 获取申请通过列表数据
    getGameList(e) {
        this.$store.commit("changeloading", true);
       this.$api.getGameMineList(this.search).then(response=>{
         if(response.code == 200) {
           if(e == 1) {
             this.gameData = response.data
             this.count = response.count
            this.$store.commit("changeloading", false);
           }else {
             this.applyData =response.data
             this.applyCount = response.count
             this.$store.commit("changeloading", false);
           }
           
         }else {
           this.$Message.error(response.msg)
            this.$store.commit("changeloading", false);
           return
         }
      })
    }, 
    // 申请通过列表中重新打包，生成平台包接口
    packageGame(platform_id,game_id){
      this.$api.updateGamePack({platform_id:platform_id,game_id:game_id}).then(response=>{
        if(response.code == 200) {
          this.$Message.success(response.msg)
          this.getGameList(1)
        }else {
          this.$Message.error(response.msg)
          return
        }
      })
    },
    changeTab(e){
      if(e == 2) {
        this.search.is_pass = 0
        this.getGameList(0)
      }else {
         this.search.is_pass = 1
        this.getGameList(1)
      }
    },
    confirmSubmit() {
        this.disabledDialog = false
        console.log(333,this.banEmployeeForm)
    },
    clearPhotoImg(){
      this.isHaveImg = false
      // this.configurationForm.firstImg = ''
    },
    // 清空
    removeSearch() {
      this.search = { ...removeSearch({ ...this.search }) };
    },
    handleSuccess(){},
    handleFormatError (file) {
     Message.error('文件类型不正确')
    },
    handleMaxSize (file) {
      Message.error('文件大小超出')
    },
    handleBeforeUpload () {
    //  this.$refs.upload.fileList.splice(0)
    },
    // 开关切换
    switchChange(status){
      if(status) {
        this.switchNum = true
      }else {
        this.switchNum = false
      }
    },
    // 点击背景音乐图标，显示下面的模块
    chooseMusicList() {
      if(this.showMusicList) {
        document.getElementById('iconUpDown').style.background = "url(../../../static/image/btn_down.png)"
      }else {
          document.getElementById('iconUpDown').style.background = "url(../../../static/image/btn_up.png)"
      }
       this.showMusicList = !this.showMusicList
    },
    // 点击歌曲，播放或是暂停歌曲
    playMusic() {
      if(this.isActive) {
        document.getElementById('musicNameIcon').style.background = "url(../../../static/image/btn_suspend.png)"
        document.getElementById('audioMusic').play()
      }else {
        document.getElementById('musicNameIcon').style.background = "url(../../../static/image/btn_play.png)"
         document.getElementById('audioMusic').pause()
      }
      this.isActive = !this.isActive

    },
    // 歌曲后方选择框的切换
    changeCheckBox(e) {
        if(e === this.configurationForm.chooseId) {
          this.musicId = []
          this.configurationForm.chooseId = 0
        }else {
          this.musicId = [e]
          this.configurationForm.chooseId = e
        }
    },
    // 评论的增加
    createNewComment() {
      this.index ++ 
      this.configurationForm.comment.push({
        content:'',
        id: this.index
      })
    },
     getPlatformList() {
        this.$api.getManagerChannelList({manager_id:this.manager_id})
        .then(response => {
          if (response.code == 200) {
            this.list = response.data
          }else {
            this.$Message.error(response.msg)
            return
          }
        })
    }
  },
  created() {
    this.getGameList(1);
    this.getPlatformList()
    this.setColumns()
    this.setApplyColumns()
  }
}
</script>

<style lang="less" scoped>
.support {
    position: absolute;
    right: 58px;
    color: #3B82FF;
    font-size: 14px;
}
.iconPic {
    position: absolute;
    right: 124px;
    top: 2;
    top: 46px;
}
.searchContainer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}
.integratePromote{
  width: 70px;
  height: 30px;
  border: 1px solid #3B82FF;
  border-radius: 4px;
  text-align: center;
  line-height: 30px;
  color: #3B82FF;
  background: #fff;
  cursor: pointer;
  outline: none;
}
.integratePromote:hover {
  background-color:#3B82FF ;
  color: #fff;
}
.promoteContainer{
  display: flex;
  align-items: center;
}
.templateBox {
  width: 306px;
  height: 724px;
  background-color: #fff;
  padding: 22px 0 0 20px;
}
.templateBox-total {
  max-height: 633px;
  overflow-y: scroll;
}
.templateBox p {
  color: #222222;
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 11px;
}
.templateItem {
  width: 128px;
  height: 192px;
  border-radius: 4px;
  background-color: #eee;
  float: left;
  margin-right: 10px;
  margin-bottom: 10px;
}
.templateItem img {
  width: 100%;
  height: 100%;
  border-radius: 4px;
}
.previewSave{
  flex: 1;
  text-align: center;
}
.phoneBox {
  width: 284px;
  height: 539px;
  margin: auto;
  background-image: url('../../assets/image/phone.png');
  background-size: 100% 100%;
  padding-top: 17px;
  padding-left: 16px;
}
.phoneBox-content {
  width: 250px;
  height: 506px;
  background: #E6E6E6;
  border-radius: 26px;
}
.phoneBox-content img {
  width: 100%;
  height: 100%;
  border-radius: 26px;
}
.previewMark {
  font-size: 12px;
  color: #999999;
  margin-top: 12px;
  margin-bottom: 18px;
}
.previewBtn {
  width: 70px;
  height: 34px;
  border-radius: 4px;
  border: none;
  color: #fff;
  font-size: 14px;
  outline: none;
  cursor: pointer;
}
.previewColor {
  background-color: #3A4654;
  position: relative;
  padding-left: 20px;
}
.previewColor::before {
  content: '';
  display: block;
  width: 16px;
  height: 14px;
  position: absolute;
  top: 11px;
  left: 11px;
  background-image: url('../../../static/image/icon_yuloan.png');
}
.saveColor {
  background-color:#FB9335;
  margin: 0 20px;
  position: relative;
  padding-left: 20px;
}
.saveColor::before {
  content: '';
  display: block;
  width: 16px;
  height: 14px;
  position: absolute;
  top: 11px;
  left: 11px;
  background-image: url('../../../static/image/icon_baocun.png');
}
.publishColor {
  background-color: #009CFF;
  position: relative;
  padding-left: 20px;
}
.publishColor::before {
  content: '';
  display: block;
  width: 16px;
  height: 14px;
  position: absolute;
  top: 11px;
  left: 11px;
  background-image: url('../../../static/image/icon_fabu.png');
}
.configuration {
  width: 364px;
  height: 724px;
  background-color: #fff;
  padding: 21px 0 0 20px;
  overflow-y: scroll;
  overflow-x: hidden;
}
.configuration-title  {
  font-size: 14px;
  color:#515A6E;
}
.configuration-title p {
  color: #02080E;
  font-weight: bold;
}
.configurationImg {
  width: 84px;
  height: 84px;
  background: #EBEBEB;
  border-radius: 14px;
  text-align: center;
  padding-top: 22px;
  margin: 11px 0 31px 0;
}
.uploadImg {
  display: inline-block;
  border: 1px solid #E5E5E5;
  width: 68px;
  height: 28px;
  line-height: 28px;
  text-align: center;
  border-radius: 4px;
  color: #999999;
  outline: none;
  background: #fff;

}
.localMusic {
  width: 292px;
  height: 35px;
  display: block;
  border: 1px solid #E5E5E5;
  border-radius: 4px;
  line-height: 35px;
  text-align: center;
}
.musicPlayList {
  width: 292px;
  max-height: 170px;
  overflow-y: scroll;
  margin-top: 17px;
}
.playListItem{
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 21px;
  cursor: pointer;
}
.timeShow{
  position: relative;
}
.timeShow input[type="checkbox"] {
  width: 16px;
  height: 16px;
  position: absolute;
  top: 3px;
  margin-left: 20px;
  margin-bottom: 1px;
  opacity: 0;
  z-index: 100;
}
.stopMusic{
  display: inline-block;
  width: 16px;
  height: 16px;
  background-image: url('../../../static/image/btn_suspend.png');
  background-size: 100% 100%;
  vertical-align: middle;
  margin-right: 10px;
  margin-bottom: 1px;
}
.chooseMusicIcon{
  display: inline-block;
  width: 16px;
  height: 16px;
  background-image: url('../../../static/image/music_checkn.png');
  background-size: 100% 100%;
  vertical-align: middle;
  margin-left: 20px;
  margin-bottom: 1px;
}
.timeShow input[type="checkbox"]:checked+.chooseMusicIcon {
  background-image: url('../../../static/image/music_checks.png');
}
.upDownIcon {
  display: inline-block;
  width: 14px;
  height: 14px;
  background-image: url('../../../static/image/btn_down.png');
  background-size: 100% 100%;
  vertical-align: middle;
  position: absolute;
  right: 62px;
  top: 6px;
  cursor: pointer;
}
.clearComment {
  display: inline-block;
  width: 20px;
  height: 20px;
  background-image: url('../../../static/image/btn_dm_delete.png');
  background-size: 100% 100%;
  vertical-align: middle;
  margin-bottom: 1px;
}
.addComment {
  display: inline-block;
  width: 20px;
  height: 20px;
  background-image: url('../../../static/image/btn_dm_add.png');
  background-size: 100% 100%;
  vertical-align: middle;
  margin-bottom: 1px;
}
.commentBox {
  margin-top: 14px;
}
.avatarBox {
  width: 342px;
  max-height: 100px;
  overflow-y: scroll;
  margin-top: 11px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 21px;
}
.avatarItem {
  width: 83px;
  height: 84px;
  margin-right: 20px;
  position: relative;
}
.avatarItem img {
  width: 100%;
  height: 100%;
  border-radius: 16px;
}
.replaceImg {
  width: 84px;
  height: 24px;
  background: #000000;
  opacity: 0.65;
  position: absolute;
  left: 0px;
  bottom: 0;
  color: #fff;
  text-align: center;
  border-bottom-right-radius: 16px;
  border-bottom-left-radius: 16px;
  font-size: 12px;
  line-height: 24px;
}
.replaceImg:hover {
  background: #009CFF;
  opacity: 0.9;
  cursor: pointer;
}
.clearImg {
  width: 32px;
  height: 32px;
  background: #000000;
  opacity: 0.65;
  border-radius: 0px 16px 0px 16px;
  position: absolute;
  right: 0;
  top: 0;
}
.clearImg:hover {
  background: #009CFF;
  opacity: 0.9;
  cursor: pointer;
}
.clearImg::after {
  content:'';
  display: block;
  width: 20px;
  height: 20px;
  background: url('../../../static/image/icon_trash.png') no-repeat;
  position: absolute;
  right:4px;
  top: 9px;
}
.defaultBox {
  width: 83px;
  height: 84px;
  background: #EBEBEB;
  margin-right: 20px;
  border-radius: 16px;
  text-align: center;
  padding-top: 4px
}
.defaultBox .defaultImg {
  width: 36px;
  height: 36px;
  background-image: url('../../../static/image/icon_pzj.png');
   background-color: #EBEBEB;
   border: none;
}
.bulletComment {
  max-height: 200px;
  overflow-y: scroll;
}
</style>