<template>
  <div class="flow">
    <div class="content">
      <div class="left" v-if="customerInfo !== ''">
        <div class="title"><span class="point"></span>客户信息</div>
        <div class="info">
          <div class="item">
            <span class="label">姓名：</span>
            <a-input :value="customerInfo.name" disabled></a-input>
          </div>
          <div class="item">
            <span class="label">性别：</span>
            <a-input :value="customerInfo.sex == 'M' ? '男' : '女'" disabled />
          </div>
          <div class="item">
            <span class="label">婚姻状况</span>
            <a-radio-group v-model="customerInfo.maritalStatus" disabled>
              <a-radio value="01">未婚 </a-radio>
              <a-radio value="02">已婚</a-radio>
            </a-radio-group>
          </div>
          <div class="item">
            <span class="label">身份证：</span>
            <a-input :value="customerInfo.idNo" disabled />
          </div>
          <div class="item">
            <span class="label">手机号码：</span>
            <a-input :value="customerInfo.phone" disabled />
          </div>
          <div class="item">
            <span class="label">出生日期：</span>
            <a-input :value="customerInfo.birthDate" disabled />
          </div>
          <div class="item tip">
            【温馨提醒：女士请注意婚姻状况的选择，未婚代表不做妇科项目，需要做妇科项目检测请选择已婚，谢谢理解！】
          </div>
        </div>
      </div>

      <div class="right">
        <!-- 预约详情 -->
        <div class="detail">
          <div class="title"><span class="point"></span>预约详情</div>
          <ul class="items">
            <li>
              <div class="label">已选服务：</div>
              <div class="detail_content">
                {{ item.servicepackageName }}
              </div>
            </li>
            <li>
              <div class="label">已选服务门店：</div>
              <div class="detail_content">{{ item.checkUnitName }}</div>
            </li>
            <li>
              <div class="label">已选服务门店地址：</div>
              <div class="detail_content">{{ item.shopAddress }}</div>
            </li>
            <li>
              <div class="label">预约日期:</div>
              <div class="detail_content">{{ item.serviceAppDate }}</div>
            </li>
          </ul>
          <div class="tips">
            <img :src="tips" alt="" />
            <span class="desc"
              >请耐心等待服务确认，预约成功后将发送短信给您，如需改约请致电客服</span
            >
          </div>
          <div class="btns">
            <a-button type="primary" disabled>{{
              item.status === "88" || item.status === "99"
                ? "预约失败"
                : item.status === "1"
                ? "预约中..."
                : item.status === "2"
                ? "已预约"
                : item.status === "3"
                ? "取消中..."
                : item.status === "7"
                ? "改约中..."
                : item.status === "4"
                ? "已取消"
                : item.status === "5" || item.status === "6"
                ? "已完成"
                : "状态异常"
            }}</a-button>
            <a-button type="primary" @click="goIndexPage"> 回首页 </a-button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
// import AppointmentDetail from './components/appointmentDetail'
import api from "@/api/customer";
import { log } from "util";
export default {
  name: "Detail",
  components: {
    // AppointmentDetail,
  },
  data() {
    return {
      id: "", //客户id
      customerInfo: {
        name: "",
        sex: "",
        idNo: "",
        phone: "",
        birthDate: "",
        maritalStatus: "",
      }, //客户信息
      tips: require("../../assets/imgs/detail/tips.png"),
      item: {}, // 详情对象，通过路由带过来
      appointmentId: "", // 新增的套餐id，
    };
  },
  created() {
    const { id, appointmentId } = this.$route.query;
    if (this.$route.params.status) {
      localStorage.setItem("item", JSON.stringify(this.$route.params));
    }
    this.item = this.$route.params.status
      ? this.$route.params
      : JSON.parse(localStorage.getItem("item"));
    this.id = id;
    this.getCustomerDetail(); //获取客户信息
    // 新增新增预约
    if (appointmentId) {
      this.getAppointmentList(appointmentId); //获取客户的预约详情
    }
  },
  methods: {
    // 获取客户信息
    getCustomerDetail() {
      api.getCustomerDetail({ id: parseInt(this.id) }).then((res) => {
        if (res.returnCode == "0000") {
          this.customerInfo = res.content;
          console.table("客户信息customerInfo=", this.customerInfo);
        } else {
          this.$message.error(res.returnMsg);
        }
      });
    },
    // 回首页
    goIndexPage() {
      this.$router.push({
        name: "Index",
        query: {
          id: this.id, //客户i·d
        },
      });
    },
    // 获取预约详情
    getAppointmentList(appointmentId) {
      api.getAppointmentList({ id: parseInt(this.id) }).then((res) => {
        if (res.returnCode == "0000") {
          console.log("111111111111获取已预约列表==", res.content);
          res.content.forEach((el) => {
            if (el.id === parseInt(appointmentId)) {
              this.item = el;
            }
          });
        }
      });
    },
  },
};
</script>

<style lang="less" scoped>
.flow {
  background: #fafafa;
  min-height: calc(100vh - 360px);
  .btn {
    text-align: center;
    position: relative;
    left: 360px;
    top: -72px;
  }
  .content {
    padding-top: 20px;
    .point {
      display: inline-block;
      border-radius: 5px;
      width: 6px;
      height: 6px;
      background-color: #3f7ffb;
      margin-right: 6px;
      position: relative;
      top: -1px;
    }
    display: flex;
    justify-content: center;
    .left {
      max-height: 480px;
      .reset {
        text-align: center;
        margin-top: 25px;
      }
      .info {
        margin-top: 24px;
        ::v-deep .ant-input {
          border: none;
          background-color: #fafafa;
          height: 42px;
        }
        .item {
          display: flex;
          margin-top: 14px;
          &.tip {
            font-size: 12px;
            color: #999;
          }
          .label {
            display: inline-block;
            width: 120px;
            line-height: 42px;
            font-size: 14px;
            color: #aaaaaa;
            padding-left: 12px;
          }
        }
      }
    }
    .left,
    .right {
      background: white;
      box-shadow: 0px 7px 14px 1px rgba(223, 223, 219, 0.18);
      border-radius: 8px;
      padding: 19px 24px 30px 14px;
      margin-left: 24px;
    }
    .right {
      padding-left: 24px;
    }
    .right {
      margin-left: 30px;
    }
  }
}
.detail {
  .point {
    display: inline-block;
    border-radius: 5px;
    width: 6px;
    height: 6px;
    background-color: #3f7ffb;
    margin-right: 6px;
    position: relative;
    top: -1px;
  }
  .btns {
    text-align: right;
    padding-right: 10px;
    margin-top: 15px;
    .ant-btn {
      &:nth-child(1) {
        margin-right: 30px;
        font-size: 14px;
        color: white;
        border: none;
      }
    }
  }
  .tips {
    padding-left: 8px;
    img {
      position: relative;
      top: -1px;
    }
    .desc {
      color: #cccccc;
      font-size: 14px;
      margin-left: 4px;
    }
  }
  .items {
    margin-top: 21px;
    padding-left: 10px;
    li {
      margin-top: 15px;
    }
    .label {
      font-size: 14px;
      color: #aaaaaa;
    }
    .detail_content {
      width: 700px;
      color: #333333;
      font-size: 14px;
      line-height: 58px;
      background: #fafafa;
      margin-top: 8px;
      border-radius: 2px;
      position: relative;
      left: -10px;
      padding-left: 10px;
    }
  }
}
</style>
