<template>
  <view class="container" :class="[`${themeInfo.theme}-theme`]">
    <navBar class="navBar"></navBar>
    <view class="wrapbox">
      <view class="container-form" v-for="(item,index) in state.dataList" :key="item.authorizeId || index">
        <view class="cHeader">
        </view>
        <view class="content">
          <uv-form labelWidth="auto">
          <uv-form-item :label="$t('houseKey.FriendsName')" prop="formData.name">
            <uv-input shape="circle" border="none" placeholder="* * *" v-model="item.userName">
            </uv-input>
          </uv-form-item>
          <uv-form-item :label="$t('houseKey.AuthorizationDate')" prop="formData.date" @click="showCalendar(item)">
            <uv-input shape="circle" border="none" :placeholder="$t('houseKey.date')" readonly v-model="item.endDate" >
            </uv-input>
          </uv-form-item>
          <view class="past-date" v-if="getIsPast(item)">{{ $t('houseKey.overdue') }}</view>
          <uv-form-item :label="$t('houseKey.ReceiveNotifications')" prop="formData.isNotice">
            <uv-input shape="circle" disabled disabledColor="#ffffff" :placeholder="$t('houseKey.getNote')" border="none">
            </uv-input>
            <template v-slot:right>
              <uv-switch v-model="item.isNotice" size="20"></uv-switch>
            </template>
          </uv-form-item>
          <uv-form-item :label="$t('houseKey.PhoneNumber')" prop="formData.phone">
            <uv-input shape="circle" border="none" :placeholder="$t('houseKey.otherPhone')" v-model="item.phone">
            </uv-input>
          </uv-form-item>
           <uv-form-item :label="$t('houseKey.email')" prop="formData.email">
              <uv-input shape="circle" border="none" :placeholder="$t('houseKey.otherEmail')" v-model="item.email">
              </uv-input>
          </uv-form-item>
        </uv-form>
        </view>
        <view class="footer">
          <view class="left">
            <button @click="add(item)" class="btn">{{ $t('common.update') }}</button>
            <button class="btn" @click="deleteItem(item)">{{ $t('common.delete') }}</button>
          </view>
        </view>
      </view>
      <view class="container-form">
        <view class="cHeader">
        </view>
        <view class="content">
          <uv-form labelWidth="auto">
          <uv-form-item :label="$t('houseKey.FriendsName')" prop="formData.name">
            <uv-input shape="circle" border="none" placeholder="* * *" v-model="state.formData.userName">
            </uv-input>
          </uv-form-item>
          <uv-form-item :label="$t('houseKey.AuthorizationDate')" prop="formData.date" @click="showCalendar()">
            <uv-input shape="circle" border="none" :placeholder="$t('houseKey.date')" v-model="state.formData.endDate" readonly >
            </uv-input>
          </uv-form-item>
          <uv-form-item :label="$t('houseKey.ReceiveNotifications')" prop="formData.isNotice">
            <uv-input shape="circle" disabled disabledColor="#ffffff" :placeholder="$t('houseKey.getNote')" border="none">
            </uv-input>
            <template v-slot:right>
              <uv-switch v-model="state.formData.isNotice" size="20"></uv-switch>
            </template>
          </uv-form-item>
          <uv-form-item :label="$t('houseKey.PhoneNumber')" prop="formData.phone">
            <uv-input shape="circle" border="none" :placeholder="$t('houseKey.otherPhone')" v-model="state.formData.phone">
            </uv-input>
          </uv-form-item>
           <uv-form-item :label="$t('houseKey.email')" prop="formData.email">
              <uv-input shape="circle" border="none" :placeholder="$t('houseKey.otherEmail')" v-model="state.formData.email">
              </uv-input>
          </uv-form-item>
        </uv-form>
        </view>
        <view class="footer">
          <view class="left">
            <button @click="add(null)"  class="btn">{{ $t('houseKey.AddAuthorization') }}</button>
            <!-- <button class="btn" @click="makePhoneCall">兑换</button> -->
          </view>
        </view>
      </view>
    </view>
  </view>
  <uv-calendars ref="calendar" @confirm="confirm"></uv-calendars>
</template>
<script setup>
import navBar from "@/components/navBar.vue";
import { useLockApi } from '@/Apis/lock.js';
import { ref } from "vue";
import { onLoad,onShow } from "@dcloudio/uni-app";
import dayjs from "dayjs";
// 主题色配置
import { useMainStore } from "@/store/index.js";
// 国际化配置
import { useI18n } from 'vue-i18n';
const { t } = useI18n();
const { themeInfo,storeState } = useMainStore();
const getApi = useLockApi();
const calendar = ref();
const state = ref({
	inviteShow: false,
  orderId: null,
  dataList: [],
  item:null,
  formData:{
    userName:'',
    endDate:'',
    phone:'',
    email:'',
    isNotice:false
  }
});
const showCalendar = (item)=>{
   state.value.item = item || null;
  calendar.value.open();
}
const confirm = (e) => {
  if(state.value.item){
    state.value.item.endDate = dayjs(e.fulldate).format("YYYY/MM/DD");
  }else{
    state.value.formData.endDate =  dayjs(e.fulldate).format("YYYY/MM/DD")
  }
};
const getIsPast = (item) => {
  return dayjs(item.authorDate).isBefore(dayjs().format("YYYY/MM/DD"));
};
onLoad((params) => {
  state.value.orderId = params.Order_ID;
  if(!state.value.orderId){
    uni.showToast({
      title: "参数错误（Params error）",
      icon: "none",
    });
    setTimeout(() => {
      uni.navigateBack();
    }, 1500);
  }else{
    getDataList();
  }
});
onShow(() => {});
const getDataList = () => {
  getApi.GetOrderAuthorizeList({orderId:state.value.orderId}).then(res => {
    if (res.code == 200) {
      state.value.dataList = res.data;
      state.value.dataList.forEach(item => item.authorDate = item.endDate);
    }
  })
}
const deleteItem = (item) => {
  uni.showModal({
    title: "提示",
    content: "确定删除吗(Delete It)？",
    success: (res) => {
      if (res.confirm) {
      getApi.DeleteOrderAuthorize({authorizeId:item.authorizeId}).then(res => {
        if (res.code == 200) {
          uni.showToast({
            title: "删除成功(Delete Successful)",
            icon: "none",
          });
          getDataList();
        }
      })
      }
    },
  });
 
}
const add = (item) => {
  let formData = state.value.formData;
  if(item){
    formData = item;
  }
  formData.orderId = state.value.orderId;
  if(!formData.userName){
    uni.showToast({
      title: t('houseKey.EnterFriendsName'),
      icon: "none",
    });
    return;
  }
  if(!formData.endDate){
    uni.showToast({
      title: t('houseKey.EnterAuthorizationDate'),
      icon: "none",
    });
    return;
  }
  if(!formData.phone){
    //#ifdef MP-WEIXIN
    uni.showToast({
      title: t('houseKey.EnterPhoneNumber'),
      icon: "none",
    });
    //#endif
    //#ifdef H5
    uni.showToast({
      title: t('houseKey.EnterEmail'),
      icon: "none",
    });
    //#endif
    return;
  }
  if(formData.phone == storeState.userInfo.phone){
    uni.showToast({
      title: t('houseKey.CannotAuthorizeYourself'),
      icon: "none",
    });
    return;
  }
  if(formData.authorizeId){
    formData.id = formData.authorizeId;
    getApi.UpdateOrderAuthorizeCustomer(formData).then(res => {
    if (res.code == 200) {
      uni.showToast({
        title: t('houseKey.UpdateSuccessful'),
        icon: "none",
      });
      getDataList();
    }
  })
  }else{
    getApi.OrderAuthorizeCustomer(formData).then(res => {
    if (res.code == 200) {
      state.value.formData = {
        userName:'',
        endDate:'',
        phone:'',
        email:'',
        isNotice:false
      }
      uni.showToast({
        title: t('houseKey.AddedSuccessfully'),
        icon: "none",
      });
      getDataList();
    }
  })
  }
  
}
// onShareAppMessage((res) => {
//   if (res.from === "button") {
//   }
//   return shareParam;
// });
</script>

<style lang="scss" scoped>
@import "@/static/style/theme.scss";
uni-page-body {
  height: 100%;
  background: linear-gradient(0deg, rgb(1, 169, 188), rgb(10, 132, 184));
  overflow: auto;
}
.navBar {
  position: relative;
}
.container {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: start;
  width: 100%;
  overflow-x: hidden;
  background: linear-gradient(0deg, var(--left-linear), var(--right-linear));
  .wrapbox {
    padding: 20rpx;
    height: 100%;
    width: 100%;
    background: white;
  }
}
.container-form {
  width: 100%;
  box-sizing: border-box;
  background: #242a37;
  border-radius: 18rpx;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  padding: 20rpx;
  font-size: 24rpx;
  margin-bottom: 20rpx;
  .content {
    padding: 0 20rpx;
    padding-top: 20rpx;
    width: 100%;
    :deep(.uv-form-item){
      background-color: #FFF;
      border-radius: 99px;
      padding:0 8px;
      margin-bottom: 20rpx;
      .uv-form-item__body{
        padding: 10rpx 0;
      }
    }
    .past-date {
      margin: 5px 0 8px;
      color: #ff1d0c;
    }
  }
  .footer {
    display: flex;
    justify-content: space-between;
    width: 100%;
    align-items: center;
    padding: 10rpx 0;
    padding-top: 20rpx;
    font-weight: bold;
    .left {
      display: flex;
      justify-content: space-between;
      font-size: 22rpx;
      padding: 0 20rpx;
      width: 100%;
      .btn {
        width: 49%;
        height: 70rpx;
        line-height: 70rpx;
        padding: 0;
        font-size: 32rpx;
        border-radius: 999px;
        border: 1rpx solid transparent;
        &:nth-child(2) {
          background-color: #ff1d0c;
		      color: #FFF;
        }
        &:nth-child(1) {
          background-color: var(--main-color);
        }
      }
    }
    .right {
      font-size: 20rpx;
    }
  }
}

</style>
