<!--
  ~ Licensed to the Apache Software Foundation (ASF) under one
  ~ or more contributor license agreements.  See the NOTICE file
  ~ distributed with this work for additional information
  ~ regarding copyright ownership.  The ASF licenses this file
  ~ to you under the Apache License, Version 2.0 (the
  ~ "License"); you may not use this file except in compliance
  ~ with the License.  You may obtain a copy of the License at
  ~
  ~   http://www.apache.org/licenses/LICENSE-2.0
  ~
  ~ Unless required by applicable law or agreed to in writing,
  ~ software distributed under the License is distributed on an
  ~ "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
  ~ KIND, either express or implied.  See the License for the
  ~ specific language governing permissions and limitations
  ~ under the License.
  -->

<nz-card>
  <div class="data-dict-table-operate">
    <form nz-form [nzLayout]="'inline'" [formGroup]="dataDictForm">
      <nz-form-item>
        <nz-form-label>Dictionary Code</nz-form-label>
        <nz-form-control>
          <input nz-input formControlName="dictCode" placeholder="Enter Dictionary Code" />
        </nz-form-control>
      </nz-form-item>
      <nz-form-item>
        <nz-form-label>Dictionary Name</nz-form-label>
        <nz-form-control>
          <input nz-input formControlName="dictName" placeholder="Enter Dictionary Name" />
        </nz-form-control>
      </nz-form-item>
      <nz-form-item>
        <nz-form-control>
          <button nz-button nzType="primary" (click)="queryDataDict()">
            <i nz-icon nzType="search"></i>
            Query
          </button>
          <button nz-button style="margin-left: 8px;" (click)="onShowAddDataDictModal()">
            <i nz-icon nzType="plus"></i>
            Add
          </button>
        </nz-form-control>
      </nz-form-item>
    </form>
  </div>

  <nz-table #table [nzData]="isFiltered ? filterArr : sysDictList" [nzScroll]="{ x: '1100px' }" nzNoResult="No result" nzBordered>
    <thead>
      <tr>
        <th nzLeft="0px">#</th>
        <th>Dictionary Code</th>
        <th>Dictionary Name</th>
        <th>Description</th>
        <th>Status</th>
        <th nzRight="0px">Action</th>
      </tr>
    </thead>
    <tbody>
      <tr *ngFor="let data of table.data; index as dictItemIndex">
        <td nzLeft="0px">{{ dictItemIndex + 1 }}</td>
        <td id="{{ 'dataDictCode' + data.dictCode }}">{{ data.dictCode }}</td>
        <td>{{ data.dictName }}</td>
        <td>{{ data.description }}</td>
        <td>
          <nz-tag [nzColor]="'blue'">{{ data.status }}</nz-tag>
        </td>
        <td class="td-action" nzRight="0px">
          <a id="{{ 'dataDictEdit' + data.dictCode }}" (click)="onShowEditDataDictModal(data, dictItemIndex)">
            <i nz-icon nzType="edit" nzTheme="outline"></i>
            Edit
          </a>
          <a id="{{ 'dataDictMore' + data.dictCode }}" nz-dropdown [nzDropdownMenu]="more">
            More
            <i nz-icon nzType="down"></i>
          </a>
          <nz-dropdown-menu #more="nzDropdownMenu">
            <ul nz-menu nzSelectable>
              <li
                nz-menu-item
                (click)="onShowConfigModal(data, dictItemIndex)"
                id="{{ 'dataDictConfiguration' + data.dictCode }}"
              >
                Configuration
              </li>
              <li
                id="{{ 'dataDictDelete' + data.dictCode }}"
                nz-menu-item
                nz-popconfirm
                nzTitle="Are you certain you want to delete?"
                nzOkText="Ok"
                nzCancelText="Cancel"
                (nzOnConfirm)="onDeleteDataDictItem(data)"
              >
                Delete
              </li>
            </ul>
          </nz-dropdown-menu>
        </td>
      </tr>
    </tbody>
  </nz-table>
</nz-card>

<submarine-data-dict-modal
  [modalTitle]="modalTitle"
  [visible]="dataDictModalVisible"
  [dictCode]="selectedDictCode"
  [dictName]="selectedDictName"
  [description]="selectedDescription"
  (close)="onHideDataDictModal()"
  (ok)="updateDataDict($event)"
></submarine-data-dict-modal>

<submarine-data-dict-config-modal
  [modalTitle]="configModalTitle"
  [visible]="configModalVisible"
  [dictCode]="selectedDictCode"
  [lastDictCode]="lastDictCode"
  [newDictCode]="newDictItemCode"
  [dictCodeChanged]="editDictCodeChanged"
  [dictName]="selectedDictName"
  [description]="selectedDescription"
  [modalWidth]="configModalWidth"
  (close)="onHideConfigModal()"
  (ok)="updateDataDict($event)"
></submarine-data-dict-config-modal>
