<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="100%" height="100%"
			viewBox="0 0 46 46"
			fill="none"
			xmlns="http://www.w3.org/2000/svg"
		  >
			<circle cx="23" cy="23" r="23" fill="black" 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>Start Time: <span>*</span></span>
		  <a-space direction="vertical" style="width: 220px">
			<a-date-picker
			  v-model:value="startTime"
			  :disabled="title != 'Add'"
			  style="width: 220px"
			/>
		  </a-space>
		</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="endTime"
			  :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({
		endTime: "",
		startTime: "",
		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.endTime = dayjs(
			new Date(data.redeemBy * 1000).toLocaleDateString('zh-CN', {
				year: 'numeric',
				month: '2-digit',
				day: '2-digit'
			}).replace(/\//g, '/'),
			"YYYY/MM/DD"
		  );
		   // 确保格式一致
		//   operationsData.startTime = dayjs(
		// 	new Date(data.startTime * 1000).toISOString().split("T")[0],
		// 	"YYYY/MM/DD"
		//   );
		  operationsData.startTime = dayjs(
			new Date(data.startTime * 1000).toLocaleDateString('zh-CN', {
				year: 'numeric',
				month: '2-digit',
				day: '2-digit'
			}).replace(/\//g, '/'),
			"YYYY/MM/DD"
		  );
		  // operationsData.endTime='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 emdTimeMs =
		  new Date(operationsData.endTime).getTime() / 1000; // 直接获取毫秒时间戳
		const startTimeMs =
		  new Date(operationsData.startTime).getTime() / 1000; // 直接获取毫秒时间戳
		return {
		  percentOff: operationsData.percentOff,
		  maxRedemptions: operationsData.maxRedemptions,
		  commissionRate: operationsData.commissionRate,
		  endTime: emdTimeMs,
		  startTime: startTimeMs,
		  cooperator: operationsData.cooperator,
		  remark: operationsData.remark,
		};
	  };
	  let setEditData = () => {
		const timestampMs =
		  new Date(operationsData.endTime).getTime() / 1000; // 直接获取毫秒时间戳
		return {
		  id: operationsData.id,
		  paidCommission: operationsData.commissionRate,
		  cooperator: operationsData.cooperator,
		  remark: operationsData.remark,
		};
	  };
	  let cancelDsign = () => {
		operationsData.endTime = "";
		operationsData.startTime = "";
		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.startTime || !data.percentOff || !data.endTime)
			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>
  