<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-select>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import ApDevItemBase from './ApDevItemBase'

export default {
  name: 'ApDevItemChartRadar',
  extends: ApDevItemBase,
  data() {
    return {
      type: '0',
      colorType: 'light',
      rules: {}
    }
  },
  // 监听每个属性的变化，对生成的模板进行修改
  watch: {
    type() {
      this.initOpt()
    },
    colorType() {
      this.initOpt()
    }
  },
  created() {
    this.initOpt()
  },
  methods: {
    initOpt() {
      // ---------- 模板 ----------
      // 代码
      this.template = `<div style="width: 100%;height: 100%;display: flex;flex-direction: column;">
            <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',
                        },
                        legend: [],
                        radar: {
                            indicator: [
                                { name: 'one', max: 10},
                                { name: 'two', max: 10},
                                { name: 'three', max: 10},
                                { name: 'four', max: 10},
                                { name: 'five', max: 10},
                                { name: 'six', max: 10},
                                { name: 'seven', max: 10},
                            ]
                        },
                        series: [
                            {
                                type: 'radar',
                                name: '雷达图1',
                                areaStyle: {},
                                data: [{value: [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',
                        },
                        legend: [],
                        radar: [
                            {
                                indicator: [
                                    { name: 'one', max: 10},
                                    { name: 'two', max: 10},
                                    { name: 'three', max: 10},
                                    { name: 'four', max: 10},
                                    { name: 'five', max: 10},
                                    { name: 'six', max: 10},
                                    { name: 'seven', max: 10},
                                ],
                                center: ['25%', '50%'],
                                radius: 100
                            },
                            {
                                indicator: [
                                    { name: 'one', max: 10},
                                    { name: 'two', max: 10},
                                    { name: 'three', max: 10},
                                    { name: 'four', max: 10},
                                    { name: 'five', max: 10},
                                    { name: 'six', max: 10},
                                    { name: 'seven', max: 10},
                                ],
                                center: ['75%', '50%'],
                                radius: 100
                            }
                        ],
                        series: [
                            {
                                type: 'radar',
                                name: '雷达图1',
                                areaStyle: {},
                                data: [{value: [1, 2, 3, 4, 5, 6, 7]}],
                            },
                            {
                                type: 'radar',
                                radarIndex: 1,
                                name: '雷达图2',
                                areaStyle: {},
                                data: [{value: [7, 6, 5, 4, 3, 2, 1]}],
                            },
                        ]
                    };
                    this.apChartsOpt = this.opt;
                }`
        this.replaceMethods('@typeOpt@', str)
      }
    }
  }
}
</script>
