<template>
  <div style="padding: 0px 10px;">
    <el-form label-position="left" :rules="rules" label-width="100px">
      <el-form-item label="颜色系列" prop="colorType">
        <el-select v-model="colorType">
          <el-option label="浅色系" value="light" />
          <el-option label="深色系" value="dark" />
        </el-select>
      </el-form-item>
      <el-form-item label="类型" prop="type">
        <el-select v-model="type">
          <el-option label="基础柱状图" value="0" />
          <el-option label="多个柱状图" value="1" />
          <el-option label="堆叠柱状图" value="2" />
          <el-option label="正负柱状图" value="3" />
        </el-select>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import ApDevItemBase from './ApDevItemBase'

export default {
  name: 'ApDevItemChartBar',
  extends: ApDevItemBase,
  data() {
    return {
      colorType: 'light', // 颜色系列
      type: '0', // 类型
      rules: {}
    }
  },
  // 监听每个属性的变化，对生成的模板进行修改
  watch: {
    type() {
      this.initOpt()
    },
    colorType() {
      this.initOpt()
    }
  },
  created() {
    this.initOpt()
  },
  methods: {
    // 初始化代码生成模板
    initOpt() {
      // ---------- 模板 ----------
      // 代码
      this.template = `<div style="width: 100%;height: 100%;">
            <ap-chart ref="barChart" :options.sync="apChartsOpt" style="width: 100%;"></ap-chart>
        </div>`

      // 导入
      this.import = `import ApChart from '@/views/charts/ApChart'\n    `

      // 声明
      this.components = `components: {
                ApChart: ApChart
            },\n\t`

      // 数据
      this.data = `{
                    apChartsOpt: {}
                }`

      // created方法
      this.created = `created() {
                this.initChart();
            },\n\t`

      // 方法
      this.methods = `{
                @colorType@
                        @typeOpt@
            }`

      // ---------- 模板内容替换 ----------
      this.replaceMethods('@colorType@', `initChart() {
                    this.opt = {
                        colorType: '${this.colorType}',`)
      if (this.type == '0') {
        const str = `title: {
                            text: '基础柱状图Demo',
                        },
                        xAxis: {
                            data: ['one', 'two', 'three', 'four', 'five', 'six', 'seven']
                        },
                        legend: [],
                        series: [
                            {
                                type: 'bar',
                                name: '系列1',
                                data: [1, 2, 3, 4, 5, 6, 7],
                            },
                        ]
                    };
                    this.apChartsOpt = this.opt;
                }`
        this.replaceMethods('@typeOpt@', str)
      } else if (this.type == '1') {
        const str = `title: {
                            text: '多个柱状图Demo',
                        },
                        xAxis: {
                            data: ['one', 'two', 'three', 'four', 'five', 'six', 'seven']
                        },
                        legend: [],
                        series: [
                            {
                                type: 'bar',
                                name: '系列1',
                                data: [1, 2, 3, 4, 5, 6, 7],
                            },
                            {
                                type: 'bar',
                                name: '系列2',
                                data: [1, 2, 3, 4, 5, 6, 7],
                            },
                        ]
                    };
                    this.apChartsOpt = this.opt;
                }`
        this.replaceMethods('@typeOpt@', str)
      } else if (this.type == '2') {
        const str = `title: {
                            text: '堆叠柱状图Demo',
                        },
                        xAxis: {
                            data: ['one', 'two', 'three', 'four', 'five', 'six', 'seven']
                        },
                        legend: [],
                        series: [
                            {
                                type: 'bar',
                                stack: '柱状图',
                                name: '系列1',
                                data: [1, 2, 3, 4, 5, 6, 7],
                            },
                            {
                                type: 'bar',
                                stack: '柱状图',
                                name: '系列2',
                                data: [1, 2, 3, 4, 5, 6, 7],
                            },
                        ]
                    };
                    this.apChartsOpt = this.opt;
                }`
        this.replaceMethods('@typeOpt@', str)
      } else if (this.type == '3') {
        const str = `title: {
                            text: '正负柱状图Demo',
                        },
                        xAxis: {
                            name: '',
                            type: 'value',
                        },
                        yAxis: {
                            name: '',
                            type: 'category',
                            data: ['one', 'two', 'three', 'four', 'five', 'six', 'seven']
                        },
                        legend: [],
                        series: [
                            {
                                type: 'bar',
                                stack: '柱状图',
                                name: '系列1',
                                data: [1, 2, 3, 4, 5, 6, 7],
                            },
                            {
                                type: 'bar',
                                stack: '柱状图',
                                name: '系列2',
                                data: [-1, -2, -3, -4, -5, -6, -7],
                            },
                        ]
                    };
                    this.apChartsOpt = this.opt;
                }`
        this.replaceMethods('@typeOpt@', str)
      }
    }
  }
}
</script>
