<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: 'ApDevItemChartGauge',
  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',
                        },
                        series: [
                            {
                                name: '业务指标',
                                type: 'gauge',
                                detail: {formatter: '{value}%'},
                                data: [{value: 50, name: '完成率'}]
                            }
                        ]
                    };
                    this.apChartsOpt = this.opt;
                }`
        this.replaceMethods('@typeOpt@', str)
      } else if (this.type == '1') {
        const str = `title: {
                            text: '多仪表盘Demo',
                        },
                        series: [
                            {
                                name: 'gauge 1',
                                type: 'gauge',
                                min: 0,
                                max: 250,
                                startAngle: -30,
                                endAngle: -305,
                                splitNumber: 2,
                                radius: '35%',
                                center: ['21%', '55%'],
                                data: [{
                                    value: 0,
                                    name: '1'
                                }]
                            },
                            {
                                name: 'gauge 2',
                                type: 'gauge',
                                min: 0,
                                max: 8,
                                z: 10,
                                startAngle: 210,
                                endAngle: -30,
                                splitNumber: 2,
                                radius: '50%',
                                center: ['50%', '50%'],
                                data: [{
                                    value: 0.6,
                                    name: '2'
                                }],
                            },
                            {
                                name: 'gauge 3',
                                type: 'gauge',
                                min: 0,
                                max: 8,
                                startAngle: 135,
                                endAngle: -150,
                                splitNumber: 2,
                                radius: '35%',
                                center: ['79%', '55%'],
                                data: [{
                                    value: 250,
                                    name: '3'
                                }]
                            },
                        ]
                    };
                    this.apChartsOpt = this.opt;
                }`
        this.replaceMethods('@typeOpt@', str)
      }
    }
  }
}
</script>
