<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 }}</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">
        <!-- @click="showStartPicker = true" -->
        <div class="custom-input-box">
          <input
            type="text"
            v-model="formatStartTime"
            placeholder="开始时间"
            readonly
          />
        </div>
        <span>至</span>
        <!-- @click="showEndPicker = true" -->
        <div class="custom-input-box">
          <input
            type="text"
            v-model="formatEndTime"
            placeholder="时间区间"
            readonly
          />
        </div>
      </div>
    </div>

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

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

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

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

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

    <div class="white-box part-5 form-part">
      <div class="custom-item-tit">
        <div class="tit">审核结果</div>
      </div>

      <div class="cell-item">
        <p class="label">审核结果</p>
        <p class="tit">
          {{ oderDetial.state == 5 ? "审核未通过" : "审核通过" }}
        </p>
      </div>

      <div class="cell-item">
        <p class="label">取消原因</p>
        <p class="tit">{{ oderDetial.cancelReason }}</p>
      </div>

      <div class="cell-item">
        <p class="label">经办人</p>
        <p class="tit">{{ oderDetial.examineName }}</p>
      </div>

      <div class="cell-item">
        <p class="label">经办时间</p>
        <p class="tit">{{ oderDetial.examineTime }}</p>
      </div>
    </div>

    <div class="white-box part-5 form-part">
      <div class="custom-item-tit">
        <div class="tit">支付凭证</div>
      </div>
      <div class="cell-item">
        <p class="label">支付方式</p>
        <div class="tit">
          <van-radio-group v-model="payFrom.payType">
            <van-radio name="2" checked-color="#976CEB">微信</van-radio>
            <van-radio name="1" checked-color="#976CEB">支付宝</van-radio>
          </van-radio-group>
        </div>
      </div>
      <van-field
        class="input-item"
        label="支付人名称"
        v-model="payFrom.payUser"
        input-align="right"
        placeholder="请填写"
      />
      <div class="block-cell-item">
        <p class="label">
          凭证上传
          <span class="tips">（支持图片上传限20M内，最多1张）</span>
        </p>
        <div class="tit">
          <van-uploader
            :multiple="true"
            v-model="fileUrls"
            :deletable="!isDetial"
            :max-count="1"
            :after-read="afterRead"
          >
          </van-uploader>
        </div>
      </div>
    </div>

    <div class="white-box part-5 form-part" v-if="oderDetial.state > 2">
      <div class="custom-item-tit">
        <div class="tit">确认结果</div>
      </div>

      <div class="cell-item">
        <p class="label">确认结果</p>
        <p class="tit">
          {{
            oderDetial.state == 4
              ? "预定成功"
              : oderDetial.state == 3
              ? "等待确认"
              : "已取消"
          }}
        </p>
      </div>

      <div class="cell-item">
        <p class="label">取消原因</p>
        <p class="tit">{{ oderDetial.cancelReason }}</p>
      </div>

      <div class="cell-item">
        <p class="label">经办人</p>
        <p class="tit">{{ oderDetial.examineName }}</p>
      </div>

      <div class="cell-item">
        <p class="label">经办时间</p>
        <p class="tit">{{ oderDetial.examineTime }}</p>
      </div>
    </div>

    <div class="repair-bottom bottom-button" v-if="!isDetial">
      <button class="btn" @click="paySubmit">提交</button>
    </div>
    <!-- 开始时间 -->
    <van-popup v-model="showStartPicker" position="bottom">
      <van-datetime-picker
        v-model="startTime"
        type="date"
        title="选择开始时间"
        @confirm="startTimeConfirml"
        @cancel="startTimeCancel"
      />
    </van-popup>
    <!-- 明天预约时间 -->
    <van-popup v-model="showEndPicker" position="bottom">
      <van-datetime-picker
        v-model="endTime"
        type="date"
        title="选择结束时间"
        @confirm="endTimeConfirml"
        @cancel="endTimeCancel"
      />
    </van-popup>
  </div>
</template>
<script>
import axios from "axios";
import { Toast } from "vant";
import auth from "@/service/auth";
import Base from "@/pages/base/base";
import constant from "@/common/js/constant";
import TelNum from "@/components/tel-number";
import { formatDate } from "@/plugins/dateFormat";
// import { getUserMain } from "@/service/api_user_relation";
import { getById } from "@/service/api_company";
import {
  meetingAppointDetail,
  uploadVoucher,
} from "@/service/api_venue_appoint";
export default {
  mixins: [Base],
  components: {
    TelNum,
  },
  data() {
    return {
      active: "",
      dc_key: ["timeSlot"],
      orderId: "",
      isDetial: false,
      roomDetial: {},
      oderDetial: {},
      payFrom: {},
      userBizMainDetail: {},

      // 停车场信息
      lotInfo: {},
      // 车位列表
      seatList: [],
      // 数量
      num: -1,

      fileUrls: [],
      radio: "",
      showStartPicker: false,
      showEndPicker: false,
      startTime: "",
      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: ["9:00-12:00", "13:00-18:00", "18:00-22:00"],
    };
  },
  mounted() {
    // this.payFrom.payType = '2';
    this.$set(this.payFrom, "payType", "2");
    this.currUser = auth.currUser();
    this.orderId = this.$route.query.id;
    this.isDetial = this.$route.query.isDetial;
    this.getUserMain();
    this.initDict(this.dc_key).then((res) => {
      this.getOrderDetail();
    });
  },
  methods: {
    // 获取当前企业
    getUserMain() {
      const reqData = {
        id: this.currUser.id,
      };
      getById(reqData).then((res) => {
        this.userBizMainDetail = res.data;
        console.log("获取当前企业_:", this.userBizMainDetail);
      });
    },

    // 获取订单详情
    getOrderDetail() {
      const reqData = {
        id: this.orderId,
      };
      let dayjs = require("dayjs");
      meetingAppointDetail(reqData).then((res) => {
        if (res.key == 200) {
          this.roomDetial = res.data.roomDetial;
          this.oderDetial = res.data.oderDetial;
          this.formatStartTime = dayjs(res.data.oderDetial.useTime).format(
            "YYYY-MM-DD"
          );
          this.formatEndTime =
            this.dc_map.timeSlot[res.data.oderDetial.timeSlot];
          this.oderDetial.examineTime = dayjs(
            res.data.oderDetial.examineTime
          ).format("YYYY-MM-DD");
          // 回显支付参数
          if (this.isDetial) {
            this.fileUrls = JSON.parse(res.data.oderDetial.payProof);
            this.payFrom.payType = res.data.oderDetial.payType;
            this.payFrom.payUser = res.data.oderDetial.payUserName;
          }
        }
      });
    },

    // 支付提交
    paySubmit() {
      this.payFrom.id = this.orderId;
      console.log("图片——：", this.fileUrls);
      if (!this.fileUrls || [] == this.fileUrls || this.fileUrls.length <= 0) {
        Toast("请先上传支付凭证");
        return false;
      } else {
        this.payFrom.payImg = JSON.stringify(this.fileUrls);
      }
      if (!this.payFrom.payUser) {
        Toast("请先填写支付人姓名");
        return false;
      }

      uploadVoucher(this.payFrom).then((res) => {
        if (res.key == 200) {
          Toast("支付提交成功");
          this.goNavigator("venue");
        }
      });
    },

    // 文件上传
    afterRead(file) {
      this.uploadImg(file);
    },

    // 上传文件
    uploadImg(file) {
      const _this = this;
      const formParam = new FormData(); // 创建form对象
      formParam.append("file", file.file); // 通过append向form对象添加数据
      console.log(formParam.get("file")); // FormData私有类对象，访问不到，可以通过get判断值是否传进去
      const config = {
        headers: {
          "Content-Type": "multipart/form-data",
          "MVVM-Key": String(new Date().getTime()),
          xx: "anything",
        }, // 这里是重点，需要和后台沟通好请求头，Content-Type不一定是这个值
      }; // 添加请求头
      return new Promise((resolve, reject) => {
        axios
          .post(
            constant.BASE_URI + "/wx/fileController/upload",
            formParam,
            config
          )
          .then((response) => {
            response.data.data.forEach((item) => {
              const fileItem = {
                url: constant.BASE_URI + "/wx/fileController/download/" + item,
                isImage: true,
              };
              _this.fileUrls = [];
              _this.fileUrls.push(fileItem);
            });
            // _this.fileUrls = [];
            // console.log("上传文件——：", response)
            // let files = response.data.data.substring(1, response.data.data.length)
            // files = files.substring(0, files.length - 1)
            // let fileItem = _this.$common.castEval(files);
            // fileItem.isImage = true;
            // _this.fileUrls.push(fileItem)
          })
          .catch((err, x) => {
            reject(err, x);
          });
      });
    },

    /**
     * 开始时间弹窗取消
     */
    startTimeCancel() {
      this.showStartPicker = false;
    },
    /**
     * 开始时间弹窗确认
     */
    startTimeConfirml(val) {
      this.formatStartTime = formatDate(val, "day");
      this.showStartPicker = false;
    },
    /**
     * 结束时间弹窗取消
     */
    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;
  }

  .part-5 {
    .input-item {
      padding: 0;
    }
  }
}
</style>
