<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" @change="handleSelectProvince" allowClear>
            <a-select-option
              v-for="item in provinceList"
              :key="item.id"
              :value="item.provinceCode"
              >{{ item.provinceName }}</a-select-option
            >
          </a-select>
        </li>
        <li>
          <label>市：</label>
          <a-select style="width: 120px" @change="handleSelectCity">
            <a-select-option
              v-for="item in cityList"
              :key="item.id"
              :value="item.cityCode"
              >{{ item.cityName }}</a-select-option
            >
          </a-select>
        </li>
        <li>
          <label>区：</label>
          <a-select style="width: 120px" @change="handleSelectDistrict">
            <a-select-option
              v-for="item in areaList"
              :key="item.id"
              :value="item.districtCode"
              >{{ item.districtName }}</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.id)"
          >{{ item.supplierName }}</span
        >
        <!-- -{{ item.id }} -->
      </div>
    </div>
    <!-- 请选择服务地区 -->
    <div class="hospital">
      <div class="title">
        <div class="type"><span class="point"></span> 请选择服务中心</div>
      </div>
      <ul class="hospital_box" v-if="isShowHospitalList">
        <li v-for="(item, index) in hospitalList" :key="index">
          <div>
            <p class="top">{{ item.checkUnitName }}</p>
            <p class="bottom">{{ item.address }}</p>
          </div>
          <button
            :class="item.isDisabled ? 'btn disabled' : 'btn'"
            @click="openDatePicker(item)"
          >
            选择服务日期
          </button>
          <!-- -{{ item.supplierId }}-{{ item.id }} -->
        </li>
      </ul>
      <div v-else class="hospital_none">暂无可选分院</div>
    </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 api from '@/api/customer'
import reserveDate from '../../../components/reserve-date'
export default {
  name: 'selectInstitution',
  components: {
    reserveDate,
  },
  props: {
    id: {
      type: String | Number,
      default: '',
    },
  },
  data() {
    return {
      datePickShow: false,
      selectIndex: 0,
      provinceList: [], //省
      cityList: [], //市
      areaList: [], //区
      provinceCode: '', //选择省
      cityCode: '', //选择市
      areaCode: '', //选择区
      mechanismList: [], //服务机构列表
      hospitalList: [], //服务机构对应下的服务中心列表
      isShowHospitalList: true, //是否显示服务中心列表
      supplierIds: '', //服务中心ids,默认显示全部
      servicepackageId: '', //产品id
      serviceDate: '', //预约的时间
      hospitalId: '', //医院id
      supplierId: '', //选择服务中id
    }
  },
  created() {
    const { servicepackageId } = this.$route.query
    this.servicepackageId = servicepackageId ? servicepackageId : ''
    this.getProvinceList() //获取省
    this.getSupplierList() //获取服务机构
    // 获取门店排期
  },

  methods: {
    // 获取省
    async getProvinceList() {
      const query = {
        chooseList: JSON.parse(window.localStorage.getItem('chooseList')),
        servicepackageId: this.servicepackageId,
      }

      await api.getProvinceList(query).then((res) => {
        if (res.returnCode === '0000') {
          this.provinceList = res.content
        } else {
          this.$message.error(res.returnMsg)
        }
      })
    },

    // 获取市
    getCityListByProvinceCode() {
      const query = {
        provinceCode: this.provinceCode,
        chooseList: JSON.parse(window.localStorage.getItem('chooseList')),
        servicepackageId: this.servicepackageId,
      }
      api.getCityListByProvinceCode(query).then((res) => {
        if (res.returnCode === '0000') {
          this.cityList = res.content
        } else {
          this.$message.error(res.returnMsg)
        }
      })
    },

    // 获取区/城市
    getDistrictListByCityCode() {
      const query = {
        cityCode: this.cityCode,
        chooseList: JSON.parse(window.localStorage.getItem('chooseList')),
        servicepackageId: this.servicepackageId,
      }
      api.getDistrictListByCityCode(query).then((res) => {
        if (res.returnCode === '0000') {
          this.areaList = res.content
        } else {
          this.$message.error(res.returnMsg)
        }
      })
    },

    // 选择省
    handleSelectProvince(value) {
      console.log(`选择省provinceCode= ${value}`)
      this.provinceCode = value||''
	  this.cityCode = ''
	  this.areaCode = ''
      this.getCityListByProvinceCode() // 根据省-获取市
	  this.getSupplierList();
    },

    // 选择市
    handleSelectCity(value) {
      console.log(`选择市CityCode= ${value}`)
      this.cityCode = value
	  this.areaCode = ''
      this.getDistrictListByCityCode() // 根据市-获取区
	  this.getSupplierList();
    },

    // 选择区
    handleSelectDistrict(value) {
      this.areaCode = value
      console.log(`选择区DistrictCode= ${value}`)
	  this.getSupplierList();
    },

    // 获取服务机构
    async getSupplierList() {
      // 测试id1043
      api
        .getSupplierList({ servicepackageId: this.servicepackageId })
        .then((res) => {
          if (res.returnCode == '0000') {
            const data = res.content

            // 提取所有的服务机构ids,并用逗号隔开,比如:1004,1007
            this.supplierIds = data
              .map(function (e, i) {
                return e.id
              })
              .join(',')

            this.mechanismList = [
              {
                status: '0',
                supplierName: '全部',
                id: this.supplierIds,
              },
              ...res.content,
            ]
            console.log('this.supplierIds===', this.supplierIds)
            this.getShopByDistrictCode() //根据服务结构-显示可选择的服务中心,默认显示全部
          } else {
            this.$message.error(res.returnMsg)
          }
        })
    },

    // 选择服务机构
    clickTab(index, id) {
      this.selectIndex = index
      console.log('选择服务机构id', index, id)
      this.supplierIds = id
      // 点击选择服务机构,显示该机构下的服务中心
      this.getShopByDistrictCode()
    },

    // 根据服务机构-获取服务中心列表
    getShopByDistrictCode() {
      const params = {
        // customerSex: 'M', //性别
        // customerMaritalStatus: '02', //婚姻状况
        chooseList: JSON.parse(window.localStorage.getItem('chooseList')),
        payList: [],
        provinceCode: this.provinceCode, //省编号
        cityCode: this.cityCode, //市编号
        areaCode: this.areaCode, //区号
        supplierIds: this.supplierIds, //服务机构d
        location: ',', //经纬度
        servicepackageId: this.servicepackageId, //产品id
      }
      api.getShopByDistrictCode(params).then((res) => {
        if (res.returnCode === '0000') {
          this.isShowHospitalList = true
          this.hospitalList = res.content
          console.log('根据服务机构-获取服务中心列表=', this.hospitalList)
        } else {
          this.isShowHospitalList = false
          // this.$message.error(res.returnMsg)
        }
      })
    },

    // 获取门店排期
    getScheduleByCode() {
      const query = {
        code: '', //门店编码
        beginDate: '', //开始时间
        endDate: '', //结束时间
        supplierId: '', //机构id
      }
      api.getScheduleByCode(query).then((res) => {
        console.log(res)
      })
    },
    // 打开日期弹框
    openDatePicker(item) {
      if (item.isDisabled) {
        return
      }
      this.supplierId = item.supplierId
      this.hospitalId = item.id
      this.datePickShow = true
    },

    // 确认选择-"立即预约"
    getConfirm(val) {
      this.datePickShow = false
      console.log('确认选择', val, this.serviceDate)
      const _this = this
      const query = {
        dataSource: 'M', //数据来源P电脑PC ,M 手机
        customerId: this.id, //客户id
        servicepackageId: this.servicepackageId, //套餐id
        checkUnitCode: JSON.stringify(this.hospitalId), //预约门店code
        serviceDate: this.serviceDate, //预约使用服务时间
        chooseList: JSON.parse(window.localStorage.getItem('chooseList')), //选择服务列表
        payList: [],
        supplierId: this.supplierId, //供应商id
        hospitalId: this.hospitalId, //医院id
        // checkUnitCode: '2152',
        // chooseList: [{ id: 1069 }],
        // customerId: 56418,
        // dataSource: 'M',
        // hospitalId: 2152,
        // payList: [],
        // serviceDate: '20211127',
        // servicepackageId: 1043,
        // supplierId: 1007,
      }
      console.log('立即预约=', query)

      // 弹窗-"你预约的日期为:xxxxxx"
      this.$confirm({
        title: '预约时间确认',
        content: `您预约的日期为： ${this.serviceDate}`,
		okText: '确认',
		cancelText: '取消',
        onOk() {
          // return new Promise((resolve, reject) => {
          //   setTimeout(Math.random() > 0.5 ? resolve : reject, 1000)
          // }).catch(() => console.log('Oops errors!'))
          api.addAppointment(query).then((res) => {
            if (res.returnCode === '0000') {
              console.log('立即预约=', res)
              _this.$message.success('预约成功')
              // 提示预约成功,之后跳转到预约详情页面
              setTimeout(() => {
                // 需要获取用户id
                _this.$router.push({
                  name: 'Detail',
                  query: {
                    id: _this.id,
                  },
                })
              }, 1000)
            } else {
              _this.$message.error(res.returnMsg)
            }
          })
        },
        onCancel() {},
      })
    },

    getCancle(val) {
      this.datePickShow = false
    },

    dateChange(date, type) {
      console.log(date)
      if (date.length != 0) {
        this.serviceDate = date[0].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;
      }
    }
  }
  .hospital_none {
    text-align: center;
    padding: 20px;
  }
}
.ant-btn.ant-btn-primary{
	background: #3F7FFB;
}
</style>
