<template>
  <div class="date_picker_dialog_container">
    <div class="modal_content">
      <svg
        xmlns="http://www.w3.org/2000/svg"
        xmlns:xlink="http://www.w3.org/1999/xlink"
        fill="none"
        version="1.1"
        width="125"
        height="32"
        viewBox="0 0 125 32"
      >
        <g>
          <g>
            <g>
              <path
                d="M39.566,17.848L50.544,17.848L50.544,24.03L39.566,24.03L39.566,17.848ZM39.566,16.22L39.566,10.258L50.544,10.258L50.544,16.22L39.566,16.22ZM37.872,8.608L37.872,27.1162L39.566,27.1162L39.566,25.68L50.544,25.68L50.544,27.0058L52.304,27.0058L52.304,8.608L37.872,8.608ZM60.796,22.446C60.135999999999996,23.92,58.97,25.394,57.738,26.384C58.134,26.626,58.794,27.088,59.102000000000004,27.353C60.29,26.252,61.566,24.558,62.358000000000004,22.886L60.796,22.446ZM63.942,23.128C64.8,24.162,65.812,25.614,66.208,26.516L67.572,25.724C67.11,24.822,66.098,23.458,65.218,22.446L63.942,23.128ZM75.69,9.708L75.69,13.25L71.18,13.25L71.18,9.708L75.69,9.708ZM69.64,8.212L69.64,16.198C69.64,19.366,69.464,23.568,67.616,26.494C67.99000000000001,26.67,68.672,27.154,68.936,27.4421C70.256,25.35,70.828,22.534,71.048,19.872L75.69,19.872L75.69,25.218C75.69,25.57,75.55799999999999,25.658,75.25,25.68C74.92,25.702,73.798,25.702,72.632,25.658C72.852,26.098,73.094,26.824,73.16,27.264C74.76599999999999,27.264,75.822,27.242,76.438,26.956C77.076,26.692,77.274,26.186,77.274,25.24L77.274,8.212L69.64,8.212ZM75.69,14.724L75.69,18.376L71.136,18.376C71.18,17.606,71.18,16.88,71.18,16.198L71.18,14.724L75.69,14.724ZM65.394,7.376L65.394,10.038L61.39,10.038L61.39,7.376L59.894,7.376L59.894,10.038L58.024,10.038L58.024,11.512L59.894,11.512L59.894,20.51L57.716,20.51L57.716,21.984L68.562,21.984L68.562,20.51L66.934,20.51L66.934,11.512L68.562,11.512L68.562,10.038L66.934,10.038L66.934,7.376L65.394,7.376ZM61.39,11.512L65.394,11.512L65.394,13.47L61.39,13.47L61.39,11.512ZM61.39,14.79L65.394,14.79L65.394,16.946L61.39,16.946L61.39,14.79ZM61.39,18.288L65.394,18.288L65.394,20.51L61.39,20.51L61.39,18.288ZM82.444,8.52C83.61,9.554,85.084,11.028,85.76599999999999,11.974L86.888,10.808C86.184,9.906,84.71000000000001,8.476,83.52199999999999,7.50559L82.444,8.52ZM80.706,14.02L80.706,15.604L83.80799999999999,15.604L83.80799999999999,23.5078C83.80799999999999,24.5209,83.126,25.2479,82.708,25.5122C83.01599999999999,25.8426,83.456,26.5253,83.61,26.9216C83.94,26.4813,84.53399999999999,26.0406,88.45,23.1335C88.25200000000001,22.8032,87.988,22.1865,87.856,21.7458L85.414,23.5298L85.414,14.02L80.706,14.02ZM90.562,7.904L90.562,10.346C90.562,11.974,90.078,13.8,87.174,15.12C87.482,15.384,88.054,16.022,88.25200000000001,16.352C91.42,14.834,92.124,12.458,92.124,10.39L92.124,9.444L96.018,9.444L96.018,12.986C96.018,14.658,96.326,15.274,97.866,15.274C98.108,15.274,99.186,15.274,99.516,15.274C99.956,15.274,100.418,15.252,100.682,15.164C100.616,14.79,100.572,14.152,100.528,13.734C100.264,13.8,99.802,13.844,99.494,13.844C99.208,13.844,98.218,13.844,97.976,13.844C97.624,13.844,97.58,13.646,97.58,13.008L97.58,7.904L90.562,7.904ZM97.47,18.376C96.678,20.1381,95.49000000000001,21.5918,94.038,22.7592C92.564,21.5478,91.398,20.0721,90.606,18.376L97.47,18.376ZM88.208,16.836L88.208,18.376L89.352,18.376L89.044,18.4863C89.924,20.5124,91.178,22.2745,92.74000000000001,23.7062C91.09,24.7632,89.19800000000001,25.4902,87.262,25.9306C87.57,26.2829,87.922,26.9436,88.054,27.3623C90.188,26.7896,92.212,25.9526,93.994,24.7412C95.666,25.9746,97.668,26.8776,99.934,27.4283C100.132,26.9656,100.594,26.3049,100.946,25.9526C98.834,25.5122,96.94200000000001,24.7412,95.336,23.7062C97.206,22.0765,98.702,19.9621,99.582,17.21L98.57,16.77L98.284,16.836L88.208,16.836ZM116.962,9.136L120.68,9.136L120.68,11.116L116.962,11.116L116.962,9.136ZM111.814,9.136L115.444,9.136L115.444,11.116L111.814,11.116L111.814,9.136ZM106.798,9.136L110.296,9.136L110.296,11.116L106.798,11.116L106.798,9.136ZM106.82,16.198L106.82,25.46L103.894,25.46L103.894,26.692L123.43,26.692L123.43,25.46L120.416,25.46L120.416,16.198L113.53,16.198L113.838,14.9L122.924,14.9L122.924,13.602L114.08,13.602L114.322,12.326L122.33,12.326L122.33,7.948L105.214,7.948L105.214,12.326L112.628,12.326L112.452,13.602L104.136,13.602L104.136,14.9L112.232,14.9L111.968,16.198L106.82,16.198ZM108.404,25.46L108.404,24.096L118.788,24.096L118.788,25.46L108.404,25.46ZM108.404,19.542L118.788,19.542L118.788,20.818L108.404,20.818L108.404,19.542ZM108.404,18.552L108.404,17.32L118.788,17.32L118.788,18.552L108.404,18.552ZM108.404,21.808L118.788,21.808L118.788,23.106L108.404,23.106L108.404,21.808Z"
                fill="#000000"
                fill-opacity="1"
              />
            </g>
          </g>
          <g>
            <path
              d="M24.375,8.4L21.1504,8.4C21.1504,7.075,20.0586,6,18.7129,6L18.3066,6C16.9609,6,15.8691,7.075,15.8691,8.4L10.1562,8.4C10.1562,7.7375,9.88457,7.1375,9.44277,6.7025C9.00098,6.2675,8.3916,6,7.71875,6L7.3125,6C5.9668,6,4.875,7.075,4.875,8.4L1.625,8.4C0.728711,8.4,0,9.115,0,10L0,28.4C0,29.2825,0.728711,30,1.625,30L24.375,30C25.2713,30,26,29.2825,26,28.4L26,10C26,9.115,25.2713,8.4,24.375,8.4ZM17.4941,8.6C17.4941,8.0475,17.9486,7.6,18.5098,7.6C19.0709,7.6,19.5254,8.0475,19.5254,8.6L19.5254,10.6C19.5254,11.1525,19.0709,11.6,18.5098,11.6C18.2305,11.6,17.9766,11.4875,17.7912,11.307500000000001C17.6084,11.125,17.4941,10.875,17.4941,10.6L17.4941,8.6ZM6.5,8.6C6.5,8.0475,6.95449,7.6,7.51563,7.6C8.07676,7.6,8.53125,8.0475,8.53125,8.6L8.53125,10.6C8.53125,11.1525,8.07676,11.6,7.51563,11.6C7.23633,11.6,6.98242,11.4875,6.79707,11.307500000000001C6.61426,11.125,6.5,10.875,6.5,10.6L6.5,8.6ZM24.375,27.6C24.375,28.0425,24.0119,28.4,23.5625,28.4L2.4375,28.4C1.98809,28.4,1.625,28.0425,1.625,27.6L1.625,16.4L24.375,16.4L24.375,27.6ZM2.4375,18L8.9375,18L8.9375,22L2.4375,22L2.4375,18ZM2.4375,22.8L8.9375,22.8L8.9375,26.8L2.4375,26.8L2.4375,22.8ZM9.75,18L16.25,18L16.25,22L9.75,22L9.75,18ZM9.75,22.8L16.25,22.8L16.25,26.8L9.75,26.8L9.75,22.8ZM17.0625,18L23.5625,18L23.5625,22L17.0625,22L17.0625,18ZM17.0625,22.8L23.5625,22.8L23.5625,26.8L17.0625,26.8L17.0625,22.8Z"
              fill="#06518B"
              fill-opacity="1"
            />
          </g>
        </g>
      </svg>
      <div class="select_wrap">
        <van-date-picker
          v-model="currentDate"
          :formatter="formatter"
          :columns-type="columnsType"
          :show-toolbar="false"
          option-height="33"
          visible-option-num="5"
        />
      </div>
      <div class="btns">
        <div class="cancel" @click="handleCancel">取消</div>
        <div class="ok" @click="selectDate">确定</div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useSettingStore } from '@/store'

const settingStore = useSettingStore()
const props = defineProps({
  hideDatePicker: {
    type: Function,
  },
})
const currentDate = ref(['2023', '08', '08'])
const columnsType = ref(['year', 'month', 'day'])
const formatter = (type, option) => {
  if (type === 'year') {
    option.text += '年'
  }
  if (type === 'month') {
    option.text += '月'
  }
  if (type === 'day') {
    option.text += '日'
  }
  return option
}

const handleCancel = () => {
  props.hideDatePicker()
}

const selectDate = () => {
  settingStore.updateCurrentDate(currentDate.value)
  props.hideDatePicker()
}
</script>

<style lang="scss" scoped>
.date_picker_dialog_container {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  .modal_content {
    width: 476px;
    height: 389px;
    border-radius: 16px;
    background: #ffffff;
    box-sizing: border-box;
    overflow: hidden;
    padding: 28px 57px 32px 57px;
    display: flex;
    align-items: center;
    flex-direction: column;
    .select_wrap {
      width: 362px;
      height: 163px;
      margin: 33px 0;
      overflow: hidden;
    }
    .btns {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 362px;
      height: 68px;
      .cancel {
        width: 173px;
        height: 68px;
        border-radius: 34px;
        background: #d8d8d8;
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: Source Han Sans CN;
        font-size: 23px;
        font-weight: 350;
        letter-spacing: 0em;
        color: #ffffff;
      }
      .ok {
        width: 173px;
        height: 68px;
        border-radius: 34px;
        background: #06518b;
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: Source Han Sans CN;
        font-size: 23px;
        font-weight: 350;
        letter-spacing: 0em;
        color: #ffffff;
      }
    }
  }
}
</style>
