<template>
  <div class="table-modal">
    <Button v-if="!idsLength" type="dashed" icon="plus-round" @click="add">{{editText('add')}}</Button>
    <Card v-else class="table-modal-card">
      <div slot='title' class="Fl-card-title">
        <a slot='title' @click="add()">{{editText('edit')}}</a>
      </div>
      <Form @submit.native.prevent :model="form" :label-width="90">
        <FormItem :prop="`${keywords.key}`" :label="keywords.name" :key="idx" v-for="(keywords, idx) in formControl">
          <component :is="getComponent(keywords.type)" :options="keywords.options"  v-model="form[keywords.key]" />
        </FormItem>
      </Form>
    </Card>
    <Modal
      :width="1150"
      v-model="modal"
      :mask-closable="false"
      @on-ok="ok"
      @on-cancel="cancel"
      class="table-modal-popup"
       :class="{ 'has-menu': table.length > 1 }"
      :title="editText('choose')">
        <div class="Tm-popup-body" v-if="modal">
          <Menu v-if="table.length > 1" width="110px" :active-name="activeName" @on-select="menuChange">
            <MenuItem :name="index" :key="index" v-for="(item, index) in table">
              <span>{{item.title}}</span>
            </MenuItem>
          </Menu>
          <div class="Tmp-body-content">
            <template v-for="(item, index) in table">
              <div v-show="activeName === index">
                <QGTable
                  :show-selected="true"
                  :ref="`qgTable${index}`"
                  :columns="item.columns"
                  :request="item.query"
                  :hideAdd="true"
                  :height="500"
                  :title="title"
                  @on-selection-change="selectionChange"
                  @on-page-change="changePageNo"
                >
                </QGTable>
              </div>
            </template>
          </div>
        </div>
    </Modal>
  </div>
</template>
<script lang="ts" src="./index.ts"></script>
<style lang="less" scoped>
  .table-modal {
    &-card {
      /deep/ .ivu-card-head {
        background: #f0f2f5;
      }

      /deep/ .ivu-form {
        .ivu-form-item-label {
          width: 100px !important;
          text-align: left;
        }
      }

      .Fl-card-title {
        text-align: right;
      }
    }

    &-popup {
      /deep/ .tableComStyle {
        min-height: 0;
        // .tableGroupStyle {
        //   height: 500px;
        //   overflow: scroll;
        // }
      }

      .Tm-popup-body {
        display: flex;

        .Tmp-body-content {
          flex: 1;
        }

        /deep/ .ivu-menu-item {
          text-align: center;
          padding: 10px 0;
          justify-content: center;
        }
      }

      &.has-menu {
        /deep/ .ivu-modal-body {
          padding: 0;

          .tableComStyle {
            padding: 0;

            .tableStyle {
              margin-top: 0;
            }
          }

          .tableGroupStyle {
            margin-top: 1px;
          }
        }
      }
    }
  }
</style>