<template>
  <view class="page">
    <image class="bkg" mode="aspectFill" src="~@/package_sub/static/AddOrder/bkg.png"></image>

    <view class="container">
      <view class="step">
        <view class="step-item"
              v-for="(i, index) in stepList"
              :class="{ 'is-active': currentStep === index }"
              :key="index">
          <view class="step-item__dot">
            <u-icon v-show="currentStep === index" name="checkbox-mark" color="#fff" size="16"></u-icon>
          </view>
          <view class="step-item__text">{{ i.name }}</view>
        </view>
      </view>

      <view class="switch-service">
        <view class="switch-service__icon">
          <u-icon name="integral" size="30"></u-icon>
        </view>

        <view class="switch-service__name">
          专享半天陪诊
        </view>

        <view class="switch-service__btn" @click="isShowService = true">
          <image src="~@/static/switch.png" mode="aspectFit"></image>
          <text>更换服务</text>
        </view>
      </view>

      <u-form :model="form" ref="uForm" :label-width="178" :label-style="{ 'font-weight': '500','font-size': '24rpx' }">
        <view class="form-card form-card-1">
          <u-form-item label="就诊城市">
            <u-input type="select" placeholder="请选择就诊城市" v-model="form.name" :select-open="isShowCity" @click="isShowCity = true"/>
          </u-form-item>
          <u-form-item label="就诊医院">
            <u-input v-model="form.name" placeholder="请输入就诊医院" />
          </u-form-item>
          <u-form-item label="就诊时间">
            <u-input type="select" v-model="form.name" :select-open="isShowTime" @click="isShowTime = true"/>
          </u-form-item>
          <u-form-item label="就诊人">
            <u-input v-model="form.name" />
          </u-form-item>
          <u-form-item label="是否可以自理">
            <u-radio-group v-model="form.name" slot="right" active-color="#c20d12">
              <u-radio :name="1">是</u-radio>
              <u-radio :name="0">否</u-radio>
            </u-radio-group>
          </u-form-item>
          <u-form-item label="预约人">
            <u-input v-model="form.name" placeholder="请填写预约人" />
          </u-form-item>
          <u-form-item label="预约人电话">
            <u-input v-model="form.name" placeholder="请填写预约人电话" />
          </u-form-item>
          <u-form-item label="选择陪诊师性别" :border-bottom="false">
            <u-radio-group v-model="form.name" slot="right" active-color="#c20d12">
              <u-radio name="男">男</u-radio>
              <u-radio name="女">女</u-radio>
              <u-radio name="">任意</u-radio>
            </u-radio-group>
          </u-form-item>
        </view>

        <view class="form-card form-card-2">
          <view class="title">
            <view class="title__left">
              <text>上传资料</text>
              <text>（就诊卡、病例等）</text>
            </view>
            <view class="title__right">
              点击查看示例
            </view>
          </view>
          <u-upload :action="action" :file-list="fileList" ></u-upload>
        </view>

        <view class="form-card form-card-3">
          <view class="title">
            其他服务需求
          </view>
          <u-form-item :label-width="0" :border-bottom="false">
            <u-input border
                     :custom-style="{ 'letter-spacing': '2rpx' }"
                     border-color="#dad9d9"
                     placeholder="请简单描述您要就诊的科室及就诊内容(内容加密保护)"
                     v-model="form.name"
                     type="textarea"></u-input>
          </u-form-item>
        </view>
      </u-form>

      <view class="is-auth">
        <u-checkbox v-model="isAuth" shape="circle" active-color="#c20d12">
          <text style="padding-left: 10rpx;">我已认真阅读预约相关</text>
          <text style="color: #c20d12;" @click.stop.prevent>《服务条款同意书》</text>
        </u-checkbox>
      </view>
    </view>

    <view class="bottom-bar">
      <view class="price">
        <text>实付：</text>
        <text>¥ 600.00</text>
      </view>

      <u-button shape="circle" ripple :custom-style="payBtnStyle" @click="next">立即支付</u-button>
    </view>

    <u-select v-model="isShowService" :list="services"></u-select>
    <u-select v-model="isShowCity" :list="cities"></u-select>
    <u-picker v-model="isShowTime" mode="time"></u-picker>
    <u-top-tips ref="uTips"></u-top-tips>
  </view>
</template>

<script>
export default {
  data() {
    return {
      payBtnStyle: {
        'background-image': 'linear-gradient(-90deg, #e26165 0%, #c10d12 94%, #c10d12 100%)',
        'font-weight': '500',
        'font-size': '28rpx',
        'color': '#fff',
        'width': '288rpx',
        'margin-right': '25rpx'
      },

      // service
      isShowService: false,
      services: [
        {
          value: '1',
          label: '江'
        },
        {
          value: '2',
          label: '湖'
        }
      ],
      //

      // step
      currentStep: 0,
      stepList: [
        {
          name: '填写预约'
        },
        {
          name: '在线支付'
        },
        {
          name: '专人陪诊'
        },
        {
          name: '服务完成'
        }
      ],
      //

      // form
      isShowCity: false,
      cities: [
        {
          value: '1',
          label: '江'
        },
        {
          value: '2',
          label: '湖'
        }
      ],
      isShowTime: false,
      form: {
        name: ''
      },
      rules: {},
      fileList: [],
      action: '',
      isAuth: false
      //
    };
  },
  methods: {
    next () {
      if (!this.isAuth && this.currentStep === 0) {
        this.$refs.uTips.show({
          title: '请认真阅读《服务条款同意书》',
          type: 'warning',
          duration: '2000'
        })
        return
      }
      this.currentStep++
    }
  },
  onReady() {
    this.$refs.uForm.setRules(this.rules);
  }
}
</script>

<style lang="scss" scoped>
.page {
  position: relative;

  .bkg {
    width: 100vw;
    z-index: 0;
    height: 550rpx;
    position: absolute;
    top: 0;
    left: 0;
  }

  .container {
    z-index: 1;
    position: relative;
    padding-bottom: calc(27rpx * 2 + 80rpx + 20rpx);
    padding-bottom: calc(constant(safe-area-inset-bottom) + 27rpx * 2 + 80rpx + 20rpx);
    padding-bottom: calc(env(safe-area-inset-bottom) + 27rpx * 2 + 80rpx + 20rpx);

    .step {
      display: flex;
      justify-content: space-evenly;
      padding: 64rpx 37rpx 0;
      position: relative;

      &::before {
        content: '';
        height: 12rpx;
        background: #fff;
        border-radius: 6rpx;
        position: absolute;
        left: 37rpx;
        right: 37rpx;
        top: calc(26rpx / 2 + 64rpx - 6rpx);
      }
      &-item {

        &__dot {
          width: 30rpx;
          height: 30rpx;
          border-radius: 100%;
          filter: drop-shadow(0 0 10rpx rgba(211,32,2,0.3));
          background-color: #9b9c9c;
          border: 2rpx solid #ffffff;
          margin: auto;
          display: flex;
          align-items: center;
          justify-content: center;
        }
        &__text {
          font-size: 24rpx;
          color: #333333;
          font-weight: 500;
          margin-top: 30rpx;
        }
      }
      .is-active {
        .step-item__dot {
          filter: drop-shadow(4.384px 8.988px 10px rgba(211,32,2,0.57));
          background-image: linear-gradient(-90deg, #e26165 0%, #c10d12 94%, #c10d12 100%);
          transform: scale(2, 2);
        }
        .step-item__text {
          color: #c20d12;
        }
      }
    }

    .switch-service {
      border-radius: 10rpx;
      background-color: #ffffff;
      margin: 60rpx 25rpx 0;
      padding: 28rpx 39rpx;
      display: flex;
      align-items: center;

      &__icon {
        display: flex;
        justify-content: center;
        align-items: center;
        background: #f9f5e9;
        padding: 20rpx;
      }
      &__name {
        padding-left: 14rpx;
        font-size: 28rpx;
        color: #333333;
        font-weight: 500;
      }
      &__btn {
        display: flex;
        align-items: center;
        margin-left: auto;

        & > image {
          width: 31rpx;
          height: 27rpx;
        }
        & > text {
          font-size: 24rpx;
          color: #999999;
          padding-left: 20rpx;
        }
      }
    }

    .form-card {
      border-radius: 10rpx;
      background-color: #ffffff;
      padding: 36rpx 38rpx;
      margin: 0 25rpx;

      &-1 {
        margin-top: 44rpx;
      }
      &-2 {
        margin-top: 24rpx;

        .title {
          display: flex;
          align-items: center;
          justify-content: space-between;
          font-size: 24rpx;
          margin-bottom: 26rpx;

          &__left text:nth-child(1) {
            color: #333;
          }
          &__left text:nth-child(2) {
            color: #999;
          }
          &__right {
            color: #c20d12;
          }
        }
        ::v-deep .u-add-wrap {
          background: #fff;
          border: 2rpx dashed #999999;
        }
      }
      &-3 {
        margin-top: 20rpx;

        .title {
          font-size: 24rpx;
          color: #333333;
          margin-bottom: 22rpx;
        }
      }
    }
    .is-auth {
      padding-left: 56rpx;
      margin-top: 22rpx;
    }
    ::v-deep .form-card-1 .u-input__input {
      text-align: right;
    }
  }
}
.bottom-bar {
  background: #fff;
  position: fixed;
  padding-top: 27rpx;
  padding-bottom: 27rpx;
  padding-bottom: calc(constant(safe-area-inset-bottom) + 27rpx);
  padding-bottom: calc(env(safe-area-inset-bottom) + 27rpx);
  width: 100vw;
  left: 0;
  bottom: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  filter: drop-shadow(0 2rpx 6rpx #00000020);

  .price {
    margin-left: 50rpx;
    color: #c20d12;

    & > text:nth-child(1) {
      font-size: 24rpx;
    }
    & > text:nth-child(2) {
      color: #c20d12;
      font-weight: 500;
      font-size: 40rpx;
    }
  }
}
</style>
