<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 v-if="!isShipment">
          <u-cell
            :title="`类型`"
            @click="state.isShowStatus = true"
            :value="state.type.name"
          >
            <template #right-icon> </template>
          </u-cell>
        </u-list-item>
        <u-list-item boder="none">
          <u-cell
            :title="`${state.type.key === 2 || isShipment ? '客户' : '供应商'}`"
            @click="handleDialog('showSupplier', true)"
            :value="state.user.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
    ref="supplierDialog"
    :show="showDialog.showSupplier"
    @handleDialog="(v:boolean) => {handleDialog('showSupplier', v)}"
    @changeUser="changeUser"
    :isShipment="state.type.key === 2 || isShipment ? true : false"
  ></SupplierDialog>
  <!-- 客户类型 -->
  <u-action-sheet
    :closeOnClickOverlay="true"
    :closeOnClickAction="true"
    :actions="state.statusList"
    :title="'类型'"
    :show="state.isShowStatus"
    @select="handleSelectStatus"
    @close="state.isShowStatus = false"
  ></u-action-sheet>
</template>
<script setup lang="ts">
import SupplierDialog from "./SupplierDialog.vue";
const props = defineProps<{
  show: boolean;
  isShipment: boolean;
}>();
const emit = defineEmits(["handleDialog", "changeOther"]);
const handleClose = () => {
  emit("handleDialog", false);
};
const showDialog = <
  {
    [key: string]: boolean;
  }
>reactive({
  showSupplier: false,
});

const state = <
  {
    [key: string]: any;
  }
>reactive({
  type: {
    key: 1,
    name: "供应商",
  },
  user: {
    id: -1,
    name: "",
  },
  statusList: [
    {
      name: "供应商",
      key: 1,
    },
    {
      name: "客户",
      key: 2,
    },
  ],
});
const supplierDialog = ref(null);
const handleDialog = (key: string, v: boolean) => {
  showDialog[key] = v;
};
const handleSelectStatus = (v: any) => {
  resetState();
  state.isShowStatus = false;
  state.type = v;
};
const changeUser = (obj: any) => {
  state.user = obj;
};
const resetState = () => {
  state.user = {
    id: -1,
    name: "",
  };
};
const handleOk = () => {
  emit("changeOther", { userId: state.user.id, type: state.type.key });
  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>
