<template>
  <div class="myDateForm2">
    <div v-if="!isDisabled" class="base_form date_form w-full">
      <div class="label">
        <Icon iconName="icondd" class="pre-tag" size="18"></Icon>
        <div class="label-text" :title="label">{{ label }}</div>
      </div>
      <el-config-provider :locale="zhCn">
        <el-date-picker
          class="date-picker"
          @change="change"
          v-model="inputValue"
          type="date"
          placeholder="请选择日期"
        ></el-date-picker>
      </el-config-provider>
    </div>
    <base-form v-else :label="label || ''" isDisabled>
      <i class="iconfont iconxingzhuang icon_date"></i>
    </base-form>
  </div>
</template>

<script lang="ts" setup>
import { nextTick, onMounted, ref } from "vue";
import BaseForm from "./BaseForm.vue";
import { ElDatePicker, ElConfigProvider } from "element-plus";
import zhCn from "element-plus/lib/locale/lang/zh-cn";
import Icon from "@/components/Icon/index.vue";
const props = withDefaults(
  defineProps<{
    label?: string;
    isDisabled?: boolean;
    value?: string;
  }>(),
  {}
);

const inputValue = ref<Date | string>("");
const $emit = defineEmits(["changeValue"]);

onMounted(() => {
  if (props.value) {
    if (isValidDate(new Date(Number(props.value + "000")))) {
      inputValue.value = new Date(Number(props.value + "000"));
    } else {
      inputValue.value = "";
    }
  } else {
    inputValue.value = "";
  }
});

const isValidDate = (date: any) => {
  return date instanceof Date && !isNaN(date.getTime());
};
const change = () => {
  nextTick(() => {
    let date = new Date(inputValue.value);
    let t = String(date.valueOf());
    $emit(`changeValue`, t.substring(0, t.length - 3), `value`);
  });
};
</script>
<style lang="scss">
.myDateForm2 {
  .date_form {
    .el-input {
      flex-grow: 1;
    }
  }
  .date-picker {
    flex-shrink: 0;
    .el-input__inner {
      height: 36px;
      color: #353535;
      border-radius: var(--sy-border-radius);
      &:hover {
        box-shadow: 0 0 0 1px #c4c4c4 inset;
      }
      &:focus {
        box-shadow: 0 0 0 1px
          var(--el-input-border-color, var(--el-border-color)) inset !important;
      }
      .el-input__inner::placeholder {
        color: #a3a7aa;
      }
    }
  }
}
</style>

<style scoped lang="scss">
.base_form {
  position: relative;
  padding-left: 18px;
  line-height: 65px;
  height: 65px;
  font-size: 0;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.label {
  display: inline-block;
  width: 100px; /* 104 - 18 */
  flex-shrink: 0;

  height: 44px;
  line-height: 44px;
  color: #797d84; /* todo ui图颜色不一致 */
  font-size: 14px;
  font-weight: 300;

  position: relative;
}
.label-text {
  text-overflow: ellipsis;
  white-space: nowrap; /*规定段落中的文本不进行换行 */
  overflow: hidden;
}

.icon_date {
  color: #8a8a8a;
  position: absolute;
  right: 24px;
}

.pre-tag {
  position: absolute;
  left: -50px;
  top: 14px;
  display: none;
}
</style>
