<template>
    <div class="institution">
        <!-- 请选择体检地区 -->
        <div class="area">
            <div class="title">
                <div class="type"><span class="point"></span> 请选择体检地区</div>
            </div>
            <ul class="area_box">
                <li>
                    <label>省：</label>
                    <a-select style="width:120px">
                        <a-select-option v-for="(item) in provinceList" :key="item" :value="item">{{item}}</a-select-option>
                    </a-select>
                </li>
                <li>
                    <label>市：</label>
                    <a-select style="width:120px">
                        <a-select-option v-for="(item) in provinceList" :key="item" :value="item">{{item}}</a-select-option>
                    </a-select>
                </li>
                <li>
                    <label>区：</label>
                    <a-select style="width:120px">
                        <a-select-option v-for="(item) in areaList" :key="item" :value="item">{{item}}</a-select-option>
                    </a-select>
                </li>
            </ul>
        </div>
        <!-- 请选择体检机构 -->
        <div class="mechanism">
            <div class="title">
                <div class="type"><span class="point"></span> 请选择体检机构</div>
            </div>
            <div class="mechanism_box">
                <span v-for="(item, index) in mechanismList" :key="index" :class="index === selectIndex ? 'active' : ''" @click="clickTab(index)">{{item}}</span>
            </div>
        </div>
        <!-- 请选择体检地区 -->
        <div class="hospital">
            <div class="title">
                <div class="type"><span class="point"></span> 请选择体检中心</div>
            </div>
            <ul class="hospital_box">
                <li v-for="(item, index) in hospitalList" :key="index">
                    <div>
                        <p class="top">{{item.name}}</p>
                        <p class="bottom">{{item.address}}</p>
                    </div>
                    <button :class="item.isDisabled ? 'btn disabled' : 'btn'" @click="openDatePicker(item)">选择体检日期</button>
                </li>
            </ul>
        </div>
        <div class="mask" v-if="datePickShow">
            <reserve-date ref="reserveDate1" @confirmDate="getConfirm" @cancleDate="getCancle" @changeDay="(date)=>{ return dateChange(date, 0); }" /> 
        </div>
    </div>
</template>

<script>
import reserveDate from '../../components/reserve-date'
export default {
  name: "selectInstitution",
  components: {
      reserveDate
  },
  props: {},
  data() {
    return {
        datePickShow: false,
        selectIndex: 0,
        provinceList: ['上海市'],
        provinceList: ['上海市'],
        areaList: ['静安区'],
        mechanismList: ['全部', '慈铭', '美年'],
        hospitalList: [
            {
                name: '上海张江分院',
                address: '上海市浦东新区海科路777号'
            },
            {
                name: '上海张江分院',
                address: '上海市浦东新区海科路777号'
            },
            {
                name: '上海张江分院',
                address: '上海市浦东新区海科路777号'
            },
            {
                isDisabled: true,
                name: '上海张江分院',
                address: '上海市浦东新区海科路777号'
            },
        ]
    };
  },

  methods: {
      // 选择体检机构
      clickTab(index) {
          this.selectIndex = index;
      },
      // 打开日期弹框
      openDatePicker(item) {
          if (item.isDisabled) {
              return;
          }
          this.datePickShow = true;
      },
      getConfirm(val) {
          this.datePickShow = false;
      },
      getCancle(val) {
         this.datePickShow = false;
      },
      dateChange(date, type) {
          console.log(date)
      }
  },
};
</script>

<style lang="less" scoped>
.mask {
    width: 100vw;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
}
.institution{
    padding: 19.5px 14.5px 33.5px 14.5px;
    background-color: white;
    width: 760px;
    margin: 0 auto;
    font-size: 14px;
    color: #333;
    .title {
        .point {
            display: inline-block;
            border-radius: 5px;
            width: 6px;
            height: 6px;
            background-color: #3f7ffb;
            margin-right: 6px;
            position: relative;
            top: -1px;
        }
        .type {
            font-size: 14px;
            font-weight: bold;
        }
        .item-container {
        margin-top: 8.5px;
        }
    }
    .area_box {
        display: flex;
        justify-content: space-between;
        margin: 25px 0px 45px 0px;
        label {
            color: #aaa;
        }
    }
    .mechanism_box {
        display: flex;
        flex-wrap: wrap;
        margin: 25px 0px 45px 0px;
        align-items: center;
        span {
            display: inline-block;
            height: 42px;
            line-height: 42px;
            padding: 0 38px;
            background: #FAFAFA;
            border-radius: 4px;
            margin-right: 20px;
        }
        span.active {
            background: #D2D2D2;
        }
    }
    .hospital_box {
        margin: 25px 0px 45px 0px;
        li {
            display: flex;
            height: 98px;
            align-items: center;
            justify-content: space-between;
            background: #FAFAFA;
            padding: 28px 24px;
            margin-bottom: 12px;
            .top {
                font-size: 14px;
                color: #333;
            }
            .bottom {
                color: #999;
                font-size: 13px;
            }
            .btn {
                outline: none;
                border: none;
                background: linear-gradient(87deg, #FFCB00, #FFB219);
                width: 110px;
                height: 40px;
                border-radius: 4px;
                color: #fff;
            }
            .btn.disabled {
                background: #E2E2E2;
            }
        }
    }
}
</style>
