<template>
  <div>
    <el-drawer v-model="show" :show-close="false" direction="rtl" size="700px">
      <template #header>
        <div class="food_title">New Product</div>
      </template>

      <template #default>
        <el-form
          :model="formData"
          :rules="rules"
          ref="formRef"
          label-width="150px"
          class="upload-wrapper"
        >
          <!-- 第一排 -->
          <div class="upload-section">
            <div class="upload_img">
              <div class="upload-label">Product Image </div>
              <el-form-item prop="img">
              <el-upload
                class="upload-box"
                action="https://jsonplaceholder.typicode.com/posts/"
                accept="image/*"
                list-type="picture-card"
                :auto-upload="false"
                :on-preview="handlePreview"
                :on-remove="handleRemove"
                :on-change="handleChange"
                :file-list="fileList"
                :limit="1"
                :before-upload="beforeUpload"
              >
                <i>
                  <img src="../../../assets/img/add.png" alt="" />
                </i>
                <span class="upload-text">Click to upload</span>
              </el-upload>
              </el-form-item>
              <div class="upload-tip">Please upload a 1:1 image in PNG, JPG, JPEG format</div>
            </div>
            <!-- Product Name -->
            <div class="upload_input">
              <div class="upload-label">Product Name</div>
              <el-form-item prop="productName">
                <el-input
                  type="text"
                  v-model="formData.productName"
                  autocomplete="off"
                  placeholder="Please enter the product name"
                />
              </el-form-item>
            </div>
            <!-- Category -->
            <div class="upload_section">
              <div class="upload-label">Category *</div>
              <el-form-item prop="category">
                <el-select v-model="formData.category" placeholder="Select" size="large">
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
            </div>
          </div>

          <!-- 第二排 -->
          <div class="input-section">
            <div class="input-price">
              <div class="upload-label">Commodity Price *</div>
              <el-form-item prop="price">
                <el-input
                  type="text"
                  v-model="formData.price"
                  autocomplete="off"
                  placeholder="Please enter the commodity price"
                />
              </el-form-item>
            </div>
            <div class="upload_input">
              <div class="upload-label">Keywords</div>
              <el-form-item prop="keywords">
                <el-input
                  type="text"
                  v-model="formData.keywords"
                  autocomplete="off"
                  placeholder="Please enter keywords"
                />
              </el-form-item>
            </div>
            <div class="upload_section">
              <div class="upload-label">Product Status</div>
              <el-form-item prop="productStatus">
                <el-radio-group v-model="formData.productStatus">
                  <el-radio value="1" size="large">Upper</el-radio>
                  <el-radio value="2" size="large">Below</el-radio>
                </el-radio-group>
              </el-form-item>
            </div>
          </div>

          <!--第三排 -->
          <div class="select-section">
            <div class="upload-label">Product Specifications *</div>
            <el-form-item prop="productSpecifications">
                <el-radio-group v-model="formData.productSpecifications" @change="radioShow">
                  <el-radio value="1" size="large">Product specifications</el-radio>
                  <el-radio value="2" size="large">Multiple specifications</el-radio>
                </el-radio-group>
            </el-form-item>
          </div>
        </el-form>
        <showRadio  v-show="isShow"/>
      </template>

      <template #footer>
        <div style="display: flex; justify-content: space-between">
          <el-button style="width: 220px; height: 44px" type="primary" @click="cancelClick" plain>
            Cancel
          </el-button>
          <el-button
            style="width: 408px; height: 44px; background: #f67f20; color: #fff"
            type="primary"
            @click="handleSubmit"
            plain
          >
            Save
          </el-button>
        </div>
      </template>
    </el-drawer>

  </div>
</template>

<script setup>
  import { ref,reactive } from 'vue'
  import showRadio from "./show-radio.vue"
  const show = defineModel('show')
  const isShow=ref(false)
  const cancelClick = () => {
    show.value = false
  }
  const formData = ref({
    productName: '',
    category: '',
    price: '',
    keywords: '',
    productStatus: '2',
    productSpecifications: '1',
  })
  const rules = ref({
    productName: [{ required: true, message: 'Product Name is required', trigger: 'blur' }],
    category: [{ required: true, message: 'Category is required', trigger: 'change' }],
    price: [{ required: true, message: 'Commodity Price is required', trigger: 'blur' }],
    productSpecifications: [
      { required: true, message: 'Product Specifications are required', trigger: 'change' },
    ],
  })

  const options = [
    { value: '1', label: 'Category 1' },
    { value: '2', label: 'Category 2' },
  ]
  const beforeUpload = (file) => {
    const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png'
    if (!isJpgOrPng) {
      this.$message.error('Only JPG/PNG file types are allowed')
    }
    return isJpgOrPng
  }

  const handlePreview = (file) => {
    console.log('Preview file:', file)
  }

  const handleRemove = (file, fileList) => {
    console.log('Removed file:', file)
  }

  const handleChange = (file, fileList) => {
    console.log('File changed:', file)
  }

  const handleSubmit = () => {
    // const formRef = ref('')
    // formRef.value.validate((valid) => {
    //   if (valid) {
    //     console.log('Form Submitted:', formData.value)
    //   } else {
    //     console.log('Form validation failed')
    //   }
    // })
    console.log('Form Submitted:', formData.value)

  }

  const radioShow=(end)=>{
    isShow.value=true
    if(end === '2'){
      isShow.value=true
    }else{
      isShow.value=false
    }
  }
</script>

<style lang="scss" scoped>
  :deep(.el-drawer__header) {
    margin-bottom: 0px !important;
  }
  .food_title {
    height: 56px;
    font-size: 24px;
    font-weight: 600;
    border-bottom: 1px solid #e6e6e6;
  }
  .upload-wrapper {
    width: 100%;
    height: 380px;
  }
  .upload-label {
    margin-bottom: 15px;
  }
  .upload-section {
    width: 100%;
    height: 190px;
    display: flex;
    justify-content: space-between;
    :deep(.el-form-item__content){
      margin-left: 0px !important;
    }
  }
  .upload_img {
    flex: 1;
  }
  .upload_input {
    margin: 0px 25px 0px 5px;
    width: 180px;
  }
  :deep(.el-input__wrapper) {
    height: 35px;
  }
  .upload_section {
    width: 180px;
  }

  .upload-box {
    :deep(.el-upload) {
      width: 100px;
      height: 100px;
      border: 1px dashed #eeeeee;
      border-radius: 4px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: border-color 0.3s;
      border-radius: 10px;
      background: #eeeeee;
      &:hover {
        border-color: #409eff;
      }
    }
  }
  .upload-box i {
    font-size: 20px;
    color: #8c939d;
    margin-bottom: 8px;
  }
  .upload-text {
    font-size: 10px;
    color: #8c939d;
  }
  .upload-tip {
    font-size: 12px;
    color: #909399;
    margin-top: 8px;
  }

  .input-section {
    width: 100%;
    height: 100px;
    display: flex;
    justify-content: space-between;
    :deep(.el-form-item__content){
      margin-left: 0px !important;
    }
  }
  .input-price {
    flex: 1;
    :deep(.el-input) {
      width: 180px !important;
    }
  }
 .select-section{
  :deep(.el-form-item__content){
    margin-left: 0px !important;
  }
 }

</style>
