<script lang="ts" setup>
import { ref, reactive, watch, unref, watchEffect } from "vue";
interface props {
  type?: Number | string; // targetType 目标地址 port 目标端口
  isShow?: Number | string; // dept 部门 custom 自定义 3 常见端口 immediately 立即执行 custom_point 定时执行 daily 每天一次 weekly 每周一次 monthly_day 每月一次（按日期）monthly_week 每月一次（按星期）
  disabled?: boolean; // 是否可编辑
  dataValue?: Object; // 编辑对象
  showType?: Number | string; // 1 自定义输入框 2 自定义表格
  // value?: any[] | number | string | boolean, // 绑定值
}

const {
  isShow = 0,
  disabled = false,
  dataValue = {},
  showType = 1,
} = defineProps<props>();
const emit = defineEmits(["modelValue", "dateValue"]);
const value = ref([]);
const portValue = ref(1);
const dateObj = reactive({
  weekDay: "",
  time: "",
  month: "",
  allWeek: "",
  type: "",
});
const resetDateObj = () => {
  dateObj.time = "";
  dateObj.weekDay = "";
  dateObj.month = "";
  dateObj.allWeek = "";
  dateObj.type = "";
};
defineExpose({
  resetDateObj,
});
/**
 * @description: 日期数据
 */
const weekList = ref([
  {
    value: "2",
    label: "星期一",
  },
  {
    value: "3",
    label: "星期二",
  },
  {
    value: "4",
    label: "星期三",
  },
  {
    value: "5",
    label: "星期四",
  },
  {
    value: "6",
    label: "星期五",
  },
  {
    value: "7",
    label: "星期六",
  },
  {
    value: "1",
    label: "星期日",
  },
]);
/**
 * @description: 获取当前月份的天数
 */
const getCountDays = () => {
  var curDate = new Date();
  var curMonth = curDate.getMonth();
  curDate.setMonth(curMonth + 1);
  curDate.setDate(0);
  /* 返回当月的天数 */
  return curDate.getDate();
};
/**
 * @description: 获取当前月份的星期数
 */
const getWeekDays = () => {
  let d = new Date();
  let year = d.getFullYear();
  let month = d.getMonth() + 1;
  let time = year + `/` + month + `/` + `01`;
  let startDate = new Date(time);
  let day =
    parseInt(startDate.getDay()) == 0 ? 7 : parseInt(startDate.getDay());
  // 判断当月有几周
  let days = new Date(year, month, 0).getDate();
  let y = days % 7;
  if (7 - day >= y) {
    var zhou = parseInt(days / 7) + 1;
  } else {
    var zhou = parseInt(days / 7) + 2;
  }
  let endDate = new Date(year + `/` + month + `/` + days).getDay();
  if (endDate == 0) {
    zhou = zhou - 1;
  }
  return zhou;
};
const monthList = ref([]);
for (var i = 1; i < getCountDays() + 1; i++) {
  monthList.value.push({
    value: i.toString(),
    label: i + "日",
  });
}
const allWeekList = ref([]);
for (var i = 1; i < getWeekDays() + 1; i++) {
  allWeekList.value.push({
    value: i.toString(),
    label: i,
  });
}
watch(
  () => dataValue,
  (newVal) => {
    if (newVal) {
      if (newVal.type == "custom_point") {
        dateObj.time = newVal.startTime;
      } else {
        dateObj.time = newVal.executeTime;
      }
      if (newVal.type == "monthly_week") {
        let str = newVal.typeParam?.split(",")||[];
        dateObj.allWeek = str[0]||'';
        dateObj.weekDay = str[1]||'';
      } else {
        dateObj.weekDay = newVal.typeParam;
      }
    }
  },
  { immediate: true ,deep:true}
);
watchEffect(() => {
  emit("modelValue", unref(value) | unref(portValue));
  emit("dateValue", dateObj);
});
</script>
<template>
  <div class="add-form">
    <el-date-picker
      v-if="isShow == 'custom_point'"
      v-model="dateObj.time"
      type="datetime"
      placeholder="请选择"
      value-format="YYYY-MM-DD HH:mm:ss"
    />
    <el-time-picker
      v-if="isShow == 'daily'"
      style="width: 100%"
      v-model="dateObj.time"
      format="HH:mm"
      value-format="HH:mm"
      placeholder="请选择"
    />
    <div v-if="isShow == 'weekly'" class="flex-st">
      <div class="flex-one">
        <el-select placeholder="请选择" v-model="dateObj.weekDay">
          <el-option
            v-for="item in weekList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </div>
      <div class="margin-left5">
        <el-time-picker
          style="width: 100%"
          v-model="dateObj.time"
          format="HH:mm"
          value-format="HH:mm"
          placeholder="请选择"
        />
      </div>
    </div>
    <div v-if="isShow == 'monthly_day'" class="flex-st">
      <div class="flex-one">
        <el-select placeholder="请选择" v-model="dateObj.weekDay">
          <el-option
            v-for="item in monthList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </div>
      <div class="margin-left5">
        <el-time-picker
          v-model="dateObj.time"
          format="HH:mm"
          value-format="HH:mm"
          placeholder="请选择"
        />
      </div>
    </div>
    <div v-if="isShow == 'monthly_week'" class="flex-st">
      <div class="flex-st">
        <span class="color-span">第</span>
        <el-select
          class="margin-left5"
          style="min-width: 100px"
          placeholder="请选择"
          v-model="dateObj.allWeek"
        >
          <el-option
            v-for="item in allWeekList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
        <span class="margin-left5 color-span">个</span>
      </div>
      <div class="margin-left5">
        <el-select placeholder="请选择" v-model="dateObj.weekDay">
          <el-option
            v-for="item in weekList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </div>
      <div class="margin-left5">
        <el-time-picker
          style="width: 100%"
          v-model="dateObj.time"
          format="HH:mm"
          value-format="HH:mm"
          placeholder="请选择"
        />
      </div>
    </div>
  </div>
</template>
<style scoped lang="scss">
.add-form {
  width: 100%;
  margin-top: 10px;
}
.flex-st {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.flex-one {
  flex: 1;
}
.width40 {
  margin-left: 20px;
}
.margin-left5 {
  margin-left: 5px;
}
.color-span {
  color: rgba(0, 0, 0, 0.65);
}
.ya-tableList {
  margin-top: 10px;
}
.custom-label {
  font-size: var(--el-form-label-font-size);
  color: var(--el-text-color-primary);
}
.custom-content {
  height: 91px;
  background: #ffffff;
  border-radius: 2px;
  border: 1px solid #e4e4e4;
  padding: 10px;
  padding-right: 0;
  overflow-y: auto;
  .custom-tag {
    margin-right: 10px;
    border: 1px solid rgba(0, 0, 0, 0.16);
    background: #fff;
    border-radius: 2px;
  }
}
.custom-content-disabled {
  background: rgba(0, 0, 0, 0.03);
  border: 1px solid rgba(0, 0, 0, 0.12);
  cursor: not-allowed;
  .custom-tag {
    background: rgba(0, 0, 0, 0.05);
    color: rgba(0, 0, 0, 0.6);
  }
}
</style>
