<template>
  <div class="third-stock-edit">
    <div class="form-item">类型:
      <el-radio v-model="dataModel.type" label="small">小图</el-radio>
      <el-radio style="margin-left:10px" v-model="dataModel.type" label="big">大图</el-radio>
    </div>
    <div class="form-item">图表类型:
      <el-select style="width:215px" v-model="dataModel.bgtype" v-show="dataModel.type === 'big'">
        <el-option v-for="item in bgtypes" :key="item.key" :value="item.key" :label="item.label">{{item.label}}</el-option>
      </el-select>
      <el-select style="width:215px" v-model="dataModel.smtype" v-show="dataModel.type === 'small'">
        <el-option v-for="item in smtypes" :key="item.key" :value="item.key" :label="item.label">{{item.label}}</el-option>
      </el-select>
    </div>
    <div class="form-item"> 股票编码:
      <el-input ref="stockcode" style="width:155px;" v-model="dataModel.stockcode"></el-input>
      <span style="color:#f00"> * </span>
      <el-button @click="previewImg" :disabled="!this.dataModel.stockcode">预览</el-button>
      <p class='txt-desc'>(上海证券sh开头,深圳证券sz开头。如：sh000001)</p>
    </div>
  </div>
</template>

<script>
/* global Dialog */
export default {
  props: {
    'widgetData': {
      type: Object
    }
  },
  components: {},
  data() {
    return {
      bgtypes: [
        {key: 'rk', label: '日K线'},
        {key: 'fs', label: '分时线'},
        {key: 'zk', label: '周K线'},
        {key: 'yk', label: '月K线'}
      ],
      smtypes: [
        {key: '1', label: '样式一'},
        {key: '2', label: '样式二'},
        {key: '3', label: '样式三'},
        {key: '4', label: '样式四'}
      ],
      dataModel: {
        type: 'big',
        bgtype: 'rk',
        smtype: '1',
        stockcode: ''
      }
    }
  },
  computed: {
    url() {
      var url = 'http://image.sinajs.cn/newchart'
      if (this.dataModel.type && this.dataModel.type === 'small') {
        url += '/small'
        switch (this.dataModel.smtype) {
          case '1':
            url += '/i' + this.dataModel.stockcode + '.gif'
            break
          case '2':
            url += '/b' + this.dataModel.stockcode + '.gif'
            break
          case '3':
            url += '/n' + this.dataModel.stockcode + '.gif'
            break
          case '4':
            url += '/t/' + this.dataModel.stockcode + '.gif'
            break
          default:
            url = 'noData.gif'
            break
        }
      }
      if (this.dataModel.type && this.dataModel.type === 'big') {
        url = 'http://image.sinajs.cn/newchart'
        switch (this.dataModel.bgtype) {
          case 'rk':
            url += '/daily/n/' + this.dataModel.stockcode + '.gif'
            break
          case 'fs':
            url += '/min/n/' + this.dataModel.stockcode + '.gif'
            break
          case 'zk':
            url += '/weekly/n/' + this.dataModel.stockcode + '.gif'
            break
          case 'yk':
            url += '/monthly/n/' + this.dataModel.stockcode + '.gif'
            break
          default:
            url += 'noData.gif'
            break
        }
      }
      return url
    }
  },
  created() {
    if (this.widgetData) {
      _.extend(this.dataModel, this.widgetData)
    }
  },
  async mounted() {
  },
  methods: {
    previewImg() {
      if (this.dataModel.stockcode) {
        var dlg = new Dialog({
          html: '<div style="text-align:center"><img alt="" src="' + this.url + '" onerror="this.alt=\'股票不存在\'"   /></div>',
          title: '预览',
          width: this.dataModel.type === 'small' ? 300 : 600
        })
        dlg.show()
      }
    },
    doSubmit() {
      return this.dataModel
    },
    validate() {
      if (_.isEmpty(this.dataModel.stockcode)) {
        this.$message({
          message: '请输入股票编码',
          type: 'warning'
        })
        this.$refs.stockcode.focus()
        return false
      }
      return true
    }
  }
}

</script>
<style scoped>
  .third-stock-edit .form-item {margin-bottom:10px;}
  .third-stock-edit .txt-desc {
    color: #666;
    font-size: 12px;
    margin: 3px 0;
    line-height: 18px;
  }
</style>
