<template>
  <div class="patient-container">
    <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      width="40%"
      >
      <div style="text-align: center">
        <p>您选择的区域酷医云暂未对接，请联系酷医云客服，我们将免费为您实现对接</p>
        <img style="width: 150px;height: 150px" src="../../../assets/home/kuyi_wechat.jpg"/>
        <p>服务热线</p>
        <p style="font-size: 16px">18682078150</p>
      </div>

      <span slot="footer" class="dialog-footer">
    <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
  </span>
    </el-dialog>
    <div class="cell clearfix">
      <el-form :model="form"  ref="ruleForm" label-width="100px" class="demo-ruleForm" style="text-align: center">
        <el-form-item label="地区">
          <el-select v-model="form.province" clearable filterable placeholder="请选择" @change="changeProvince">
            <el-option
              v-for="item in provinces"
              :key="item.id"
              :label="item.name"
              :value="item.id">
            </el-option>
          </el-select>
          <el-select v-model="form.city"  clearable filterable placeholder="请选择" @change="changeCity">
            <el-option
              v-for="item in citys"
              :key="item.id"
              :label="item.name"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>

    </div>

  </div>

</template>


<script>
  import {GetDistrictsByUpid} from '@/api/district';
  import {getIsDocking} from '@/api/config';

  export default {
    name: 'FastCity',
    data() {
      return {

        signAndWeighBoxPatients: 'sign-and-weigh-box-patients',
        start_time: '',
        end_time: '',
        dialogVisible:false,
        provinces:[],
        citys:[],
        form: {
          province:1,
          city:'',
        }

      }
    },created(){
      this.getDistricts()
      var province = sessionStorage.getItem('province_two')
      var city = sessionStorage.getItem('city')
      console.log(province)
      console.log(city)

      if (province == null) {
        this.form.province = ''
      } else {
        this.form.province = parseInt(province)
      }
      if (city == null) {
        this.form.city = ''
      } else {
        this.form.city = parseInt(city)
      }

    },methods:{
      getDistricts:function() {
        GetDistrictsByUpid({id:0}).then(response=>{
          var res = response.data;
          if(res.state===1) {
            this.provinces = res.data.citys
          }
        }).catch(e=>{

        })

      },changeProvince(id) {
        this.citys = [];
        var upid = parseInt(id);
        if (isNaN(upid) || upid<=0) {
          return false;
        }
        sessionStorage.setItem('province_two', id)

        GetDistrictsByUpid({id:upid}).then(response=>{
          var res = response.data;
          if(res.state===1) {
            this.citys = res.data.citys
          }else{
            this.$message.error(res.msg)
          }
        }).catch(e=>{

        })
      }, changeCity(id) {
        getIsDocking({config_type: 3, province: this.form.province, city:id}).then(response=>{
          var res = response.data;
          if(res.state==1) {
            if (res.data.is_docking == 2){
              this.$message.error('该地区尚未对接,请联系客服')
              this.form.province = '';
              this.form.city = '';
              this.dialogVisible = true

            }else{
              sessionStorage.setItem('city', id)


              this.form.city = id;
              this.dialogVisible = false

            }
          }else{
            this.$message.error(res.msg)

          }
        }).catch(e=>{

        })

      }



    }
  }
</script>


<style scoped>

</style>
