<template>
  <!-- 配置字段设置 -->
  <el-popover
    placement="bottom-end"
    width="210"
    trigger="click"
    popper-class="bigdata-popper-class"
  >
    <i
      class="el-icon-setting"
      style="margin-right: 5px; cursor: pointer"
      slot="reference"
    ></i>
    <el-form size="mini" label-width="60px">
      <el-form-item label="重命名">
        <el-input v-model="field.columnTitle"></el-input>
      </el-form-item>
      <el-form-item
        label="聚合方式"
        v-if="field.viewDataType == 'NUMBER' && field.columnAttr == 'NORMAL'"
      >
        <el-select v-model="field.aggregationType">
          <el-option
            v-for="item of fieldAggregates"
            :key="item.label"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="数字格式" v-if="field.viewDataType == 'NUMBER'">
        <el-select v-model="field.numberDataFormat">
          <el-option
            v-for="item of fieldNumberFormats"
            :key="item.label"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <template v-if="field.numberDataFormat == 'CUSTOM'">
        <el-form-item label="运算符">
          <el-select
            v-model="field.extJson.numberDataFormatOperator"
            placeholder="请选择"
          >
            <el-option label="/" value="1"></el-option>
            <el-option label="*" value="2"></el-option>
            <el-option label="+" value="3"></el-option>
            <el-option label="-" value="4"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="运算数">
          <el-input-number
            v-model="field.extJson.numberDataFormatNum"
            :min="0"
            label="公式"
          ></el-input-number>
        </el-form-item>
        <el-form-item label="小数位">
          <el-input-number
            v-model="field.extJson.numberDataFormatToFixed"
            :min="0"
            label="公式"
          ></el-input-number>
        </el-form-item>
        <el-form-item label="显示符号">
          <el-input
            v-model="field.extJson.numberDataFormatToSymbol"
            label="显示符号"
          ></el-input>
        </el-form-item>
      </template>
      <el-form-item label="日期格式" v-if="field.viewDataType == 'DATETIME'">
        <el-select v-model="field.timeDataFormat">
          <el-option
            v-for="item of fieldDateFormats"
            :key="item.label"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="字段隐藏">
        <el-switch v-model="field.extJson.hidden"> </el-switch>
      </el-form-item>
    </el-form>
  </el-popover>
</template>
<script>
import { fieldAggregates, fieldNumberFormats, fieldDateFormats } from "../dict";
export default {
  props: ["field"],
  data() {
    return {
      fieldAggregates,
      fieldNumberFormats,
      fieldDateFormats,
    };
  },
  methods: {
    // 配置某字段聚合方式
    onSelectAggregation(field, value) {
      field.aggregationType = value;
    },
  },
};
</script>
<style lang="scss">
.bigdata-popper-class {
  .el-form-item {
    margin-bottom: 10px;
    .el-form-item__label {
      font-size: 12px;
      padding-right: 8px;
    }
    &:last-of-type {
      margin-bottom: 0;
    }
    .el-input__inner {
      padding: 0 10px;
    }
  }
}
</style>
