<template>
  <Popup
    v-model:show="visible"
    position="right"
    style="height: 100vh; width: 86%"
  >
    <div class="flex flex-col h-full">
      <div class="mx-5 flex items-center justify-center relative mt-2.5">
        <IconVue
          color="#000000"
          name="icon-a-shanchu1"
          class="absolute left-0"
          @click="clickClose"
        />
        <div class="title">{{ title || "此处是标题" }}</div>
      </div>
      <div class="flex-grow overflow-hidden">
        <div class="h-full overflow-auto px-5">
          <slot></slot>
        </div>
      </div>
      <div class="flex">
        <div
          class="flex-grow btn flex justify-center items-center"
          @click="leftBtnActive && $emit('clickLeft')"
          :class="{
            'btn-active': leftBtnActive,
          }"
        >
          {{ leftBtnName }}
        </div>
        <div class="w-0.5"></div>
        <div
          @click="rightBtnActive && $emit('clickRight')"
          class="flex-grow btn flex justify-center items-center"
          :class="{
            'btn-active': rightBtnActive,
          }"
        >
          {{ rightBtnName }}
        </div>
      </div>
    </div>
  </Popup>
</template>
<script lang="ts">
import { defineComponent } from "vue";
import { Popup } from "vant";
import IconVue from "@/components/common/Icon.vue";
export default defineComponent({
  emits: ["clickLeft", "clickRight"],
  components: {
    Popup,
    IconVue,
  },
  props: {
    leftBtnName: { type: String, default: "重置" },
    rightBtnName: { type: String, default: "完成" },
    leftBtnActive: {
      type: Boolean,
      default: true,
    },
    rightBtnActive: {
      type: Boolean,
      default: true,
    },
    title: String,
    show: Boolean,
    setShow: {
      type: Function,
      required: true,
    },
  },
  methods: {
    clickClose(): void {
      this.setShow(false);
    },
  },
  computed: {
    visible: {
      get(): boolean | undefined {
        return this.show;
      },
      set(): void {
        this.setShow(false);
      },
    },
  },
});
</script>
<style lang="less" scoped>
.btn {
  height: 45px;
  background: #e7e7e7;
  font-size: 14px;
  font-family: PingFangSC-Semibold, PingFang SC;
  font-weight: 600;
  color: #ffffff;
}
.btn-active {
  font-weight: 600;
  color: #ffffff;
  background: #3e4faf;
}
.title {
  font-size: 16px;
  font-family: PingFangSC-Semibold, PingFang SC;
  font-weight: 600;
  color: #1b1f37;
}
</style>
