<template>

  <div>
    <el-button type="primary" @click="centerDialogVisible = true" plain>添加拼团</el-button>
    <el-dialog title="添加拼团" :visible.sync="centerDialogVisible" width="100%" center>
      <div>

        <el-steps :active="active" finish-status="success">
          <el-step title="选择商品"></el-step>
          <el-step title="添加详情"></el-step>
          <el-step title="修改详情"></el-step>
        </el-steps>
        <el-divider></el-divider>
        <el-form ref="form" :model="form" :rules="rules" label-width="80px">
          <!-- 1:添加详情-->
          <div v-show="active === 0">
            <!-- 图片-->
            <div class="demo-image" >
              <div class="block" v-for="fit in fits" :key="fit">
                <span class="demonstration">{{ fit }}</span>
                <!-- 点击图片触发 商品列表-->
                <el-image type="getGoods"  @click="getListSelectGoods = true" plain style="width: 100px; height: 100px" :src="url" :fit="fits"
                ></el-image>
                <el-dialog title="选择拼团商品" :visible.sync="getListSelectGoods" width="50%" center>
                  <!-- 商品列表-->
                  <el-table :data="infoList" >
                    <el-table-column type="selection" width="55" align="center" />
                    <el-table-column label="主键" align="center" prop="id" />
                    <el-table-column label="商品名称" align="center" prop="name" />
                    <el-table-column label="商品描述" align="center" prop="introduction" />
                    <el-table-column label="主类型" align="center" prop="mianType" />
                    <el-table-column label="父类型" align="center" prop="parentType" />
                    <el-table-column label="商品类型" align="center" prop="type" />
                    <el-table-column label="商品图片" align="center" prop="image" width="100">
                      <template slot-scope="scope">
                        <image-preview :src="scope.row.image" :width="50" :height="50"/>
                      </template>
                    </el-table-column>
                    <el-table-column label="规格" align="center" prop="ruleId" />
                    <el-table-column label="品牌" align="center" prop="brandId" />
                  </el-table>
                  <el-button @click="addGoodsIdYes = false">取 消</el-button>
                  <el-button type="getGoods" @click="getGoods()">确 定</el-button>
                </el-dialog>

              </div>
            </div>
          </div>
          <!-- 2:添加详情-->
          <div v-show="active === 1">
            <el-form-item label="拼团活动名称">
              <el-input v-model="form.activityName"></el-input>
            </el-form-item>
            <el-form-item label="拼团活动简介">
              <el-input type="textarea" v-model="form.activities"></el-input>
            </el-form-item>

            <el-form-item label="商品单位">
              <el-select v-model="form.projectUnit" placeholder="请选择商品单位">
                <el-option label="件" value="shanghai"></el-option>
                <el-option label="个" value="beijing"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="商品轮播图">
              <el-upload action="#" list-type="picture-card" :auto-upload="false">
                <el-icon>
                  <Plus/>
                </el-icon>
                <template #file="{ file }">
                  <div>
                    <img class="el-upload-list__item-thumbnail" :src="file.carouselImages" alt=""/>
                    <span class="el-upload-list__item-actions">
                     <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
            <el-icon><zoom-in/></el-icon>
          </span>
          <span
            v-if="!disabled"
            class="el-upload-list__item-delete"
            @click="handleDownload(file)"
          >
            <el-icon><Download/></el-icon>
          </span>
          <span
            v-if="!disabled"
            class="el-upload-list__item-delete"
            @click="handleRemove(file)"
          >
            <el-icon><Delete/></el-icon>
          </span>
        </span>
                  </div>
                </template>
              </el-upload>

              <el-dialog v-model="dialogVisible">
                <img w-full :src="dialogImageUrl" alt="Preview Image"/>
              </el-dialog>
            </el-form-item>

            <el-divider></el-divider>


            <el-form-item label="活动时间">
              <el-col :span="11">
                <el-date-picker
                  v-model="form.endTime"
                  type="date"
                  aria-label="Pick a date"
                  placeholder="Pick a date"
                  style="width: 70%"
                />
                <br>设置活动开启结束时间，用户可以在设置时间内发起参与拼团
              </el-col>
            </el-form-item>

            <el-form-item label="拼团时效">
              <el-col :span="11">
                <el-date-picker
                  v-model="form.date1"
                  type="date"
                  aria-label="Pick a date"
                  placeholder="Pick a date"
                  style="width: 100%"
                />
                <br> 用户发起拼团后开始计时，需在设置时间内邀请到规定好友人数参团，超过时效时间，则系统判定拼团失败，自动发起退款
              </el-col>
            </el-form-item>
            <el-form-item label="拼团人数" style="width: 70%">
              <el-input v-model="form.name"></el-input>
            </el-form-item>

            <el-form-item label="总购买数量限制" style="width: 70%">
              <el-input v-model="form.name"></el-input>
            </el-form-item>


            <el-form-item label="单次购买数量限制" style="width: 70%">
              <el-input v-model="form.name"></el-input>
            </el-form-item>


            <el-form-item label="补齐人数" style="width: 70%">
              <el-input v-model="form.name"></el-input>
            </el-form-item>

            <el-form-item label="规格" style="width: 70%">

            </el-form-item>
            <el-divider></el-divider>
            <el-form-item label="排序" style="width: 70%">
              <el-input v-model="form.name"></el-input>
            </el-form-item>
          </div>
          <!-- 3:修改详情-->
          <div v-show="active === 2">
            <div class="common-layout">
              <el-container>
                <el-aside style="width: 70%">
                  <el-form-item label="编辑详情">
                    <el-input type="textarea" v-model="form.goodsDetails" style="width: 70%"></el-input>
                  </el-form-item>
                </el-aside>

                <el-main style="width: 70%">
                  <div>
                    <span>商品详情:</span>
                    <br>
                    <img :src="url">
                  </div>
                </el-main>
              </el-container>
            </div>
          </div>
        </el-form>
        <el-button style="margin-top: 12px;" @click="last" v-if="active > 0">上一步</el-button>
        <el-button style="margin-top: 12px;" @click="next" v-if="active < 3">下一步</el-button>
      </div>

      <span slot="footer" class="dialog-footer">
    <el-button @click="centerDialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="centerDialogVisible = false">确 定</el-button>
  </span>
    </el-dialog>
  </div>

</template>

<script>
import { listInfo } from '@/api/product/info'
export default {
  data() {
    return {
      loading: true,
      fits: [''],
      //添加拼团
      form: {},
      //商品列表
      infoList: [],
      url: 'https://qianqiao.obs.cn-east-3.myhuaweicloud.com/8f8577e412e64fefbbeb7ec0ce015d58~tplv-p14lwwcsbr-x2-q75-r_248_332_q75.jpg',

      queryParams: {
        pageNum: 1,
        pageSize: 10,
        name: null,
        introduction: null,
        mianType: null,
        parentType: null,
        type: null,
        image: null,
        carouselImages: null,
        status: null,
        ruleId: null,
        brandId: null,
      },
      //添加拼团
      ActivityTeamInfoReq: {},
      goods: {},
      //步骤条下标
      active: 0,
      //对话框
      centerDialogVisible: false,
      getListSelectGoods: false,
      addGoodsIdYes: false,
      addGoodsIdNo: false,
    }

  },
  created() {
    this.getList();
  },
  methods: {
    getGoods(){
     this.addGoodsIdYes = false
    },
    /** 查询商品信息列表 */
    getList() {
      this.loading = true;
      listInfo(this.queryParams).then(response => {
        this.infoList = response.data.rows;
        this.total = response.data.total;
        this.loading = false;
      });
    },


    next() {
      if (this.active++ > 2) this.active = 0
    },
    last() {
      if (this.active-- < 0) this.active = 0
    }
  }

}
</script>

<style>
.el-select-dropdown__item {
  height: 45px;
}

.box-card {
  margin: 10px;
}
</style>
