<template>
  <div>
    <div class="mobile-header">
      <router-link :to="{ name: 'Style' }" class="btn btn-secondary">
        <font-awesome-icon icon="arrow-left" />
        <span class="d-none d-md-inline" v-text="$t('entity.action.back')"></span>
      </router-link>
      <div class="header-actions">
        <button type="button" class="btn btn-success" @click="save" :disabled="isSaving">
          <font-awesome-icon icon="save" />
          <span class="d-none d-md-inline" v-text="$t('entity.action.save')"></span>
        </button>
        <button type="button" class="btn btn-primary" @click="handlePrint" :disabled="!style.id">
          <font-awesome-icon icon="print" />
          <span class="d-none d-md-inline" v-text="$t('entity.action.print')"></span>
        </button>
      </div>
    </div>

    <div v-if="loading" class="loading-container">
      <div class="spinner-border text-primary" role="status">
        <span class="sr-only">{{ $t('global.loading') }}</span>
      </div>
    </div>

    <div v-else class="form-container">
      <vxe-form :data="style" custom-layout class="vxe-form-group" title-align="left" title-width="120" :rules="formRules" ref="styleForm">
        <vxe-form-item field="number" :title="$t('jewpmsApp.style.number')" :item-render="{}">
          <template #default="{ data }">
            <vxe-input v-model="data.number" type="text" :readonly="!!style.id" data-cy="number" :clearable="!style.id" />
          </template>
        </vxe-form-item>

        <vxe-form-item field="name" :title="$t('jewpmsApp.style.name')" :item-render="{}">
          <template #default="{ data }">
            <vxe-input v-model="data.name" type="text" clearable data-cy="name" />
          </template>
        </vxe-form-item>

        <vxe-form-item field="customerNumber" :title="$t('jewpmsApp.style.customerNumber')" :item-render="{}">
          <template #default="{ data }">
            <vxe-select v-model="data.customerNumber" clearable data-cy="customerNumber" filterable remote :remote-method="searchCompanies">
              <vxe-option :value="null" :label="$t('entity.action.select')"></vxe-option>
              <vxe-option
                v-for="company in companies"
                :key="company.number"
                :value="company.number"
                :label="`${company.name}(${company.number})`"
              ></vxe-option>
            </vxe-select>
          </template>
        </vxe-form-item>

        <vxe-form-item field="customerStyle" :title="$t('jewpmsApp.style.customerStyle')" :item-render="{}">
          <template #default="{ data }">
            <vxe-input v-model="data.customerStyle" type="text" clearable data-cy="customerStyle" />
          </template>
        </vxe-form-item>

        <vxe-form-item field="productType" :title="$t('jewpmsApp.style.productType')" :item-render="{}">
          <template #default="{ data }">
            <vxe-select v-model="data.productType" clearable data-cy="productType">
              <vxe-option :value="null" :label="$t('entity.action.select')"></vxe-option>
              <vxe-option
                v-for="type in productTypes"
                :key="type.number"
                :value="type.number"
                :label="type.name + ' (' + type.number + ')'"
              ></vxe-option>
            </vxe-select>
          </template>
        </vxe-form-item>

        <vxe-form-item field="customsUnit" :title="$t('jewpmsApp.style.customsUnit')" :item-render="{}">
          <template #default="{ data }">
            <vxe-input v-model="data.customsUnit" type="text" clearable data-cy="customsUnit" />
          </template>
        </vxe-form-item>

        <vxe-form-item
          v-for="group in styleGroupTitle"
          :key="group.number"
          :field="group.number"
          :title="group.name || $t(`jewpmsApp.style.${group.number}`)"
          :item-render="{}"
        >
          <template #default="{ data }">
            <vxe-select
              v-model="data[group.number]"
              filterable
              clearable
              :data-cy="group.number"
              @change="event => handleStyleGroupChange(group.number, event)"
            >
              <vxe-option :value="null" :label="$t('entity.action.select')"></vxe-option>
              <vxe-option
                v-for="dict in styleGroupDicts[parseInt(group.number.replace(styleGroupPrefix, ''))]"
                :key="dict.number"
                :value="dict.number"
                :label="`${dict.name}(${dict.number})`"
              ></vxe-option>
            </vxe-select>
          </template>
        </vxe-form-item>
        <vxe-form-item field="property" :title="$t('jewpmsApp.style.property')" :item-render="{}">
          <template #default="{ data }">
            <vxe-input v-model="data.property" type="text" clearable data-cy="property" />
          </template>
        </vxe-form-item>

        <vxe-form-item field="imageUrl" :title="$t('jewpmsApp.style.imageUrl')" :item-render="{}">
          <template #default="{ data }">
            <div class="image-upload-container">
              <div class="image-preview" v-if="data.imageUrl">
                <vxe-image :src="data.imageUrl" :preview-src="data.imageUrl" alt="$t('jewpmsApp.style.imageUrl')" class="preview-image" />
              </div>
              <div class="image-placeholder" v-else>
                <font-awesome-icon icon="image" size="2x" />
                <span>{{ $t('entity.action.upload.image') }}</span>
              </div>
              <div class="upload-actions">
                <router-link :to="{ name: 'JhiCamera', query: { returnPath: $route.fullPath, id: style.id } }" class="btn btn-primary">
                  <font-awesome-icon icon="camera" />
                  <span>{{ $t('entity.action.camera.open') }}</span>
                </router-link>
              </div>
            </div>
          </template>
        </vxe-form-item>

        <vxe-form-item field="remark" :title="$t('jewpmsApp.style.remark')" :item-render="{}">
          <template #default="{ data }">
            <vxe-textarea v-model="data.remark" data-cy="remark" />
          </template>
        </vxe-form-item>
        <vxe-form-item field="quality" :title="$t('jewpmsApp.style.quality')" :item-render="{}">
          <template #default="{ data }">
            <vxe-select
              v-model="data.quality"
              clearable
              data-cy="quality"
              @change="loadStyleDtls"
              :disabled="processDtls.some(r => hasEditStatus(r)) || settingDtls.some(r => hasEditStatus(r))"
            >
              <vxe-option :value="null" :label="$t('entity.action.select')"></vxe-option>
              <vxe-option
                v-for="item in qualityDicts"
                :key="item.number"
                :value="item.number"
                :label="item.name + ' (' + item.number + ')'"
              ></vxe-option>
            </vxe-select>
          </template>
        </vxe-form-item>
      </vxe-form>

      <vxe-tabs v-model="activeTab" :before-change-method="handleTabChange">
        <vxe-tab-pane name="setting" :title="$t('jewpmsApp.style.setting.title')" icon="vxe-icon-setting-fill">
          <vxe-table
            v-if="settingDtls"
            ref="settingRef"
            :data="settingDtls"
            stripe
            keepSource
            :edit-config="{ trigger: 'manual', mode: 'row', autoClear: false, showStatus: true }"
            show-footer
            :footer-method="footerMethod"
          >
            <vxe-column
              v-for="column in settingColumns.filter(col => col.visible !== false)"
              :key="column.field"
              :field="column.field"
              :title="$t(column.title)"
              :sortable="column.sortable"
              :width="column.width"
              :edit-render="column.editRender"
            >
              <template #default="{ row }" v-if="column.field === 'process'">
                {{ settingTypes.find(s => s.number === String(row.process))?.name || row.process }}
              </template>
              <template #header="{ column }" v-if="column.title === 'entity.action.actions'">
                <span class="vxe-button">{{ column.title }}</span>
                <vxe-button class="btn-circle" icon="vxe-icon-square-plus-square" status="primary" @click="addDtlEvent"></vxe-button>
              </template>
              <template #default="{ row }" v-if="column.title === 'entity.action.actions'">
                <div class="vxe-group">
                  <template v-if="hasEditStatus(row)">
                    <vxe-button class="btn-circle" icon="vxe-icon-save" status="success" @click="saveDtlEvent(row)"></vxe-button>
                    <vxe-button class="btn-circle" icon="vxe-icon-undo" status="warning" @click="cancelDtlEvent(row)"></vxe-button>
                  </template>
                  <template v-else-if="!settingDtls.some(r => hasEditStatus(r))">
                    <vxe-button class="btn-circle text-primary" icon="vxe-icon-signature" @click="editDtlEvent(row)"></vxe-button>
                    <vxe-button class="btn-circle text-danger" icon="vxe-icon-delete" @click="prepareDelete(row)"></vxe-button>
                  </template>
                </div>
              </template>
            </vxe-column>
          </vxe-table>
        </vxe-tab-pane>
        <vxe-tab-pane name="process" :title="$t('jewpmsApp.style.process.title')" icon="vxe-icon-custom-column">
          <vxe-table
            v-if="processDtls"
            ref="processRef"
            :data="processDtls"
            stripe
            keepSource
            :edit-config="{ trigger: 'manual', mode: 'row', autoClear: false, showStatus: true }"
            show-footer
            :footer-method="footerMethod"
          >
            <vxe-column
              v-for="column in processColumns.filter(col => col.visible !== false)"
              :key="column.field"
              :field="column.field"
              :title="$t(column.title)"
              :sortable="column.sortable"
              :width="column.width"
              :edit-render="column.editRender"
            >
              <template #default="{ row }" v-if="column.field === 'process'">
                {{ processTypes.find(s => s.number === String(row.process))?.name || row.process }}
              </template>
              <template #header="{ column }" v-if="column.title === 'entity.action.actions'">
                <span class="vxe-button">{{ column.title }}</span>
                <vxe-button class="btn-circle" icon="vxe-icon-square-plus-square" status="primary" @click="addDtlEvent"></vxe-button>
              </template>
              <template #default="{ row }" v-if="column.title === 'entity.action.actions'">
                <div class="vxe-group">
                  <template v-if="hasEditStatus(row)">
                    <vxe-button class="btn-circle" icon="vxe-icon-save" status="success" @click="saveDtlEvent(row)"></vxe-button>
                    <vxe-button class="btn-circle" icon="vxe-icon-undo" status="warning" @click="cancelDtlEvent(row)"></vxe-button>
                  </template>
                  <template v-else-if="!processDtls.some(r => hasEditStatus(r))">
                    <vxe-button class="btn-circle text-primary" icon="vxe-icon-signature" @click="editDtlEvent(row)"></vxe-button>
                    <vxe-button class="btn-circle text-danger" icon="vxe-icon-delete" @click="prepareDelete(row)"></vxe-button>
                  </template>
                </div>
              </template>
            </vxe-column>
          </vxe-table>
        </vxe-tab-pane>
      </vxe-tabs>
    </div>
    <!-- 删除确认对话框 -->
    <vxe-modal
      show-footer
      show-cancel-button
      show-confirm-button
      v-model="showDelete"
      :title="$t('entity.detail.title')"
      @confirm="deleteStyleDtl"
    >
      <vxe-text status="warning" class="text-xl">{{
        $t('jewpmsApp.style.detail.delete.question', { param: removeRow?.process || removeRow?.sortNo })
      }}</vxe-text>
    </vxe-modal>
  </div>
</template>

<script lang="ts" src="./style-edit.component.ts"></script>

<style>
@import '@/../content/css/edit-form.css';
@import '@/../content/css/mobile-header.css';
</style>
