<template>
  <div class="allUserPoerationModal" ref="allUserPoerationModal"></div>
  <a-modal
    class="allUserPoeration_modal generalModel"
    v-model:visible="operationsModal"
    :footer="null"
    :get-container="() => $refs.allUserPoerationModal"
    width="50%"
    :height="'77rem'"
    :maskClosable="false"
    :centered="true"
    :closable="false"
    :mask="true"
    wrapClassName="#app"
    :keyboard="false"
  >
    <div class="generalModel_btn">
      <div class="generalModel_closeIcon" @click.stop="cancelDsign()">
        <svg
          width="46"
          height="46"
          viewBox="0 0 46 46"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
        >
          <circle cx="23" cy="23" r="23" fill="white" fill-opacity="0.3" />
          <rect
            x="32.5063"
            y="12"
            width="3"
            height="29"
            rx="1.5"
            transform="rotate(45 32.5063 12)"
            fill="white"
          />
          <rect
            x="34.6274"
            y="32.5059"
            width="3"
            height="29"
            rx="1.5"
            transform="rotate(135 34.6274 32.5059)"
            fill="white"
          />
        </svg>
      </div>
    </div>
    <div class="modal_title_text">
      <div>{{ title }} Coupon</div>
    </div>
    <div class="allUserPoeration_center admin_page">
      <div class="admin_state_item">
        <span>Cooperator:</span>
        <input
          v-model="cooperator"
          placeholder="Please enter cooperator"
          type="text"
          style="width: 220px"
        />
      </div>
      <div class="admin_state_item">
        <span>percentOff(%): <span>*</span></span>
        <input
          :class="{ active: title != 'Add' }"
          :disabled="title != 'Add'"
          v-model="percentOff"
          placeholder="Please enter percentOff"
          type="text"
          style="width: 220px"
        />
      </div>
      <div class="admin_state_item">
        <span>Commission Rate: <span>*</span></span>
        <input
          :class="{ active: title != 'Add' }"
          :disabled="title != 'Add'"
          v-model="commissionRate"
          placeholder="Please enter commission rate"
          type="text"
          style="width: 220px"
        />
      </div>
      <div class="admin_state_item">
        <!-- <div class="admin_state_item" > -->
        <span>End Time: <span>*</span></span>
        <a-space direction="vertical" style="width: 220px">
          <a-date-picker
            v-model:value="rangePickerValue"
            :disabled="title != 'Add'"
            style="width: 220px"
          />
        </a-space>
      </div>
      <div class="admin_state_item">
        <span>MaxRedemptions:</span>
        <input
          :class="{ active: title != 'Add' }"
          :disabled="title != 'Add'"
          v-model="maxRedemptions"
          placeholder="Please enter maximum"
          type="text"
          style="width: 220px"
        />
      </div>
      <div class="admin_state_item">
        <span>PaidCommission:</span>
        <input
          v-model="paidCommission"
          placeholder="Please enter paidCommission"
          type="text"
          style="width: 220px"
        />
      </div>
      <div class="admin_state_item">
        <span>Remark:</span>
        <input
          v-model="remark"
          placeholder="Please enter remark"
          type="text"
          style="width: 220px"
        />
      </div>
    </div>
    <div class="allUserPoeration_btn admin_page">
      <div class="admin_search_item" @click="cancelDsign">Close</div>
      <div class="admin_search_item" @click="setOk">OK</div>
    </div>
  </a-modal>
  <div class="mark_loading" v-show="loadingShow">
    <a-spin size="large" />
  </div>
</template>
<script>
import {
  defineComponent,
  ref,
  reactive,
  watch,
  onMounted,
  nextTick,
  toRefs,
} from "vue";
import { Https } from "@/tool/https";
import { Modal, message } from "ant-design-vue";
import { ExclamationCircleOutlined } from "@ant-design/icons-vue";
import { formatTime, isEmail } from "@/tool/util";
import dayjs, { Dayjs } from "dayjs";
import md5 from "md5";
export default defineComponent({
  components: {},
  emits: ["searchHistoryList"],
  setup(props, { emit }) {
    let operations = reactive({
      operationsModal: false,
      operationsEdit: false,
      loadingShow: false,
      title: "",
    });
    let operationsData = reactive({
      rangePickerValue: "",
      percentOff: "",
      commissionRate: "",
      maxRedemptions: "",
      cooperator: "",
      paidCommission: "",
      remark: "",
      id: "",
    });
    let init = (funStr, data) => {
      operations.operationsModal = true;
      operations.operationsEdit = true;
      operations.title = funStr;
      if (funStr == "Add") operations.operationsEdit = false;
      if (funStr == "Edit") {
        operationsData.id = data.id;
        operationsData.percentOff = data.percentOff;
        operationsData.commissionRate = data.commissionRate;
        operationsData.maxRedemptions = data.maxRedemptions;
        operationsData.cooperator = data.cooperator;
        operationsData.paidCommission = data.paidCommission;
        operationsData.remark = data.remark;
        operationsData.rangePickerValue = dayjs(
          new Date(data.redeemBy * 1000).toISOString().split("T")[0],
          "YYYY/MM/DD"
        );

        // operationsData.rangePickerValue='2024-08-05T00:00:06'
        // operationsData.validEndTime='2024-08-05T00:00:06'
        // operationsData.commissionRate = data.commissionRate
        // operationsData.maxRedemptions = data.maxRedemptions
        // operationsData.validStartTime = formatTime(data.validStartTime)
        // operationsData.validEndTime = formatTime(data.validEndTime)
      }
    };
    let setAddData = () => {
      const timestampMs =
        new Date(operationsData.rangePickerValue).getTime() / 1000; // 直接获取毫秒时间戳
      return {
        percentOff: operationsData.percentOff,
        maxRedemptions: operationsData.maxRedemptions,
        commissionRate: operationsData.commissionRate,
        timestamp: timestampMs,
        cooperator: operationsData.cooperator,
        remark: operationsData.remark,
      };
    };
    let setEditData = () => {
      const timestampMs =
        new Date(operationsData.rangePickerValue).getTime() / 1000; // 直接获取毫秒时间戳
      return {
        id: operationsData.id,
        paidCommission: operationsData.commissionRate,
        cooperator: operationsData.cooperator,
        remark: operationsData.remark,
      };
    };
    let cancelDsign = () => {
      operationsData.rangePickerValue = "";
      operationsData.percentOff = "";
      operationsData.commissionRate = "";
      operationsData.maxRedemptions = "";
      operationsData.cooperator = "";
      operationsData.paidCommission = "";
      operationsData.remark = "";
      operationsData.id = "";
      operations.operationsModal = false;
    };
    let setOk = () => {
      let data;
      if (operations.title == "Add") {
        data = setAddData();
        if (!data.commissionRate || !data.timestamp || !data.percentOff)
          return message.warning("Please check the input box marked with *");
        Https.axiosPost(Https.httpUrls.createCoupon, data).then((rv) => {
          if (rv) {
            cancelDsign();
            emit("searchHistoryList");
          }
        });
      } else {
        data = setEditData();
        Https.axiosGet(Https.httpUrls.updatePromCodeInfo, {
          params: data,
        }).then((rv) => {
          if (rv) {
            cancelDsign();
            emit("searchHistoryList");
          }
        });
      }
    };
    return {
      ...toRefs(operations),
      ...toRefs(operationsData),
      cancelDsign,
      init,
      focus,
      blur,
      setOk,
    };
  },
  data() {
    return {};
  },
  mounted() {},
  methods: {},
});
</script>
<style lang="less" scoped>
:deep(.allUserPoeration_modal) {
  .ant-modal-body {
    display: flex;
    flex-direction: column;
  }
}
</style>
<style lang="less" scoped>
.allUserPoeration_modal {
  .closeIcon {
    z-index: 2;
  }
  .allUserPoeration_btn {
    display: flex;
    flex-direction: row;
    height: auto;
    justify-content: flex-end;
    padding: 1rem 0;
    .admin_search_item {
      margin-bottom: 0;
    }
  }
  .allUserPoeration_center {
    flex: 1;
    overflow-y: auto;
    flex-direction: row;
    flex-wrap: wrap;
  }
}
</style>
