<template>
  <div class="divBox">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>规则</span>
      </div>
      <div  class="clearfix">
        <div class="container">
          <el-form :model="specsData.rule" label-width="120px" class="stage-form">
<!--            <el-form-item label="ID" prop="id">-->
<!--              <el-input v-model="specsData.rule.id" disabled></el-input>-->
<!--            </el-form-item>-->
            <el-form-item label="小苗阶段" prop="smallStage">
              <el-input v-model="specsData.rule.smallStage" placeholder="请输入小苗阶段"></el-input>
            </el-form-item>
            <el-form-item label="成长阶段" prop="growStage">
              <el-input v-model="specsData.rule.growStage" placeholder="请输入成长阶段"></el-input>
            </el-form-item>
            <el-form-item label="成熟阶段" prop="bigStage">
              <el-input v-model="specsData.rule.bigStage" placeholder="请输入成熟阶段"></el-input>
            </el-form-item>
            <el-form-item label="每次浇水量" prop="everyWater">
              <el-input-number v-model="specsData.rule.everyWater" :min="0"></el-input-number>
            </el-form-item>
            <el-form-item label="每次施肥量" prop="everyManure">
              <el-input-number v-model="specsData.rule.everyManure" :min="0"></el-input-number>
            </el-form-item>
<!--            <el-form-item label="每次施肥阶梯" prop="everyManureStair">-->
<!--              <el-input v-model="specsData.rule.everyManureStair" placeholder="请输入每次施肥阶梯"></el-input>-->
<!--            </el-form-item>-->
            <el-form-item label="每次光照" prop="everySunlight">
              <el-input-number v-model="specsData.rule.everySunlight" :min="0"></el-input-number>
            </el-form-item>
            <el-form-item label="每次光照阶梯" prop="everySunlightStair">
              <!-- 动态光照阶梯 -->

            </el-form-item>
            <el-form-item label="总浇水量" prop="waterTotal">
              <el-input-number v-model="specsData.rule.waterTotal" :min="0"></el-input-number>
            </el-form-item>

          </el-form>
        </div>
      </div>
    </el-card>
    <div class="mt20"></div>
    <div slot="header" class="clearfix">
      <router-link :to=" { path: '/marketing/coupon/list/saveTree' } ">
        <el-button size="small" type="primary" >添加茶株</el-button>
      </router-link>
    </div>
    <div class="mt20">
      <!-- <cards-data :cardLists="cardLists" v-if="checkPermi(['admin:order:list:data'])"></cards-data> -->
    </div>
    <el-table
      :data="specsData.items"
      style="width: 100%;">
      <el-table-column
        width="80"
        prop="gameId"
        header-align="center"
        align="center"
        label="茶株编号">
      </el-table-column>
      <el-table-column
      width="150"
      prop="productName"
      header-align="center"
      align="center"
      label="认领标题">
    </el-table-column>
      <el-table-column
        width="150"
        prop="title"
        header-align="center"
        align="center"
        label="认领副标题">
      </el-table-column>

      <el-table-column
        prop="productImage"
        header-align="center"
        align="center"
        label="茶株封面">
        <template slot-scope="scope">
          <div class="demo-image__preview">
            <el-image
              style="width: 36px; height: 36px"
              :src="scope.row.productImage"
              :preview-src-list="[scope.row.productImage]"
            />
          </div>
        </template>
      </el-table-column>
      <el-table-column
        prop="productPrice"
        header-align="center"
        align="center"
        label="茶株价格">
      </el-table-column>
      <el-table-column
        prop="gardener"
        header-align="center"
        align="center"
        label="养护人">
      </el-table-column>
      <el-table-column
        prop="soil"
        header-align="center"
        align="center"
        label="土壤">
      </el-table-column>
      <el-table-column
        prop="humidity"
        header-align="center"
        align="center"
        label="湿度">
      </el-table-column>
      <el-table-column
        prop="smallImage"
        header-align="center"
        align="center"
        label="树苗图">
        <template slot-scope="scope">
          <div class="demo-image__preview">
            <el-image
              style="width: 36px; height: 36px"
              :src="scope.row.smallImage"
              :preview-src-list="[scope.row.smallImage]"
            />
          </div>
        </template>
      </el-table-column>
      <el-table-column
        prop="growImage"
        header-align="center"
        align="center"
        label="成长图">
        <template slot-scope="scope">
          <div class="demo-image__preview">
            <el-image
              style="width: 36px; height: 36px"
              :src="scope.row.growImage"
              :preview-src-list="[scope.row.growImage]"
            />
          </div>
        </template>
      </el-table-column>
      <el-table-column
        prop="bigImage"
        header-align="center"
        align="center"
        label="成熟图">
        <template slot-scope="scope">
          <div class="demo-image__preview">
            <el-image
              style="width: 36px; height: 36px"
              :src="scope.row.bigImage"
              :preview-src-list="[scope.row.bigImage]"
            />
          </div>
        </template>
      </el-table-column>

      <el-table-column
        prop="allNum"
        header-align="center"
        align="center"
        label="领养总数">
      </el-table-column>
      <el-table-column
        prop="allNum"
        header-align="center"
        align="center"
        label="已领养数量">
      </el-table-column>
      <el-table-column
        prop="fruitNum"
        header-align="center"
        align="center"
        label="果实数量">
      </el-table-column>
      <el-table-column
        prop="treePlace"
        header-align="center"
        align="center"
        label="种植地点">
      </el-table-column>
      <el-table-column
        prop="bigImage"
        header-align="center"
        align="center"
        label="成熟图">
      </el-table-column>

      <el-table-column
        fixed="right"
        header-align="center"
        align="center"
        width="150"
        label="操作">
        <template slot-scope="scope">
          <el-button type="text" size="small" class="mr10"  @click="update(scope.$index,scope.row)">修改</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="mt20"></div>
    <el-button type="primary" @click="submit()">提交修改</el-button>
    <el-dialog
      title="提示"
      :visible.sync="visible"
      width="80%"
    >
      <el-form :model="teaPlants" :rules="rules" ref="formRef" label-width="120px" class="game-form">
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="茶株标题" prop="productName">
              <el-input v-model="teaPlants.productName" placeholder="请输入茶株标题"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="茶株副标题" prop="title">
              <el-input v-model="teaPlants.title" placeholder="请输入茶株副标题"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="茶株图" prop="productImage">
              <div class="upLoadPicBox" @click="modalPicTap('1','pi5')">
                <div v-if="teaPlants.productImage" class="pictrue"><img :src="teaPlants.productImage"></div>
                <div v-else class="upLoad">
                  <i class="el-icon-camera cameraIconfont"/>
                </div>
              </div>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="6">
            <el-form-item label="茶株价格" prop="productPrice">
              <el-input-number v-model="teaPlants.productPrice" :min="0" :precision="2" placeholder="请输入茶株价格"></el-input-number>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="发放数量" prop="allNum">
              <el-input-number v-model="teaPlants.allNum" :min="0" placeholder="请输入发放数量"></el-input-number>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="果实数" prop="fruitNum">
              <el-input-number v-model="teaPlants.fruitNum" :min="0" placeholder="请输入果实数"></el-input-number>
            </el-form-item>
          </el-col>
          <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="6">
            <el-form-item label="养护人" prop="gardener">
              <el-input v-model="teaPlants.gardener" placeholder="请输入养护人"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="土壤" prop="soil">
              <el-input v-model="teaPlants.soil" placeholder="请输入土壤类型"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="湿度" prop="humidity">
              <el-input v-model="teaPlants.humidity" placeholder="请输入湿度"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="6">
            <el-form-item label="小苗阶段图" prop="smallImage">
              <div class="upLoadPicBox" @click="modalPicTap('1','pi1')">
                <div v-if="teaPlants.smallImage" class="pictrue"><img :src="teaPlants.smallImage"></div>
                <div v-else class="upLoad">
                  <i class="el-icon-camera cameraIconfont"/>
                </div>
              </div>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="成长阶段图" prop="growImage">
              <div class="upLoadPicBox" @click="modalPicTap('1','pi2')">
                <div v-if="teaPlants.growImage" class="pictrue"><img :src="teaPlants.growImage"></div>
                <div v-else class="upLoad">
                  <i class="el-icon-camera cameraIconfont"/>
                </div>
              </div>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="成熟阶段图" prop="bigImage">
              <div class="upLoadPicBox" @click="modalPicTap('1','pi3')">
                <div v-if="teaPlants.bigImage" class="pictrue"><img :src="teaPlants.bigImage"></div>
                <div v-else class="upLoad">
                  <i class="el-icon-camera cameraIconfont"/>
                </div>
              </div>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="热门新品图" prop="hotImage">
              <div class="upLoadPicBox" @click="modalPicTap('1','pi4')">
                <div v-if="teaPlants.hotImage" class="pictrue"><img :src="teaPlants.hotImage"></div>
                <div v-else class="upLoad">
                  <i class="el-icon-camera cameraIconfont"/>
                </div>
              </div>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="种植位置" prop="treePlace">
          <el-input v-model="teaPlants.treePlace" placeholder="请输入种植位置"></el-input>
        </el-form-item>
        <el-form-item label="内容" prop="content">
          <el-input type="textarea" v-model="teaPlants.content" placeholder="请输入内容"></el-input>
        </el-form-item>
        <el-form-item label="热门显示天数" prop="hotDay">
          <el-input-number v-model="teaPlants.hotDay" :min="0" :max="30" placeholder="请输入热门显示天数"></el-input-number>
        </el-form-item>
        <el-form-item>
          <el-button v-hasPermi="['admin:game:update']" type="primary" @click="submitForm">提交</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import {marketingGameInfoListApi, marketingGameListApi} from "@/api/marketing";
import {gamesUpdateApi} from "@/api/games";
export default {
  data() {
    return {
      visible:false,
      gameFrom: {},
      specsData: {},
      teaPlants:{},
      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() {
    this.getDataList()
  },

  methods: {
    submitForm() {
      this.$refs.formRef.validate((valid) => {
        if (valid) {
          this.gameFrom[this.teaPlants.index] = this.teaPlants
          delete  this.teaPlants.index
          this.visible = false
        }
      });
    },
    //修改茶株
    update(index,row){
     this.teaPlants = row
     this.teaPlants.index = index
     this.visible = true
    },

    //最终提交
    submit(){
      //把items和rule改成str
      this.gameFrom.items = JSON.stringify(this.specsData.items)
      this.gameFrom.rule = JSON.stringify(this.specsData.rule)
      this.gameFrom.cid =  this.specsData.cid
      this.gameFrom.id =  this.specsData.id

      //todo
      this.gameFrom.image ="123"
      this.gameFrom.name ="茶株游戏"

      gamesUpdateApi(this.gameFrom).then(res =>{
        console.log(res)
      })

    },
    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');
    },
    // 列表
    getDataList() {
      marketingGameListApi({cid: 748}).then(res => {
        this.getInfo(res.list[0].id)
      })
    },
    getInfo(id) {
      marketingGameInfoListApi({id: id}).then(res => {
        this.specsData = res
        if (this.specsData.rule.everySunlightStair === null) {
          this.specsData.rule.everySunlightStair = []
        }
      })
    },
  }
}
</script>

<style scoped>


</style>
