<template>
  <div class="records">
    <div class="recordsTit">
      <span>浏览足迹</span>
      <span v-if="!edit" class="batch" @click="showEdit">批量管理</span>
      <div v-else class="saveList">
        <el-checkbox v-model="selectAll" :true-label="1" :false-label="0" @change="changeChecked">全选</el-checkbox>
        <span class="delete" @click="deleteFun">删除</span>
        <span class="save" @click="saveList">保存</span>
      </div>
    </div>
    <div v-if="flag" v-loading="loading" class="list sub-main">
      <div v-for="(item, index) in recordList" :key="index" class="recordsList">
        <div class="topTime">{{ item.createTime }}</div>
        <div class="listBox">
          <div
            v-for="(child, inx) in item.products" :key="child.footprintId" class="recordsItem"
            :class="{ selected: child.selected === 1, edit }" @click="select(index, inx)"
          >
            <div v-if="edit" class="mc"></div>
            <div class="imgBox">
              <span class="delBtn hiddenBtn" @click="del(child.productId, item.createTime)">
                <icon-svg icon-class="del" />
              </span>
              <img :src="child.image" alt="">
              <span class="detailBtn hiddenBtn" @click="toProductDetail(child)">查看详情</span>
            </div>
            <div class="info">
              <h3 class="overflow">{{ child.productName }}</h3>
              <span class="price">¥{{ child.price }}</span>
            </div>
          </div>
          <div class="clearfix"></div>
        </div>
      </div>
      <el-pagination
        v-if="recordList.length > 0" class="" background layout="prev, pager, next, jumper"
        :page-size="4"
        :current-page="page" :total="total" @current-change="handleCurrentChange"
      >
      </el-pagination>
    </div>
    <div v-else class="nothing sub-main">
      <icon-svg style="width: 240px; height: 240px; margin-bottom: 20px;" icon-class="user-foot-nodata" />
      <p class="fs20 font-color-999">你还没有浏览记录～</p>
    </div>
  </div>
</template>

<script>
import {
  getFoots,
  deleteFoots
} from '@/api/user/user.js'
export default {
  name: 'BrowseRecords',
  data() {
    return {
      page: 1,
      pageSize: 4,
      total: 0,
      edit: false,
      recordChecked: 0,
      selectAll: 0,
      ids: [],
      times: [],
      recordList: [],
      flag: true,
      loading: false
    }
  },
  mounted() {
    this.getFootprint()
  },
  methods: {
    // 我的足迹
    async getFootprint() {
      this.loading = true
      const response = await getFoots({
        page: this.page,
        pageSize: this.pageSize
      })
      const res = response.data
      if (res.code === '200') {
        this.recordList = res.data.list
        this.total = res.data.total
        if (res.data.list.length) {
          this.flag = true
        } else {
          this.flag = false
        }
      } else {
        this.$message.warning(res.message)
      }
      this.loading = false
    },
    // 翻页
    handleCurrentChange(val) {
      this.page = val
      this.getFootprint()
    },
    // 保存
    saveList() {
      this.edit = false
    },
    // 选择
    select(index, inx) {
      if (this.recordList[index].products[inx].selected === 1) {
        this.recordList[index].products[inx].selected = 0
      } else {
        this.recordList[index].products[inx].selected = 1
      }
      this.selectAll = 1
      this.recordList.map((i) => {
        i.products.map((j) => {
          if (j.selected === 0) {
            this.selectAll = 0
          }
        })
      })
    },
    // 全选
    changeChecked() {
      this.recordList.forEach((i) => {
        i.products.forEach((j) => {
          this.$set(j, 'selected', this.selectAll)
        })
      })
      console.log(this.recordList)
    },
    // 编辑
    showEdit() {
      if (this.recordList.length === 0) {
        return
      }
      this.edit = true
    },
    // 商品详情
    toProductDetail(item) {
      const data = {
        productId: item.productId,
        shopId: item.shopId,
        skuId: item.skuId
      }
      this.$router.push({
        path: '/productDetail',
        query: {
          proData: JSON.stringify(data)
        }
      })
    },
    // 删除浏览记录请求
    async delFootprint(ids, times) {
      const response = await deleteFoots({
        ids,
        times
      })
      const res = response.data
      if (res.code === '200') {
        this.$message.success('删除成功')
        this.edit = false
        this.getFootprint()
      } else {
        this.$message.error(res.message)
      }
    },
    // 删除单个浏览记录
    del(id, time) {
      const ids = [ id ]
      const times = [ time ]
      this.delFootprint(ids, times)
    },
    // 删除选中浏览记录
    deleteFun() {
      let flag = false
      for (var i in this.recordList) {
        for (var k in this.recordList[i].products) {
          if (this.recordList[i].products[k].selected === 1) {
            flag = true
          }
        }
      }
      if (flag === false) {
        return this.$message.warning('请先选中需要删除的记录')
      }
      this.$confirm('此操作将删除选中的记录, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const ids = []
        const times = []
        for (var i in this.recordList) {
          for (var k in this.recordList[i].products) {
            if (this.recordList[i].products[k].selected === 1) {
              ids.push(this.recordList[i].products[k].productId)
              times.push(this.recordList[i].createTime)
            }
          }
        }
        this.delFootprint(ids, times)
      })
        .catch(() => {
        })
    }
  }
}
</script>

<style lang="scss" scoped>
.records {
	border: 1px solid #E5E5E5;

	.recordsTit {
		padding: 0 25px;
		background-color: #F3F4F5;
		border-bottom: 1px solid #F5F5F5;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 15px;

		span {
			display: block;
			height: 60px;
			line-height: 60px;
		}

		span:first-child {
			color: #333;
			font-size: 18px;
			// border-bottom: 3px solid $mainGlod;
		}

		.batch {
			width: 104px;
			height: 40px;
			line-height: 40px;
			color: #333;
			font-size: 12px;
			text-align: center;
			background: #FFF;
			cursor: pointer;
		}

		.saveList {
			display: flex;
			align-items: center;

			span {
				margin-left: 50px;
				cursor: pointer;
				color: #333333;
				font-size: 14px;
			}

			span.save {
				width: 104px;
				height: 40px;
				background: #FFFFFF;
				color: $mainGlod;
				text-align: center;
				line-height: 40px;
			}
		}
	}

	.list {
		.recordsList {
			margin-bottom: 20px;
			background-color: #F5F5F5;

			.topTime {
				padding: 15px 30px;
				color: #FFF;
				background-color: #333;
				font-size: 14px;
				font-weight: bold;
			}

			.listBox {
				padding: 10px;

				.recordsItem {
					width: 18%;
					// height: 330px;
					float: left;
					margin: 10px;
					position: relative;
					border: 1px solid transparent;

					.imgBox {
						width: 100%;
						height: 240px;
						// border: 1px dashed #333;
						box-sizing: border-box;
						position: relative;

						&:hover .hiddenBtn {
							display: block;
						}

						.hiddenBtn {
							display: none;
						}

						.delBtn {
							font-size: 32px;
							cursor: pointer;
							position: absolute;
							right: 5px;
							top: 5px;
						}

						.detailBtn {
							width: 100%;
							height: 40px;
							line-height: 40px;
							text-align: center;
							color: #FFF;
							background-color: rgba($color: #333, $alpha: .8);
							cursor: pointer;
							position: absolute;
							left: 0;
							bottom: 0;
						}

						img {
							width: 100%;
							height: 99%;
						}
					}

					.info {
						border: 1px solid #E5E5E5;
						text-align: center;
						padding: 0 15px 15px;

						h3 {
							font-size: 14px;
							color: #333333;
							height: 30px;
							line-height: 30px;
							margin-top: 10px;
						}

						span {
							color: $mainGlod;
							font-size: 14px;
						}
					}
				}

				.recordsItem:nth-child(5n) {
					margin-right: 0;
				}

				// .edit:before {
				//   content: "";
				//   background: url("./../../../assets/images/noEdit.png");
				//   width: 58px;
				//   height: 58px;
				//   position: absolute;
				//   right: 0;
				//   top: 0;
				//   display: block;
				//   background-size: contain;
				// }
				// .selected:before {
				//   background: url("./../../../assets/images/edit.png");
				//   background-size: contain;
				// }
				.selected {
					border-color: $mainGlod;
				}
			}
		}

		>>>.el-pagination {
			margin: 30px 0 20px 0;
		}
	}

	.sub-main {
		min-height: 400px;
	}

	.nothing {
		width: 100%;
		text-align: center;
		min-height: 400px;

		p {
			margin-bottom: 20px;
		}

		.el-button {
			background-color: #FF7800;
			color: #FFFFFF;
			font-weight: normal;
			border-radius: 0;
		}
	}

	.mc {
		position: absolute;
		width: 100%;
		height: 100%;
		opacity: 0;
	}
}
</style>
