<template>
  <div class="add-game-tree-item">
    <el-form :model="form" :rules="rules" ref="formRef" label-width="120px" class="game-form">
      <el-form-item label="茶株标题" prop="productName">
        <el-input v-model="form.productName" placeholder="请输入茶株标题"></el-input>
      </el-form-item>
      <el-form-item label="茶株副标题" prop="title">
        <el-input v-model="form.title" placeholder="请输入茶株副标题"></el-input>
      </el-form-item>

      <el-form-item label="茶株图" prop="productImage">
        <div class="upLoadPicBox" @click="modalPicTap('1','pi5')">
          <div v-if="form.productImage" class="pictrue"><img :src="form.productImage"></div>
          <div v-else class="upLoad">
            <i class="el-icon-camera cameraIconfont"/>
          </div>
        </div>
      </el-form-item>

      <el-form-item label="茶株价格" prop="productPrice">
        <el-input-number v-model="form.productPrice" :min="0" :precision="2" placeholder="请输入茶株价格"></el-input-number>
      </el-form-item>

      <el-form-item label="发放数量" prop="allNum">
        <el-input-number v-model="form.allNum" :min="0" placeholder="请输入发放数量"></el-input-number>
      </el-form-item>


      <el-form-item label="果实数" prop="fruitNum">
        <el-input-number v-model="form.fruitNum" :min="0" placeholder="请输入果实数"></el-input-number>
      </el-form-item>

      <el-form-item label="种植位置" prop="treePlace">
        <el-input v-model="form.treePlace" placeholder="请输入种植位置"></el-input>
      </el-form-item>

      <el-form-item label="养护人" prop="gardener">
        <el-input v-model="form.gardener" placeholder="请输入养护人"></el-input>
      </el-form-item>

      <el-form-item label="土壤" prop="soil">
        <el-input v-model="form.soil" placeholder="请输入土壤类型"></el-input>
      </el-form-item>

      <el-form-item label="湿度" prop="humidity">
        <el-input v-model="form.humidity" placeholder="请输入湿度"></el-input>
      </el-form-item>

      <el-form-item label="内容" prop="content">
        <el-input type="textarea" v-model="form.content" placeholder="请输入内容"></el-input>
      </el-form-item>

      <el-form-item label="小苗阶段图" prop="smallImage">
        <div class="upLoadPicBox" @click="modalPicTap('1','pi1')">
          <div v-if="form.smallImage" class="pictrue"><img :src="form.smallImage"></div>
          <div v-else class="upLoad">
            <i class="el-icon-camera cameraIconfont"/>
          </div>
        </div>
      </el-form-item>

      <el-form-item label="成长阶段图" prop="growImage">
        <div class="upLoadPicBox" @click="modalPicTap('1','pi2')">
          <div v-if="form.growImage" class="pictrue"><img :src="form.growImage"></div>
          <div v-else class="upLoad">
            <i class="el-icon-camera cameraIconfont"/>
          </div>
        </div>
      </el-form-item>

      <el-form-item label="成熟阶段图" prop="bigImage">
        <div class="upLoadPicBox" @click="modalPicTap('1','pi3')">
          <div v-if="form.bigImage" class="pictrue"><img :src="form.bigImage"></div>
          <div v-else class="upLoad">
            <i class="el-icon-camera cameraIconfont"/>
          </div>
        </div>
      </el-form-item>

      <el-form-item label="热门新品图" prop="hotImage">
        <div class="upLoadPicBox" @click="modalPicTap('1','pi4')">
          <div v-if="form.hotImage" class="pictrue"><img :src="form.hotImage"></div>
          <div v-else class="upLoad">
            <i class="el-icon-camera cameraIconfont"/>
          </div>
        </div>
      </el-form-item>

      <el-form-item label="热门显示天数" prop="hotDay">
        <el-input-number v-model="form.hotDay" :min="0" :max="30" placeholder="请输入热门显示天数"></el-input-number>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="submitForm">提交</el-button>
        <el-button @click="resetForm">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import {marketingGameInfoListApi} from "@/api/marketing";

export default {
  data() {
    return {
      isDisabled: this.$route.params.isDisabled === '1',
      form: {
        title: '',
        productName: '',
        productImage: '',
        productPrice: 0.00,
        allNum: 0,
        fruitNum: 0,
        treePlace: '',
        gardener: '',
        soil: '',
        humidity: '',
        content: '',
        smallImage: '',
        growImage: '',
        bigImage: '',
        hotImage: '',
        hotDay: 0,
      },
      rules: {
        title: [{ required: true, message: '请输入商品副标题', trigger: 'blur' }],
        productId: [
          { required: true, message: '请输入商品编号', trigger: 'blur' },
          { type: 'number', message: '商品编号必须是数字', trigger: 'blur' },
        ],
        productName: [{ required: true, message: '请输入商品名称', trigger: 'blur' }],
        productImage: [{ required: true, message: '请输入商品图链接', trigger: 'blur' }],
        productPrice: [
          { required: true, message: '请输入商品价值', trigger: 'blur' },
          { type: 'number', message: '商品价值必须是数字', trigger: 'blur' },
        ],
        allNum: [
          { required: true, message: '请输入总共数量', trigger: 'blur' },
          { type: 'number', message: '总共数量必须是数字', trigger: 'blur' },
        ],
        outNum: [
          { required: true, message: '请输入支出数量', trigger: 'blur' },
          { type: 'number', message: '支出数量必须是数字', trigger: 'blur' },
        ],
        fruitNum: [
          { required: true, message: '请输入果实数', trigger: 'blur' },
          { type: 'number', message: '果实数必须是数字', trigger: 'blur' },
        ],
        treePlace: [{ required: true, message: '请输入种植地点', trigger: 'blur' }],
        gardener: [{ required: true, message: '请输入养护人', trigger: 'blur' }],
        soil: [{ required: true, message: '请输入土壤类型', trigger: 'blur' }],
        humidity: [{ required: true, message: '请输入湿度', trigger: 'blur' }],
        content: [{ required: true, message: '请输入活动内容', trigger: 'blur' }],
        smallImage: [{ required: true, message: '请输入小苗阶段图链接', trigger: 'blur' }],
        growImage: [{ required: true, message: '请输入成长阶段图链接', trigger: 'blur' }],
        bigImage: [{ required: true, message: '请输入成熟阶段图链接', trigger: 'blur' }],
        hotImage: [{ required: true, message: '请输入热门新品图链接', trigger: 'blur' }],
        hotDay: [
          { required: true, message: '请输入热门新品显示天数', trigger: 'blur' },
          { type: 'number', message: '热门新品显示天数必须是数字', trigger: 'blur' },
        ],
        status: [{ required: true, message: '请选择状态', trigger: 'change' }],
      },
    };
  },

  mounted() {
    if ( this.$route.params.id ) {
      console.log( this.$route.params.id)
      marketingGameInfoListApi({id: this.$route.params.id}).then(res =>{
        console.log(res)
      })
    }
  },
  methods: {
    getDataFrom() {

    },
    modalPicTap(tit, num) {
      const _this = this;
      this.$modalUpload(function (img) {
        if (tit === '1') {
          switch (num) {
            case 'pi1':
              _this.form.smallImage = img[0].sattDir;
              break;
            case 'pi2':
              _this.form.growImage = img[0].sattDir;
              break;
            case 'pi3':
              _this.form.bigImage = img[0].sattDir;
              break;
            case 'pi4':
              _this.form.hotImage = img[0].sattDir;
              break;
            case 'pi5':
              _this.form.productImage = img[0].sattDir;
              break;
          }
        }
      }, tit, 'content');
    },
    submitForm() {
      this.$refs.formRef.validate((valid) => {
        if (valid) {

        }
      });
    },
    resetForm() {
      this.$refs.formRef.resetFields();
    },
  },
};
</script>

<style scoped>
.game-form {
  width: 80%;
  margin: 20px auto;
}
</style>
