<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: 'ApDevItemChartPie',
  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: [],
                        series: [
                            {
                                type: 'pie',
                                name: '饼图',
                                data: [
                                    {name: 'one', value: 1},
                                    {name: 'two', value: 2},
                                    {name: 'three', value: 3},
                                    {name: 'four', value: 4},
                                    {name: 'five', value: 5},
                                    {name: 'six', value: 6},
                                    {name: 'seven', value: 7},
                                ],
                            },
                        ]
                    };
                    this.apChartsOpt = this.opt;
                }`
        this.replaceMethods('@typeOpt@', str)
      } else if (this.type == '1') {
        const str = `title: {
                            text: '多个饼图Demo',
                        },
                        legend: [],
                        series: [
                            {
                                type: 'pie',
                                name: '饼图1',
                                center: ['25%', '50%'],
                                data: [
                                    {name: 'one', value: 1},
                                    {name: 'two', value: 2},
                                    {name: 'three', value: 3},
                                    {name: 'four', value: 4},
                                    {name: 'five', value: 5},
                                    {name: 'six', value: 6},
                                    {name: 'seven', value: 7},
                                ],
                            },
                            {
                                type: 'pie',
                                name: '饼图2',
                                center: ['75%', '50%'],
                                data: [
                                    {name: 'one', value: 1},
                                    {name: 'two', value: 2},
                                    {name: 'three', value: 3},
                                    {name: 'four', value: 4},
                                    {name: 'five', value: 5},
                                    {name: 'six', value: 6},
                                    {name: 'seven', value: 7},
                                ],
                            },
                        ]
                    };
                    this.apChartsOpt = this.opt;
                }`
        this.replaceMethods('@typeOpt@', str)
      } else if (this.type == '2') {
        const str = `title: {
                            text: '环形图Demo',
                        },
                        legend: [],
                        series: [
                            {
                                type: 'pie',
                                name: '环形图',
                                radius: ['40%', '70%'],
                                data: [
                                    {name: 'one', value: 1},
                                    {name: 'two', value: 2},
                                    {name: 'three', value: 3},
                                    {name: 'four', value: 4},
                                    {name: 'five', value: 5},
                                    {name: 'six', value: 6},
                                    {name: 'seven', value: 7},
                                ],
                            },
                        ]
                    };
                    this.apChartsOpt = this.opt;
                }`
        this.replaceMethods('@typeOpt@', str)
      } else if (this.type == '3') {
        const str = `title: {
                            text: '南丁格尔玫瑰图Demo',
                        },
                        legend: [],
                        series: [
                            {
                                type: 'pie',
                                name: '南丁格尔玫瑰图',
                                radius: ['20%', '100%'],
                                center: ['50%', '50%'],
                                roseType: 'area',
                                data: [
                                    {name: 'one', value: 1},
                                    {name: 'two', value: 2},
                                    {name: 'three', value: 3},
                                    {name: 'four', value: 4},
                                    {name: 'five', value: 5},
                                    {name: 'six', value: 6},
                                    {name: 'seven', value: 7},
                                ],
                            },
                        ]
                    };
                    this.apChartsOpt = this.opt;
                }`
        this.replaceMethods('@typeOpt@', str)
      }
    }
  }
}
</script>
