<template>
  <div>
    <el-dialog append-to-body title="数据集权限过滤器" :visible.sync="show" custom-class="newbi-dataset-filter" width="800px" @close="$emit('change', false)">
      <div class="wrapper">
        <div class="left">
          <el-tabs tab-position="left" v-model="nowName" @tab-click="onSelectItem">
            <el-tab-pane v-for="(item, i) of list" :name="item.cubePermName" :key="i" :label="item.cubePermName"> </el-tab-pane>
          </el-tabs>
          <div class="add-tab">
            <el-button v-show="isAdmin" size="small" type="success" plain icon="el-icon-plus" @click="onAddItem"> 添加过滤器 </el-button>
          </div>
        </div>
        <DatasetFilterItem :is-admin="isAdmin" :now-filter="nowFilter" :fields="fields" @done="getData"></DatasetFilterItem>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { cubePremList } from '@/api/newbi/dataset'
import DatasetFilterItem from '@/views/dataset/comps/datasetFilterItem'

export default {
  components: { DatasetFilterItem },
  model: { prop: 'show', event: 'change' },
  props: ['show', 'cubeId', 'fields'],
  data() {
    return {
      list: [],
      nowFilter: null,
      nowName: '',
      defaultFilterJson: '{"filterList":[],"filterRelation":{"where":{"conditions":[],"filters":[],"relation":"AND"}}}'
    }
  },
  computed: {
    isAdmin() {
      return this.$store.state.user.userInfo.isAdministrator
    }
  },
  async created() {
    this.getData()
  },
  methods: {
    getData() {
      if (this.fields && this.fields.length) {
        this.getDataConfirm()
      } else {
        setTimeout(this.getData, 0)
      }
    },
    async getDataConfirm() {
      let res = await cubePremList({ cubeDataId: this.cubeId })
      this.list = res.data.data.map((i) => {
        let { filterList, filterRelation } = JSON.parse(i.filterJson || this.defaultFilterJson)
        let ids = i.excludeColumnIds ? i.excludeColumnIds.split(',') : []
        let excludeColumn = ids.map((id) => this.fields.find((j) => j.id == id)).filter((i) => i)
        return { ...i, filterList, filterRelation, excludeColumn }
      })
      if (!this.list.length) {
        this.list.push({
          cubePermName: '一号过滤器',
          dataPermId: '',
          cubeDataId: parseInt(this.cubeId),
          filterRelation: { where: { conditions: [], filters: [], relation: 'AND' } },
          filterList: [],
          excludeColumn: []
        })
      }
      this.nowName = this.list[0].cubePermName
      this.onSelectItem({ name: this.nowName })
    },
    // 选择过滤器时
    onSelectItem({ name }) {
      let now = this.list.find((i) => i.cubePermName == name)
      this.nowName = now.cubePermName
      this.nowFilter = now
    },
    // 添加过滤器时
    onAddItem() {
      let cubePermName = this.list.length + 1 + '-新增过滤器'
      let newFilter = {
        cubePermName,
        dataPermId: '',
        cubeDataId: parseInt(this.cubeId),
        filterRelation: { where: { conditions: [], filters: [], relation: 'AND' } },
        filterList: [],
        excludeColumn: []
      }
      this.list.push(newFilter)
      this.nowName = cubePermName
      this.nowFilter = newFilter
    }
  }
}
</script>
<style lang="scss">
.newbi-dataset-filter {
  .el-dialog__body {
    overflow-y: auto;
    .wrapper {
      display: flex;
      height: 600px;
      .left {
        flex: 0 0 200px;
        height: 600px;
        .el-tabs {
          height: 540px;
          .el-tabs__header {
            width: 190px;
          }
          .el-tabs__content {
            display: none;
          }
        }
        .add-tab {
          text-align: center;
          margin-right: 9px;
          border-right: 2px solid #e4e7ed;
          padding: 13px 0;
        }
      }
    }
  }
}
.newbi-dataset-filter-drop {
  .el-input {
    margin: 0 5px;
    width: 160px;
  }
  .fields {
    margin: 5px 0;
    height: 400px;
    overflow-y: auto;
  }
  .el-dropdown-menu__item {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    width: 160px;
    &.WEIDU {
      color: #468cff;
    }
    &.ZHIBIAO {
      color: #00c13a;
    }
    &.select {
      color: #777;
      &:hover {
        background-color: #fff;
      }
    }
  }
}
</style>
