<template>
  <div class="detail">
    <div class="section">
      <div class="title">
        <div class="icon"></div>
        <p class="text">预约信息</p>
      </div>
      <div class="main">
        <span>{{ userInfo.realName }}</span
        >您好，您正在预约<span>{{ taskname }}</span
        >，请完善预约信息，完成预约。
      </div>
    </div>
    <div class="section">
      <div class="title">
        <div class="icon"></div>
        <p class="text">预约日期</p>
      </div>
      <div class="date">
        <p class="label">日期</p>
        <p class="value" @click="show = true">{{ appointdate }}</p>
        <div class="divide"></div>
        <img
          class="icon"
          @click="show = true"
          src="@/assets/govservice/open_icon.png"
          alt=""
        />
        <van-popup v-model="show" position="bottom">
          <van-picker
            show-toolbar
            :columns="
              dateList.map((item) => {
                return item.appointdate;
              })
            "
            @confirm="onConfirm"
            @cancel="show = false"
          />
        </van-popup>
      </div>
    </div>
    <div class="section">
      <div class="title">
        <div class="icon"></div>
        <p class="text">预约时间段</p>
      </div>
      <div class="cell" v-for="(item, index) in timeList" :key="index">
        <p class="label">{{ item.appointtimestart }}-{{ item.appointtimeend }}</p>
        <van-button
          class="button"
          :disabled="item.isappoint === '1' || item.appointsum >= item.appointmaxsum"
          @click="order(item)"
          >预约({{ item.appointsum }}/{{ item.appointmaxsum }})</van-button
        >
      </div>
    </div>
  </div>
</template>

<script>
import Vue from "vue";
import { Popup, Picker, Button } from "vant";
import { decryptByDES } from "@/utils/utils";
import { getCenter, getDate, getTime, order } from "@/api/govservice";

Vue.use(Popup).use(Picker).use(Button);

export default {
  data() {
    return {
      userInfo: {},
      taskguid: "", // 事项id
      taskname: "", // 事项名称
      center: {}, // 事项中心
      show: false,
      dateList: [], // 预约日期列表
      appointdate: "",
      timeList: [], // 预约时间段
    };
  },
  methods: {
    initCenter() {
      this.$toast.loading({
        duration: 0, // 持续展示 toast
        forbidClick: true,
        message: "加载中...",
      });
      getCenter({ taskguid: this.taskguid }).then((res) => {
        if (res.custom.centerlist.length > 0) {
          this.center = res.custom.centerlist[0];
          this.initDate();
        }
      });
    },
    initDate() {
      let params = {
        centerguid: this.center.centerguid,
        showdays: 7,
      };
      getDate(params).then((res) => {
        this.$toast.clear();
        this.dateList = res.custom.appointdatelist;
        this.appointdate = this.dateList[0].appointdate;
        this.initTime();
      });
    },
    initTime() {
      this.$toast.loading({
        duration: 0, // 持续展示 toast
        forbidClick: true,
        message: "加载中...",
      });
      let parmas = {
        appointdate: this.appointdate,
        centerguid: this.center.centerguid,
        taskguid: this.taskguid,
        accountguid: this.userInfo.userId,
        moblie: this.userInfo.mobileNo,
      };
      getTime(parmas).then((res) => {
        this.$toast.clear();
        this.timeList = res.custom.appointtimelist;
        if (!this.timeList || this.timeList.length <= 0) {
          this.$toast(res.custom.text);
        }
      });
    },
    onConfirm(value) {
      this.appointdate = value;
      this.show = false;
      this.initTime();
    },
    order(item) {
      console.log(item);
      this.$dialog
        .confirm({
          message: `${this.userInfo.realName}，您确认预约${this.taskname}事项吗？`,
          cancelButtonText: "再想想",
          confirmButtonText: "确认预约",
        })
        .then(() => {
          let params = {
            centerguid: this.center.centerguid,
            taskguid: this.taskguid,
            accountguid: this.userInfo.userId,
            username: this.userInfo.realName,
            identitycardid: this.userInfo.idCard,
            mobile: this.userInfo.mobileNo,
            appointdate: this.appointdate,
            appointtimestart: item.appointtimestart,
            appointtimeend: item.appointtimeend,
            appointtype: 2,
          };
          order(params).then((res) => {
            if (res.status.code === 200) {
              this.$toast("预约成功");
              setTimeout(() => {
                this.$router.go(-2);
              }, 1000);
            } else {
              this.$toast(res.status.text);
            }
          });
        })
        .catch(() => {
          console.log("取消");
        });
    },
  },
  created() {
    this.taskguid = this.$route.query.taskguid;
    this.taskname = this.$route.query.taskname;
    let res = sessionStorage.getItem("ZJCD-UserInfo");
    let userInfo = JSON.parse(res);
    userInfo.idCard = decryptByDES(userInfo.idCardNo, "MnuYbhGv");
    this.userInfo = userInfo;
    this.initCenter();
  },
};
</script>

<style lang="stylus" scoped>
.detail {
  height 100vh
  overflow-y auto;

  .section {
    margin-top 20px;
    background #fff;

    .title {
      height 80px;
      padding 0 20px;
      display flex;
      align-items center
      border-bottom 1px solid #eee

      .icon {
        width: 6px;
        height: 32px;
        background: #EB4E3F;
      }
      .text {
        margin-left 10px;
        font-size: 32px;
        font-weight: 600;
        color: #333333;
      }
    }

    .main {
      padding 30px
      line-height: 40px;
      font-size: 28px;
      color: #333333;

      span {
        color #EB4E3F
        font-weight 500
      }
    }

    .date {
      height 100px;
      padding 0 30px;
      display flex;
      align-items center

      .label {
        width 150px;
        font-size: 28px;
        color: #666666;
      }
      .value {
        width calc(100vw - 310px)
        margin-left 40px;
        font-size: 28px;
        color: #333333;
      }
      .divide {
        width: 4px;
        height: 30px;
        background: #D8D8D8;
      }

      .icon {
        margin-left 30px;
        width 24px;
        height 24px;
      }
    }

    .cell {
      height 100px;
      padding 0 30px;
      display flex;
      align-items center;
      justify-content space-between;
      border-bottom 1px solid #eee

      .label {
        font-size: 28px;
        color: #666666;
      }

      .button {
        height: 58px;
        background: #EB4E3F;
        border-radius: 4px;
        font-size: 26px;
        font-weight: 500;
        color: #FFFFFF;
      }
    }
  }
  .section:first-child {
    margin-top 0
  }
}
</style>
