<template>
	<div>
		<el-table v-loading="loading" :data="orderList">
			<el-table-column label="商品名称" align="center" prop="name" />
      <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="categoryName" width="100" />
			<el-table-column label="折扣价" align="center" prop="discount" />
			<el-table-column label="原价" align="center" prop="price" />
			<el-table-column label="总销售" align="center" prop="salesVolume" />
      <el-table-column label="推荐时间" align="center" prop="recommendDate" />
      <el-table-column label="推荐排序">
        <template slot-scope="scope">
          <div style="display: flex;">
            <div>
              <el-button v-show="scope.$index!=0" size="mini" round icon="el-icon-arrow-up" @click="turnClick(scope.row,'1')"></el-button>
            </div>   
            <div>
              <el-button v-show="scope.$index+1!=total" size="mini" round icon="el-icon-arrow-down" @click="turnClick(scope.row,'2')"></el-button>
            </div> 
          </div>             
        </template>
      </el-table-column>
			<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
				<template slot-scope="scope">
					<el-popconfirm title="确定要移除吗？" @confirm="removeRecommend(scope.row)">
						<el-button type="text" slot="reference">移除推荐</el-button>
					</el-popconfirm>

				</template>
			</el-table-column>
		</el-table>

		<pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
			:limit.sync="queryParams.pageSize" @pagination="getList" />
	</div>
</template>

<script>
import { recommendList, removeRecommend,turnRecommendList } from '@/api/system/shop'
export default {
	props: ['shopId'],
	data() {
		return {
			loading: false,
			orderList: [],
			radio2: '',
			total: 0,
			queryParams: {
				pageNum: 1,
				pageSize: 10,
			}
		}
	},
	watch: {
		//shopId() {
			//this.getList()
		//}
	},
	mounted() {
		//this.getList()
	},
	methods: {
    turnClick(row,tag){
      turnRecommendList({"shopId":this.shopId,"goodsId": row.id,"pointer":tag,"type": 1}).then((response) => {
        if(response.code=="200"){
          this.getList();
        }
      });      
    },
    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;
    },
		getList() {
			this.loading = true;
			recommendList({ ...this.queryParams, shopId: this.shopId, type: 1 }).then(response => {
				this.orderList = response.rows;
				this.total = response.total;
				this.loading = false
			});
		},
		removeRecommend(data) {
			removeRecommend({ goodsId: data.id, type: 1, shopId: this.shopId }).then(res => {
				this.$modal.msgSuccess("移除成功");
				this.getList()
			})
		}
	}
}
</script>

<style>
.flex {
	height: 50px;
	align-items: center;
	text-align: right;
}
.pagination-container {
  height: 30px;
}
</style>