<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">
            <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 }}-{{ item.id }}</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.checkUnitName }}</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 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: '', //选择市
      mechanismList: [],
      hospitalList: [],
      supplierIds: '', //体检中心ids,默认显示全部
      servicepackageId: '', //产品id
    }
  },
  created() {
    const { servicepackageId } = this.$route.query
    this.servicepackageId = servicepackageId ? servicepackageId : ''
    this.getProvinceList() //省
    this.getSupplierList() //获取体检机构
    this.getShopByDistrictCode() //根据体检结构-显示可选择的体检中心,默认显示全部
  },

  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.getCityListByProvinceCode() // 根据省-获取市
    },

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

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

    // 获取体检机构
    getSupplierList() {
      // this.id
      api.getSupplierList({ servicepackageId: '1043' }).then((res) => {
        if (res.returnCode == '0000') {
          const data = res.content
          this.mechanismList = [
            {
              status: '0',
              supplierName: '全部',
            },
            ...res.content,
          ]
          // 提取所有的体检机构ids,并用逗号隔开,比如:1004,1007
          this.supplierIds = data
            .map(function (e, i) {
              return e.id
            })
            .join(',')
          console.log('this.supplierIds===', this.supplierIds)
        } 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: [{ id: 1069 }], //必选服务
        payList: [],
        provinceCode: null, //省编号
        cityCode: '', //市编号
        areaCode: '', //区号
        supplierIds: this.supplierIds, //体检机构d
        location: ',', //经纬度
        servicepackageId: 1043, //客户id
      }
      api.getShopByDistrictCode(params).then((res) => {
        if (res.returnCode === '0000') {
          this.hospitalList = res.content
        }
      })
    },
    // 打开日期弹框
    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>
