<template>
  <u-popup :show="show" mode="left" :closeable="true" @close="handleClose">
    <view class="c-dialog-filter">
      <view class="title">筛选</view>
      <u-list>
        <u-list-item>
          <u-cell :title="`供应商`" @click="handleDialog('showSupplier', true)">
            <template #right-icon> </template>
          </u-cell>
        </u-list-item>
        <u-list-item boder="none">
          <u-cell :title="`收货产品`" @click="handleDialog('showProduct', true)">
            <template #right-icon> </template>
          </u-cell>
        </u-list-item>
      </u-list>

      <view class="btn-layout">
        <view class="btn">
          <up-button type="primary" text="确定"></up-button>
        </view>
      </view>
      <view class="btn-layout">
        <view class="btn">
          <u-button>重置</u-button>
        </view>
      </view>
    </view>
  </u-popup>

  <!-- 供应商选择弹框 -->
  <SupplierDialog :show="showDialog.showSupplier" @handleDialog="(v:boolean) => {handleDialog('showSupplier', v)}"></SupplierDialog>
  <!-- 收货产品弹框 -->
  <ProductDialog :show="showDialog.showProduct" @handleDialog="(v:boolean) => {handleDialog('showProduct', v)}"></ProductDialog>
</template>
<script setup lang="ts">
import SupplierDialog from "./SupplierDialog.vue";
import ProductDialog from "./ProductDialog.vue";
const props = defineProps<{
  show: boolean;
}>();
const emit = defineEmits(["handleDialog"]);
const handleClose = () => {
  emit("handleDialog", false);
};
const showDialog = <
  {
    [key: string]: boolean
  }
>reactive(
  {
    showProduct: false,
    showSupplier: false
  }
)

const handleDialog = (key: string, v:boolean) => {
  showDialog[key] = v
}

</script>
<style lang="scss" scoped>
.c-dialog-filter {
  width: 95vw;
  padding: 25rpx;
  .title {
    font-weight: 500;
    font-size: 32rpx;
    color: #000000;
    text-align: center;
  }
  ::v-deep .u-list {
    height: 50vh !important;
    .u-cell__title-text {
      font-family: Source Han Sans CN;
      font-weight: 400;
      font-size: 27rpx !important;
    }
  }
  .btn-layout {
    align-items: center;
    justify-content: center;
    display: flex;
    margin-top: 35rpx;
    .btn {
      width: 80%;
      text-align: center;
      ::v-deep button {
        border-radius: 43rpx;
      }
    }
  }
}
</style>
