<!-- 自定义配置 -->
<template>
  <div>
    <el-form size="mini" label-width="37%" ref="newTableOption">
      <el-collapse v-model="activeNames">
        <el-collapse-item title="结构设置" name="1">
          <el-form-item label="表格主题">
            <el-popover
              placement="bottom-end"
              width="400"
              trigger="click">
              <el-tabs v-model="themeType">
                <el-tab-pane label="浅色" name="1">
                  <el-row v-if="themeType === '1'" :gutter="20">
                    <el-col v-for="item in 10" :span="8">
                      <div @click="themeTypeClick(item)" class="themeType">
                        <div>
                          主题：{{ item }}
                        </div>
                        <div>
                          <img :src="require('@/assets/table/'+ themeType +item+'.jpg')"
                               style="width: 110px;margin-bottom: 5px;height: 70px"/>
                        </div>
                      </div>
                    </el-col>
                  </el-row>
                </el-tab-pane>
                <el-tab-pane label="中色" name="2">
                  <el-row v-if="themeType === '2'" :gutter="20">
                    <el-col v-for="item in 2" :span="8">
                      <div @click="themeTypeClick(item)" class="themeType">
                        <div>
                          主题：{{ item }}
                        </div>
                        <div>
                          <img :src="require('@/assets/table/'+ themeType +item+'.jpg')"
                               style="width: 110px;margin-bottom: 5px;height: 70px"/>
                        </div>
                      </div>
                    </el-col>
                  </el-row>
                </el-tab-pane>
                <el-tab-pane label="深色" name="3">
                  <el-row v-if="themeType === '3'" :gutter="20">
                    <el-col v-for="item in 10" :span="8">
                      <div @click="themeTypeClick(item)" class="themeType">
                        <div>
                          主题：{{ item }}
                        </div>
                        <div>
                          <img :src="require('@/assets/table/'+ themeType +item+'.jpg')"
                               style="width: 110px;margin-bottom: 5px;height: 70px"/>
                        </div>
                      </div>
                    </el-col>
                  </el-row>
                </el-tab-pane>
              </el-tabs>
              <el-button slot="reference" size="mini">主题选择</el-button>
            </el-popover>
          </el-form-item>
          <el-form-item label="开启合计">
            <avue-switch v-model="option.isshowsummary"></avue-switch>
          </el-form-item>
          <template v-if="option.isshowsummary">
            <el-form-item label="合计名称">
              <el-input v-model="option.totalTitle"></el-input>
            </el-form-item>
            <el-form-item label="小数位">
              <el-input-number v-model="option.totalToFixed"></el-input-number>
            </el-form-item>
            <el-form-item label="关闭某个合计">
              <el-select v-model="option.subTotalsDimensions" multiple placeholder="请选择">
                <el-option
                  v-for="item in data"
                  :key="item.columnTitle"
                  :label="item.columnTitle"
                  :value="item.columnTitle">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="是否底部显示">
              <avue-switch v-model="option.reverseLayout"></avue-switch>
            </el-form-item>
            <el-form-item label="开启指标合计">
              <avue-switch v-model="option.isshowsubcolsummary"></avue-switch>
            </el-form-item>
            <template v-if="option.isshowsubcolsummary">
              <el-form-item label="合计名称">
                <el-input v-model="option.coltitle"></el-input>
              </el-form-item>
            </template>
            <el-form-item label="开启小计">
              <avue-switch v-model="option.isshowsubsummary"></avue-switch>
            </el-form-item>
            <el-divider>合计设置</el-divider>
          </template>
<!--          <el-form-item label="开启指标排序">-->
<!--            <avue-switch v-model="option.issort"></avue-switch>-->
<!--          </el-form-item>-->
          <el-form-item label="是否分组查看">
            <avue-switch v-model="option.ismerge"></avue-switch>
          </el-form-item>
          <template v-if="option.ismerge">
            <el-form-item label="是否树形结构">
              <avue-switch v-model="option.istree"></avue-switch>
            </el-form-item>
          </template>
          <template v-if="option.ismerge">
            <el-form-item label="是否显示序号">
              <avue-switch v-model="option.showSeriesNumber"></avue-switch>
            </el-form-item>
          </template>
          <template v-if="option.ismerge">
            <el-tooltip class="item" effect="dark" content="如果单元格是空值，默认显示字符" placement="top-start">
              <el-form-item label="空单元格内容">
                <el-input v-model="option.placeholder"></el-input>
              </el-form-item>
            </el-tooltip>
          </template>
          <el-tooltip class="item" effect="dark" content="适用于千分位分隔符" placement="top-start">
            <el-form-item label="开启分隔符">
              <el-switch v-model="option.isTableThousandPoint"></el-switch>
            </el-form-item>
          </el-tooltip>
          <template v-if="option.isTableThousandPoint">
            <el-form-item label="分割位数">
              <el-input-number v-model="option.spaceNumber"></el-input-number>
            </el-form-item>
          </template>
          <!--        <el-form-item label="筛选是否横向展示">-->
          <!--          <el-switch-->
          <!--            v-model="option.isCross">-->
          <!--          </el-switch>-->
          <!--        </el-form-item>-->
          <!--        <el-form-item label="关闭筛选">-->
          <!--          <el-switch-->
          <!--            v-model="option.closeSearch">-->
          <!--          </el-switch>-->
          <!--        </el-form-item>-->
          <!--        <el-form-item label="关闭结构筛选">-->
          <!--          <el-switch-->
          <!--            v-model="option.closejiegou">-->
          <!--          </el-switch>-->
          <!--        </el-form-item>-->
        </el-collapse-item>
        <el-collapse-item title="标题设置" name="2">
          <el-form-item label="显示">
            <el-switch
              v-model="option.showChartTitle">
            </el-switch>
          </el-form-item>
          <el-form-item label="字体大小">
            <el-input-number
              v-model="option.chartTitleSize"
            ></el-input-number>
          </el-form-item>
          <el-form-item label="字段颜色">
            <el-color-picker
              v-model="option.chartTitleColor"
              show-alpha
            ></el-color-picker>
          </el-form-item>
        </el-collapse-item>
        <el-collapse-item title="表格整体设置" name="3">
          <el-form-item label="字体大小">
            <avue-input-number v-model="option.fontSize">
            </avue-input-number>
          </el-form-item>
          <el-form-item label="背景">
            <avue-input-color type="textarea"
                              v-model="option.bodyBackground"></avue-input-color>
          </el-form-item>
          <el-form-item label="文字颜色">
            <avue-input-color type="textarea"
                              v-model="option.bodyFontColor"></avue-input-color>
          </el-form-item>
          <el-form-item label="对齐方式">
            <avue-select v-model="option.bodyTextAlign" :dic="dicOption.textAlign">
            </avue-select>
          </el-form-item>
          <el-form-item label="文字粗细">
            <avue-select v-model="option.headerFontWeight" :dic="dicOption.fontWeight">
            </avue-select>
          </el-form-item>
          <el-form-item label="奇行颜色">
            <avue-input-color type="textarea"
                              v-model="option.oddRowBGC"></avue-input-color>
          </el-form-item>
          <el-form-item label="偶行颜色">
            <avue-input-color type="textarea"
                              v-model="option.evenRowBGC"></avue-input-color>
          </el-form-item>
          <el-form-item label="边框宽度">
            <avue-input-number type="textarea"
                               v-model="option.borderLineWidth"></avue-input-number>
          </el-form-item>
          <el-form-item label="边框颜色">
            <avue-input-color type="textarea"
                              v-model="option.borderLineColor"></avue-input-color>
          </el-form-item>
        </el-collapse-item>
        <el-collapse-item title="表头/表尾设置" name="4">
          <el-form-item label="是否开启表头">
            <avue-switch v-model="option.showheader"></avue-switch>
          </el-form-item>
          <el-form-item label="宽度">
            <avue-input-number v-model="option.headerWidth">
            </avue-input-number>
          </el-form-item>
          <el-form-item label="背景">
            <avue-input-color type="textarea" v-model="option.headerBackground"></avue-input-color>
          </el-form-item>
          <el-form-item label="字体颜色">
            <avue-input-color type="textarea"
                              v-model="option.headerFontColor"></avue-input-color>
          </el-form-item>
          <el-form-item label="字体大小">
            <avue-input-number v-model="option.headerFontSize">
            </avue-input-number>
          </el-form-item>
        </el-collapse-item>
        <el-collapse-item title="指标设置" name="5">
          <template slot="title">
            指标设置
            <el-tooltip class="item" effect="dark" content="可通过双击单元格设置独立数值颜色，双击表头设置范围颜色" placement="top-start">
              <i class="header-icon el-icon-question" style="margin-left: 5px"></i>
            </el-tooltip>
          </template>
          <el-form-item label="小数位数" label-width="80px">
            <el-input-number v-model="option.unifiedToFixed">
            </el-input-number>
          </el-form-item>
          <el-form-item label="统一设置" label-width="80px">
            <el-col :span="18">
              <el-select v-model="option.unifiedMinExpress" clearable >
                <el-option v-for="item in expressList" :key="item.value" :value="item.value"
                            :label="item.label"></el-option>
              </el-select>
            </el-col>
            <el-col :span="18">
              <el-input-number v-model="option.unifiedValue"></el-input-number>
            </el-col>
            <el-col :span="12">
              <div class="demonstration">文本颜色</div>
              <el-color-picker
                v-model="option.unifiedFontColor"
                show-alpha
                :predefine="predefineColors"
              >
              </el-color-picker>
            </el-col>
            <el-col :span="12">
              <div class="demonstration">背景颜色</div>
              <el-color-picker
                v-model="option.unifiedBgColor"
                show-alpha
                :predefine="predefineColors"
              >
              </el-color-picker>
            </el-col>
          </el-form-item>
          <vxe-table :data="data">
            <vxe-column field="columnTitle" title="指标"></vxe-column>
            <vxe-column title="操作" width="100" show-overflow>
              <template #default="{ row }">
                <el-button type="primary" icon="el-icon-edit" size="mini" circle @click="editEvent(row)"></el-button>
              </template>
            </vxe-column>
          </vxe-table>
        </el-collapse-item>
      </el-collapse>
    </el-form>
    <vxe-modal v-model="showEdit" destroy-on-close title="编辑" width="80%" resize>
      <template #default>
        <vxe-toolbar>
          <template #buttons>
            <div style="margin-right: 30px;float: right">
              <vxe-button icon="fa fa-plus" @click="insertEvent()">新增</vxe-button>
              <vxe-button icon="fa fa-save" @click="submit" status="primary">保存</vxe-button>
            </div>
          </template>
        </vxe-toolbar>
        <vxe-table
          border
          show-overflow
          ref="xTable"
          max-height="400"
          :data="tableData"
          align="center"
          width="100%"
          :edit-config="{trigger: 'click', mode: 'row'}">
          <vxe-column type="seq" width="60"></vxe-column>
          <!--          <vxe-column field="type" title="显示类型" :edit-render="{}">-->
          <!--            <template #default="{ row }">-->
          <!--              <span>{{ formatType(row.type) }}</span>-->
          <!--            </template>-->
          <!--            <template #edit="{ row }">-->
          <!--              <vxe-select v-model="row.type" transfer>-->
          <!--                <vxe-option value="text" label="文本"></vxe-option>-->
          <!--                <vxe-option value="background" label="背景"></vxe-option>-->
          <!--                <vxe-option value="interval" label="柱状图"></vxe-option>-->
          <!--                <vxe-option value="icon" label="图标"></vxe-option>-->
          <!--              </vxe-select>-->
          <!--            </template>-->
          <!--          </vxe-column>-->
          <vxe-colgroup title="表达式">
            <vxe-column field="minExpress" title="计算公式" :edit-render="{}">
              <template #default="{ row }">
                <span>{{ formatExpress(row.minExpress) }}</span>
              </template>
              <template #edit="{ row }">
                <vxe-select v-model="row.minExpress" transfer>
                  <vxe-option v-for="item in expressList" :key="item.value" :value="item.value"
                              :label="item.label"></vxe-option>
                </vxe-select>
              </template>
            </vxe-column>
            <vxe-column field="minValue" title="数值" :edit-render="{}">
              <template #edit="{ row }">
                <vxe-input v-model="row.minValue" type="text"></vxe-input>
              </template>
            </vxe-column>
          </vxe-colgroup>

          <vxe-column field="operatorn" title="运算符" :edit-render="{}">

            <template #default="{ row }">
              <span>{{ formatOperatorn(row.operatorn) }}</span>
            </template>
            <template #edit="{ row }">
              <vxe-select v-model="row.operatorn" transfer>
                <vxe-option v-for="item in operatornList" :key="item.value" :value="item.value"
                            :label="item.label"></vxe-option>
              </vxe-select>
            </template>
          </vxe-column>

          <vxe-colgroup title="表达式">
            <vxe-column field="maxExpress" title="公式" :edit-render="{}">

              <template #default="{ row }">
                <span>{{ formatExpress(row.maxExpress) }}</span>
              </template>
              <template #edit="{ row }">
                <vxe-select v-model="row.maxExpress" transfer>
                  <vxe-option v-for="item in expressList" :key="item.value" :value="item.value"
                              :label="item.label"></vxe-option>
                </vxe-select>
              </template>
            </vxe-column>
            <vxe-column field="maxValue" title="数值" :edit-render="{}">
              <template #edit="{ row }">
                <vxe-input v-model="row.maxValue" type="text"></vxe-input>
              </template>
            </vxe-column>
          </vxe-colgroup>
          <vxe-column field="color" title="文本颜色" :edit-render="{}">
            <template #default="{ row }">
              <el-color-picker
                v-model="row.color"
                show-alpha
                :predefine="predefineColors">
              </el-color-picker>
            </template>
            <template #edit="{ row }">
              <el-color-picker
                v-model="row.color"
                show-alpha
                :predefine="predefineColors">
              </el-color-picker>
            </template>
          </vxe-column>
          <vxe-column field="bgcolor" title="背景颜色" :edit-render="{}">
            <template #default="{ row }">
              <el-color-picker
                v-model="row.bgcolor"
                show-alpha
                :predefine="predefineColors">
              </el-color-picker>
            </template>
            <template #edit="{ row }">
              <el-color-picker
                v-model="row.bgcolor"
                show-alpha
                :predefine="predefineColors">
              </el-color-picker>
            </template>
          </vxe-column>
          <vxe-column title="操作" width="100" show-overflow>
            <template #default="{ row }">
              <vxe-button type="text" icon="el-icon-delete" @click="removeEvent(row)"></vxe-button>
            </template>
          </vxe-column>
        </vxe-table>
      </template>
    </vxe-modal>
  </div>
</template>

<script>
import {dicOption, colorOption} from '@/option/config'

export default {
  name: "new-table-option",
  props: ["option", "nowChart"],
  data() {
    return {
      activeNames: ['1'],
      predefineColors: [
        '#ff4500',
        '#ff8c00',
        '#ffd700',
        '#90ee90',
        '#00ced1',
        '#1e90ff',
        '#c71585',
        'rgba(255, 69, 0, 0.68)',
        'rgb(255, 120, 0)',
        'hsv(51, 100, 98)',
        'hsva(120, 40, 94, 0.5)',
        'hsl(181, 100%, 37%)',
        'hsla(209, 100%, 56%, 0.73)',
        '#c7158577'
      ],
      dicOption: dicOption,
      colorOption: colorOption,
      themeType: '1',
      showChartTitle: true,
      isshowsummary: true,
      isshowsubsummary: true,
      data: [],
      showEdit: false,
      tableData: [],
      expressList: [
        {label: '小于', value: '<'},
        {label: '大于', value: '>'},
        {label: '等于', value: '==='},
        {label: '小于等于', value: '<='},
        {label: '大于等于', value: '>='},
      ],
      operatornList: [
        {label: '且', value: '&&'},
        {label: '或', value: '||'},
      ]
    }
  },
  watch: {
    themeType(val) {
      this.option.themeType = val
    }
  },
  created() {
    if (XEUtils.has(this.nowChart.dataconfig, 'indexParamList')) {
      this.data = this.nowChart.dataconfig.indexParamList
    }
  },
  mounted() {
    this.$bus.$on('newTableOption',(val)=>{
      this.editEvent(val)
    })
  },
  methods: {
    formatType(value) {
      if (value === 'text') {
        return '文本'
      }
      if (value === 'background') {
        return '背景'
      }
      if (value === 'interval') {
        return '柱状图'
      }
      if (value === 'icon') {
        return '图标'
      }
      return ''
    },
    formatExpress(value) {
      let find = this.expressList.find(item => item.value === value)
      return find.label
    },
    formatOperatorn(value) {
      let find = this.operatornList.find(item => item.value === value)
      return find.label
    },
    editEvent(row) {
      this.columnName = row.columnAliasName
      if (this.option.conditions) {
        this.tableData = this.option.conditions.filter(item => {
          return item.field === row.columnAliasName
        })
      } else {
        this.tableData = []
      }
      this.showEdit = true
    },
    submit() {
      let param = {}
      const $table = this.$refs.xTable
      const {insertRecords, removeRecords} = $table.getRecordset()
      removeRecords.forEach(val => {
        this.option.conditions.splice(this.option.conditions.findIndex(item => item['_XID'] === val['_XID']), 1)
      })
      param = [...this.option.conditions || [], ...insertRecords]
      this.option.conditions = param
      this.showEdit = false
    },
    async insertEvent(row) {
      const $table = this.$refs.xTable
      const record = {
        field: this.columnName,
        minValue: '',
        minExpress: '>',
        operatorn: '&&',
        maxValue: '',
        maxExpress: '<',
        color: '#fff',
        bgcolor: '#ff4500',
      }
      const {row: newRow} = await $table.insertAt(record, row)
      await $table.setActiveCell(newRow, 'name')
    },
    async removeEvent(row) {
      const $table = this.$refs.xTable
      $table.remove(row)
    },
    themeTypeClick(val) {
      this.option.theme = val
      if (this.themeType === '1') {
        if (val === 1) {
          this.option.headerBackground = ''
          this.option.oddRowBGC = ''
          this.option.evenRowBGC = ''
          this.option.headerFontColor = '#fff'
          this.option.bodyFontColor = '#000'
          this.option.borderLineColor = ''
        } else if (val === 2) {
          this.option.headerBackground = 'rgba(217, 217, 217, 1)'
          this.option.oddRowBGC = ''
          this.option.evenRowBGC = 'rgba(217, 217, 217, 1)'
          this.option.headerFontColor = '#000'
          this.option.bodyFontColor = '#000'
          this.option.borderLineColor = '#000'
        } else if (val === 3) {
          this.option.headerBackground = 'rgba(221, 235, 247, 1)'
          this.option.oddRowBGC = ''
          this.option.evenRowBGC = 'rgba(221, 235, 247, 1)'
          this.option.headerFontColor = 'rgba(47, 117, 181, 1)'
          this.option.bodyFontColor = 'rgba(47, 117, 181, 1)'
          this.option.borderLineColor = 'rgba(47, 117, 181, 1)'
        } else if (val === 4) {
          this.option.headerBackground = 'rgba(252, 228, 214, 1)'
          this.option.oddRowBGC = ''
          this.option.evenRowBGC = 'rgba(252, 228, 214, 1)'
          this.option.headerFontColor = 'rgba(168, 76, 14, 1)'
          this.option.bodyFontColor = 'rgba(168, 76, 14, 1)'
          this.option.borderLineColor = 'rgba(168, 76, 14, 1)'
        } else if (val === 5) {
          this.option.headerBackground = '#ededed'
          this.option.oddRowBGC = ''
          this.option.evenRowBGC = '#ededed'
          this.option.headerFontColor = '#000'
          this.option.bodyFontColor = '#000'
          this.option.borderLineColor = '#000'
        } else if (val === 6) {
          this.option.headerBackground = '#fff2cc'
          this.option.oddRowBGC = ''
          this.option.evenRowBGC = '#fff2cc'
          this.option.headerFontColor = '#bf8f00'
          this.option.bodyFontColor = '#bf8f00'
          this.option.borderLineColor = '#bf8f00'
        } else if (val === 7) {
          this.option.headerBackground = 'rgba(217, 225, 242, 1)'
          this.option.oddRowBGC = ''
          this.option.evenRowBGC = 'rgba(217, 225, 242, 1)'
          this.option.headerFontColor = 'rgba(48, 84, 150, 1)'
          this.option.bodyFontColor = 'rgba(48, 84, 150, 1)'
          this.option.borderLineColor = 'rgba(48, 84, 150, 1)'
        } else if (val === 8) {
          this.option.headerBackground = 'rgba(226, 239, 218, 1)'
          this.option.oddRowBGC = ''
          this.option.evenRowBGC = 'rgba(226, 239, 218, 1)'
          this.option.headerFontColor = 'rgba(84, 130, 53, 1)'
          this.option.bodyFontColor = 'rgba(84, 130, 53, 1)'
          this.option.borderLineColor = 'rgba(84, 130, 53, 1)'
        } else if (val === 9) {
          this.option.headerBackground = 'rgba(0, 0, 0,1)'
          this.option.oddRowBGC = ''
          this.option.evenRowBGC = ''
          this.option.headerFontColor = '#fff'
          this.option.bodyFontColor = '#000'
          this.option.borderLineColor = '#000'
        } else if (val === 10) {
          this.option.headerBackground = '#5b9bd5'
          this.option.oddRowBGC = ''
          this.option.evenRowBGC = ''
          this.option.headerFontColor = '#fff'
          this.option.bodyFontColor = '#000'
          this.option.borderLineColor = '#5b9bd5'
        }
      }
      if (this.themeType === '2') {
        if (val === 1) {
          this.option.headerBackground = '#000000'
          this.option.oddRowBGC = '#b9b9b9'
          this.option.evenRowBGC = '#d9d9d9'
          this.option.headerFontColor = '#fff'
          this.option.bodyFontColor = '#000'
        } else if (val === 2) {
          this.option.headerBackground = '#2f75b5'
          this.option.oddRowBGC = ''
          this.option.evenRowBGC = 'rgba(221, 235, 247, 1)'
          this.option.headerFontColor = '#fff'
          this.option.bodyFontColor = 'rgba(47, 117, 181, 1)'
        }
      }
      if (this.themeType === '3') {
        if (val === 1) {
          this.option.headerBackground = '#000000'
          this.option.oddRowBGC = '#363636'
          this.option.evenRowBGC = '#626262'
          this.option.headerFontColor = '#fff'
          this.option.bodyFontColor = '#fff'
        } else if (val === 2) {
          this.option.headerBackground = '#000'
          this.option.oddRowBGC = '#28649a'
          this.option.evenRowBGC = '#4d84b5'
          this.option.headerFontColor = '#fff'
          this.option.bodyFontColor = '#fff'
        } else if (val === 3) {
          this.option.headerBackground = '#000'
          this.option.oddRowBGC = '#a84c0e'
          this.option.evenRowBGC = '#ca6a2a'
          this.option.headerFontColor = '#fff'
          this.option.bodyFontColor = '#fff'
        } else if (val === 4) {
          this.option.headerBackground = '#000'
          this.option.oddRowBGC = 'rgba(123, 123, 123, 1)'
          this.option.evenRowBGC = 'rgba(165, 165, 165, 1)'
          this.option.headerFontColor = '#fff'
          this.option.bodyFontColor = '#fff'
        } else if (val === 5) {
          this.option.headerBackground = '#000'
          this.option.oddRowBGC = 'rgba(191, 143, 0, 1)'
          this.option.evenRowBGC = 'rgba(255, 192, 0, 1)'
          this.option.headerFontColor = '#fff'
          this.option.bodyFontColor = '#000'
        } else if (val === 6) {
          this.option.headerBackground = '#000'
          this.option.oddRowBGC = 'rgba(48, 84, 150, 1)'
          this.option.evenRowBGC = 'rgba(68, 114, 196, 1)'
          this.option.headerFontColor = '#fff'
          this.option.bodyFontColor = '#fff'
        } else if (val === 7) {
          this.option.headerBackground = '#000'
          this.option.oddRowBGC = 'rgba(84, 130, 53, 1)'
          this.option.evenRowBGC = 'rgba(112, 173, 71, 1)'
          this.option.headerFontColor = '#fff'
          this.option.bodyFontColor = '#fff'
        } else if (val === 8) {
          this.option.headerBackground = '#000'
          this.option.oddRowBGC = 'rgba(166, 166, 166, 1)'
          this.option.evenRowBGC = 'rgba(217, 217, 217, 1)'
          this.option.headerFontColor = '#fff'
          this.option.bodyFontColor = '#000'
        } else if (val === 9) {
          this.option.headerBackground = 'rgba(237, 125, 49, 1)'
          this.option.oddRowBGC = 'rgba(189, 215, 238, 1)'
          this.option.evenRowBGC = 'rgba(221, 235, 247, 1)'
          this.option.headerFontColor = '#fff'
          this.option.bodyFontColor = '#000'
        } else if (val === 10) {
          this.option.headerBackground = '#ffc000'
          this.option.oddRowBGC = '#dbdbdb'
          this.option.evenRowBGC = '#ededed'
          this.option.headerFontColor = '#fff'
          this.option.bodyFontColor = '#000'
        }
      }
    }
  }
}
</script>

<style>
.themeType {
  box-sizing: border-box
}

.themeType img:hover {
  border: 1px solid #c0c0c0;
  box-sizing: border-box;
  padding: 5px;
  border-radius: 3px
}
</style>
