<template>
  <div class="detail">
    <div class="white-box top-box">当前企业：{{ userBizMainDetail.qymc }}</div>

    <div class="white-box part-1">
      <div class="custom-item-tit">
        <div class="tit">场馆信息</div>
      </div>
      <div class="cell-item">
        <p class="label">场馆名称</p>
        <p class="tit">
          {{
            roomDetial.roomName == null || undefined == roomDetial.roomName
              ? ""
              : roomDetial.roomName
          }}
        </p>
      </div>
      <div class="cell-item">
        <p class="label">场馆位置</p>
        <p class="tit">{{ roomDetial.position }}</p>
      </div>
      <div class="cell-item">
        <p class="label">座位数</p>
        <p class="tit">{{ roomDetial.seatNumber }}</p>
      </div>

      <div class="cell-item">
        <p class="label">配套</p>
        <p class="tit">{{ roomDetial.match }}</p>
      </div>
      <div class="cell-item">
        <p class="label">收费标准</p>
        <p class="tit">{{ roomDetial.charges }}</p>
      </div>
      <div class="cell-item flex-item">
        <p class="label">预约电话</p>
        <p class="tit tel-box">
          <span>{{ roomDetial.appointPhone }}</span>
          <TelNum :num="roomDetial.appointPhone" :showTel="false" />
        </p>
      </div>
    </div>

    <div class="white-box part-4">
      <div class="custom-item-tit">
        <div class="tit">场馆预约</div>
      </div>
    </div>
    <!-- 日期搜索 -->
    <div class="white-box filter-box">
      <p class="tit">使用时间</p>
      <div class="filter-input-box">
        <div class="custom-input-box" @click="showStartPicker = true">
          <input
            type="text"
            v-model="formatStartTime"
            placeholder="开始时间"
            readonly
          />
        </div>
        <span>至</span>
        <div class="custom-input-box" @click="showEndPicker = true">
          <input
            type="text"
            @click="showPicker_timeSlot = true"
            v-model="appointFrom.timeSlotName"
            placeholder="时间段"
            readonly
          />
          <van-popup v-model="showPicker_timeSlot" position="bottom">
            <van-picker
              show-toolbar
              :columns="timeList"
              @confirm="(value) => onConfirm(value)"
              @cancel="showPicker_timeSlot = false"
            />
          </van-popup>
        </div>
      </div>
    </div>

    <div class="white-box part-2 form-part">
      <van-field
        class="input-item"
        label="场馆主题"
        v-model="appointFrom.subject"
        placeholder="请填写"
        input-align="right"
      />

      <van-field
        class="input-item"
        label="参会人数"
        v-model="appointFrom.peopleNumber"
        placeholder="请填写"
        input-align="right"
      />

      <van-field
        class="input-item"
        label="联系人"
        v-model="appointFrom.contacts"
        placeholder="请填写"
        input-align="right"
      />

      <van-field
        class="input-item"
        label="联系电话"
        v-model="appointFrom.phone"
        placeholder="请填写"
        input-align="right"
      />

      <van-field
        rows="4"
        autosize
        v-model="appointFrom.remarks"
        label="备注"
        class="textarea-item input-item-warp"
        type="textarea"
        placeholder="请填写"
      >
      </van-field>
    </div>

    <div class="repair-bottom bottom-button" v-if="!isDetial">
      <button class="btn" @click="meetingAppointSubmit">提交</button>
    </div>
    <!-- 开始时间 -->
    <van-popup v-model="showStartPicker" position="bottom">
      <van-datetime-picker
        v-model="startTime"
        type="date"
        title="选择开始时间"
        @confirm="startTimeConfirml"
        @cancel="startTimeCancel"
      />
    </van-popup>
  </div>
</template>
<script>
import { Toast } from "vant";
import Base from "@/pages/base/base";
import { formatDate } from "@/plugins/dateFormat";
import auth from "@/service/auth";
import TelNum from "@/components/tel-number";
import { getCompanyById } from "@/service/api_mnpCompany";
import {
  meetingRoomDetail,
  roomTimeSoltUseful,
  meetingAppoint,
} from "@/service/api_venue";
import { meetingAppointDetail } from "@/service/api_venue_appoint";
export default {
  mixins: [Base],
  components: {
    TelNum,
  },
  data() {
    return {
      active: "",
      dc_key: ["timeSlot"],
      roomId: "",
      // groupId: '870312050646056960',
      currUser: {},
      roomDetial: {},
      userBizMainDetail: {},
      //预约请求对象
      appointFrom: {},
      //停车场信息
      lotInfo: {},
      //车位列表
      seatList: [],
      //数量
      num: -1,
      isDetial: false,

      showPicker_timeSlot: false,
      showPicker_industry: false,
      showStartPicker: false,
      showEndPicker: false,
      startTime: new Date(),
      formatStartTime: "",
      endTime: "",
      formatEndTime: "",
      //  日期列表
      dateList: [
        {
          date: "8/1",
          typeList: ["1", "3", "4"],
        },
        {
          date: "8/2",
          typeList: ["1", "2", "4"],
        },
        {
          date: "8/3",
          typeList: ["4", "2", "1"],
        },
      ],

      //   时间段列表
      timeList: [],
    };
  },
  mounted() {
    this.currUser = auth.currUser();
    this.roomId = this.$route.query.id;
    this.isDetial = this.$route.query.isDetial;
    this.getUserMain();
    this.getDetail();
    this.initDict(this.dc_key).then((res) => {
      if (this.isDetial == true) {
        this.getOrderDetail();
      } else {
        this.getDetail();
      }
    });
  },
  methods: {
    onConfirm(value) {
      this.appointFrom.timeSlotName = value.text;
      this.appointFrom.timeSlot = value.value;
      this.showPicker_timeSlot = false;
    },

    //获取公司名称
    getUserMain() {
      let reqData = {
        id: this.currUser.id,
      };
      getCompanyById(reqData).then((res) => {
        console.log("获取用户信息——：", res);
        this.userBizMainDetail = res.data;
      });
    },

    //场馆详情
    getDetail() {
      let reqData = {
        id: this.roomId,
      };
      meetingRoomDetail(reqData).then((res) => {
        this.roomDetial = res.data;
      });
    },

    //获取订单详情
    getOrderDetail() {
      let reqData = {
        id: this.roomId,
      };
      let dayjs = require("dayjs");

      meetingAppointDetail(reqData).then((res) => {
        if (res.key == 200) {
          this.roomDetial = res.data.roomDetial;
          this.appointFrom = res.data.oderDetial;

          this.formatStartTime = dayjs(res.data.oderDetial.useTime).format(
            "YYYY-MM-DD"
          );
          this.appointFrom.timeSlotName =
            this.dc_map.timeSlot[res.data.oderDetial.timeSlot];
          // this.formatEndTime = res.data.oderDetial.timeSlot;
        }
      });
    },

    //获取日期可以选择的区间
    getRoomTime(roomTime) {
      let reqData = {
        id: this.roomId,
        useTime: roomTime,
      };
      roomTimeSoltUseful(reqData).then((res) => {
        this.timeList = res.data;
        console.log("获取日期可以选择的区间_:", res);
      });
    },

    //提交预约
    meetingAppointSubmit() {
      if (
        "" == this.formatStartTime ||
        null == this.formatStartTime ||
        undefined == this.formatStartTime ||
        "" == this.appointFrom.timeSlotName ||
        null == this.appointFrom.timeSlotName ||
        undefined == this.appointFrom.timeSlotName
      ) {
        Toast("请选择使用时间！");
        return false;
      }

      this.appointFrom.useTime = this.formatStartTime;
      this.appointFrom.createdId = this.currUser.id;
      this.appointFrom.groupId = this.groupId;
      this.appointFrom.meetingRoomId = this.roomDetial.id;
      this.appointFrom.enterpriseId = this.userBizMainDetail.id;
      meetingAppoint(this.appointFrom).then((res) => {
        console.log("提交预约_:", res);
        if (res.key == 200) {
          Toast("提交成功,请等待管理人员审核！");
          this.goNavigator("venue");
        }
      });
    },

    /**
     * 开始时间弹窗取消
     */
    startTimeCancel() {
      this.showStartPicker = false;
    },
    /**
     * 开始时间弹窗确认
     */
    startTimeConfirml(val) {
      this.formatStartTime = formatDate(val, "day");
      this.showStartPicker = false;
      this.getRoomTime(this.formatStartTime);
    },
    /**
     * 结束时间弹窗取消
     */
    endTimeCancel() {
      this.showEndPicker = false;
    },
    /**
     * 结束时间弹窗确认
     */
    endTimeConfirml(val) {
      this.formatEndTime = formatDate(val, "day");
      this.showEndPicker = false;
    },
  },
};
</script>
<style lang="scss" scoped>
.detail {
  padding: 0 0 180px;
  overflow: hidden;

  .top-box {
    height: 100px;
    line-height: 100px;
    font-size: 30px;
    color: #333;
  }

  .part-1 {
    margin-bottom: 20px;
  }

  .filter-box {
    padding: 0 30px 30px;
    margin-bottom: 20px;

    .tit {
      font-size: 34px;
      padding-bottom: 30px;
    }
  }

  .filter-input-box {
    display: flex;
    align-items: center;
    justify-content: space-between;

    .custom-input-box {
      width: 250px;
    }

    .confirm-btn {
      width: 100px;
      height: 80px;
      border-radius: 10px;
      color: $fc;
      background-color: $text6;

      i {
        font-size: 35px;
      }
    }
  }

  .part-2 {
    padding: 30px;
  }

  .part-4 {
    margin-bottom: 0;
  }
}
</style>
