<template>
    <div class="third-share-editor">
      <el-form ref="shareForm" :model="shareConfig" label-width="80px" label-suffix=":" class="content-form">
      <div>
       <el-row type="flex" :gutter="10">
         <el-col :span="14">
          <h3>风格设置：</h3>
            <el-form-item prop="bdType"  label="类型">
              <el-radio-group v-model="shareConfig.bdType">
                <el-radio :label="1">图标式</el-radio>
                <el-radio :label="2">文字式</el-radio>
                <el-radio :label="3">浮窗式</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item prop="bdStyle" v-if="shareConfig.bdType !== 3" label="风格">
              <el-radio-group v-model="shareConfig.bdStyle" class="radio-group-bdstyle">
                <el-radio :label="0"><img src="@static/assets/pageweaver/images/badushare_btn_style0.png" alt="风格一"></el-radio>
                <el-radio :label="1"><img src="@static/assets/pageweaver/images/badushare_btn_style1.png" alt="风格二"></el-radio>
                <el-radio :label="2"><img src="@static/assets/pageweaver/images/badushare_btn_style2.png" alt="风格三"></el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item prop="bdSize" v-if="shareConfig.bdType === 1" label="尺寸">
              <el-radio-group v-model="shareConfig.bdSize">
                <el-radio :label="16">16*16</el-radio>
                <el-radio :label="24">24*24</el-radio>
                <el-radio :label="32">32*32</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item ref="sharebtns" prop="bdStyle" class="mod-getcode-step-config" v-show="shareConfig.bdType !== 3" label="按钮">
              <div class="step-config-sort bdshare-button-style0-16 clearfix" ref="btns-sort" v-if="typeof partners.partners === 'object'">
                <div class="partner-item" v-for="item in shareConfig.viewList" :key="item">
                  <a href="javascript:;" :class="'bds_'+item" :title="partners.partners[item].name" :data-value="item" v-text="partners.partners[item].name"></a>
                </div>
                <!-- <a href="javascript:;" v-for="item in shareConfig.viewList" :key="item" :class="'bds_'+item" :title="partners.partners[item].name" :data-value="item"></a> -->
              </div>
              <div class="step-config-all-partner bdshare-button-style0-16" ref="btns-all">
                <div class="partner-item" v-for="item in showBtns" :key="item">
                  <a href="javascript:;" :class="'bds_'+item" :title="partners.partners[item].name" :data-value="item" v-text="partners.partners[item].name"></a>
                </div>
              </div>
            </el-form-item>
            <el-form-item prop="slideImg" v-if="shareConfig.bdType === 3" label="风格">
              <el-radio-group class="float-radio-group" v-model="shareConfig.slideImg">
                <el-radio :label="idx" v-for="(color,idx) in slideImgColors" :key="idx"><div class="slide-color-item" :style="{'background-color':color}"><span>分</span><span>享</span></div></el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item prop="slidePos" v-if="shareConfig.bdType === 3" label="位置">
              <el-radio-group v-model="shareConfig.slidePos">
                <el-radio label="left">左侧</el-radio>
                <el-radio label="right">右侧</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item prop="slideTop" v-if="shareConfig.bdType === 3" label="顶部距离">
              <el-slider v-model="shareConfig.slideTop" :min="0" :max="250"></el-slider>
            </el-form-item>
         </el-col>
         <el-col :span="10">
           <h3>预览：</h3>
           <div class="share-preview">

             <div class="bdsharebuttonbox" v-show="shareConfig.bdType !== 3" v-if="typeof partners.partners === 'object'" :class="'bdshare-button-style' + shareConfig.bdStyle + ' bdshare-button-style' + shareConfig.bdStyle + '-' + shareConfig.bdSize">
               <a href="#" class="bds_more" data-cmd="more"></a>
               <a href="#" v-for="item in shareConfig.viewList" :key="item" :class="'bds_'+item" :data-cmd="item" :title="partners.partners[item].name" v-text="shareConfig.bdType === 2 ? partners.partners[item].name : ''"></a>
              </div>
              <div class="bdsharebuttonbox" v-show="shareConfig.bdType === 3">
                <i class="fa fa-hand-o-left" v-show="shareConfig.slidePos==='left'"></i> 请参考页面{{ shareConfig.slidePos==='left' ? '左' : '右' }}侧的效果 <i class="fa fa-hand-o-right" v-show="shareConfig.slidePos==='right'"></i>
              </div>

           </div>

           <h3>分享内容设置：</h3>
           <el-form-item prop="bdText" label="分享文案">
              <el-input v-model="shareConfig.bdText" type="textarea" :autosize="{ minRows: 1, maxRows: 4}" placeholder="请输入内容"></el-input>
            </el-form-item>
            <el-form-item prop="bdPic" label="分享图片">
              <logo-path
                  :path.sync="shareConfig.bdPic"
                  :resource-dialog-props="resourceDialogProps"
                ></logo-path>
            </el-form-item>
            <div class="other-options-div">
              <el-button type="text" class="btn-adv" @click="otherOptionsFlag=!otherOptionsFlag">
                <span class="txt-adv">更多选项</span>
                <i class="fa" :class="otherOptionsFlag?'fa-angle-up':'fa-angle-down'"></i>
              </el-button>
            </div>
            <div v-show="otherOptionsFlag" class="other-options-data">
           <h4>可输入AppKey自定义分享来源:</h4>
            <el-form-item prop="tsina" label="新浪" label-width="50px">
                <el-input v-model="shareConfig.bdSnsKey.tsina" size="mini"></el-input>
              </el-form-item>
              <el-form-item prop="tqq" label="腾讯" label-width="50px">
                <el-input v-model="shareConfig.bdSnsKey.tqq" size="mini"></el-input>
              </el-form-item>
              <el-form-item prop="t163" label="网易" label-width="50px">
                <el-input v-model="shareConfig.bdSnsKey.t163" size="mini"></el-input>
              </el-form-item>
              <el-form-item prop="tsohu" label="搜狐" label-width="50px">
                <el-input v-model="shareConfig.bdSnsKey.tsohu" size="mini"></el-input>
              </el-form-item>
            </div>
          </el-col>
       </el-row>
      </div>
      </el-form>
    </div>
</template>
<script>
/* global $ */
import util from '@src/common/util.js'
import _ from 'lodash'
import LogoPath from '@src/pages/contentcore/components/LogoPath.vue'
import Sortable from 'sortablejs'
export default {
  components: {
    'logo-path': LogoPath
  },
  data() {
    return {
      confirmLoading: false,
      slideImgColors: [
        '#FEB65B',
        '#B1D85C',
        '#84C0F2',
        '#BFBDBD',
        '#F58384',
        '#323D45',
        '#457CE6',
        '#FF0C8A',
        '#8CBCD1'
      ],
      shareConfig: {
        bdType: 1,
        bdStyle: 0,
        bdSize: 16,
        // 浮窗式
        slideImg: 0,
        slidePos: 'right', // 值为left、right
        slideTop: 100,
        bdSnsKey: {
          // 自定义分享来源-APPKEY
          tsina: '',
          tqq: '',
          t163: '',
          tsohu: ''
        },
        bdText: '', // 分享文案
        bdPic: '', // 分享缩略图
        viewList: ['mshare', 'tsina', 'isohu', 'qzone', 'weixin', 'sqq']
      },
      resourceDialogProps: {
        selectorURL: 'imageResources',
        resourceType: 'image',
        allowType: '.jpg,.jpeg,.png,gif',
        height: 200,
        width: 200,
        catalogID: window.initdata.catalogID,
        url: ''
      },
      otherOptionsFlag: false,
      partners: {}
    }
  },
  props: {
    widgetData: {
      type: Object
    }
  },
  computed: {
    showBtns() {
      if (typeof this.partners.partnerSort === 'object') {
        return _.difference(this.partners.partnerSort, this.shareConfig.viewList)
      } else {
        return []
      }
    }
  },
  watch: {
    shareConfig: {
      handler: function(val, oldVal) {
        if (val.bdType === 2) {
          this.shareConfig.bdSize = 16
        }
        this.preview()
      },
      deep: true
    }
  },
  async mounted() {
    this.init()
  },
  created() {
    _.extend(this.shareConfig, this.widgetData)
  },
  methods: {
    init() {
      this.preview()
    },
    async preview() {
      var self = this
      // var style = `bdshare-button-style${this.shareConfig.bdStyle}-${this.shareConfig.bdSize}`
      window._bd_share_config = {}
      window._bd_share_config.common = {
        bdSnsKey: {},
        bdText: self.shareConfig.bdText,
        bdMini: '2',
        bdMiniList: false,
        bdPic: self.shareConfig.bdPic,
        bdStyle: self.shareConfig.bdStyle,
        bdSize: self.shareConfig.bdSize
      }
      $.each(self.shareConfig.bdSnsKey, function(key, val) {
        if (!_.isEmpty(val)) {
          window._bd_share_config.common.bdSnsKey[key] = val
        }
      })

      if (this.shareConfig.bdType === 3) {
        window._bd_share_config.slide = {'type': 'slide', 'bdImg': self.shareConfig.slideImg, 'bdPos': self.shareConfig.slidePos, 'bdTop': self.shareConfig.slideTop}
      }
      if (typeof window._bd_share_main === 'undefined') {
        util.loadCSS('//share.baidu.com/static/web/css/getcodes/getcodes.css')
        util.loadCSS('//bdimg.share.baidu.com/static/api/css/share_style0_16.css')
        await util.loadJS('//bdimg.share.baidu.com/static/api/js/share.js?cdnversion=430562')
        window._bd_share_main.F.use('share_style' + this.shareConfig.bdStyle + '_' + this.shareConfig.bdSize + '.css')
        window._bd_share_main.F.use('component/partners', function(o) {
          // var n = o.partners
          self.partners = o
          self.$nextTick(function () {
            self.setSortable()
          })
        })
      } else {
        window._bd_share_main.F.use('share_style' + this.shareConfig.bdStyle + '_' + this.shareConfig.bdSize + '.css')
        var $slideBox = $('.bdshare-slide-button-box')
        if ($slideBox.size() > 0) {
          $slideBox.remove()
          if (this.shareConfig.bdType !== 3) {
            self.$nextTick(function() {
              self.setSortable()
            })
          }
        }
        if (this.shareConfig.bdType === 3) {
          window._bd_share_main.init()
        }
      }
    },
    setSortable() {
      var self = this
      var sortEl = this.$refs['btns-sort']
      var allEl = this.$refs['btns-all']
      var afterDrag = function() {
        var aTags = sortEl.getElementsByTagName('a')
        var viewList = _.map(aTags, function(el) {
          return el.getAttribute('data-value')
        })
        self.shareConfig.viewList = viewList
      }
      Sortable.create(sortEl, { group: 'btnssort',
        onEnd: function () {
          afterDrag()
        }
      })
      Sortable.create(allEl, {
        group: 'btnssort',
        sort: false,
        onEnd: function (evt) {
          afterDrag()
        }
      })
    },
    validate() {
      if (this.shareConfig.bdType === 1 || this.shareConfig.bdType === 2) {
        if (this.shareConfig.viewList.length === 0) {
          this.$message({
            message: '风格设置中至少设置一个按钮',
            type: 'warning'
          })
          return false
        }
      }
      return true
    },
    doSubmit() {
      var $slideBox = $('.bdshare-slide-button-box')
      if ($slideBox.size() > 0) {
        $slideBox.remove()
      }
      return this.shareConfig
    }
  }
}
</script>
<style scoped>
.share-preview {
  margin: 10px 10px 30px;
  border-radius: 5px;
  border: solid 1px #d6d6d6;
  padding: 10px;
  box-shadow: 2px 3px 3px #e6e6e6;
  min-height: 30px;
}
.third-share-editor h3 {
  color: #010101;
  font-size: 16px;
  margin-bottom: 10px;
}
.slide-color-item {
  width: 22px;
  height: 88px;
  text-align: center;
  font-size: 15px;
  color: #fff;
  border-radius: 0 6px 6px 0;
  display: inline-block;
  vertical-align: middle;
  padding-top: 12px;
}
.slide-color-item span {
  display: block;
  margin: 10px auto;
}

.other-options-div {
  height: 36px;
  margin: 5px 0;
  position: relative;
  text-align: center;
}

.other-options-div:before {
  content: '';
  width: 100%;
  height: 1px;
  background: #d7d7d7;
  top: 17px;
  left: 0;
  position: absolute;
}

.other-options-div .btn-adv {
  height: 36px;
  width: 120px;
  text-align: center;
  left: 50%;
  margin-left: -60px;
  background: #fff;
  position: absolute;
}
.mod-getcode-step-config .step-config-all-partner{
  width:298px;
  height:130px;
}
.mod-getcode-step-config .step-config-all-partner .partner-item{
  width:90px;
}
.mod-getcode-step-config .step-config-all-partner a{
  cursor:move;
}
.mod-getcode-step-config .step-config-sort .partner-item {
  display:inline-block;
  margin:3px;
  width:17px;
  height:16px;
  overflow:hidden;
}
.mod-getcode-step-config .step-config-sort a{
  width:17px;
  height:16px;
  overflow:hidden;
  cursor:move;
}
.bdshare-button-style2 a{
  -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter: grayscale(100%);
    filter: gray;
}
</style>
<style>
.float-radio-group .el-radio {
  padding: 8px;
}
.float-radio-group.el-radio-group label:first-child {
  padding-left:8px;
}
.float-radio-group .el-radio + .el-radio {
  margin: 0;
}
.float-radio-group .el-radio-group label {
  padding: 0;
}
.float-radio-group .el-radio__label {
  padding-left: 5px;
}
.radio-group-bdstyle .el-radio{
  display:block;
  margin:3px 0;
  padding-left:0;
}
.radio-group-bdstyle .el-radio__label {
  height:24px;
  display:inline-block;
  vertical-align:middle;
}
.other-options-data .el-form-item {
  margin-bottom:0;
}
</style>
