<template>
  <view>
    <view class="footer" v-if="info.status !== 1">
      <nut-popover
        v-if="info.status !== 2"
        v-model:visible="popoverShow"
        :list="popoverList"
        :duration="0"
        location="bottom-start"
        @choose="popoverChoose">
        <template #reference>
          <view class="text-[#9C9C9C] text-[30px]">更多</view>
        </template>
      </nut-popover>
      <view v-else></view>
      <view class="flex">
        <!-- <view
        v-if="info.status !== 2"
        class="btn"
        style="border: 1px #7f7f7f solid; color: #666666"
        @click="visible = true"
        >挂帐</view
      > -->
        <view
          v-if="info.status !== 2"
          class="btn"
          style="background-color: #009ee0"
          @click="to_menu_page"
          >继续点单</view
        >
        <view
          v-if="info.status !== 2"
          class="btn"
          style="background-color: none; color: black; border: 1px solid #000"
          @click="cancelOrder"
          >取消订单</view
        >
        <!-- <view
        v-if="info.status !== 2"
        class="btn"
        style="background-color: #ffa938"
        @click="visible1 = true"
        >修改</view
      > -->
        <view class="btn" style="background-color: #fd0100" @click="to_pay_page"
          >收款码</view
        >
      </view>
    </view>
    <nut-dialog v-model:visible="visible" @ok="onOk">
      <template #header>挂帐</template>
      <template #default
        >确定要把
        <text style="color: #fd0100">{{ info.seat }}</text>
        进行挂帐吗？</template
      >
    </nut-dialog>
    <nut-dialog v-model:visible="visible1" @cancel="onCancel" @ok="onOk1">
      <template #header>修改台号/备注</template>
      <template #default>
        <view class="mb">
          <view>当前台号：{{ info.seat }}</view>
          <view class="flex">
            <text>新台号:</text>
            <nut-input v-model="formVal.seat" placeholder="请输入新台号" />
          </view>
        </view>
        <view class="mb">
          <view>当前备注：{{ info.notes }}</view>
          <view class="flex">
            <text>新备注:</text>
            <nut-input v-model="formVal.notes" placeholder="请输入新备注" />
          </view>
        </view>
      </template>
    </nut-dialog>
  </view>
</template>

<script setup lang="ts">
import {onMounted, ref} from 'vue';
import {cancelAfterOrder, confirmAfterOrder, editAfterOrder} from '@/api/admin';
import Taro from '@tarojs/taro';

const props = defineProps({
  info: {
    required: true,
    type: Object,
  },
});

onMounted(() => {
  // console.log(props.info);
  popoverList.value = [
    {
      name: '修改',
      value: 1,
      disabled: props.info.status === 2,
      className: 'text-[35px] p-[10px]',
    },
    {
      name: '挂帐',
      value: 2,
      disabled: props.info.status === 2,
      className: 'text-[35px] p-[10px]',
    },
  ];

  console.log(popoverList.value);
});

const emits = defineEmits(['ok', 'cancelOrderOk']);

const visible = ref(false);
const visible1 = ref(false);

const formVal = ref({
  seat: '',
  notes: '',
});

const onCancel = () => {
  visible.value = false;
};

const onOk = async () => {
  visible.value = false;
  const res = await confirmAfterOrder({
    bid: props.info.bid,
    oid: props.info.oid,
  });
  Taro.showToast({
    title: res.msg,
    icon: 'none',
  });
  emits('ok');
};

const onOk1 = async () => {
  visible.value = false;

  const res = await editAfterOrder({
    bid: props.info.bid,
    oid: props.info.oid,
    seat: formVal.value.seat,
    notes: formVal.value.notes,
  });

  Taro.showToast({
    title: res.msg,
    icon: 'none',
  });

  formVal.value = {
    seat: '',
    notes: '',
  };

  emits('ok');
};

const to_pay_page = () => {
  Taro.navigateTo({
    url: `/pages/admin/add_order/pending_order/pay/index?oid=${props.info.oid}&bid=${props.info.bid}`,
  });
};

const to_menu_page = () => {
  Taro.navigateTo({
    url: `/pages/admin/add_order/add_menu/index?type=1&bid=${props.info.bid}&oid=${props.info.oid}&seat=${props.info.seat}&phone=${props.info.phone}&notes=${props.info.notes}`,
  });
};

const popoverShow = ref(false);
const popoverList = ref<any>([]);
const popoverChoose = e => {
  console.log(e);
  switch (e.value) {
    case 1:
      visible1.value = true;
      break;
    case 2:
      visible.value = true;
      break;
  }
};

const cancelOrder = async () => {
  const res = await cancelAfterOrder({
    oid: props.info.oid,
  });
  Taro.showToast({
    title: res.msg,
    icon: 'none',
  });
  emits('cancelOrderOk');
};
</script>

<style lang="scss">
.footer {
  display: flex;
  justify-content: space-between;
  padding: 20px;
  align-items: center;
  .btn {
    width: 143px;
    height: 56px;
    border-radius: 28px;
    text-align: center;
    line-height: 56px;
    color: #fff;
    font-size: 26px;
    margin-left: 30px;
  }
}

.nut-dialog__header {
  text-align: left;
  font-weight: bold;
  font-size: 36px;
  height: auto;
}
.nut-dialog__content {
  text-align: left !important;
  font-size: 28px;
}

.mb {
  margin-bottom: 20px;
}

.flex {
  display: flex;
  align-items: center;

  text {
    width: 150px;
  }
}
</style>
