<template>
  <u-popup :show="show" mode="right" :closeable="true" @close="handleClose">
    <view class="c-dialog-filter">
      <view class="title">筛选</view>
      <u-list height="200">
        <u-list-item>
          <u-cell
            :title="`${isShipment ? '客户' : '供应商'}`"
            @click="handleDialog('showSupplier', true)"
            :value="state.user.name"
          >
            <template #right-icon> </template>
          </u-cell>
        </u-list-item>
        <u-list-item boder="none">
          <u-cell
            :title="`${isShipment ? '出货产品' : '收货产品'}`"
            @click="handleDialog('showProduct', true)"
            :value="state.project.name"
          >
            <template #right-icon> </template>
          </u-cell>
        </u-list-item>
      </u-list>

      <view class="btn-box1">
        <u-button
          text="重置"
          color="#E8E8E8"
          :customStyle="{ color: '#999' }"
          shape="circle"
          @click="resetState"
        ></u-button>
        <u-button
          type="primary"
          text="确定"
          shape="circle"
          @click="handleOk()"
        ></u-button>
      </view>
    </view>
  </u-popup>

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

const state = <
  {
    [key: string]: any;
  }
>reactive({
  project: {
    id: -1,
    name: "",
  },
  user: {
    id: -1,
    name: "",
  },
});

const handleDialog = (key: string, v: boolean) => {
  showDialog[key] = v;
};
const changeUser = (obj: any) => {
  state.user = obj;
};
const changeProduct = (obj: any) => {
  if (props.isShipment) {
    state.project = { ...obj, name: obj.shmProductsName };
  } else {
    state.project = { ...obj, name: obj.reProductsName };
  }
};
const resetState = () => {
  state.project = {
    id: -1,
    name: "",
  };
  state.user = {
    id: -1,
    name: "",
  };
};
const handleOk = () => {
  emit("changeOther", { userId: state.user.id, productId: state.project.id });
  emit("handleDialog", false);
};
</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-box1 {
    position: fixed;
    bottom: 0;
    left: 0;
    margin: 30rpx;
    width: calc(100% - 60rpx);
    display: flex;
    ::v-deep button + button {
      margin-left: 50rpx;
    }
  }
}
</style>
