<template>
	<u-popup
		round="10"
		:show="isShow"
		:closeOnClickOverlay="false">
		<view class="dialog">
			<view class="dialog-header">
				<view class="header">
					<view class="btn"></view>
					<view class="title">全部筛选</view>
					<view class="btn" @tap="cancelDialog"><text class="iconfont icon-guanbi1"></text></view>
				</view>
			</view>
			<view class="dialog-content">
        <view class="label">价格区间</view>
        <view class="price">
          <u--input
            type="number"
            placeholder="自定义最低价"
            border="none"
            shape="circle"
            inputAlign="center"
            v-model="priceMin"
          ></u--input>
          <u-icon name="minus" size="20"></u-icon>
          <u--input
            type="number"
            placeholder="自定义最低价"
            border="none"
            shape="circle"
            inputAlign="center"
            v-model="priceMax"
          ></u--input>
        </view>
        <view class="label mt40">商品标签</view>
        <view class="list">
          <view class="item" :class="item.active ? 'active' : ''" v-for="(item, index) in tagList" :key="index" @tap="item.active = !item.active">{{item.dictValue}}</view>
        </view>
        <view class="label mt40">品牌</view>
        <view class="list">
          <view class="item" :class="item.active ? 'active' : ''" v-for="(item, index) in brandList" :key="index" @tap="item.active = !item.active">{{item.brandName}}</view>
        </view>
			</view>
			<view class="dialog-footer">
				<view class="btn btn1" @tap="resetDialog">重置</view>
				<view class="btn btn2" @tap="confirmDialog">确认</view>
			</view>
		</view>
	</u-popup>
</template>

<script>
	export default {
		props: {
			isShow: {
				type: Boolean,
				default: false
			},
      categoryId: {
        type: String,
        default: ''
      }
		},

		data() {
			return {
				priceMin: '',
				priceMax: '',
        tagList: [],
        brandList: [],
			}
		},

		created() {
      this.getTagList();
      this.getBrandList();
		},

		methods: {
      getTagList() {
        this.$api.post('/changeOrder/sysDict', {
          dictType: 'GOODS_TAG',
        }).then(res => {
          res.data.forEach(item => {
            item.active = false;
          })
          this.tagList = res.data;
        })
      },

      getBrandList() {
        this.$api.get('/goods/category/brand', {
          categoryId: this.categoryId || '',
        }).then(res => {
          res.data.forEach(item => {
            item.active = false;
          })
          this.brandList = res.data;
        })
      },

			cancelDialog() {
				this.priceMin = '';
				this.priceMax = '';
        this.tagList.forEach(item => {
          item.active = false;
        })
        this.brandList.forEach(item => {
          item.active = false;
        })
				this.$emit('cancel');
			},

			confirmDialog() {
				let params = {
          priceMin: this.priceMin,
          priceMax: this.priceMax,
          tag: this.tagList.filter(o => o.active).map(o => o.dictValue).join(','),
          brand: this.brandList.filter(o => o.active).map(o => o.id).join(','),
        };
				this.$emit('confirm', params);
			},

      resetDialog() {
        this.priceMin = '';
        this.priceMax = '';
        this.tagList.forEach(item => {
          item.active = false;
        })
        this.brandList.forEach(item => {
          item.active = false;
        })
      },
		}
	}
</script>

<style lang="scss" scoped>
	.dialog {
		background: #ffffff;
		max-height: 88vh;
		display: flex;
		flex-direction: column;
		border-radius: 20rpx 20rpx 0 0;
		.dialog-header {
			.header {
				flex-shrink: 0;
				height: 100rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 0 30rpx;
        border-bottom: 1px solid #f5f5f5;
				.btn {
					width: 40rpx;
          .iconfont {
            font-size: 36rpx;
            color: $sec-font;
          }
				}
				.title {
					font-size: 36rpx;
					font-weight: 600;
				}
			}
		}
		.dialog-content {
      padding: 30rpx;
			flex: 1;
			overflow-y: scroll;
      .label {
        font-size: 32rpx;
        font-weight: 600;
      }
      .price {
        display: flex;
        align-items: center;
        margin-top: 20rpx;
        ::v-deep.u-input {
          background: #f5f5f5;
          height: 76rpx;
        }
        ::v-deep .u-icon {
          margin: 0 20rpx;
        }
      }
      .list {
        display: flex;
        flex-wrap: wrap;
        .item {
          width: calc((100% - 40rpx) / 3);
          height: 76rpx;
          border-radius: 76rpx;
          background: #f5f5f5;
          font-size: 28rpx;
          display: flex;
          align-items: center;
          justify-content: center;
          margin-top: 20rpx;
          margin-right: 20rpx;
          box-sizing: border-box;
          &:nth-child(3n) {
            margin-right: 0;
          }
          &.active {
            background: rgba($color: $theme-color, $alpha: .1);
            border: 1px solid $theme-color;
            color: $theme-color;
          }
        }
      }
		}
		.dialog-footer {
			padding: 30rpx;
      display: flex;
      .btn {
        flex: 1;
        height: 80rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
      }
      .btn1 {
        border: 1px solid $theme-color;
        border-radius: 80rpx 0 0 80rpx;
        color: $theme-color;
      }
      .btn2 {
        background: $theme-color;
        border-radius: 0 80rpx 80rpx 0;
        color: #ffffff;
      }
		}
	}
</style>
