bssapp/ui/src/pages/ProductionWorker.vue

<template>
  <q-page v-if="canReadOrder" class="workorder-page with-bg">

    <!-- ===============================
         🔹 ÜST: İŞ EMRİ BİLGİLERİ
    =============================== -->
    <q-card flat bordered class="q-mb-md">
      <q-card-section class="row q-col-gutter-md">

        <div class="col-3">
          <q-input
            label="İş Emri No"
            v-model="form.workOrderNo"
            dense
            filled
            :readonly="isViewMode"
          />
        </div>

        <div class="col-3">
          <q-select
            label="Ürün Tipi"
            v-model="form.productType"
            :options="productTypes"
            dense
            filled
            :disable="isViewMode"
          />
        </div>

        <div class="col-3">
          <q-input
            label="Termin"
            type="date"
            v-model="form.deliveryDate"
            dense
            filled
            :readonly="isViewMode"
          />
        </div>

        <div class="col-3">
          <q-input
            label="Adet"
            type="number"
            v-model="form.quantity"
            dense
            filled
            :readonly="isViewMode"
          />
        </div>

      </q-card-section>
    </q-card>

    <!-- ===============================
         🔹 ORTA: GÖRSEL REFERANSLAR
    =============================== -->
    <div class="row q-col-gutter-md">

      <!-- 🔸 SOL: ANA GÖRSEL -->
      <div class="col-4">
        <q-card bordered>
          <q-card-section class="text-weight-bold">
            Ana Görsel
          </q-card-section>

          <q-card-section>
            <div v-if="mainImage">
              <img :src="mainImage.src" class="image-preview" />
            </div>

            <div v-else class="text-grey text-caption">
              Ana görsel seçilmedi
            </div>

            <q-btn
              v-if="isCreateMode && canWriteOrder"
              label="Ana Görsel Seç"
              icon="image"
              class="q-mt-sm"
              color="primary"
              @click="openImagePicker('MAIN')"
            />
          </q-card-section>
        </q-card>
      </div>

      <!-- 🔸 ORTA: DETAY GÖRSELLER -->
      <div class="col-5">
        <q-card bordered>
          <q-card-section class="text-weight-bold">
            Detay Görseller
          </q-card-section>

          <q-card-section class="row q-col-gutter-sm">
            <div
              v-for="(img, index) in detailImages"
              :key="index"
              class="col-6"
            >
              <q-card flat bordered>
                <img :src="img.src" class="image-thumb" />
                <q-card-section>
                  <q-input
                    v-model="img.note"
                    type="textarea"
                    dense
                    label="Not"
                    :readonly="isViewMode"
                  />
                </q-card-section>
              </q-card>
            </div>

            <div v-if="isCreateMode && canWriteOrder" class="col-12">
              <q-btn
                label="Detay Görsel Ekle"
                icon="add"
                flat
                color="primary"
                @click="openImagePicker('DETAIL')"
              />
            </div>
          </q-card-section>
        </q-card>
      </div>

      <!-- 🔸 SAĞ: TALİMAT / TELA -->
      <div class="col-3">
        <q-card bordered>
          <q-card-section class="text-weight-bold">
            Talimat / Tela
          </q-card-section>

          <q-card-section>
            <div
              v-for="(img, index) in instructionImages"
              :key="index"
              class="q-mb-sm"
            >
              <img :src="img.src" class="image-thumb" />
            </div>

            <q-btn
              v-if="isCreateMode && canWriteOrder"
              label="Talimat Görseli Ekle"
              icon="add"
              flat
              color="primary"
              @click="openImagePicker('INSTRUCTION')"
            />
          </q-card-section>
        </q-card>
      </div>

    </div>

    <!-- ===============================
         🔹 ALT: AKSİYONLAR
    =============================== -->
    <div class="row justify-end q-mt-md">
      <q-btn
        v-if="isCreateMode && canWriteOrder"
        label="Kaydet"
        color="positive"
        icon="save"
        @click="saveWorkOrder"
      />

      <q-btn
        v-if="isViewMode && canExportOrder"
        label="PDF"
        color="primary"
        icon="picture_as_pdf"
        class="q-ml-sm"
      />
    </div>

  </q-page>

  <q-page v-else class="q-pa-md flex flex-center">
    <div class="text-negative text-subtitle1">
      Bu module erisim yetkiniz yok.
    </div>
  </q-page>
</template>
<script setup>
import { computed, ref } from 'vue'
import { useRoute } from 'vue-router'
import { usePermission } from 'src/composables/usePermission'

const { canRead, canWrite, canExport } = usePermission()

const canReadOrder   = canRead('order')
const canWriteOrder  = canWrite('order')
const canExportOrder = canExport('order')

const route = useRoute()

const isViewMode = computed(() => !!route.params.id)
const isCreateMode = computed(() => !route.params.id)

const productTypes = ['CEKET', 'PANTOLON']

const form = ref({
  workOrderNo: '',
  productType: null,
  deliveryDate: '',
  quantity: null
})

const mainImage = ref(null)
const detailImages = ref([])
const instructionImages = ref([])

function openImagePicker(type) {
  if (!canWriteOrder.value) return

  // Şimdilik stub
  console.log('Image picker:', type)
}

function saveWorkOrder() {
  if (!canWriteOrder.value) return

  console.log('SAVE', {
    form: form.value,
    mainImage: mainImage.value,
    detailImages: detailImages.value,
    instructionImages: instructionImages.value
  })
}
</script>