<template>
	<div>
		<SelectGoods ref="selectGoods" @callback="selectGoos" />
		<AddRecommend :shopId="shopId" ref="addRecommend" />
		<Preferential :shopId="shopId" ref="preferential" />

		<el-row :gutter="10" class="mb8">
			<el-col :span="18">
				<el-button :type="item.id == btnId ? 'primary' : ''" v-for="item  in options" @click="setData(item)"
					:key="item.id">{{ item.name }}
				</el-button>
			</el-col>
			<el-col :span="6">
				<el-button type="primary" @click="openSelectGoos" plain icon="el-icon-plus" size="small">添加商品
				</el-button>
				<el-button type="danger" @click="soldOutGoos"  plain icon="el-icon-minus" size="small">下架商品</el-button>
			</el-col>
		</el-row>
		<el-table v-loading="loading" :data="list"  @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center" />
			<el-table-column label="商品名称" align="center" prop="name" width="200">
        <template slot-scope="scope">
          <div style="display: flex;align-items: center">
            <div>
              <span>{{scope.row.name}}</span>
            </div>          
            <div style="margin-left: 8px;margin-right: 8px">
              <el-button v-show="scope.row.recommend=='0'" type="text"> 荐</el-button>
            </div>
            <div>
              <el-button style="color:red" v-show="scope.row.preferential=='0'" type="text">惠</el-button>
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="缩略图" align="center" prop="" width="150">
        <template slot-scope="scope">              
           <div class="image-tmp">
            <el-image style="width: 100px; height: 100px"  :src="getPicsList(scope.row.pics)" :preview-src-list="getPicsBigList(scope.row.pics)">
              <div slot="error" class="image-slot"></div>            
            </el-image>
          </div>    
        </template>
      </el-table-column>
			<el-table-column label="折扣价" align="center" prop="discount" />
			<el-table-column label="总销量" align="center" prop="salesVolume" />
      <el-table-column label="上架时间" align="center" prop="shelfat" width="150" /> 
			<el-table-column label="状态" align="center" prop="state" width="150">
        <!-- <template slot-scope="scope">
          <span v-if="scope.row.state == 1">已创建</span>
          <span v-if="scope.row.state == 2">已完成编程</span>
          <span v-if="scope.row.state == 3">已上架</span>
          <span v-if="scope.row.state == 4">已下架</span>
          <span v-if="scope.row.state == 5">已删除</span>
        </template> -->
      </el-table-column>
			<el-table-column label="排序" align="center">
			</el-table-column>
			<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
				<template slot-scope="scope">
					<el-button size="mini" @click="addRecommend(scope.row)" type="text">
						推荐
					</el-button>
					<el-button @click="preferential(scope.row)" size="mini" type="text">
						特惠
					</el-button>
				</template>
			</el-table-column>
		</el-table>
	</div>
</template>

<script>
import { getCategoryGoods, addGoods ,offGoods} from "@/api/system/shop";
import SelectGoods from '@/components/SelectGoods';
import AddRecommend from './addRecommend.vue'
import Preferential from './preferential.vue';

export default {
	props: ['shopId'],
	watch: {
		zshopId() {
			this.options = []
			this.btnId = '';
			this.list = []
			this.getList()
		}
	},
	components: { SelectGoods, AddRecommend, Preferential },
	data() {
		return {
			loading: false,
			list: [],
			options: [],
			btnId: '',
      outIds: ''
		}
	},
	mounted() {
		this.getList()
	},
	methods: {
    getPicsList(str){   
      let picObj = JSON.parse(str);  
      return picObj.thumbnail
    },
    getPicsBigList(str){
      let list=[];
      let picObj = JSON.parse(str);  
      list.push(picObj.thumbnail)
      return list;
    },
		addRecommend(data) {
			this.$refs.addRecommend.openModal(data)
		},
		preferential(data) {
			this.$refs.preferential.openModal(data)
		},
		setData(data) {
			this.list = data.goodsList;
			this.btnId = data.id
		},
		getList() {
			if (!this.shopId) return;
			getCategoryGoods(this.shopId).then(({ data }) => {
				if (data && data.length > 0) {
					this.options = data;
					this.list = data[0].goodsList;
					this.btnId = data[0].id
				}
			})
		},
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.outIds = selection.map((item) => item.id);
    },
    soldOutGoos(){
      // offGoods({"shopId":this.shopId,"goodsIds":this.outIds}).then(({ response }) => {
			// 	console.log("response",response);
			// })

      this.$modal
        .confirm('是否确认下架所选商品？')
        .then(function () {
          return offGoods({"shopId":this.shopId,"goodsIds":this.outIds});
        })
        .then((response) => {
          // console.log("response",response);
          // if(response.code=="200"){
          //   this.getList();
            //this.$modal.msgSuccess('' + mess + '成功');
          // }          
        })
        .catch(() => { });





    },
		openSelectGoos() {
			this.$refs.selectGoods.openModal()
		},
		selectGoos(ids) {
			addGoods({ shopId: this.shopId, goodsIds: ids.join(',') }).then(res => {
				this.getList()
			})
		}
	}
}
</script>

<style>
.flex {
	height: 50px;
	align-items: center;
	text-align: right;

}
</style>