<template>
  <div class="apply">
    <van-form ref="form">
      <van-field
        v-model="username"
        label="姓名"
        readonly
        placeholder="姓名"
        :rules="[{ required: true, message: '请填写姓名' }]"
      />
      <van-field
        v-model="userphone"
        readonly
        type="tel"
        label="联系电话"
        placeholder="联系电话"
        :rules="[{ required: true, message: '请填写联系电话' }]"
      />
      <van-field
        @click="() => (program = true)"
        v-model="radioname"
        label="套餐"
        placeholder="请选择套餐"
        readonly
        :rules="[{ required: true, message: '未选择套餐' }]"
      />
      <!-- <van-radio-group v-model="radio" direction="horizontal">
            <van-radio v-for="(item, i) in goodsLi" :key="i" :name="item.id"
              >{{ item.name }}({{ item.price }}元)</van-radio
            >
          </van-radio-group> -->
      <van-field
        @click="() => (dateInput = true)"
        v-model="selectTime"
        label="预定时间"
        placeholder="请选择预定时间"
        readonly
        :rules="[{ required: true, message: '未选择预定时间' }]"
      />
    </van-form>
    <br />
    <br />
    <div style="margin: 0 16px">
      <van-button color="#e42417" round block type="info" @click="onSubmit">
        确认预约
      </van-button>
      <br />
      <van-button round block type="default" @click="toAppointment">
        查看预约列表
      </van-button>
      <br />
      <!-- <van-button round block type="info" @click="price">
          查看价目表
        </van-button> -->
    </div>

    <a
      style="
        padding: 14px 0;
        display: block;
        color: #e42417;
        text-align: center;
        font-size: 14px;
      "
      href="tel:18706867629"
      >联系理发师：18706867629</a
    >

    <!-- #2a7ef4 -->
    <van-popup round v-model="dateInput" position="bottom">
      <van-picker
        title="选择预约时间"
        @cancel="dateInput = false"
        @confirm="onConfirm"
        value-key="startTime"
        show-toolbar
        :columns="tagList"
      />
    </van-popup>
    <!-- #2a7ef4 -->
    <van-popup round v-model="program" position="bottom">
      <van-picker
        title="选择套餐"
        @cancel="program = false"
        @confirm="onConfirmpro"
        value-key="name"
        show-toolbar
        :columns="goodsLi"
      />
    </van-popup>
  </div>
</template>

<script>
// @ is an alias to /src
import {
  Form as vanForm,
  Field as vanField,
  Button as vanButton,
  Popup as vanPopup,
  //   RadioGroup as vanRadioGroup,
  //   Radio as vanRadio,
  Picker as vanPicker,
  ImagePreview,
} from "vant";
import "vant/lib/form/style/index";
import "vant/lib/tag/style/index";
import "vant/lib/field/style/index";
import "vant/lib/button/style/index";
import "vant/lib/popup/style/index";
import "vant/lib/picker/style/index";
import {
  apply,
  goodsList,
  applyrang,
} from "../api/index";

export default {
  name: "Apply",
  data() {
    return {
      program: false,
      username: "",
      userphone: "",
      date: "",
      currentDate: "",
      dateInput: false,
      minDate: new Date(Date.now()),
      maxDate: new Date(Date.now() + 86400000),
      radio: "",
      radioname: "",
      finished: false,
      loading: false,

      goodsLi: [],
      tagList: [],
    };
  },
  mounted() {
    const userDate = JSON.parse(localStorage.getItem("user") || '{}');
    this.userphone = userDate.telNumber;
    this.username = userDate.name;
    goodsList({
      userPhone: this.userphone || "",
    }).then(res => {
      this.goodsLi = (res || []).map(v => {
        v.name = v.name + "(" + v.price + "元)";
        return v;
      });
      this.radio = (this.goodsLi[0] || {}).id;
    });
    applyrang().then(res => {
      let l = res || [],
        nl = [],
        o = {};
      for (let i = 0; i < l.length; i++) {
        const v = l[i];
        if (v.isOrder === 1) continue;
        let keys = v.startTime.split(" "),
          key = keys[0],
          val = keys[1];
        v.startTime = val.replace(/:00$/, "");
        if (o[key] >= 0) {
          nl[o[key]].children.push(v);
        } else {
          o[key] = nl.length;
          nl[o[key]] = {
            startTime: key,
            children: [v],
          };
        }
      }
      this.tagList = nl;
    });
  },
  computed: {
    selectTime() {
      return this.date;
    },
  },
  methods: {
    price() {
      ImagePreview([
        "https://djweb.smcic.net/miniProgrammeData/img/price.jpg?v=" +
          Date.now(),
      ]);
    },
    toAppointment() {
      this.$router.push({
        name: "Appointment",
        query: {
          userName: this.username,
          phone: this.userphone,
        },
      });
    },
    filter(type, options) {
      if (type === "minute") {
        return options.filter(option => option % 5 === 0);
      }
      return options;
    },
    onSubmit() {
      this.$refs.form.validate().then(() => {
        apply({
          userName: this.username,
          userPhone: this.userphone,
          goodsId: this.radio,
          orderTime: this.date + ":00",
        }).then(() => {
          this.toAppointment();
        });
      });
    },
    onConfirm(date) {
      this.dateInput = false;
      this.date = date.join(" ");
    },
    onConfirmpro(date) {
      this.program = false;
      this.radio = date.id;
      this.radioname = date.name;
    },
  },
  beforeUnmount: function () {},
  components: {
    vanForm,
    vanField,
    vanPopup,
    vanButton,
    // vanRadioGroup,
    // vanRadio,
    vanPicker,
  },
};
</script>

<style>
.apply {
  height: 100%;
  background-color: #fff;
}
.apply .van-tag {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.apply .van-radio {
  margin-bottom: 3px;
}
.apply .van-button--default {
  border-color: #c7c8c8;
}
</style>
