<template>
  <div class="multi-center">
    <!-- 1 -->
    <div class="container">
      <Title fontSize="16px">Multi specification parameters</Title>
      <el-divider />
      <div class="button-container">
        <BaseButton btnClass="btn-orange" :onClick="handleAddSpec" text="Add new specifications" />
        <BaseButton btnClass="btn-yellow" :onClick="handleGenerate" text="Generate immediately" />
      </div>
      <el-form :model="formData" ref="formRef" class="spec-form">
        <div v-for="(spec, index) in specifications" :key="index" class="specification-row">
          <div class="specification-item">
            <div class="specification-label">{{ `Specifications ${index + 1}` }}</div>
            <el-form-item>
              <el-input
                v-model="spec.name"
                placeholder="Enter specification name"
                required
              ></el-input>
            </el-form-item>
          </div>
          <div class="specification-item">
            <div class="specification-label">{{ `Specification value ${index + 1}` }}</div>
            <el-form-item>
              <el-input v-model="spec.value" placeholder="Enter value" required></el-input>
            </el-form-item>
          </div>
          <div class="specification-item" style="margin-top: 30px">
            <el-button style="background: #fb923c; color: #fff" @click="saveSpec(index)" class="save-btn"> Save</el-button>
            <el-button style="background: #fff; color: #fb923c" @click="cancelSpec(index)" class="cancel-btn">Cancel</el-button>
          </div>
        </div>
      </el-form>
    </div>

    <!-- 2 -->
    <div class="container">
      <Title fontSize="16px">Multi specification parameters</Title>
      <el-divider />
      <div class="button-container">
        <BaseButton btnClass="btn-orange" :onClick="handleMemory" text="Add new specifications" />
        <BaseButton btnClass="btn-yellow" :onClick="MemoryImmediately" text="Generate immediately" />
      </div>
        <div class="h-[80px]" v-for="(spec,index) in memoryList" :key="index">
          <div class="specification-label">{{ `Memory ${index + 1}` }}</div>
          <div class="flex">
            <div class="flex w-[400px] 	justify-between">
              <el-input style="width: 60px;" v-model="spec.name" ></el-input>
              <el-input style="width: 60px;" v-model="spec.value"></el-input>
              <el-input style="width: 60px;" v-model="spec.weight"></el-input>
              <el-input style="width: 180px" v-model="spec.center" placeholder="Please enter attributes" ></el-input>
            </div>
            <div style="margin: 2px 0px 0px 10px">
              <el-button style="background: #fb923c; color: #fff" @click="memoryAdd(spec)" class="save-btn">Add</el-button>
            </div>
          </div>
        </div>
    </div>

    <!-- 3 -->
    <div class="container">
      <Title fontSize="16px">Multi specification parameters</Title>
      <el-divider />
      <div class="button-container">
        <BaseButton btnClass="btn-orange" :onClick="xxxxx" text="Add new specifications" />
        <BaseButton btnClass="btn-yellow" :onClick="ccccc" text="Generate immediately" />
      </div>
        <div class="specificationAdd h-[80px]">
          <div class="specification-label">Memory</div>
          <div class="flex">
            <div class="flex w-[340px] 	justify-between">
              <el-input style="width: 60px;" ></el-input>
              <el-input style="width: 60px;" ></el-input>
              <el-input style="width: 180px;" placeholder="Please enter attributes" ></el-input>
            </div>
            <div style="margin: 2px 0px 0px 10px">
              <el-button style="background: #fb923c; color: #fff" @click="saveSpec(index)" class="save-btn">Add</el-button>
            </div>
          </div>
        </div>
        <el-form  class="spec-form">
        <div class="specification-row mt-[5px]">
          <div class="specification-item">
            <div class="specification-label">Specifications</div>
            <el-form-item>
              <el-input  placeholder="Enter specification name" required></el-input>
            </el-form-item>
          </div>
          <div class="specification-item">
            <div class="specification-label">Specifications</div>
            <el-form-item>
              <el-input  placeholder="Enter value" required></el-input>
            </el-form-item>
          </div>
          <div class="specification-item" style="margin-top: 30px">
            <el-button style="background: #fb923c; color: #fff" @click="saveSpec(index)" class="save-btn"> Save</el-button>
            <el-button  style="background: #fff; color: #fb923c" @click="cancelSpec(index)" class="cancel-btn"> Cancel</el-button>
          </div>
        </div>
        </el-form>
    </div>

     <!-- 4 -->
     <div class="container mb-[25px]">
      <Title fontSize="16px">Multi specification parameters</Title>
      <el-divider />
      <div class="button-container">
        <BaseButton btnClass="btn-orange" :onClick="xxx" text="Add new specifications" />
        <BaseButton btnClass="btn-yellow" :onClick="ccc" text="Generate immediately" />
      </div>
        <div class="specificationAdd h-[80px]">
          <div class="specification-label">Memory</div>
          <div class="flex">
            <div class="flex w-[400px] 	justify-between">
              <el-input style="width: 60px;" ></el-input>
              <el-input style="width: 60px;" ></el-input>
              <el-input style="width: 60px;" ></el-input>
              <el-input style="width: 180px;" placeholder="Please enter attributes" ></el-input>
            </div>
            <div style="margin: 2px 0px 0px 10px">
              <el-button style="background: #fb923c; color: #fff" @click="saveSpec(index)" class="save-btn">Add</el-button>
            </div>
          </div>
        </div>
    </div>

    <el-table :data="tableData" :cell-style="{ textAlign: 'center' }"
    :header-cell-style="{ textAlign: 'center' }">
        <el-table-column prop="memory" label="memory" width="130" />
        <el-table-column prop="color" label="color" width="130" />
        <el-table-column prop="price" label="price" width="300" >
            <template #default="scope">
              <el-input
              v-model="scope.price"
              placeholder="Please enter the selling price"
              :formatter="(value) => `$ ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')"
              :parser="(value) => value.replace(/\$\s?|(,*)/g, '')"
            />
          </template>
        </el-table-column>
        <el-table-column label="Operation">
          <template #default="scope">
             <el-button  @click="deleteVariant(scope.row)" type="text" size="small">Delete</el-button>
          </template>
        </el-table-column>
     </el-table>

 </div>
</template>

<script setup>
  import Title from '@/components/titleFood.vue'
  import BaseButton from './BaseButton.vue'
  import { ref } from 'vue'
  const formData = ref({})
  const specifications = ref([ { name: '', value: '' }])
  const memoryList = ref([ { name: '', value: '',weight:'', center:"",}])
  const tableData =ref([
    { memory: '8GB', color: 'Black', price: '' },
    { memory: '16GB', color: 'White', price: '' },
  ])
  // specification 新增
  const handleAddSpec = () => {
    console.log('新增')
    specifications.value.push({ name: '', value: '' })
  }
  const handleGenerate = () => {
    console.log('specifications生成完成')
  }
  const saveSpec = (index) => {
    console.log('保存', index)
  }
  const cancelSpec = (index) => {
    console.log('取消', index)
    specifications.value.splice(index, 1)
  }
  // Memory 添加规格
 const handleMemory=()=>{
  console.log("memoryList新增");
  memoryList.value.push({ name: '', value: '',weight:'', center:"",})
 }
 const MemoryImmediately=()=>{
  console.log('memoryList立即生产',memoryList.value);
 }
 const memoryAdd=(spec)=>{
  console.log("memoryList添加完成",spec);
 }

//  表格删除
const deleteVariant=(index)=>{
  tableData.value.splice(index, 1);
}
</script>

<style lang="scss" scoped>
  :deep(.el-divider--horizontal) {
    margin: 0 0 12px 0;
  }
  .container {
    width: 100%;
  }
  .scroll::-webkit-scrollbar {
    display: none;
  }
  .button-container {
    display: flex;
    gap: 16px;
  }
  .specification-row {
    display: flex;
    gap: 16px;
    align-items: center;
  }
  .specification-label {
    margin: 12px 0px;
  }
  .el-table {
  --el-table-header-bg-color: #f8f9fa;
  --el-table-border-color: #e5e7eb;
  --el-table-header-text-color: #4b5563;
}
</style>
