<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 class="flex1" label="服务ID">
            <el-select @change="serviceChange" 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>
        </div>
        <el-form-item class="flex1" label="权限描述">
          <el-input size="small" type="textarea" :rows="5" placeholder="请输入权限描述" v-model="form.auth_comment"></el-input>
        </el-form-item>
      </el-form>
    </div>
    <div class="table-yl box-public-shadow-mini">
      <div class="table-yl-head flex">
        <div class="title">列设置</div>
        <el-button @click="restData" type="primary" size="small" class="rmScs">初始化</el-button>
      </div>
      <div class="table-yl-content">
        <el-table :data="tableData" stripe border height="100%" style="width: 100%">
          <el-table-column prop="columnName" label="名称">
          </el-table-column>
          <el-table-column prop="columnLabel" label="标签">
          </el-table-column>
          <el-table-column prop="columnDescribe" label="描述">
          </el-table-column>
          <el-table-column prop="needSort" label="是否排序">
            <template slot-scope="scope">
              <div>{{ scope.row.needSort == 1 ? '是' :'否' }}</div>
            </template>
          </el-table-column>
          <el-table-column prop="needFilters" label="是否过滤">
            <template slot-scope="scope">
              <div>{{ scope.row.needFilters == 1 ? '是' :'否' }}</div>
            </template>
          </el-table-column>
          <el-table-column prop="needShow" label="是否显示">
            <template slot-scope="scope">
              <div>{{ scope.row.needShow == 1 ? '是' :'否' }}</div>
            </template>
          </el-table-column>
          <el-table-column prop="dataType" label="数据类型">
          </el-table-column>
          <el-table-column prop="needGroup" label="是否分组">
            <template slot-scope="scope">
              <div>{{ scope.row.needGroup == 1 ? '是' :'否' }}</div>
            </template>
          </el-table-column>
          <el-table-column prop="listqueryTemplateID" label="是否下拉">
            <template slot-scope="scope">
              <div>{{ scope.row.listqueryTemplateID == 1 ? '是' :'否' }}</div>
            </template>
          </el-table-column>
          <el-table-column prop="needCount" label="是否合计">
            <template slot-scope="scope">
              <div>{{ scope.row.needCount == 1 ? '是' :'否' }}</div>
            </template>
          </el-table-column>
          <el-table-column prop="orderNumber" label="字段排序">
          </el-table-column>
          <el-table-column fixed="right" label="操作">
            <template slot-scope="scope">
              <el-button type="text" @click="handleEdit(scope.row)" size="small" class="rmScs">编辑</el-button>
            </template>
          </el-table-column>
        </el-table>
      </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 pb from '@/layout/mixin/getPublicData'
import { initColumnSet } from '@/api/newLogin'
export default {
  name: 'Table',
  mixins: [pb],
  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: '',
        serviceID: ''
      },
      tableForm: {
        columnName: "",
        columnLabel: "",
        columnDescribe: "",
        needSort: "",
        needFilters: "",
        needShow: "",
        needGroup: "",
        dataType: "",
        listqueryTemplateID: "",
        needCount: "",
        orderNumber: "",
        needSearch: "",
      },
      tableData: [],
      authArrs: [],
      tableFlag: false,
      allData: [],
      addAuthId: '',
      editAuthId: ''
    }
  },
  watch: {
    authType: {
      handler (val) {
        if (val == 'add') {
          this.clearForm()
          this.tableData = []
        }
      },
      immediate: true
    },
    authObj: {
      handler (obj) {
        if (obj.queryTemplateID) {
          obj.serviceID = obj.queryTemplateID
          // this.getTable(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 = []
          }
        } else {
          this.tableData = []
        }
        this.form = obj
        // this.restData()
      },
      immediate: true
    },
  },
  async mounted () {
    const result = await this.getQuery(SERVICE_ID.sysAllMenuId, false, { serviceType: 1 })
    this.authArrs = result
  },
  methods: {
    //清空表单
    clearForm () {
      const data = this.form
      for (const key in data) {
        if (Object.hasOwnProperty.call(data, key)) {
          data[key] = ''
        }
      }
    },
    //新增表格
    tableAdd () {
      this.tableFlag = true
    },
    //表格数据提交
    async handleOk () {
      this.tableForm.serviceOutPutId = this.form.auth_id
      const result = await this.generalDataReception(SERVICE_ID.getTableColumnId, this.tableForm, 2)
      this.tableFlag = false
    },
    //表格取消
    eledite () {
      this.tableFlag = false
    },
    //获取表格数据
    async getTable (id) {
      const result = await this.getQuery(id, true, {}, 10)
      this.tableData = result
      // for (let i = 0; i < result.length; i++) {
      //   const element = result[i];
      //   element.serviceOutPutId = this.form.auth_id
      //   await this.generalDataReception(18122, element, 1)
      // }
    },
    serviceChange (val) {
      if (val) {
        this.form.queryTemplateID = val
      }
    },
    handleEdit (row) {
      this.tableFlag = true
      this.tableForm = row
    },
    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% - 440px);
    &-content {
      margin-top: 20px;
      height: calc(100% - 48px);
    }
  }
  .contents {
    padding: 24px;
    .el-form {
      padding-right: 0;
    }
    .el-select {
      width: 100%;
    }
    .r40 {
      margin-right: 60px;
    }
  }
}
</style>