<template>
  <div class="mobile-page-container">
    <!-- 类型选择 -->
    <div class="category-select">
      <van-field label-width="4rem"
        label-position="left"
        label="品类选择："
        :model-value="selectedTypeObj.label"
        placeholder="请输入">
        <template #input>
          <el-select v-model="selectedTypeObj"
            placeholder="请选择"
            filterable>
            <el-option v-for="item in typeOptions"
              :label="item.label"
              :value="item" />
          </el-select>
        </template>
      </van-field>
      <van-field v-model="selectedTypeObj.price"
        type="number"
        :label="selectedTypeObj.label + ' 价格：'"
        label-width="4rem"
        placeholder="请输入价格"
        clearable
        class="search-input" />
    </div>
    <!-- 品类信息 -->
    <div class="table-container">
      <!-- 表格容器 -->
      <div class="custom-table">
        <!-- 表头行 -->
        <div class="table-row header-row">
          <div class="table-cell first-column">品类/生产日期</div>
          <div class="table-cell second-column"></div>
        </div>
        <!-- 数据行 -->
        <div class="table-row even-row"
          v-for="(obj, index) in selectedTypeObj.taste"
          :key="index">
          <div class="table-cell first-column">{{ obj.name }}</div>
          <div class="table-cell second-column">
            <van-field type="text"
              placeholder="请输入"
              :border="false"
              class="cell-input">
              <template #input>
                <el-date-picker v-model="obj.value"
                  type="month"
                  placeholder="选择月份" />
              </template>
            </van-field>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
// 品类型
const typeOptions = ref([
  {
    label: ' 虎皮凤爪 210g', value: ' 虎皮凤爪 210g', price: '', taste: [
      {
        name: "卤香",
        value: '' // 日期
      },
      {
        name: "香辣",
        value: ''
      },
      {
        name: "椒麻",
        value: ''
      },
      {
        name: "火锅",
        value: ''
      },
      {
        name: "微辣",
        value: ''
      },
      {
        name: "麻辣",
        value: ''
      },
      {
        name: "黑鸭",
        value: ''
      },
    ]
  },
  {
    label: ' 虎皮凤爪 105g', value: ' 虎皮凤爪 105g', price: '', taste: [
      {
        name: "卤香",
        value: '' // 日期
      },
      {
        name: "香辣",
        value: ''
      },
      {
        name: "椒麻",
        value: ''
      },
      {
        name: "火锅",
        value: ''
      },
      {
        name: "微辣",
        value: ''
      },
      {
        name: "麻辣",
        value: ''
      },
      {
        name: "黑鸭",
        value: ''
      },
    ]
  },
  {
    label: ' 虎皮凤爪 68g', value: ' 虎皮凤爪 68g', price: '', taste: [
      {
        name: "卤香",
        value: '' // 日期
      },
      {
        name: "香辣",
        value: ''
      },
      {
        name: "椒麻",
        value: ''
      },
      {
        name: "麻辣",
        value: ''
      },
      {
        name: "黑鸭",
        value: ''
      },
    ]
  },
  {
    label: ' 鸡肉豆堡 120g', value: ' 鸡肉豆堡 120g', price: '', taste: [
      {
        name: "卤香",
        value: '' // 日期
      },
      {
        name: "香辣",
        value: ''
      }
    ]
  },
  {
    label: ' 牛肉豆堡 120g', value: ' 牛肉豆堡 120g', price: '', taste: [
      {
        name: "卤香",
        value: '' // 日期
      },
      {
        name: "香辣",
        value: ''
      }
    ]
  },
  {
    label: ' 去骨凤爪 72g', value: ' 去骨凤爪 72g', price: '', taste: [
      {
        name: "柠檬",
        value: '' // 日期
      },
      {
        name: "香辣",
        value: ''
      }
    ]
  },
  {
    label: ' 去骨凤爪 138g', value: ' 去骨凤爪 138g', price: '', taste: [
      {
        name: "柠檬",
        value: '' // 日期
      },
      {
        name: "香辣",
        value: ''
      }
    ]
  },
  {
    label: ' 虎皮小鸡腿 80g', value: ' 虎皮小鸡腿 80g', price: '', taste: [
      {
        name: "卤香",
        value: '' // 日期
      },
      {
        name: "香辣",
        value: ''
      }
    ]
  },
  {
    label: ' 老卤系列 ', value: ' 老卤系列 ', price: '', taste: [
      {
        name: "凤爪",
        value: '' // 日期
      },
      {
        name: "鸭掌",
        value: ''
      }
    ]
  },
  {
    label: ' 单支虎皮凤爪 ', value: ' 单支虎皮凤爪 ', price: '', taste: [
      {
        name: "卤香",
        value: '' // 日期
      },
      {
        name: "香辣",
        value: ''
      }
    ]
  },
  {
    label: ' 散称虎皮凤爪 ', value: ' 散称虎皮凤爪 ', price: '', taste: [
      {
        name: "卤香",
        value: '' // 日期
      },
      {
        name: "香辣",
        value: ''
      },
      {
        name: "黑鸭",
        value: ''
      }
    ]
  }
]);
const selectedTypeObj = ref(typeOptions.value[0])
</script>

<style lang="scss"
  scoped>
  .mobile-page-container {
    padding: 10px;
    background-color: #fff;

    // 类型选择
    .category-select {

      // 品类选择
      .van-cell {
        padding: 0;
        align-items: center;
        // font-size: 14px;
        // font-weight: 900;

        .el-select {
          width: 150px;
        }

      }

      .search-input {
        margin-top: 10px;
      }

    }

    // 表格容器
    .table-container {
      margin-top: 10px;
    }

    .custom-table {
      width: 100%;
      border: 1px solid #ccc;
      border-collapse: collapse; // 模拟表格边框合并

      .table-row {
        display: flex;
        width: 100%;
        height: 44px;

        &.header-row {
          background-color: #e5e5e5;

          .second-column {
            background: #e5e5e5;
          }
        }

        &.odd-row {
          background-color: #f9f9f9;
        }

        &.even-row {
          background-color: #e5e5e5;
        }
      }

      .table-cell {
        display: flex;
        align-items: center;
        justify-content: center;
        border-right: 1px solid #ccc;
        border-bottom: 1px solid #ccc;
        font-size: 14px;
        color: #333;

        &:last-child {
          border-right: none;
        }

        &.first-column {
          width: 120px;
          font-weight: 500;
        }

        &.second-column {
          background: white;
          flex: 1;
          padding: 0 8px;

        }
      }

      .cell-input {
        width: 100%;
        height: 100%;
        text-align: center;
        font-size: 14px;
        padding: 0;

        ::v-deep(.van-cell__value) {
          display: flex;
          align-items: center;

          .van-field__control {
            .el-input {
              width: auto;
            }
          }
        }

      }
    }
  }

  // 移除最后一行的下边框
  .table-row:last-child .table-cell {
    border-bottom: none;
  }
</style>