<template>
  <div class="mobile-page-container">
    <!-- 类型选择 -->
    <div class="category-select">
      <van-field label-width="3.8rem"
        label-position="left"
        label="品类选择："
        :model-value="selectedTypeObj.label"
        placeholder="请输入">
        <template #input>
          <el-select v-model="selectedTypeObj"
            placeholder="请选择">
            <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="3.8rem"
        placeholder="请输入价格"
        clearable
        class="search-input"
        @change="handlePriceChange" />
    </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"
                  :editable="false"
                  value-format="YYYY-MM"
                  placeholder="选择月份"
                  @change="handleTasteChange(index)" />
              </template>
            </van-field>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { createInspectionTaskDetailAPI } from '@/api'
const props = defineProps({
  form: {
    type: Object,
    default: () => { }
  }
})
const nowRstdId = ref('') // 当前品类任务部分 ID
// 品类型
// 后台用的英文字段，和我们的 label 名字做映射
const typeMap = {
  ' 虎皮凤爪 210g': {
    priceKey: 'priceHp210',
    tasteDateKey: 'kwYmHp210Map'
  },
  ' 虎皮凤爪 105g': {
    priceKey: 'priceHp105',
    tasteDateKey: 'kwYmHp105Map'
  },
  ' 虎皮凤爪 68g': {
    priceKey: 'priceHp68',
    tasteDateKey: 'kwYmHp68Map'
  },
  ' 鸡肉豆堡 120g': {
    priceKey: 'priceJrdb120',
    tasteDateKey: 'kwYmJrdb120Map'
  },
  ' 牛肉豆堡 120g': {
    priceKey: 'priceNrdb120',
    tasteDateKey: 'kwYmNrdb120Map'
  },
  ' 去骨凤爪 72g': {
    priceKey: 'priceQg72',
    tasteDateKey: 'kwYmQg72Map'
  },
  ' 去骨凤爪 138g': {
    priceKey: 'priceQg138',
    tasteDateKey: 'kwYmQg138Map'
  },
  ' 虎皮小鸡腿 80g': {
    priceKey: 'priceHpjt80',
    tasteDateKey: 'kwYmHpjt80Map'
  },
  ' 老卤系列 ': {
    priceKey: 'priceLl',
    tasteDateKey: 'kwYmLlMap'
  },
  ' 单支虎皮凤爪 ': {
    priceKey: 'priceHpDz',
    tasteDateKey: 'kwYmHpDzMap'
  },
  ' 散称虎皮凤爪 ': {
    priceKey: 'priceHpSc',
    tasteDateKey: 'kwYmHpScMap'
  },
}
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])

// 价格改变
const handlePriceChange = async () => {
  const prop = typeMap[selectedTypeObj.value.label].priceKey
  const res = await createInspectionTaskDetailAPI({
    taskDetail: {
      rstId: props.form.rstId,
      rstdId: nowRstdId.value,
      detailName: '品类信息',
      [prop]: selectedTypeObj.value.price * 1
    }
  })

  showNotify({ type: 'success', message: '价格，保存成功' })
}
// 口味生产日期设置
const handleTasteChange = async (index) => {
  const prop = typeMap[selectedTypeObj.value.label].tasteDateKey
  await createInspectionTaskDetailAPI({
    taskDetail: {
      rstId: props.form.rstId,
      rstdId: nowRstdId.value,
      detailName: '品类信息',
      [prop]: selectedTypeObj.value.taste.reduce((acc, item) => {
        acc[item.name] = item.value;
        return acc;
      }, {})
    }
  })
}

const init = () => {
  if (props.form.detailMap) {
    if (props.form.detailMap['品类信息']) {
      // 回显
      nowRstdId.value = props.form.detailMap['品类信息'][0].rstdId // 详情ID
      // 循环设置
      typeOptions.value.forEach(item => {
        const priceProp = typeMap[item.label].priceKey // 设置价格
        item.price = props.form.detailMap['品类信息'][0][priceProp]
        const tasteProp = typeMap[item.label].tasteDateKey // 设置口味日期
        const targetTasteObj = props.form.detailMap['品类信息'][0][tasteProp]
        if (targetTasteObj) {
          item.taste.forEach(item => {
            item.value = targetTasteObj[item.name] // 取出日期 
          })
        }
      })
      return
    }
  }
  // 手动创建品类信息，得到 rstdId
  createInspectionTaskDetailAPI({
    taskDetail: {
      rstId: props.form.rstId,
      detailName: '品类信息'
    }
  }).then(res => {
    nowRstdId.value = res.data.rstdId
  })
}
defineExpose({
  init
})
</script>

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

    // 类型选择
    .category-select {

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

        .el-select {
          width: 4rem;
        }

      }

      .search-input {
        margin-top: .2667rem;

        ::v-deep(input) {
          border-bottom: 1px solid gray;
        }
      }

    }

    // 表格容器
    .table-container {
      margin-top: .2667rem;
    }

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

      .table-row {
        display: flex;
        width: 100%;
        height: 1.1733rem;

        &.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: .0267rem solid #ccc;
        border-bottom: .0267rem solid #ccc;
        font-size: .3733rem;
        color: #333;

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

        &.first-column {
          width: 3.2rem;
          font-weight: 500;
        }

        &.second-column {
          background: white;
          flex: 1;
          padding: 0 .2133rem;

        }
      }

      .cell-input {
        width: 100%;
        height: 100%;
        text-align: center;
        font-size: .3733rem;
        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>