<template>
  <div class="dataset-field-table">
    <div class="title" :class="[type]">
      <div class="name">{{ title }}</div>
      <el-input
        clearable
        size="mini"
        placeholder="输入关键字搜索"
        v-model="searchKey"
      ></el-input>
    </div>
    <el-table
      size="mini"
      :data="filterData"
      :header-row-style="{ color: headerColor }"
      :row-key="countRowKey"
      :id="id"
    >
      <el-table-column label="展示" width="50" align="center">
        <template slot-scope="field">
          <el-checkbox
            :class="{ 'zhibiao-checkbox': type == 'ZHIBIAO' }"
            v-model="field.row.hiddenStatus"
            :true-label="0"
            :false-label="1"
          ></el-checkbox>
        </template>
      </el-table-column>
      <el-table-column label="物理字段名" width="180px">
        <template slot-scope="field">
          <span v-if="field.row.columnAttr == 'NORMAL'">{{
            field.row.columnName
          }}</span>
          <span v-else style="color: #999">计算字段</span>
        </template>
      </el-table-column>
      <el-table-column label="字段展示名" width="180px">
        <template slot-scope="field">
          <el-input v-model="field.row.columnTitle" size="mini"></el-input>
        </template>
      </el-table-column>
      <el-table-column label="展示数据类型" width="120px">
        <template slot-scope="field">
          <el-select v-model="field.row.viewDataType" size="mini">
            <el-option label="字符串" value="STRING"></el-option>
            <el-option label="日期时间" value="DATETIME"></el-option>
            <el-option label="数字" value="NUMBER"></el-option>
          </el-select>
        </template>
      </el-table-column>
      <el-table-column label="默认聚合" width="120px">
        <template slot-scope="field">
          <el-select
            v-model="field.row.aggregationType"
            v-if="
              field.row.dimensionType == 'ZHIBIAO' &&
              field.row.viewDataType == 'NUMBER' &&
              field.row.columnAttr == 'NORMAL'
            "
            size="mini"
          >
            <el-option
              v-for="i of fieldAggregates"
              :key="i.label"
              :label="i.label"
              :value="i.value"
            ></el-option>
          </el-select>
        </template>
      </el-table-column>
      <el-table-column label="字段展示格式" width="200px">
        <template slot-scope="field">
          <el-select
            v-model="field.row.numberDataFormat"
            v-if="field.row.viewDataType == 'NUMBER'"
            size="mini"
          >
            <el-option
              v-for="i of fieldNumberFormats"
              :key="i.label"
              :label="i.label"
              :value="i.value"
            ></el-option>
          </el-select>
          <el-select
            v-model="field.row.timeDataFormat"
            v-if="field.row.viewDataType == 'DATETIME'"
            size="mini"
          >
            <el-option
              v-for="i of fieldDateFormats"
              :key="i.label"
              :label="i.label"
              :value="i.value"
            ></el-option>
          </el-select>
        </template>
      </el-table-column>
      <el-table-column label="字段描述">
        <template slot-scope="field">
          <el-input size="mini" v-model="field.row.columnComment"></el-input>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="200px" align="center">
        <template slot-scope="field">
          <el-button
            v-if="field.row.columnAttr == 'VIRTUAL'"
            size="mini"
            type="text"
            @click="$emit('editComputedField', field.row)"
            :class="{ 'zhibiao-text': type == 'ZHIBIAO' }"
          >
            编辑
          </el-button>
          <el-button
            size="mini"
            type="text"
            @click="fieldTypeToggle(field)"
            :class="{ 'zhibiao-text': type == 'ZHIBIAO' }"
          >
            转换为{{ type == "WEIDU" ? "指标" : "维度" }}
          </el-button>
          <el-button
            size="mini"
            type="text"
            class="del"
            @click="$emit('onFieldDel', field.row)"
          >
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
import util from "../../../util/wey";
import Sortable from "sortablejs";
import { fieldDateFormats, fieldNumberFormats, fieldAggregates } from "../dict";
export default {
  props: ["tableData", "header-color", "type", "title"],
  data() {
    return {
      id: util.getRandomStr(5),
      fieldDateFormats,
      fieldNumberFormats,
      fieldAggregates,
      searchKey: "",
    };
  },
  computed: {
    filterData() {
      return this.tableData.filter(
        (i) =>
          i.columnTitle.includes(this.searchKey) ||
          i.columnName.toLowerCase().includes(this.searchKey)
      );
    },
  },
  mounted() {
    let tbody = document.querySelector(
      `#${this.id} .el-table__body-wrapper tbody`
    );
    let that = this;
    Sortable.create(tbody, {
      animation: 150,
      draggable: ".el-table__row",
      onEnd({ newIndex, oldIndex }) {
        const currRow = that.tableData.splice(oldIndex, 1)[0];
        that.tableData.splice(newIndex, 0, currRow);
        that.tableData.forEach((item, i) => (item.sortNum = i + 1));
      },
    });
  },
  methods: {
    countRowKey(field) {
      return field.tableAliasName + "--" + field.columnName;
    },
    fieldTypeToggle(field) {
      this.$emit("fieldTypeToggle", field.$index, field.row);
    },
  },
};
</script>
<style lang="scss">
.dataset-field-table {
  .title {
    margin-top: 10px;
  }
  .el-input__inner {
    font-size: 12px;
  }
  .zhibiao-checkbox {
    .el-checkbox__input {
      .el-checkbox__inner {
        border-color: #00c13a;
      }
      &.is-checked .el-checkbox__inner {
        background-color: #00c13a;
      }
    }
  }
  .zhibiao-text {
    color: #00c13a;
  }
  .del {
    color: #f56c6c;
  }
}
</style>