<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" label-width="120px" class="stage-form">
            <el-form-item label="活动名称" prop="name">
              <el-input v-model="specsData.name"></el-input>
            </el-form-item>
            <el-form-item label="活动开始时间" prop="beginTime">
              <el-date-picker
                v-model="specsData.beginTime"
                type="datetime"
                placeholder="选择日期时间">
              </el-date-picker>

            </el-form-item>
            <el-form-item label="活动结束时间" prop="endTime">
              <el-date-picker
                v-model="specsData.endTime"
                type="datetime"
                placeholder="选择日期时间">
              </el-date-picker>

            </el-form-item>
          </el-form>
        </div>
      </div>
    </el-card>
    <div class="mt20"></div>


    <el-table
      :data="specsData.items"
      style="width: 100%;">

      <el-table-column
        width="150"
        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
        width="150"
        prop="productName"
        header-align="center"
        align="center"
        label="名称">
      </el-table-column>
      <el-table-column
        prop="productType"
        header-align="center"
        align="center"
        label="奖品">

        <template slot-scope="scope">
          {{ intToString(scope.row.productType)}}
        </template>
      </el-table-column>
      <el-table-column
        prop="message"
        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="lotteryRate"
        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="50%"
    >
      <el-form :model="teaPlants" :rules="rules" ref="formRef" label-width="120px" class="game-form">
        <el-form-item label="奖品图片">
          <div class="upLoadPicBox" @click="modalPicTap('1','pi3')">
            <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-form-item label="奖品名称">
          <el-input v-model="teaPlants.productName"/>
        </el-form-item>

        <el-form-item label="提示语">
          <el-input v-model="teaPlants.message"/>
        </el-form-item>
        <el-form-item label="奖品数量">
          <el-input type="number" v-model="teaPlants.allNum"/>
        </el-form-item>
        <el-form-item label="奖品概率">
          <el-input type="number" v-model="teaPlants.lotteryRate"/>
        </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 Tinymce from '@/components/Tinymce/index.vue'
import {bargainDeleteApi, marketingGameInfoListApi, marketingGameListApi} from "@/api/marketing";
import {gamesUpdateApi} from "@/api/games";

export default {
  components: {Tinymce},
  // everySunlightStair
  data() {
    return {
      visible: false,
      gameFrom: {},
      specsData: {},
      teaPlants: {},
      typeOptions: [
        { value: 0, label: '优惠券' },
        { value: 1, label: '水滴' },
        { value: 2, label: '阳光值' },
        { value: 3, label: '肥料' },
        { value: 4, label: '积分' },
        { value: 5, label: '谢谢惠顾' },
      ],
      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: {
    intToString(value) {
      const mappings = {
        0: '优惠券',
        1: '水滴',
        2: '阳光值',
        3: '肥料',
        4: '积分',
        5: '谢谢惠顾',
      };
      return mappings[value] || '未知类型'; // 如果找不到匹配值，返回默认值
    },
    submitForm() {
      this.$refs.formRef.validate((valid) => {
        if (valid) {
          if (this.teaPlants.id === undefined) {
            this.specsData.items.push(this.teaPlants)
          } else {
            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 = "茶株游戏不需要图片"
      this.gameFrom.name = this.specsData.name
      gamesUpdateApi(this.gameFrom).then(() => {
        this.$message.success('操作成功');
      })
    },
    modalPicTap(tit, num) {
      const _this = this;
      this.$modalUpload(function (img) {
        console.log(img)
        if (tit === '1') {
          switch (num) {
            case 'pi1':
              _this.teaPlants.smallImage = img[0].sattDir;
              break;
            case 'pi2':
              _this.teaPlants.growImage = img[0].sattDir;
              break;
            case 'pi3':
              _this.teaPlants.productImage = img[0].sattDir;
              break;
            case 'pi4':
              _this.teaPlants.hotImage = img[0].sattDir;
              break;
            case 'pi5':
              _this.teaPlants.productImage = img[0].sattDir;
              break;
          }
        }
      }, tit, 'content');
    },
    // 列表
    getDataList() {
      marketingGameListApi({cid: 747}).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>
.input-row {
  display: flex; /* 使用 Flex 布局 */
  align-items: center; /* 垂直居中 */
  gap: 5px; /* 控制子元素之间的间距 */
}

.input-item {
  flex: 1; /* 控制输入框的宽度，如果需要调整大小比例可以设置 flex 属性 */
}

</style>
