<template>
  <div>
    <hr />
    <div class="panel-row">
      <vpd-icon name="target" />
      <div class="panel-label">标题</div>
      <div class="panel-value">
        <Input v-model="activeElement.option.title.text" />
      </div>
    </div>
    <div class="panel-row">
      <vpd-icon name="edit-3" />
      <div class="panel-label">文字颜色</div>
      <div class="panel-value">
        <input v-model="activeElement.option.title.textStyle.color" type="color" />
      </div>
    </div>
    <div class="panel-row">
      <vpd-icon name="target" />
      <div class="panel-label">字体</div>
      <div class="panel-value">
        <Select v-model="activeElement.option.title.textStyle.fontFamily">
          <Option
            v-for="item in fontFamilyList"
            :value="item.value"
            :key="item.value"
          >{{ item.label }}</Option>
        </Select>
      </div>
    </div>
    <div class="panel-row">
      <vpd-icon name="target" />
      <div class="panel-label">加粗</div>
      <div class="panel-value">
        <!-- <Switch v-model="activeElement.option.title.textStyle.fontWeight"></Switch> -->
        <Select v-model="activeElement.option.title.textStyle.fontWeight">
          <Option
            v-for="item in fontWeightList"
            :value="item.value"
            :key="item.value"
          >{{ item.label }}</Option>
        </Select>
      </div>
    </div>
    <div class="panel-row">
      <vpd-icon name="target" />
      <div class="panel-label">大小</div>
      <div class="panel-value">
        <Input v-model="activeElement.option.title.textStyle.fontSize" />
      </div>
    </div>
    <!-- <div class="panel-row">
      <vpd-icon name="target" />
      <div class="panel-label">tooltip配置</div>
    </div>
    <div class="panel-row">
      <vpd-icon name="target" />

      <div class="panel-value">
        <codemirror :value="tooltip" :options="cmOptions" @input="tooltipChange"></codemirror>
      </div>
    </div> -->
    <div class="panel-row">
      <vpd-icon name="target" />
      <div class="panel-label">series配置</div>
    </div>
    <div class="panel-row">
      <vpd-icon name="target" />

      <div class="panel-value">
        <codemirror :value="series" :options="cmOptions" @input="onSeriesChange"></codemirror>
      </div>
    </div>
    <!-- <div class="panel-row">
      <vpd-icon name="target" />
      <div class="panel-label">xAxis配置</div>
    </div>
    <div class="panel-row">
      <vpd-icon name="target" />

      <div class="panel-value">
        <codemirror :value="xAxis" :options="cmOptions" @input="xAxisChange"></codemirror>
      </div>
    </div> -->
  </div>
</template>

<script>
export default {
  name: "EchartsProloopStyle",
  props: ["activeElement"],
  data() {
    return {
      cmOptions: {
        // codemirror options
        tabSize: 4,
        mode: {
          name: "javascript",
          json: true
        },
        theme: "base16-dark",
        lineNumbers: true,
        line: true
        // more codemirror options, 更多 codemirror 的高级配置...
      },
      series: JSON.stringify(this.activeElement.option.series),
      xAxis: JSON.stringify(this.activeElement.option.xAxis),
      tooltip: JSON.stringify(this.activeElement.option.tooltip),
      fontFamilyList: [
          {
            value: "Helvetica Neue",
            label: "Helvetica Neue"
          },{
            value: 'Helvetica',
            label: "Helvetica"
          },{
            value: "PingFang SC",
            label: "PingFang SC"
          },{
            value: "Hiragino Sans GB",
            label: "Hiragino Sans GB"
          },{
            value: "Microsoft YaHei",
            label: "Microsoft YaHei"
          },{
            value: "微软雅黑",
            label: "微软雅黑"
          },{
            value: "Arial",
            label: "Arial"
          },{
            value: "sans-serif",
            label: "sans-serif"
          }
      ],
      fontWeightList:[
          {
            value: "normal",
            label: "normal"
          },{
            value: 'bold',
            label: "bold"
          },
          {
            value: "bolder",
            label: "bolder"
          },{
            value: 'lighter',
            label: "lighter"
          }
      ],
      fontSizeList: new Array(100)
    };
  },
  methods: {
    onSeriesChange(newCode) {
      this.activeElement.option.series = JSON.parse(newCode);
      this.$parent.$vpd.commit("updateWidgets", this.activeElement);
    },
    tooltipChange(newCode) {
      this.activeElement.option.tooltip = JSON.parse(newCode);
      this.$parent.$vpd.commit("updateWidgets", this.activeElement);
    },
    xAxisChange(newCode) {
      this.activeElement.option.xAxis = JSON.parse(newCode);
    }
  },
  mounted(){
    // debugger
    // for(var i = 1;i <= this.fontSizeList.length;){
    //   this.fontSizeList[i] = {
    //     value: i,
    //     label:i
    //   }
    //   i++
    // }
  }
};
</script>
