<template>
  <view class="publish-page">
    <!-- 顶部导航 -->
    <view class="nav-bar">
      <view class="nav-left" @click="goBack">
        <text class="nav-icon">←</text>
      </view>
      <view class="nav-title">发布牛只</view>
      <view class="nav-right"></view>
    </view>

    <!-- 表单内容 -->
    <view class="form-container">
      <!-- 图片上传 -->
      <view class="form-section">
        <view class="section-title">牛只照片</view>
        <view class="image-upload">
          <view class="image-list">
            <view 
              v-for="(image, index) in formData.images" 
              :key="index" 
              class="image-item"
            >
              <image :src="image" class="uploaded-image" @click="previewImage(index)" />
              <view class="delete-btn" @click="deleteImage(index)">×</view>
            </view>
            <view 
              v-if="formData.images.length < 9" 
              class="upload-btn" 
              @click="chooseImage"
            >
              <text class="upload-icon">+</text>
              <text class="upload-text">添加照片</text>
            </view>
          </view>
          <view class="upload-tip">最多上传9张照片，第一张为封面</view>
        </view>
      </view>

      <!-- 基本信息 -->
      <view class="form-section">
        <view class="section-title">基本信息</view>
        
        <view class="form-item">
          <view class="item-label">牛只编号 <text class="required">*</text></view>
          <input
            class="form-input"
            v-model="formData.cattleId"
            placeholder="请输入牛只编号"
            maxlength="20"
          />
        </view>
        
        <view class="form-item">
          <view class="item-label">品种 <text class="required">*</text></view>
          <picker
            mode="selector"
            :range="breedOptions"
            range-key="label"
            :value="formData.breedIndex"
            @change="handleBreedChange"
          >
            <view class="picker-input">
              {{ formData.breed || '请选择品种' }}
              <text class="picker-arrow">></text>
            </view>
          </picker>
        </view>
        
        <view class="form-item">
          <view class="item-label">性别 <text class="required">*</text></view>
          <picker
            mode="selector"
            :range="genderOptions"
            range-key="label"
            :value="formData.genderIndex"
            @change="handleGenderChange"
          >
            <view class="picker-input">
              {{ formData.gender || '请选择性别' }}
              <text class="picker-arrow">></text>
            </view>
          </picker>
        </view>
        
        <view class="form-item">
          <view class="item-label">年龄 <text class="required">*</text></view>
          <view class="age-input">
            <input
              class="form-input"
              type="number"
              v-model="formData.age"
              placeholder="请输入年龄"
            />
            <text class="age-unit">个月</text>
          </view>
        </view>
        
        <view class="form-item">
          <view class="item-label">体重 <text class="required">*</text></view>
          <view class="weight-input">
            <input
              class="form-input"
              type="digit"
              v-model="formData.weight"
              placeholder="请输入体重"
            />
            <text class="weight-unit">kg</text>
          </view>
        </view>
      </view>
      
      <!-- 健康状况 -->
      <view class="form-section">
        <view class="section-title">健康状况</view>
        
        <view class="form-item">
          <view class="item-label">健康状态 <text class="required">*</text></view>
          <picker
            mode="selector"
            :range="healthOptions"
            range-key="label"
            :value="formData.healthIndex"
            @change="handleHealthChange"
          >
            <view class="picker-input">
              {{ formData.healthStatus || '请选择健康状态' }}
              <text class="picker-arrow">></text>
            </view>
          </picker>
        </view>
        
        <view class="form-item">
          <view class="item-label">疫苗接种</view>
          <view class="checkbox-group">
            <label
              class="checkbox-item"
              v-for="vaccine in vaccineOptions"
              :key="vaccine.value"
            >
              <checkbox
                :value="vaccine.value"
                :checked="formData.vaccination.includes(vaccine.value)"
                @change="handleVaccineChange"
              />
              <text class="checkbox-label">{{ vaccine.label }}</text>
            </label>
          </view>
        </view>
      </view>
      
      <!-- 交易信息 -->
      <view class="form-section">
        <view class="section-title">交易信息</view>
        
        <view class="form-item">
          <view class="item-label">出售价格 <text class="required">*</text></view>
          <view class="price-input">
            <text class="price-symbol">¥</text>
            <input
              class="form-input"
              type="digit"
              v-model="formData.price"
              placeholder="请输入价格"
            />
          </view>
        </view>
        
        <view class="form-item">
          <view class="item-label">价格类型 <text class="required">*</text></view>
          <picker
            mode="selector"
            :range="priceTypeOptions"
            range-key="label"
            :value="formData.priceTypeIndex"
            @change="handlePriceTypeChange"
          >
            <view class="picker-input">
              {{ formData.priceType || '请选择价格类型' }}
              <text class="picker-arrow">></text>
            </view>
          </picker>
        </view>
        
        <view class="form-item">
          <view class="item-label">交易方式 <text class="required">*</text></view>
          <view class="checkbox-group">
            <label
              class="checkbox-item"
              v-for="trade in tradeTypeOptions"
              :key="trade.value"
            >
              <checkbox
                :value="trade.value"
                :checked="formData.tradeType.includes(trade.value)"
                @change="handleTradeTypeChange"
              />
              <text class="checkbox-label">{{ trade.label }}</text>
            </label>
          </view>
        </view>
        
        <view class="form-item">
          <view class="item-label">所在地区 <text class="required">*</text></view>
          <picker
            mode="region"
            :value="formData.region"
            @change="handleRegionChange"
          >
            <view class="picker-input">
              {{ formData.location || '请选择地区' }}
              <text class="picker-arrow">></text>
            </view>
          </picker>
        </view>
        
        <view class="form-item">
          <view class="item-label">详细描述</view>
          <textarea
            class="form-textarea"
            v-model="formData.description"
            placeholder="请详细描述牛只情况，包括饲养环境、饲料情况等"
            maxlength="500"
          />
          <view class="char-count">{{ formData.description.length }}/500</view>
        </view>
      </view>
      
      <!-- 联系信息 -->
      <view class="form-section">
        <view class="section-title">联系信息</view>
        
        <view class="form-item">
          <view class="item-label">联系人 <text class="required">*</text></view>
          <input
            class="form-input"
            v-model="formData.contactName"
            placeholder="请输入联系人姓名"
            maxlength="20"
          />
        </view>
        
        <view class="form-item">
          <view class="item-label">联系电话 <text class="required">*</text></view>
          <input
            class="form-input"
            type="number"
            v-model="formData.contactPhone"
            placeholder="请输入联系电话"
            maxlength="11"
          />
        </view>
      </view>
    </view>

    <!-- 底部按钮 -->
    <view class="bottom-bar">
      <button class="save-draft-btn" @click="saveDraft">保存草稿</button>
      <button class="publish-btn" @click="publishCattle">立即发布</button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      formData: {
        images: [],
        cattleId: '',
        breed: '',
        breedIndex: 0,
        gender: '',
        genderIndex: 0,
        age: '',
        weight: '',
        healthStatus: '',
        healthIndex: 0,
        vaccination: [],
        price: '',
        priceType: '',
        priceTypeIndex: 0,
        tradeType: [],
        region: [],
        location: '',
        description: '',
        contactName: '',
        contactPhone: ''
      },
      breedOptions: [
        { label: '西门塔尔牛', value: 'simmental' },
        { label: '安格斯牛', value: 'angus' },
        { label: '夏洛莱牛', value: 'charolais' },
        { label: '利木赞牛', value: 'limousin' },
        { label: '海福特牛', value: 'hereford' },
        { label: '鲁西黄牛', value: 'luxi' },
        { label: '秦川牛', value: 'qinchuan' },
        { label: '南阳牛', value: 'nanyang' }
      ],
      genderOptions: [
        { label: '公牛', value: 'male' },
        { label: '母牛', value: 'female' },
        { label: '阉牛', value: 'castrated' }
      ],
      healthOptions: [
        { label: '健康', value: 'healthy' },
        { label: '良好', value: 'good' },
        { label: '一般', value: 'normal' },
        { label: '需要关注', value: 'attention' }
      ],
      vaccineOptions: [
        { label: '口蹄疫疫苗', value: 'fmd' },
        { label: '牛瘟疫苗', value: 'rinderpest' },
        { label: '布鲁氏菌病疫苗', value: 'brucellosis' },
        { label: '结核病疫苗', value: 'tuberculosis' }
      ],
      priceTypeOptions: [
        { label: '按头计价', value: 'per_head' },
        { label: '按重量计价', value: 'per_weight' }
      ],
      tradeTypeOptions: [
        { label: '现场交易', value: 'offline' },
        { label: '线上交易', value: 'online' },
        { label: '支持配送', value: 'delivery' }
      ]
    }
  },
  methods: {
    // 返回上一页
    goBack() {
      uni.navigateBack()
    },
    
    // 选择图片
    chooseImage() {
      const remainCount = 9 - this.formData.images.length
      uni.chooseImage({
        count: remainCount,
        sizeType: ['compressed'],
        sourceType: ['album', 'camera'],
        success: (res) => {
          this.formData.images.push(...res.tempFilePaths)
        }
      })
    },
    
    // 预览图片
    previewImage(index) {
      uni.previewImage({
        current: index,
        urls: this.formData.images
      })
    },
    
    // 删除图片
    deleteImage(index) {
      this.formData.images.splice(index, 1)
    },
    
    // 品种选择
    handleBreedChange(e) {
      const index = e.detail.value
      this.formData.breedIndex = index
      this.formData.breed = this.breedOptions[index].label
    },
    
    // 性别选择
    handleGenderChange(e) {
      const index = e.detail.value
      this.formData.genderIndex = index
      this.formData.gender = this.genderOptions[index].label
    },
    
    // 健康状态选择
    handleHealthChange(e) {
      const index = e.detail.value
      this.formData.healthIndex = index
      this.formData.healthStatus = this.healthOptions[index].label
    },
    
    // 疫苗选择
    handleVaccineChange(e) {
      this.formData.vaccination = e.detail.value
    },
    
    // 价格类型选择
    handlePriceTypeChange(e) {
      const index = e.detail.value
      this.formData.priceTypeIndex = index
      this.formData.priceType = this.priceTypeOptions[index].label
    },
    
    // 交易方式选择
    handleTradeTypeChange(e) {
      this.formData.tradeType = e.detail.value
    },
    
    // 地区选择
    handleRegionChange(e) {
      this.formData.region = e.detail.value
      this.formData.location = e.detail.value.join(' ')
    },
    
    // 表单验证
    validateForm() {
      if (!this.formData.cattleId) {
        uni.showToast({ title: '请输入牛只编号', icon: 'none' })
        return false
      }
      if (!this.formData.breed) {
        uni.showToast({ title: '请选择品种', icon: 'none' })
        return false
      }
      if (!this.formData.gender) {
        uni.showToast({ title: '请选择性别', icon: 'none' })
        return false
      }
      if (!this.formData.age) {
        uni.showToast({ title: '请输入年龄', icon: 'none' })
        return false
      }
      if (!this.formData.weight) {
        uni.showToast({ title: '请输入体重', icon: 'none' })
        return false
      }
      if (!this.formData.price) {
        uni.showToast({ title: '请输入价格', icon: 'none' })
        return false
      }
      if (!this.formData.contactName) {
        uni.showToast({ title: '请输入联系人', icon: 'none' })
        return false
      }
      if (!this.formData.contactPhone) {
        uni.showToast({ title: '请输入联系电话', icon: 'none' })
        return false
      }
      return true
    },
    
    // 保存草稿
    saveDraft() {
      uni.setStorageSync('cattle_draft', this.formData)
      uni.showToast({ title: '草稿已保存', icon: 'success' })
    },
    
    // 发布牛只
    publishCattle() {
      if (!this.validateForm()) return
      
      uni.showLoading({ title: '发布中...' })
      
      // 模拟API调用
      setTimeout(() => {
        uni.hideLoading()
        uni.showToast({ title: '发布成功', icon: 'success' })
        setTimeout(() => {
          uni.navigateBack()
        }, 1500)
      }, 2000)
    }
  },
  
  onLoad() {
    // 加载草稿
    const draft = uni.getStorageSync('cattle_draft')
    if (draft) {
      this.formData = { ...this.formData, ...draft }
    }
  }
}
</script>

<style scoped>
.publish-page {
  min-height: 100vh;
  background-color: #f5f5f5;
  padding-bottom: 120rpx;
}

/* 导航栏 */
.nav-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 88rpx;
  padding: 0 30rpx;
  background-color: #fff;
  border-bottom: 1rpx solid #eee;
}

.nav-left {
  width: 60rpx;
  height: 60rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.nav-icon {
  font-size: 36rpx;
  color: #333;
}

.nav-title {
  font-size: 32rpx;
  font-weight: 600;
  color: #333;
}

.nav-right {
  width: 60rpx;
}

/* 表单容器 */
.form-container {
  padding: 20rpx;
}

.form-section {
  background-color: #fff;
  border-radius: 16rpx;
  padding: 30rpx;
  margin-bottom: 20rpx;
}

.section-title {
  font-size: 32rpx;
  font-weight: 600;
  color: #333;
  margin-bottom: 30rpx;
}

/* 图片上传 */
.image-upload {
  width: 100%;
}

.image-list {
  display: flex;
  flex-wrap: wrap;
  gap: 20rpx;
}

.image-item {
  position: relative;
  width: 200rpx;
  height: 200rpx;
}

.uploaded-image {
  width: 100%;
  height: 100%;
  border-radius: 12rpx;
  object-fit: cover;
}

.delete-btn {
  position: absolute;
  top: -10rpx;
  right: -10rpx;
  width: 40rpx;
  height: 40rpx;
  background-color: #ff4757;
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24rpx;
}

.upload-btn {
  width: 200rpx;
  height: 200rpx;
  border: 2rpx dashed #ddd;
  border-radius: 12rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #999;
}

.upload-icon {
  font-size: 48rpx;
  margin-bottom: 10rpx;
}

.upload-text {
  font-size: 24rpx;
}

.upload-tip {
  font-size: 24rpx;
  color: #999;
  margin-top: 20rpx;
}

/* 表单项 */
.form-item {
  margin-bottom: 30rpx;
}

.item-label {
  font-size: 28rpx;
  color: #333;
  margin-bottom: 20rpx;
}

.required {
  color: #ff4757;
}

.form-input {
  width: 100%;
  height: 80rpx;
  padding: 0 20rpx;
  border: 1rpx solid #ddd;
  border-radius: 8rpx;
  font-size: 28rpx;
  background-color: #fff;
}

.picker-input {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 80rpx;
  padding: 0 20rpx;
  border: 1rpx solid #ddd;
  border-radius: 8rpx;
  font-size: 28rpx;
  background-color: #fff;
  color: #333;
}

.picker-arrow {
  color: #999;
  font-size: 24rpx;
}

.age-input, .weight-input, .price-input {
  display: flex;
  align-items: center;
  gap: 20rpx;
}

.age-unit, .weight-unit {
  font-size: 28rpx;
  color: #666;
}

.price-symbol {
  font-size: 32rpx;
  color: #333;
  font-weight: 600;
}

.form-textarea {
  width: 100%;
  min-height: 200rpx;
  padding: 20rpx;
  border: 1rpx solid #ddd;
  border-radius: 8rpx;
  font-size: 28rpx;
  background-color: #fff;
  resize: none;
}

.char-count {
  text-align: right;
  font-size: 24rpx;
  color: #999;
  margin-top: 10rpx;
}

/* 复选框组 */
.checkbox-group {
  display: flex;
  flex-wrap: wrap;
  gap: 30rpx;
}

.checkbox-item {
  display: flex;
  align-items: center;
  gap: 10rpx;
}

.checkbox-label {
  font-size: 28rpx;
  color: #333;
}

/* 底部按钮 */
.bottom-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  gap: 20rpx;
  padding: 20rpx 30rpx;
  background-color: #fff;
  border-top: 1rpx solid #eee;
}

.save-draft-btn {
  flex: 1;
  height: 80rpx;
  background-color: #f5f5f5;
  color: #666;
  border: none;
  border-radius: 40rpx;
  font-size: 28rpx;
}

.publish-btn {
  flex: 2;
  height: 80rpx;
  background-color: #007AFF;
  color: #fff;
  border: none;
  border-radius: 40rpx;
  font-size: 28rpx;
}
</style>