<template>
  <div>
    <el-form ref="form" :model="market" label-width="80px">
      <el-form-item label="查询商品名称">
         <el-input v-model="market.name"></el-input>
       </el-form-item>
      <el-form-item label="查询商品状态">
        <el-input v-model="market.status"></el-input>
      </el-form-item>
    </el-form>


    <el-button type="text" @click="dialogFormVisible = true">添加商品</el-button>
    <el-dialog title="添加商品" :visible.sync="dialogFormVisible">
      <el-steps :active="active" finish-status="success">
        <el-step title="选择商品"></el-step>
        <el-step title="填写信息"></el-step>
        <el-step title="规格信息"></el-step>
        <el-step title="修改详情"></el-step>
      </el-steps>
      <el-form :model="form">
        <div v-show="active === 0">
          <!-- Table -->
          <el-button type="text" @click="dialogTableVisible = true">选择商品</el-button>
          <el-dialog title="商品列表" :visible.sync="dialogTableVisible">
            <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="carouselImages" width="100">
                <template slot-scope="scope">
                  <image-preview :src="scope.row.carouselImages" :width="50" :height="50"/>
                </template>
              </el-table-column>
              <el-table-column label="商品状态" align="center" prop="status">
                <template slot-scope="scope">
                  <dict-tag :options="dict.type.sys_yes_no" :value="scope.row.status"/>
                </template>
              </el-table-column>
              <el-table-column label="规格" align="center" prop="ruleId" />
              <el-table-column label="品牌" align="center" prop="brandId" />
              <el-table-column label="备注" align="center" prop="remark" />
            </el-table>
            <el-button type="primary" @click="addProduct()">确 定</el-button>
          </el-dialog>
          <el-form>
            <el-form-item label="商品Id">
              <el-input v-model="productList.projectId"></el-input>
            </el-form-item>
            <el-form-item label="商品图片" prop="image">
                <image-upload v-model="productList.image"/>
           </el-form-item>
          </el-form>
        </div>
        <div v-show="active === 1">
          <el-form label-width="80px" :model="form">
            <el-form-item label="拼团活动名称">
              <el-input v-model="form.name"></el-input>
            </el-form-item>
            <el-form-item label="拼团活动简介">
              <el-input v-model="form.introduction"></el-input>
            </el-form-item>
            <el-form-item label="商品单位">
              <el-input v-model="form.unit"></el-input>
            </el-form-item>
            <el-form-item label="商品轮播图" prop="carouselImages">
              <image-upload v-model="form.carouselImages"/>
            </el-form-item>
          </el-form>
          -------------------------------------------------------------------------
          <el-form label-width="80px" :model="form">
            <el-form-item label="过期时间">
              <el-date-picker
                v-model="formTeamData.endTime"
                type="date"
                placeholder="选择日期">
              </el-date-picker>
            </el-form-item>
          <el-form-item label="策略状态">
            <el-input v-model="form.strategyType"></el-input>
          </el-form-item>
            <el-form-item label="策略Id">
              <el-input v-model="form.strategyId"></el-input>
            </el-form-item>
          </el-form>
        </div>
        <div v-show="active === 2">
          <el-form :model="formTeamData">
            <el-table
              ref="multipleTable"
              :data="skuData"
              tooltip-effect="dark"
              style="width: 150%"
              @selection-change="handleSelection">
              <el-table-column
                type="selection"
                width="55">
              </el-table-column>
              <el-table-column label="规格" align="center" prop="sku" />
              <el-table-column label="规格库存" align="center" prop="stock" />
              <el-table-column label="规格价格" align="center" prop="price" />
              <el-table-column property="groupStock" label="拼团库存" width="160px" >
                <template #default="scope">
                  <el-input v-model="scope.row.groupStock" style="width: 60px; margin: 0px 15px" clearable />
                </template>
              </el-table-column>
              <el-table-column property="groupPrice" label="拼团价格" width="160px" >
                <template #default="scope">
                  <el-input v-model="scope.row.groupPrice" style="width: 60px; margin: 0px 15px" clearable />
                </template>
              </el-table-column>
            </el-table>
          </el-form>
        </div>
        <div v-show="active === 3">
          <el-form-item label="商品描述" prop="introduction">
            <editor v-model="form.content" :min-height="192"/>
          </el-form-item>
        </div>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <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>
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="submit()">确 定</el-button>
      </div>
    </el-dialog>

    <template>
      <el-table
        :data="tableData"
        style="width: 100%">
        <el-table-column label="ID编号" width="180">
          <template slot-scope="scope"><span style="margin-left: 10px">{{ scope.row.id }}</span></template>
        </el-table-column>
        <el-table-column label="拼团名称" width="180">
          <template slot-scope="scope"><span style="margin-left: 10px">{{ scope.row.name }}</span></template>
        </el-table-column>
<!--        <el-table-column label="拼团商品图片" width="180">-->
<!--          <template slot-scope="scope"><span style="margin-left: 10px">{{ scope.row.productImage }}</span></template>-->
<!--        </el-table-column>-->
        <el-table-column label="拼团商品图片" align="center" prop="image" width="100">
          <template slot-scope="scope">
            <image-preview :src="scope.row.productImage" :width="50" :height="50"/>
          </template>
        </el-table-column>
        <el-table-column label="拼团价格" width="180">
          <template slot-scope="scope"><span style="margin-left: 10px">{{ scope.row.teamPrice }}</span></template>
        </el-table-column>
        <el-table-column label="拼团人数" width="180">
          <template slot-scope="scope"><span style="margin-left: 10px">{{ scope.row.attendNumber }}</span></template>
        </el-table-column>
        <el-table-column label="开团人数" width="180">
          <template slot-scope="scope"><span style="margin-left: 10px">{{ scope.row.openTeamNumber }}</span></template>
        </el-table-column>
        <el-table-column label="参团人数" width="180">
          <template slot-scope="scope"><span style="margin-left: 10px">{{ scope.row.addTeamNumber }}</span></template>
        </el-table-column>
        <el-table-column label="团购库存" width="180">
          <template slot-scope="scope"><span style="margin-left: 10px">{{ scope.row.teamStock }}</span></template>
        </el-table-column>
        <el-table-column label="剩余库存" width="180">
          <template slot-scope="scope"><span style="margin-left: 10px">{{ scope.row.remainStock }}</span></template>
        </el-table-column>
        <el-table-column label="团购结束时间" width="180">
          <template slot-scope="scope"><span style="margin-left: 10px">{{ scope.row.endTime }}</span></template>
        </el-table-column>
        <el-table-column label="团购状态" width="180">
          <template slot-scope="scope"><span style="margin-left: 10px">{{ scope.row.status }}</span></template>
        </el-table-column>
      </el-table>
      <div>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="market.pageNum"
        :page-sizes="[10, 20, 30, 50]"
        :page-size="market.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="market.total">
      </el-pagination>
      </div>
    </template>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）,
//例如：import 《组件名称》 from '《组件路径》,


import {addInfoActivity, listAttrimarketing} from "@/api/marketing/marketing";
import {getCacheInfo, getProduct, listInfo} from '@/api/product/info'
import {getSkuList} from "@/api/product/sku";

export default {
    //import引入的组件需要注入到对象中才能使用"
    components: {},
    props: {},
  name: "Info",
  dicts: ['sys_yes_no'],
    data() {
      //这里存放数据"

      return {
        // 选中数组
        ids: [],
        tableData:[],
        market:{
          pageNum:1,
          pageSize:10,
          total:0,
          name:"",
          status:"",
          carouselImages:null,
          introduction:null,
        },
        ruleList: [],
        form:{

        },
        formTeamData: {
          carouselImages: '',
          groupIntroduction: ''
        },
        skuData: [],
        infoList:[],
        productList:{
          projectId:"",
          image:""
        },
        addForm:[],
        active: 0,
        dialogTableVisible: false,
        dialogFormVisible: false,
        formLabelWidth: '120px',
        formLabelAlign: {},
        skuList:[],
      };
    },
    //计算属性 类似于data概念",
    computed: {

    },
    //监控data中的数据变化",
    watch: {

    },
    //方法集合",
    methods: {
     /**下一页*/
      next() {
        if (this.active++ > 3) this.active = 0;
      },
      /** 查询商品信息列表 */
      getList() {
        listInfo().then(response => {
          this.infoList = response.data.rows;
          let productId = this.infoList[0].id
          getSkuList(productId).then(res =>{
            this.skuData=res.data
          })
        });
      },
      /**分页条数*/
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
        this.market.pageSize = val
        this.marketingList()
      },
      /**分页页数*/
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
        this.market.pageNum = val
        this.marketingList()
      },
      /**上一页*/
      last() {
        this.active--
      },
      /**拼团活动列表*/
      marketingList(){
        listAttrimarketing(this.market).then(res=>{
          this.tableData = res.data.rows
          this.market.total = res.data.total
        })
      },
      /**商品表回显Id,和图片*/
      addProduct(){
        console.log(this.infoList)
        console.log(this.productList.projectId)
        this.productList.projectId = this.infoList[0].id;
        this.productList.image = this.infoList[0].image
        this.dialogTableVisible = false;
      },
      /**添加拼团活动*/
      submit(){
          this.dialogTableVisible = false;
          for(let i = 0 ;i<this.skuList.length;i++){
            this.skuList[i].productSku = this.skuList[i].sku
            this.skuList[i].teamPrice = this.skuList[i].groupPrice
            this.skuList[i].teamStock = this.skuList[i].groupStock
          }
          this.form.productId  = this.infoList[0].id
          this.form.skuList = this.skuList
          addInfoActivity(this.form).then(res=>{
            console.log(res.data)
            this.$message.success("添加成功")
            this.dialogFormVisible = false
            this.marketingList()
        })
      },
      handleSelection(val) {
        this.skuList = val;
      },
    },
    //生命周期 - 创建完成（可以访问当前this实例）",
    created() {
      this.marketingList();
      this.getList();
    },
    //生命周期 - 挂载完成（可以访问DOM元素）",
    mounted() {
    },
    beforeCreate() {
    }, //生命周期 - 创建之前",
    beforeMount() {
    }, //生命周期 - 挂载之前",
    beforeUpdate() {
    }, //生命周期 - 更新之前",
    updated() {
    }, //生命周期 - 更新之后",
    beforeDestroy() {
    }, //生命周期 - 销毁之前",
    destroyed() {
    }, //生命周期 - 销毁完成",
    activated() {
    } //如果页面有keep-alive缓存功能，这个函数会触发",
  };
</script>
<style scoped>

</style>
