<template>
  <div>
    <el-row :gutter="20">
      <el-form >
        <el-col :span="8">
          <div class="panel-card z-legend"><b>样式设置</b></div>

          <div class="panel-card">
            <el-form-item  label="设置尺寸">
              <el-row>
                <el-col :span="10">
                  <el-input-number v-model="weiboStyle.s_width" controls-position="right" :span="6"  :min="limitData.width.min" :max="limitData.width.max"></el-input-number>
                </el-col>
                <el-col :span="10">
                  <el-input-number v-model="weiboStyle.s_height" controls-position="right" :span="6"  :min="limitData.height.min" :max="limitData.height.max"></el-input-number>
                </el-col>
              </el-row>
            </el-form-item>
          </div>

          <div class="panel-card">
            <el-row>
              <el-col>
                <el-form-item  label="宽度自适应">
                <el-switch v-model="weiboStyle.autowidth" active-value="100%" inactive-value=""></el-switch>
                </el-form-item>
              </el-col>
            </el-row>
          </div>

          <div class="panel-card">
            <el-form-item label="样式设置">
              <el-row>
                <el-col>

                    <ul class="thirdpart_skin">
                      <li :class="key" v-for="(value,key) in styleConfig" :key="value">
                        <span>
                          <em>
                            <input type="radio" :id="value" :value="value" v-model="weiboStyle.skin">
                          </em>
                        </span>
                      </li>
                    </ul>
                </el-col>
              </el-row>
            </el-form-item>
          </div>

          <div class="panel-card">
            <el-row>
              <el-col>
                <el-form-item label="显示为缩略图">
                  <el-switch v-model="weiboStyle.pic" active-value="0" inactive-value="1"></el-switch>
                </el-form-item>
              </el-col>
            </el-row>
          </div>

          <div class="panel-card">
            <el-form-item label="语言设置">
              <el-row>
                <el-col>
                  <el-radio-group v-model="weiboStyle.lang">
                    <el-radio label="zh_cn">中文简体</el-radio>
                    <el-radio label="zh_tw">中文繁体</el-radio>
                  </el-radio-group>
                </el-col>
              </el-row>
            </el-form-item>
          </div>
      </el-col>

      <el-col :span="8">
        <div class="panel-card z-legend"><b>模块设置</b></div>
        <div class="panel-card">
          <el-row>
            <el-col :span="10">
              <el-form-item>
                <el-checkbox v-model="weiboStyle.titlebar" true-label="1" false-label="0">显示标题栏</el-checkbox>
              </el-form-item>
            </el-col>
            <el-col :span="4"></el-col>
            <el-col :span="10">
              <el-form-item>
                <el-checkbox v-model="weiboStyle.border" true-label="1" false-label="0">显示边框</el-checkbox>
              </el-form-item>
            </el-col>
          </el-row>
        </div>

        <div class="panel-card">
          <el-row>
            <el-col >
              <el-form-item label="显示发布框">
                <el-switch v-model="weiboStyle._publish" active-value="1" inactive-value="0"></el-switch>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col>
              <el-form-item label="发微博携带直播来源页链接">
                  <el-switch v-model="weiboStyle.refer" active-value="1" inactive-value="0"></el-switch>
                </el-form-item>
            </el-col>
          </el-row>
          <el-form-item label="设置话题">
            <el-row>
              <el-col>
                <el-input v-model="weiboStyle.ptopic" verify="['Regex=[\u4e00-\u9fa5\a-zA-z0-9_~#]{0,30}']"></el-input>
              </el-col>
            </el-row>
          </el-form-item>
           <el-row>
             <el-col>
               <span>多个话题之间用"~"相连</span>
             </el-col>
           </el-row>
        </div>

        <div  class="panel-card">
          <el-row>
            <el-col>
              <el-form-item label="显示大家在说">
                <el-switch v-model="weiboStyle.atalk" active-value="1" inactive-value="0"></el-switch>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col>
              <el-form-item label="话题设置">
                <el-input v-model="weiboStyle.atopic" verify="['Regex=[\u4e00-\u9fa5\a-zA-z0-9_~#]{0,30}']"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col>
              <span>多个话题之间用"~"相连</span>
            </el-col>
          </el-row>
        </div>
      </el-col>

      <el-col :span="8">
        <div class="panel-card z-legend"><b>预览</b></div>
        <div class="panel-card">
          <iframe id="_preview" :src="weiboUrl" frameborder="0" scrolling="no" :width="autowidth" :height="weiboStyle.s_height"></iframe>
        </div>
      </el-col>
     </el-form>
    </el-row>
  </div>
</template>
<script>
import util from '@src/common/util.js'
export default {
  props: {
    ID: {
      type: [String, Number],
      default: ''
    },
    catalogID: {
      type: [String, Number],
      default: ''
    }
  },
  data() {
    return {
      // iframe
      weiboUrl: '',
      // style风格
      styleConfig: {'skin_01': '1', 'skin_02': '2', 'skin_03': '3', 'skin_04': '4', 'skin_05': '5', 'skin_06': '6', 'skin_07': '7', 'skin_08': '8', 'skin_09': '9', 'skin_10': '10'},
      // 限制内容
      limitData: {
        width: {
          min: 200,
          max: 1024
        },
        height: {
          min: 75,
          max: 800
        }
      },
      weiboStyle: {
        // basicinfo
        uid: '',
        refer: '',
        appkey: '',
        dpc: '',

        s_width: 280,
        s_height: 400,
        autowidth: '',
        skin: '1',
        pic: '0',
        lang: 'zh_cn',

        _publish: '1',
        source_link: 'N',
        ptopic: '',
        atalk: '1',
        atopic: '',

        titlebar: '1',
        border: '1'
      },
      autowidth: ''
    }
  },
  watch: {
    weiboStyle: {
      deep: true,
      immediate: true,
      handler: function (val) {
        // console.log(val)
        this.getSinaWeiboUrl(val)
      }
    }
  },
  created() {
    this.getSinaWeiboUrl(this.weiboStyle)
    try {
      util.loadCSS('http://timg.sjs.sinajs.cn/t35/appstyle/opent/css/app/app.css?version=1.1.2.234')
    } catch (e) {
      console.error('sinacss ie8 css file is missing', e.toString())
      return null
    }
  },
  methods: {
    init() {},
    getSinaWeiboUrl(val) {
      this.autowidth = this.autowidth ? this.autowidth : `${val.s_width}px`
      this.weiboUrl = `http://widget.weibo.com/livestream/listlive.php?language=${val.lang}&width=${this.autowidth}&height=${val.s_height}&uid=${val.uid}&skin=${val.skin}&refer=${val.refer}&appkey=${val.appkey}&pic=${val.pic}&titlebar=${val.titlebar}&border=${val.border}&publish=${val._publish}&ptopic=${val.ptopic}&atalk=${val.atalk}&atopic=${encodeURI(val.atopic)}&dpc=${val.dpc}&recomm=0&at=0`
    // console.log('weiboUrl:'+this.weiboUrl)
    },
    confirm() {
      let html = `<iframe name="weibo_${this.ID}" style="display: block;" frameborder="0" scrolling="no" src="${this.weiboUrl}" width="${this.weiboStyle.s_width}" height="${this.weiboStyle.s_height}"></iframe>`
      window.editor.execCommand('insertHTML', html)
      window.dialog.close(false)
    }
  }
}
</script>
<style>
.z-legend{
  height:35px;
  padding-left:10px;
  line-height:25px;
  margin:3px 0;
  text-align: center;
}
</style>
