<template>
  <el-row class="third-weibo-live" :gutter="10">
    <el-col :span="8">
      <h3>样式设置：</h3>
      <h4>设置尺寸：</h4>
      <el-row :gutter="10">
        <el-col :span="11">
          <el-input-number v-model="dataModel.width" :disabled="dataModel.autowidth" style="width:100%" :min="200" :max="1024" :step="5"></el-input-number>
          <p class="txt-desc">宽度（px）
            <br>200 ~ 1024</p>
            <el-checkbox v-model="dataModel.autowidth">宽度自适应</el-checkbox>
        </el-col>
        <el-col :span="11">
          <el-input-number v-model="dataModel.height" style="width:100%" :min="100" :max="800" :step="5"></el-input-number>
          <p class='txt-desc'>高度（px）
            <br>100 ~ 800</p>
        </el-col>
      </el-row>
      <div class="module-split"></div>
      <h4> 外观方案：</h4>
      <ul class="thirdpart_skin" id="template_skins">
        <li v-for="(skin, index) in skins" :class="{'skin-checked':skin.value === dataModel.skin}" @click="changeSkin(skin.value)"
          :key="index">
          <span :title="skin.label">
            <em :style="{ background: skin.colorRgb}">
              <i class="fa fa-check-circle" v-show="skin.value === dataModel.skin"></i>
            </em>
          </span>
        </li>
      </ul>
      <div class="module-split"></div>
      <h4> 语言设置：</h4>
      <el-radio v-model="dataModel.language" label="zh_cn">中文简体</el-radio>
      <el-radio v-model="dataModel.language" label="zh_tw">中文繁体</el-radio>

    </el-col>
    <el-col :span="8">
      <h3>基础设置：</h3>
      <h4> 模块设置：</h4>
      <el-checkbox v-model="dataModel.titlebar" :true-label="1" :false-label="0">显示标题栏</el-checkbox>
      <el-checkbox v-model="dataModel.border" :true-label="1" :false-label="0">显示边框</el-checkbox>
      <div class="module-split"></div>

      <el-checkbox v-model="dataModel.publish" style="margin-bottom:10px;" :true-label="1" :false-label="0">显示发布框</el-checkbox>
      <div>设置话题：<el-input v-model="dataModel.ptopic" @blur="topicBlur" size="small" :disabled="dataModel.publish===0" style="width:220px"></el-input>
          <p style="padding-left:5em;"><span class='txt-desc'>多个话题之间用"~"相连</span></p>
          <el-checkbox v-model="dataModel.refer" :disabled="dataModel.publish===0" :true-label="1" :false-label="0" style="margin-left:0;">发微博携带直播来源页链接</el-checkbox>
      </div>
      <div class="module-split"></div>

      <el-checkbox v-model="dataModel.atalk" :true-label="1" style="margin-bottom:10px;" :false-label="0">显示大家在说</el-checkbox>
      <div> 设置话题：<el-input v-model="dataModel.atopic" :disabled="dataModel.atalk===0" size="small" style="width:220px"></el-input>
          <p style="padding-left:5em;"><span class='txt-desc'>多个话题之间用"~"相连</span></p>
      </div>
      <div class="module-split"></div>

      <h4> 图片内容：</h4>
      <el-checkbox v-model="dataModel.pic" :true-label="0" :false-label="1">显示为缩略图</el-checkbox>

    </el-col>
    <el-col :span="8">
      <h3>预览：</h3>
      <div class="weibo-preview">
        <iframe id="_preview" :src="url" :width="dataModel.autowidth ? '100%' : dataModel.width" :height="dataModel.height" frameborder="0" scrolling="no"></iframe>
      </div>

    </el-col>
  </el-row>
</template>

<script>
/* global  */
export default {
  props: {
    'widgetData': {
      type: Object
    }
  },
  data() {
    return {
      specialID: window.initdata.ID,
      content: this.widgetData,
      skins: [{
        colorHex: 'gray',
        colorRgb: 'rgb(240,240,240)',
        value: 1,
        label: '灰色'
      }, {
        colorHex: '#b1dcf',
        colorRgb: 'rgb(178,221,254)',
        value: 2,
        label: '深蓝色'
      }, {
        colorHex: '#ffc0b',
        colorRgb: 'rgb(254,192,188)',
        value: 3,
        label: '浅红色'
      }, {
        colorHex: '#CCF0C',
        colorRgb: 'rgb(205,240,205)',
        value: 4,
        label: '青绿色'
      }, {
        colorHex: '#F9F1A',
        colorRgb: 'rgb(249,241,176)',
        value: 5,
        label: '淡黄色'
      }, {
        colorHex: '#FFDDB',
        colorRgb: 'rgb(254,221,179)',
        value: 6,
        label: '浅橙色'
      }, {
        colorHex: '#F0E6F',
        colorRgb: 'rgb(240,230,253)',
        value: 7,
        label: '淡紫色'
      }, {
        colorHex: '#CEF7F',
        colorRgb: 'rgb(207,247,253)',
        value: 8,
        label: '浅蓝色'
      }, {
        colorHex: '#E0E0E',
        colorRgb: 'rgb(224,224,224)',
        value: 9,
        label: '深灰色'
      }, {
        colorHex: '#29292',
        colorRgb: 'rgb(41,41,41)',
        value: 10,
        label: '暗黑色'
      }],
      //  url:''
      dataModel: {
        uid: '',
        refer: 0,
        appkey: '',
        dpc: 1,
        width: 300,
        height: 350,
        autowidth: true,
        skin: 1,
        pic: 1,
        language: 'zh_cn',
        titlebar: 1,
        border: 1,
        publish: 1,
        ptopic: '',
        atalk: 1,
        atopic: ''
      }
    }
  },
  computed: {
    showWidth() {
      return this.dataModel.autowidth ? 0 : this.dataModel.width
    },
    url() {
      // http://widget.weibo.com/livestream/listlive.php?language=zh_cn&width=0&height=350&uid=1659273020&skin=1&refer=1&appkey=&pic=0&titlebar=1&border=0&publish=1&atalk=1&recomm=0&at=0&colordiy=0&dpc=1
      // http://widget.weibo.com/livestream/listlive.php?language=zh_cn&width=0&height=350&uid=1659273020&skin=1&refer=1&appkey=&pic=0&titlebar=1&border=1&publish=1&atalk=1&recomm=0&at=0&colordiy=0&atopic=ce&ptopic=ff&dpc=1
      return `http://widget.weibo.com/livestream/listlive.php?language=${this.dataModel.language}&width=${this.showWidth}&height=${this.dataModel.height}&uid=${this.dataModel.uid}&skin=${this.dataModel.skin}&refer=${this.dataModel.refer}&appkey=${this.dataModel.appkey}&pic=${this.dataModel.pic}&titlebar=${this.dataModel.titlebar}&border=${this.dataModel.border}&publish=${this.dataModel.publish}&ptopic=${this.dataModel.ptopic}&atalk=${this.dataModel.atalk}&atopic=${this.dataModel.atopic}&dpc=${this.dataModel.dpc}&recomm=0&at=0&colordiy=0`
    }
  },
  created() {
    _.extend(this.dataModel, this.widgetData)
  },

  methods: {
    changeSkin(val) {
      this.dataModel.skin = val
    },
    topicBlur() {
      if (this.dataModel.ptopic !== '' && this.dataModel.atopic === '') {
        this.dataModel.atopic = this.dataModel.ptopic
      }
    },
    doSubmit() {
      return this.dataModel
    },
    validate() {
      return true
    }
  }
}

</script>

<style>
  .third-weibo-live .txt-desc {
    color: #666;
    font-size: 12px;
    margin: 3px 0;
    line-height: 18px;
  }
  .third-weibo-live .module-split{height:0;border-bottom: dashed 1px #C2C2C2;margin:10px 0;}

  .third-weibo-live h3 {
    color: #010101;
    font-size: 16px;
    margin-bottom: 10px;
  }
  .third-weibo-live .weibo-preview{position:relative}
  .third-weibo-live .weibo-preview iframe{position:absolute;box-sizing:initial}

  .third-weibo-live h4 {
    color: #010101;
    font-size: 14px;
    font-weight: bold;
    margin-bottom: 6px
  }

  .thirdpart_skin {
    width: 280px;
    height: 100px;
  }

  .thirdpart_skin li {
    float: left;
    width: 32px;
    height: 32px;
    list-style: none;
    border: 1px solid #fff;
    margin: 0 10px 10px;
    cursor: pointer;
  }

  .thirdpart_skin li span {
    border: 1px solid #eee;
    display: block;
    width: 30px;
    height: 30px;
  }

  .thirdpart_skin li span em {
    display: block;
    width: 28px;
    height: 28px;
    border: 1px solid #fff;
    position: relative
  }

  .thirdpart_skin li.skin-checked span {
    border-color: #A0DA80;
  }

  .thirdpart_skin li.skin-checked span i {
    color: #3DA420;
    position:absolute;
    right:0;
    bottom:0;
  }

</style>
