<template>
  <div class="insurance-detection-appoint-demo">
    <page-model
      v-if="picaWechat != 'wechat'"
      ref="PageModel"
      :header-info="headerInfo"
    />
    <div class="bg-img">
      <div class="title-1">
        检测预约
      </div>
      <div class="title-2">
        及时接受检测结果检测报告
      </div>
      <img
        src="@/assets/images/demo-bg.png"
        alt=""
      >
    </div>
    <div class="wrap">
      <div class="choose-section">
        <van-form
          ref="dectionForm"
          validate-first
        >
          <van-field
            name="checkboxGroup"
            label="检测项目"
            class="hidden-border"
            required
          >
            <template #input />
          </van-field>
          <van-field
            name="radio"
            label=""
          >
            <template #input>
              <van-radio-group
                v-model="currentProject"
                direction="horizontal"
              >
                <van-radio
                  v-for="(item) in orgData"
                  :key="item.no"
                  checked-color="#00bda5"
                  class="item-radio"
                  :name="item.no"
                >
                  {{ item.value }}
                </van-radio>
              </van-radio-group>
            </template>
          </van-field>

          <van-field
            label="检测地点"
            required
            disabled
            class="appoint-form-title"
          />
          <van-field
            v-model="dectionForm.location"
            class="appoint-form-items"
            label="省市区"
            disabled
            right-icon="arrow"
            placeholder="请选择省市区"
          />

          <van-field
            v-model="dectionForm.hospitalName"
            class="appoint-form-items"
            label="检测地点"
            disabled
            right-icon="arrow"
            placeholder="请选择检测机构"
            :rules="[{ required: true, message: '请选择检测机构' }]"
          >
            <template #input>
              <div
                v-if="!dectionForm.hospitalName"
                class="appoint-form-placeholder"
              >
                请选择检测机构
              </div>
              <div
                v-else
                class="appoint-form-value"
              >
                {{ dectionForm.hospitalName }}
              </div>
            </template>
          </van-field>
          <van-field
            name="checkboxGroup"
            label="预约时间"
            required
            right-icon="arrow"

            @click="showPopup('showSelectTime')"
          >
            <template #input>
              <div
                v-if="!dectionForm.appointmentTime"
                class="appoint-form-placeholder"
              >
                请选择预约时间
              </div>
              <div
                v-else
                class="appoint-form-value"
              >
                {{ appointmentTimeShadow }}
              </div>
            </template>
          </van-field>
        </van-form>
      </div>
      <van-button
        round
        block
        type="info"
        :disabled="!canSubmit"
        class="appoint-form-submit "
        :class="canSubmit ? 'appoint-form-submit-active':''"
        @click="appointment"
      >
        提交
      </van-button>
    </div>
    <SelectTime
      :hospital-id="hospitalId"
      :project-equity-no="projectEquityNo"
      :show="showSelectTime"
      @change="selectTimes"
      @close="closePopup"
    />
  </div>
</template>

<script>
import { appointment} from '@/api/appoint';
import { getTypeCodeListDemo } from '@/api/detection.js';
import SelectTime from '@/components/selectTime/index.vue';
import dayjs from 'dayjs';
import {createOrder} from '@/api/question';

// 1. 创建订单
// 2。 预约接口
// 3。 详情接口
export default {
  components: {
    SelectTime,
  },
  data() {
    return {
      picaWechat:window._picaWechat,
      headerInfo: {
        title: '癌症早筛检测预约',
        isBlack: true,
        backMethod: 'web',
        style: 'backgroundColor:#ffffff;zIndex:100;',
        background: '',
      },
      dectionData:{},
      dectionForm: {
        detectName: '',
        beneficiaryName: '',
        appointmentTime: '',
        currentDate: '',
        timeBucket: '',
        hospitalName:'人民医院和平社区健康服务中心',
        location: '深圳市坪山区',
      },
      showAreaLabel:'',
      showArea:false,
      reportShow: false,
      placeList: [],
      popType: '',
      timsArray: [],
      timeBucket: {
        am: '上午',
        pm: '下午',
      },
      searchPlace: '',
      selectPicker: {
        value: [],
        label: '',
      },
      showSelectTime:false,
      locationAreaCode: [],
      hospitalId: '139136',
      projectEquityNo: '',
      isDisabled: false,
      buttonText: '',
      appointmentTimeShadow: '',
      currentProject: null,
      orgData: []
    };
  },
  computed: {
    canSubmit() {
      return (
        this.dectionForm.appointmentTime &&
        this.dectionForm.hospitalName &&
        this.hospitalId &&
        this.currentProject
      );
    },
  },
  mounted() {
    this.$loading.show();
    const { projectEquityNo } = this.$route.query;
    this.projectEquityNo = projectEquityNo;
    this.getDetectionName();
  },
  methods: {
    // 目前是配置一个检测信息，可能会拓展，所以返回的是一个list
    getDetectionName() {
      getTypeCodeListDemo().then(res => {
        if (res.code == '000000' && res.data) {
          console.log('--res', res);
          this.orgData = res.data;
        }
        this.$loading.hide();
      });
    },
    selectTimes(times) {
      console.log(times);
      const {value, currentItemChoosed} = times;
      this.dectionForm.appointmentTime = value;
      this.closePopup('showSelectTime');
      // appointmentTimeShadow
       const m = (Number(dayjs(currentItemChoosed.appointmentDate).month()) + 1) + '月' + (Number(dayjs(currentItemChoosed.appointmentDate).date())) + '日';
      this.appointmentTimeShadow = m + ' ' + currentItemChoosed[currentItemChoosed.timeBucket + 'TimeContent'];
    },
    getTimes() {
      this.timsArray = [];
      const current = new Date().getTime();
      const ss = 24 * 60 * 60 * 1000;
      for (let i = 5; i < 35; i++) {
        var addTime = i * ss + current;
        var myDate = new Date(addTime);
        var year = myDate.getFullYear();
        var month = myDate.getMonth() + 1;
        var date = myDate.getDate();
        var timeStr =
          year + '-' + this.plusZero(month) + '-' + this.plusZero(date);
        this.timsArray.push(timeStr);
      }
    },
    plusZero(num) {
      return num > 9 ? num + '' : '0' + num;
    },
    showPopup(name) {
      this[name] = true;
    },
    closePopup(name) {
      this[name] = false;
    },
    appointment() {
      this.$refs.dectionForm.validate().then(async result => {
        console.log('this.dectionForm', result);
        const order = await this.createOrder();
        console.log('--', order);
        if(order) {
          const item = JSON.parse(localStorage.getItem('chooseInfo'));
          console.log('item', item);
          const data = {
            appointmentTime: this.dectionForm.appointmentTime,
            hospitalId: this.hospitalId,
            hospitalName: this.dectionForm.hospitalName,
            yunOrderNo:order.yunOrderNo,
            patientIdNo: item.id_number,
            patientMobile:  item.mobile,
            patientName: item.name
          };
          appointment(data).then(res => {
            if (res.code === '000000') {
              this.$router.push({
                path: '/appoint-details',
                query: {
                  yunOrderNo: order.yunOrderNo,
                  projectEquityNo:this.projectEquityNo
                }
              });
            } else {
              res.message && this.$toast(res.message);
            }
          });
        }
      }).catch(err => {
        console.log(err);
      });
    },
    companySelect(i) {
      console.log('9', i);
    },
    createOrder() {
      return new Promise((resolve, reject) => {
        const { projectEquityNo, externalOrderNo} = this.$route.query;
        const item = JSON.parse(localStorage.getItem('chooseInfo'));
        const data = {
          projectEquityNo: projectEquityNo,
          externalOrderNo: externalOrderNo,
          insuranceMerchantProjectDetectionId: this.currentProject,
          idCard: item.id_number,
          mobilePhone:  item.mobile,
          patientName: item.name,
          idType: 1
        };
        createOrder(data).then(res => {
          if (res.code == '000000') {
            resolve(res.data);
          }
        }).catch(err => {
          reject(err);
        });
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.insurance-detection-appoint-demo {
  width: 100%;
  height: 100vh;
  overflow: auto;
  box-sizing: border-box;
  color: #ffffff;
  padding-bottom: 50px;
  .bg-img {
    width: 100%;
    height: 281px;
    position: absolute;
  }
  .wrap {
    padding: 0 12px;
    margin-top: 90px;
  }
  .title-1 {
    font-size: 20px;
    margin-top: 23px;
    font-style: oblique;
    font-weight: 600;
    position: absolute;
    margin-left: 12px;
  }
  .title-2 {
    margin-top: 60px;
    font-size: 12px;
    position: absolute;
    margin-left: 12px;
  }
  .appoint-form-title{
    font-size: 14px;
    font-family:  PingFang SC;
    font-weight: 400;
    color: #212121;
    padding-top:22px ;
    padding-bottom: 0;

    line-height: 20px
  }

  .choose-section {
    background: #ffffff;
    border-radius: 11px;
    margin-top: 15px;
    /deep/ .van-field__label{
      color: #212121;
    }
    /deep/ .van-field__control:disabled{
      color: #323233;
      -webkit-text-fill-color: #323233;
    }
    .item {
      color: #212121;
      font-size: 14px;
      display: flex;
      height: 60px;
      align-items: center;
      position: relative;
      .input-key {
        font-weight: 300;
        margin-left: 10px;
      }
      .input-value {
        margin-left: 18px;
        font-weight: 500;
        overflow: visible;
      }
      .right {
        position: absolute;
        right: 10px;
        top: 25px;
      }
    }
    .height60 {
      height: 30px;
    }
    .required {
      position: relative;
    }
    .required::after {
      position: absolute;
      content: '*';
      display: block;
      left: -10px;
      top: 0;
      text-align: center;
      color: rgba(255, 56, 56, 1);
    }
  }
  .appoint-form-items{
    // font-weight: 600;

    /deep/ .van-field__label{
      color: #999999;
    }
    /deep/ .van-field__control{
      font-weight: 600;
    }
    /deep/ .van-field__control::placeholder{
      font-weight: 450;
    }
    .appoint-form-placeholder{
      font-weight: 450;
    }

  }
  .appoint-form-value{
      font-weight: 600;
    }
  .appoint-form-placeholder{
    color: #999999;
  }
  .appoint-form-title::after{
    display: none;
  }
  .content {
    color: #02120f;
    height: 350px;
    overflow: hidden;
    .title-wrap {
      font-size: 18px;
      font-weight: 500;
      text-align: center;
      padding-top: 18px;
      position: fixed;
      width: 100%;
      left: 0;
      background: #ffffff;
      z-index: 1;
      margin: 0 auto;
      .search {
        display: flex;
        align-items: center;
        justify-content: space-evenly;
      }
      .search-input {
        width: 303px;
        height: 35px;
        background: #f5f6f8;
        border-radius: 13px;
        text-align: left;
        padding-left: 20px;
      }
      .title {
        font-size: 18px;
        font-weight: 500;
      }
    }
  }
  .pop-wrap {
    width: calc(100% - 32px);
    padding: 0 16px;
    .tab-list {
      position: relative;
      border-bottom: 0.5px solid #e7e8e9;
      height: 64px;
      .hospitalActive-icon {
        position: absolute;
        width: 17px;
        height: 17px;
        top: 14px;
        right: 0;
      }
      .list-1 {
        font-weight: 500;
        color: #212121;
        font-size: 15px;
        margin-top: 14px;
      }
      .list-2 {
        font-size: 12px;
        font-weight: 400;
        color: #999999;
        margin-top: 2px;
      }
    }
    .hospitalActive {
    }
  }
  .date-wrap {
    height: 100%;
    padding-top: 58px;
    display: flex;
    .left {
      min-height: 100vh;
      overflow: scroll;
      width: 130px;
      padding-bottom: 50px;
      background: #f5f6f8;
      .date-item {
        height: 38px;
        background: #f5f6f8;
        line-height: 38px;
        font-size: 16px;
        font-weight: 500;
        color: #02120f;
        text-align: center;
      }
      .date-item-active {
        color: #00bda5;
        background: #ffffff;
      }
    }
    .right {
      position: absolute;
      top: 58px;
      left: 130px;
      width: calc(100% - 130px);
      .right-item {
        padding-left: 22px;
        width: 100%;
        height: 41px;
        font-size: 16px;
        font-weight: 400;
        color: #666666;
        line-height: 41px;
      }
      .right-item-active {
        color: #00bda5;
      }
    }
    .date-item {
      height: 38px;
    }
  }
  .disabled {
    background: #d9d9d9 !important;
  }
  // /deep/ .van-field__control::placeholder{
  //   color: #999999;
  // }
  .appoint-form-submit{
    margin-top: 30px;
    height: 40px;
    font-weight: 600;
    background: #D9D9D9;
    border-radius: 20px;
    border: 1px solid #D9D9D9;
  }
  .appoint-form-submit-active{
    background: #00BDA5;
    border: 1px solid #00BDA5;
  }
  .appoint-tel{
    margin-top: 25px;
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #666666;
    line-height: 22px;
    text-align: center;
    .serve-time{
      display: flex;
      align-items: center;
      justify-content: center;
      height: 18px;
      font-size: 13px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #999999;
      line-height: 18px;
      span{
        width: 1px;
        height: 12px;
        margin: 0 12px;
        background: #BBBBBB;
      }
    }
  }
  .item-radio{
    padding: 15px 0px;
  }
  .hidden-border::after{
    border: none;
  }
  .hidden-border{
    padding-bottom: 0px;
  }
}
::v-deep {
  .address-wrap {
    height: 590px;
    #province {
      height: 500px;
    }
    #city {
      height: 500px;
    }
    #county {
      height: 500px;
    }
    #town {
      height: 500px;
    }
    .tip-header h3 {
      font-weight: 700;
      color: #212121;
    }
    .tip-header .submit-btn {
      color: #00bda5 !important;
    }
    .address-select .show-address-header .item.active:after {
      background-color: #00bda5;
    }
    .address-select .address-content ul li.active {
      color: #00bda5;
    }
  }
}
</style>
