<template>
  <el-row v-loading="loading">
    <el-form-item label="控件标题">
      <el-input v-model="activeData.__config__.label" placeholder="请输入控件标题" />
    </el-form-item>
    <el-form-item label="显示标题">
      <el-switch v-model="activeData.__config__.showTitle" />
    </el-form-item>
    <el-form-item v-if="activeData.actionText !== undefined" label="动作文字">
      <el-input v-model="activeData.actionText" placeholder="请输入动作文字" />
    </el-form-item>
    <el-form-item label="表数据源" v-if="$store.getters.hasTable">
      <el-select v-model="activeData.__config__.tableName" placeholder="请选择子表数据源" clearable filterable @change="onTableNameChange">
        <el-option v-for="item in tableList" :key="item.tableViewName" :label="item.tableComments + ' ' + item.tableViewName" :value="item.tableViewName"> </el-option>
      </el-select>
    </el-form-item>
    <el-divider>关联设置</el-divider>
    <el-form-item v-if="activeData.actionText !== undefined" label="主表字段">
      <el-select v-model="activeData.relationConf.primaryModel" placeholder="请选择控件字段" clearable filterable @change="getPrimaryColumnName($event)">
        <el-option v-for="item in formItemList" :key="item.id" :value="item.id" :label="item.columnTitle ? item.columnTitle + ' ' + item.columnName : item.columnComment + ' ' + item.columnName">
        </el-option>
      </el-select>
    </el-form-item>
    <el-form-item v-if="activeData.actionText !== undefined" label="子表字段">
      <el-select v-model="activeData.relationConf.foreignModel" placeholder="请选择控件字段" clearable filterable @change="getForeignColumnName($event)">
        <el-option
          v-for="item in activeData.relationTables"
          :key="item.id"
          :value="item.id"
          :label="item.columnTitle ? item.columnTitle + ' ' + item.columnName : item.columnComment + ' ' + item.columnName"
        >
        </el-option>
      </el-select>
    </el-form-item>
  </el-row>
</template>
<script>
import comMixin from './mixin'
import { createCubeByTable, cubeFieldList, cubeFieldOption } from '@/api/workFlow/FlowEngine'

export default {
  props: ['activeData', 'dbtableList', 'dbSourceId','columnModelId'],
  mixins: [comMixin],
  data() {
    return {
      tableList: [],
      loading: false
    }
  },
  created() {
    this.tableList = this.dbtableList
    this.activeData.__config__.dbSourceId = this.dbSourceId
  },
  computed: {
    formItemList() {
      return this.$store.state.generator.dbItemList
    }
  },
  methods: {
    onTableNameChange(tableName) {
      this.loading = true
      this.$set(this.activeData.__config__, 'tableName', tableName)
      for (let i = 0; i < this.activeData.__config__.children.length; i++) {
        this.$set(this.activeData.__config__.children[i].__config__, 'relationTable', tableName)
        this.$set(this.activeData.__config__.children[i], '__vModel__', '')
      }
      this.onTableViewName(tableName)
    },
    onTableViewName(val) {
      const param = new URLSearchParams()
      param.append('tableName', val)
      param.append('datasourceId', this.dbSourceId)
      param.append('modelId', this.columnModelId)
      param.append('modelName', this.activeData.__config__.label)
      createCubeByTable(param).then((res) => {
        this.onDbChange(res.data.data.id)
        this.$set(this.activeData, '__vModel__', res.data.data.id)
      })
    },
    onDbChange(val) {
      this.activeData.dbLinkId = val
      //获取数据集
      cubeFieldList({ cubeDataId: val }).then((res) => {
        // this.mainTableFields = res.data.data
        let reverseData = res.data.data.reverse()
        this.activeData.relationTables = reverseData
        //获取数据集详细信息
        cubeFieldOption({ cubeId: val }).then((value) => {
          let FieldObj = value.data.data
          //分组后过滤后的数据集 渲染组件
          this.activeData.mainTableFields = this.getmapList(reverseData, FieldObj)
          this.$nextTick(() => {
            this.activeData.tables = []
            this.newChangeTable(reverseData, FieldObj)
            this.loading = false
          })
        })
      })
    },
    //重装list
    getmapList(data, obj) {
      //判断是否为虚拟字段 是否为主键 是否为关联字段
      let filterList = data
        .map((o, i) => {
          if (obj[o.id]) {
            if (o.columnAttr === 'NORMAL' && o.hiddenStatus === 0 && obj[o.id].primaryKey === false && obj[o.id].isJoin === false) {
              o.isRequiredType = obj[o.id].required || obj[o.id].isJoined
              return o
            }
          }
        })
        .filter((l) => l !== undefined)
      //查询计算字段
      let VIRTUALList = data
        .map((o, i) => {
          if (o.columnAttr === 'VIRTUAL') {
            return o
          }
        })
        .filter((l) => l !== undefined)
      return filterList.concat(VIRTUALList)
    },
    //存储table
    newChangeTable(data, obj) {
      if (!this.activeData.tables.length) {
        let fields = data
          .map((o) => {
            if (obj[o.id]) {
              if (o.columnAttr === 'NORMAL' && obj[o.id].primaryKey === false && obj[o.id].isJoin === false) {
                return {
                  field: o.columnName,
                  fieldId: o.id,
                  fieldName: o.columnTitle,
                  dataType: o.viewDataType,
                  tableAliasName: o.tableAliasName,
                  tableName: o.tableName
                }
              }
            }
          })
          .filter((l) => l !== undefined)
        //查询计算字段
        let VIRTUALList = data
          .map((o, i) => {
            if (o.columnAttr === 'VIRTUAL') {
              return {
                field: o.columnName,
                fieldId: o.id,
                fieldName: o.columnTitle,
                dataType: o.viewDataType,
                tableAliasName: o.tableAliasName,
                tableName: o.tableName ? o.tableName : '其他数据表'
              }
            }
          })
          .filter((l) => l !== undefined)
        this.activeData.tables = [...fields, ...VIRTUALList]
      }
    },
    getPrimaryColumnName(v) {
      this.activeData.relationConf.primaryModelName = this.formItemList.find((o) => o.id === v).columnName
    },
    getForeignColumnName(v) {
      this.activeData.relationConf.foreignModelName = this.activeData.relationTables.find((o) => o.id === v).columnName
    }
  }
}
</script>
<style scoped lang="scss"></style>
