<template>
  <div class="table">
    <div class="table-form">
      <el-form ref="form" :model="form" label-width="100px">
        <div class="flex-wrap fr-list">
          <el-form-item class="flex1" label="权限编码">
            <el-input size="small" clearable placeholder="请输入权限编码" v-model="form.auth_ident"></el-input>
          </el-form-item>
          <el-form-item class="flex1" label="表格宽度">
            <el-input size="small" clearable placeholder="请输入表格宽度" v-model="form.table_width"></el-input>
          </el-form-item>
          <el-form-item class="flex1" label="表格高度">
            <el-input size="small" clearable placeholder="请输入表格高度" v-model="form.table_height"></el-input>
          </el-form-item>
        </div>
        <div class="flex-wrap fr-list">
          <el-form-item label="服务ID">
            <el-select @change="serviceChange" filterable style="width: 264px;" size="small" clearable v-model="form.serviceID" placeholder="请选择服务ID">
              <el-option v-for="(item,index) in authArrs" :key="index" :label="item.serviceName" :value="item.serviceID"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item class="flex1" label="接收参数">
            <el-input size="small" clearable placeholder="请输入接收参数" v-model="form.queryparams"></el-input>
          </el-form-item>
          <el-form-item class="flex1" label="权限描述">
            <el-input size="small" type="textarea" :rows="1" placeholder="请输入权限描述" v-model="form.auth_comment"></el-input>
          </el-form-item>
        </div>
      </el-form>
    </div>
    <div class="table-yl box-public-shadow-mini">
      <div class="table-yl-head flex">
        <div class="title">表格预览</div>
        <div>
          <el-button @click="restData" type="primary" plain size="small" class="rmScs">初始化</el-button>
          <el-button :disabled="tableName" @click="handleOk" type="primary" size="small" class="rmScs">保存</el-button>
        </div>
      </div>
      <div class="table-yl-content">
        <el-table class="table" :data="tableDataCopys" stripe border @header-click="headerClick" style="width: 100%">
          <el-table-column v-for="(item,index) in tableData" :key="index" :prop="item.columnName" :label="item.columnLabel">
            <template #header>
              <span class="colTips">
                <el-tooltip :content="item.columnLabel" placement="top">
                  <span>{{ item.columnLabel }}</span>
                </el-tooltip>
              </span>
            </template>
          </el-table-column>
        </el-table>
        <el-form style="margin-top: 30px;" ref="form" :model="tableForm" label-width="40px">
          <el-row :gutter="20">
            <el-col :span="6">
              <el-form-item class="flex1" label="名称">
                <el-input size="small" clearable placeholder="请输入名称" v-model="tableForm.columnLabel"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item class="flex1" label="标签">
                <el-input disabled size="small" clearable placeholder="请输入标签" v-model="tableForm.columnName"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item class="flex1" label="描述">
                <el-input size="small" clearable placeholder="请输入描述" v-model="tableForm.columnDescribe"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item class="flex1" label="排序">
                <el-select size="small" clearable v-model="tableForm.needSort" placeholder="请选择是否排序">
                  <el-option label="是" :value="1"></el-option>
                  <el-option label="否" :value="0"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="6">
              <el-form-item class="flex1" label="过滤">
                <el-select size="small" clearable v-model="tableForm.needFilters" placeholder="请选择是否过滤">
                  <el-option label="是" :value="1"></el-option>
                  <el-option label="否" :value="0"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item class="flex1" label="显示">
                <el-select size="small" clearable v-model="tableForm.needShow" placeholder="请选择是否显示">
                  <el-option label="是" :value="1"></el-option>
                  <el-option label="否" :value="0"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item class="flex1" label-width="80px" label="数据类型">
                <el-input size="small" clearable placeholder="请输入名称" v-model="tableForm.dataType"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item class="flex1" label="分组">
                <el-select size="small" clearable v-model="tableForm.needGroup" placeholder="请选择是否分组">
                  <el-option label="是" :value="1"></el-option>
                  <el-option label="否" :value="0"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="6">
              <el-form-item class="flex1" label="下拉">
                <el-select size="small" clearable v-model="tableForm.listqueryTemplateID" placeholder="请选择是否下拉">
                  <el-option label="是" :value="1"></el-option>
                  <el-option label="否" :value="0"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item class="flex1" label="合计">
                <el-select size="small" clearable v-model="tableForm.needCount" placeholder="请选择是否合计">
                  <el-option label="是" :value="1"></el-option>
                  <el-option label="否" :value="0"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item class="flex1" label-width="80px" label="字段排序">
                <el-input size="small" clearable placeholder="请输入名称" v-model="tableForm.orderNumber"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item class="flex1" label-width="60px" label="查询项">
                <el-select size="small" clearable v-model="tableForm.is_search" placeholder="请选择是否查询项">
                  <el-option label="是" value="1"></el-option>
                  <el-option label="否" value="0"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="6">
              <el-form-item label-width="70px" class="flex1" label="默认参数">
                <el-input size="small" clearable placeholder="请输入默认参数" v-model="tableForm.default_query_parameters"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label-width="70px" class="flex1" label="分组名称">
                <el-input size="small" clearable placeholder="请输入分组名称" v-model="tableForm.groupName"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
    </div>
    <Dialog width="750px" :flag="tableFlag">
      <div class="dialog-content">
        <div class="title">修改列设置</div>
        <div class="contents">
          <el-form ref="form" :model="tableForm" label-width="100px">
            <div class="flex-wrap ">
              <el-form-item class="flex1" label="名称">
                <el-input size="small" clearable placeholder="请输入名称" v-model="tableForm.columnName"></el-input>
              </el-form-item>
              <el-form-item class="flex1" label="标签">
                <el-input size="small" clearable placeholder="请输入标签" v-model="tableForm.columnLabel"></el-input>
              </el-form-item>
            </div>
            <div class="flex-wrap ">
              <el-form-item class="flex1" label="描述">
                <el-input size="small" clearable placeholder="请输入描述" v-model="tableForm.columnDescribe"></el-input>
              </el-form-item>
              <el-form-item class="flex1" label="排序">
                <el-select size="small" clearable v-model="tableForm.needSort" placeholder="请选择是否排序">
                  <el-option label="是" :value="1"></el-option>
                  <el-option label="否" :value="0"></el-option>
                </el-select>
              </el-form-item>
            </div>
            <div class="flex-wrap ">
              <el-form-item class="flex1" label="过滤">
                <el-select size="small" clearable v-model="tableForm.needFilters" placeholder="请选择是否过滤">
                  <el-option label="是" :value="1"></el-option>
                  <el-option label="否" :value="0"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item class="flex1" label="显示">
                <el-select size="small" clearable v-model="tableForm.needShow" placeholder="请选择是否显示">
                  <el-option label="是" :value="1"></el-option>
                  <el-option label="否" :value="0"></el-option>
                </el-select>
              </el-form-item>
            </div>
            <div class="flex-wrap ">
              <el-form-item class="flex1" label="数据类型">
                <el-input size="small" clearable placeholder="请输入名称" v-model="tableForm.dataType"></el-input>
              </el-form-item>
              <el-form-item class="flex1" label="分组">
                <el-select size="small" clearable v-model="tableForm.needGroup" placeholder="请选择是否分组">
                  <el-option label="是" :value="1"></el-option>
                  <el-option label="否" :value="0"></el-option>
                </el-select>
              </el-form-item>
            </div>
            <div class="flex-wrap ">
              <el-form-item class="flex1" label="下拉">
                <el-select size="small" clearable v-model="tableForm.listqueryTemplateID" placeholder="请选择是否下拉">
                  <el-option label="是" :value="1"></el-option>
                  <el-option label="否" :value="0"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item class="flex1" label="合计">
                <el-select size="small" clearable v-model="tableForm.needCount" placeholder="请选择是否合计">
                  <el-option label="是" :value="1"></el-option>
                  <el-option label="否" :value="0"></el-option>
                </el-select>
              </el-form-item>
            </div>
            <div class="flex-wrap ">
              <el-form-item label="字段排序">
                <el-input style="width: 240px;" size="small" clearable placeholder="请输入名称" v-model="tableForm.orderNumber"></el-input>
              </el-form-item>
            </div>
          </el-form>
        </div>
        <div class="foot right">
          <el-button size="medium" @click="handleOk" class="r24 bcButton" type="primary">提交</el-button>
          <el-button @click="eledite" size="medium">取消</el-button>
        </div>
      </div>
    </Dialog>
  </div>
</template>

<script>
import Dialog from '@/layout/components/Dialog'
import pf from '@/layout/mixin/publicFunc'
import { initColumnSet } from '@/api/newLogin'
export default {
  name: 'Table',
  mixins: [pf],
  props: {
    icons: {
      type: Array,
      default: () => []
    },
    authObj: {
      type: Object,
      default: () => { }
    },
    authType: {
      type: String,
      default: ''
    },
    authTable: {
      type: Boolean,
      default: false
    },
  },
  components: { Dialog },
  data () {
    return {
      form: {
        auth_ident: '',
        auth_comment: '',
        table_width: '',
        table_height: '',
        queryparams: '',
        serviceID: ''
      },
      tableForm: {
        columnName: "",
        columnLabel: "",
        columnDescribe: "",
        needSort: "",
        needFilters: "",
        needShow: "",
        needGroup: "",
        dataType: "",
        listqueryTemplateID: "",
        needCount: "",
        orderNumber: "",
        needSearch: "",
        is_search: '',
        default_query_parameters: '',
        groupName: '',
      },
      tableData: [],
      tableDataCopys: [],
      authArrs: [],
      tableFlag: false,
      allData: [],
      addAuthId: '',
      editAuthId: '',
      tableName: true
    }
  },
  watch: {
    authType: {
      handler (val) {
        if (val == 'add') {
          this.clearForm()
          this.tableData = []
        }
      },
      immediate: true
    },
    authObj: {
      handler (obj) {
        if (obj.queryTemplateID) {
          obj.serviceID = obj.queryTemplateID
        }
        if (this.authType == 'add' && obj.auth_id) {
          this.addAuthId = obj.auth_id
        } else if (this.authType == 'edit' && obj.auth_id) {
          this.editAuthId = obj.auth_id
        }
        if (this.addAuthId && this.editAuthId) {
          if (this.addAuthId != this.editAuthId) {
            this.tableData = []
            this.clearFormData()
            this.tableName = true
          }
        } else {
          this.tableData = []
          this.clearFormData()
          this.tableName = true
        }
        this.form = obj
        // this.restData()
      },
      immediate: true
    },
  },
  async mounted () {
    const { code, returnData } = await this.getQueryList(SERVICE_ID.sysAllMenuId, { serviceType: 1 })
    if (code == 0) {
      this.authArrs = returnData
    }
  },
  methods: {
    //清空表单
    clearForm () {
      const data = this.form
      for (const key in data) {
        if (Object.hasOwnProperty.call(data, key)) {
          data[key] = ''
        }
      }
    },
    clearFormData () {
      const newData = this.tableForm
      for (const key in newData) {
        if (Object.hasOwnProperty.call(newData, key)) {
          newData[key] = ''
        }
      }
    },
    //新增表格
    tableAdd () {
      this.tableFlag = true
    },
    //表格数据提交
    async handleOk () {
      this.tableForm.serviceOutPutId = this.form.auth_id
      const newObj = _.cloneDeep(this.tableForm)
      const { code } = await this.getChangeList(SERVICE_ID.getTableColumnId, newObj, 2, 'queryTemplateColumnSetID')
      if (code == 0) {
        this.$message.success('操作成功')
      } else {
        this.$message.error('操作失败')
      }
      this.tableFlag = false
    },
    //表格取消
    eledite () {
      this.tableFlag = false
    },
    serviceChange (val) {
      if (val) {
        this.form.queryTemplateID = val
      }
    },
    handleEdit (row) {
      this.tableFlag = true
      this.tableForm = row
    },
    headerClick (column) {
      const dom = document.querySelector('.el-table .el-table__header-wrapper .el-table__header .has-gutter .' + column.id)
      const domAll = document.querySelectorAll('.el-table .el-table__header-wrapper .el-table__header th')
      if (domAll && domAll.length) {
        domAll.forEach(item => {
          item.style.background = ''
          item.style.border = ''
        })
      }
      if (dom) {
        dom.style.background = '#E4F3F9'
        dom.style.border = '1px solid #4A82D6'
      }
      const datas = this.tableData.filter(item => item.columnName == column.property)
      this.tableName = column.property ? false : true
      if (datas && datas.length) {
        this.tableForm = datas[0]
      }
    },
    async restData () {
      if (this.form.auth_id) {
        const { code, returnData } = await initColumnSet({ auth_id: this.form.auth_id })
        if (code && returnData && returnData.length) {
          this.tableData = returnData
        } else {
          this.tableData = []
        }
      } else {
        this.$message.error('请添加数据保存后再操作')
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.table {
  .fr-list {
    .el-form-item {
      margin-right: 105px;
      &:last-child {
        margin-right: 0;
      }
    }
  }
  .el-select {
    width: 100%;
  }
  &-yl {
    position: absolute;
    bottom: 0;
    width: calc(100% - 376px);
    right: 0;
    height: calc(100% - 370px);
    &-content {
      margin-top: 20px;
      height: calc(100% - 48px);
      ::v-deep .table {
        .el-table__header {
          .cell {
            text-align: center;
            color: #333;
            white-space: nowrap;
          }
        }
      }
    }
  }
  .contents {
    padding: 24px;
    .el-form {
      padding-right: 0;
    }
    .el-select {
      width: 100%;
    }
    .r40 {
      margin-right: 60px;
    }
  }
}
</style>