<template>
  <ele-modal
    :width="750"
    :visible="visible"
    :maskClosable="false"
    :title="title"
    :body-style="{ paddingBottom: '28px' }"
    @update:visible="updateVisible"
    @ok="save"
  >
    <template v-for="(item, index) in periodList" :key="index">
      <div class="checkout-body">
        <view class="period-item">
          <view class="period ele-text-primary">{{ timePeriod }}</view>
          <view class="field-list">
            <template v-for="(field, index2) in item.fieldList" :key="index2">
              <view
                class="field"
                :class="isActive(field)"
                style="cursor: pointer"
                @click="openEdit(field)"
              >
                <text class="field-name">{{ field.fieldName }}</text>
                <text class="price">{{ item.price }}元</text>
              </view>
            </template>
          </view>
        </view>
      </div>
    </template>
  </ele-modal>
</template>

<script lang="ts" setup>
  import { ref } from 'vue';
  import { Merchant } from '@/api/shop/merchant/model';
  import { Field } from '@/api/booking/field/model';
  import { getServerTime } from '@/api/layout';
  import { listPeriod } from '@/api/booking/period';
  import { Period } from '@/api/booking/period/model';
  import { updateOrderInfo } from '@/api/shop/orderInfo';
  import { message } from 'ant-design-vue';

  const props = defineProps<{
    // 弹窗是否打开
    visible: boolean;
    // 标题
    title?: string;
    // 商户类型
    shopType?: string;
    merchantId?: number;
    timePeriod?: string;
    week?: string;
    id?: number;
    // 修改回显的数据
    data?: Merchant | null;
  }>();

  const emit = defineEmits<{
    (e: 'done'): void;
    (e: 'update:visible', visible: boolean): void;
  }>();

  /* 更新visible */
  const updateVisible = (value: boolean) => {
    emit('update:visible', value);
  };

  // 搜索内容
  const periodList = ref<Period[]>();
  const selectId = ref<any>(0);
  const fieldName = ref<string>();
  const orderCode = ref<string>();

  /* 搜索 */
  const reload = () => {
    getServerTime().then((res) => {
      listPeriod({
        merchantId: props.merchantId,
        isStatus: 0,
        week: Number(props.week),
        startTime: res.hourMinute,
        dateTime: res.today,
        timePeriod: props.timePeriod
      }).then((list) => {
        console.log(list);
        periodList.value = list;
      });
    });
  };

  const isActive = (item) => {
    if (item.sold) {
      if (item.isHalf == 1) {
        return 'web-bg-warning';
      }
      return 'web-bg-info';
    }
    if (selectId.value == item.fieldId) {
      return 'active web-bg-success';
    }
  };

  const openEdit = (record: Field) => {
    selectId.value = record.fieldId;
    fieldName.value = record.fieldName;
    orderCode.value = record.orderKey;
  };

  const save = () => {
    updateOrderInfo({
      id: props.id,
      fieldId: selectId.value,
      fieldName: fieldName.value,
      orderCode: orderCode.value
    }).then(() => {
      message.success('操作成功');
      updateVisible(false);
      emit('done');
    });
  };

  reload();
</script>
<style lang="less">
  .checkout-body {
    padding: 10px 0;

    .period-item {
      margin: 16px 0;

      .period {
        line-height: 2em;
        padding-left: 6px;
        font-size: 16px;
      }

      .field-list {
        display: flex;
        flex-wrap: wrap;

        .web-bg-info {
          background-color: #909399 !important;
          color: #ffffff !important;
        }

        .web-bg-success {
          color: #2ba91c !important;
          border: 1px solid #2ba91c !important;
        }

        .web-bg-warning {
          // background-color: #c9e294 !important;
        }

        .active {
          &:before {
            border-radius: 0 0 6px 0;
            content: '';
            position: absolute;
            right: 0;
            bottom: 0;
            border: 12px solid #2ba91c;
            border-top-color: transparent;
            border-left-color: transparent;
          }

          &:after {
            content: '';
            width: 5px;
            height: 10px;
            position: absolute;
            right: 3px;
            bottom: 4px;
            border: 1px solid #fff;
            border-top-color: transparent;
            border-left-color: transparent;
            transform: rotate(45deg);
            border-radius: 2px;
          }
        }

        .field {
          width: 59px;
          height: 59px;
          margin: 5px;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          border-radius: 8px;
          line-height: 1.3em;
          position: relative;
          color: #333333;
          background-color: #ffffff;
          border: 1px solid #808080;

          .field-name {
            font-size: 12px;
            text-align: center;
          }

          .price {
            font-size: 14px;
          }
        }
      }
    }
  }
</style>
