<!-- 自定义配置 -->
<template>
  <el-form size="mini" label-width="38%">
    <el-collapse accordion>
      <el-collapse-item title="表头设置">
        <el-form-item label="背景">
          <avue-input-color type="textarea"
                            v-model="option.headerBGC"></avue-input-color>
        </el-form-item>
        <el-form-item label="渐变色">
          <avue-input-color type="textarea"
                            v-model="option.headerBGCJ"></avue-input-color>
        </el-form-item>
        <el-form-item label="字体颜色">
          <avue-input-color type="textarea"
                            v-model="option.headerColor"></avue-input-color>
        </el-form-item>
        <el-form-item label="字体大小">
          <avue-input-number type="textarea"
                             v-model="option.headerfontSize"></avue-input-number>
        </el-form-item>
        <el-form-item label="宽度">
          <avue-input-number type="textarea"
                             v-model="option.columnWidth"></avue-input-number>
        </el-form-item>
        <el-form-item label="高度">
          <avue-input-number type="textarea"
                             v-model="option.headerHeight"></avue-input-number>
        </el-form-item>
      </el-collapse-item>
      <el-collapse-item title="表格设置">
        <el-form-item label="开启滚动">
          <avue-switch v-model="option.scroll">
          </avue-switch>
        </el-form-item>
        <template v-if="option.scroll">
          <el-form-item label="滚动模式">
            <el-radio v-model="option.carousel" label="page">整页滚动</el-radio>
            <el-radio v-model="option.carousel" label="single">行滚动</el-radio>
          </el-form-item>
          <el-form-item label="滚动时间">
            <avue-input-number v-model="option.waitTime">
            </avue-input-number>
          </el-form-item>
        </template>
        <el-form-item label="字体大小">
          <avue-input-number v-model="option.bodyFontSize">
          </avue-input-number>
        </el-form-item>
        <el-form-item label="对齐方式">
          <avue-select v-model="option.align" :dic="dicOption.textAlign">
          </avue-select>
        </el-form-item>
        <el-form-item label="显示行号">
          <el-switch
            v-model="option.index">
          </el-switch>
        </el-form-item>
        <el-form-item label="显示行数">
          <avue-input-number v-model="option.rowNum">
          </avue-input-number>
        </el-form-item>
        <el-form-item label="文字颜色">
          <avue-input-color type="textarea"
                            v-model="option.bodyColor"></avue-input-color>
        </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.oddRowBGCJ"></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-color type="textarea"
                            v-model="option.evenRowBGCJ"></avue-input-color>
        </el-form-item>
      </el-collapse-item>

    </el-collapse>
  </el-form>
</template>

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

export default {
  name: "new-scroll-option",
  props: ["option"],
  data() {
    return {
      dicOption: dicOption,
      colorOption: colorOption,
    }
  },
}
</script>

<style>
</style>
