<template>
		<div id="body" class="application" v-show="show" v-cloak>
			<div class="applicationForm">
				<div class="essentialInformation">
					<ul>
						<li>
							<div class="agencyNamjian fr">
								<img src="../assets/img/xiala.png" width="100%" height="100%" />
							</div>
							<div class="agencyName agencyJantou">
                　　　　　　　　　　　　　　　　　　　　　　　　　　<span class="plaseCity" v-show="plaseCityShow" v-text="plaseProvinceText"></span>
							　　<select v-model=‘provinceSelect‘ @change ="cityChange(1)">
								<option v-for="(item,index) in application.province" :key="index" :value="item.id" v-text="item.title"></option>
							　　</select>
 

							</div>
						</li>
						<li>
							<div class="agencyNamjian fr">
								<img src="../assets/img/xiala.png" width="100%" height="100%" />
							</div>
							<div class="agencyName agencyJantou">
                　　　　　　　　　　　　　　　　　　　　　　　　　　　　<span class="plaseCity" v-show="plaseCityShow" v-text="plaseCityText"></span>
								<select v-model="citySelect" @change="cityChange(2)">
                  　　　　　　　　　　　　　　　　　　　　　　　　　　　　<option v-for="(item,index) in city" :key="index" :value="item.id" v-text="item.title"></option>
								</select>
 

							</div>
						</li>
						<li>
							<div class="agencyNamjian fr ">
								<img src="../assets/img/xiala.png" width="100%" height="100%" />
							</div>
							<div class="agencyName agencyJantou noBorder">
                　　　　　　　　　　　　　　　　　　　　　　　　　　　　<span class="plaseCity" v-show="plaseCityShow" v-text="plaseCountyText"></span>
								<select v-model="countySelect">
                  　　　　　　　　　　　　　　　　　　　　　　　　　　　　<option v-for="(item,index) in county" :key="index" :value="item.id" v-text="item.title"></option>
								</select>
 

							</div>
						</li>
					</ul>
				</div>
			</div>
		</div>
  </template>
<script>
  export default {
    name: ‘application‘,
    data () {
      return {
        show: false,
        application: {
          province: [],
          city: {},
          county: {}
        },
        city: [],
        county: [],
        provinceSelect: ‘‘,
        citySelect: ‘‘,
        countySelect: ‘‘,
        tishi: false,
        tishiTxt: ‘‘,
        plaseCityShow: true,
        plaseCityText: ‘請子選擇城市‘,
        plaseProvinceText: ‘請選擇城市‘,
        plaseCountyText: ‘請選擇(區)縣‘
      }
    },
    methods: {
      verify: function () {
        let thisObj = this
        this.$chaos.setTitle(‘報名表單‘)
        this.$chaos.verify(function () {
          thisObj.$chaos.ajax({
            data: {
              pid: ‘0‘
            },
            slient: true,
            userinfo: true,
            url: ‘get_address_by_pid‘,
            callback: function (type, res) {
              if (type !== ‘success‘) {
                return
              }
              if (res.status) {
                thisObj.application.province = res.info.region_list
                thisObj.show = true
              } else {
                thisObj.$vux.toast.show({
                  text: res.msg,
                  type: ‘text‘,
                  position: ‘bottom‘
                })
              }
            }
          })
          thisObj.$chaos.ajax({
            slient: true,
            userinfo: true,
            url: ‘user_is_sign‘,
            callback: function (type, res) {
              if (type !== ‘success‘) {
                return
              }
              if (res.status) {
                let userInfo = thisObj.$chaos.getUserInfo()
                if (userInfo.user_info.is_sign === 1) {
                  window.location.href = ‘#/CourseList‘
                } else {
                  userInfo.user_info.is_buy_course = 1
                  thisObj.$chaos.setUserInfo(userInfo)
                }
              } else {
                thisObj.$vux.toast.show({
                  text: res.msg,
                  type: ‘text‘,
                  position: ‘bottom‘
                })
              }
            }
          })
        }, false)
      },
      cityChange: function (type) {
        let thisObj = this
        if (type === 1) {
          if (thisObj.provinceSelect === ‘‘ || typeof thisObj.provinceSelect === ‘undefined‘) {
            return
          }
          if (typeof thisObj.application.city[thisObj.provinceSelect] === ‘undefined‘) {
            thisObj.plaseCityShow = false
            thisObj.$chaos.ajax({
              data: {
                pid: thisObj.provinceSelect
              },
              slient: true,
              userinfo: true,
              url: ‘Attend/get_address_by_pid‘,
              callback: function (type, res) {
                if (type !== ‘success‘) {
                  return
                }
                if (res.status) {
                  thisObj.application.city[thisObj.provinceSelect] = res.info.region_list
                  thisObj.city = res.info.region_list
                  thisObj.citySelect = thisObj.city[0][‘id‘]
                } else {
                  thisObj.$vux.toast.show({
                    text: res.msg,
                    type: ‘text‘,
                    position: ‘bottom‘
                  })
                }
              }
            })
          } else {
            thisObj.city = thisObj.application.city[thisObj.provinceSelect]
            thisObj.citySelect = thisObj.city[0][‘id‘]
          }
        } else {
          if (thisObj.city === ‘‘ || typeof thisObj.city === ‘undefined‘) {
            return
          } else {
            if (typeof thisObj.application.county[thisObj.city] === ‘undefined‘) {
              thisObj.$chaos.ajax({
                data: {
                  pid: thisObj.citySelect
                },
                slient: true,
                userinfo: true,
                url: ‘Attend/get_address_by_pid‘,
                callback: function (type, res) {
                  if (type !== ‘success‘) {
                    return
                  }
                  if (res.status) {
                    thisObj.application.county[thisObj.citySelect] = res.info.region_list
                    thisObj.county = res.info.region_list
                    thisObj.countySelect = thisObj.county[0][‘id‘]
                  } else {
                    thisObj.$vux.toast.show({
                      text: res.msg,
                      type: ‘text‘,
                      position: ‘bottom‘
                    })
                  }
                }
              })
            } else {
              thisObj.county = thisObj.application.county[thisObj.citySelect]
              thisObj.countySelect = thisObj.county[0][‘id‘]
            }
          }
        }
      }
    },
    created: function () {
      this.verify()
    },
    watch: {
      ‘$route‘: ‘verify‘
    }
  }
</script>
<style scoped>
  [v-cloak] {
    display: none;
  }
  .plaseCity{
    position: absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    line-height: 55px;
    text-indent: 10px;
  }
  .essentialInformation, .importaInformation {
    background: #FFFFFF;
  }
  .essentialInformation {
    margin: 10px 0;
  }
  .essentialInformation ul, .importaInformation ul {
    margin: 0 15px;
  }
  .agencyNameImg {
    width: 20px;
    height: 20px;
    line-height: 4.3;
  }
  .fl {
    float: left;
  }
  .noBorder {
    border: 0;
  }
  .essentialInformation:after {
    content: ‘‘;
    display: block;
    clear: both;
  }
  .agencyNamjian {
    width: 11px;
    height: 8px;
    line-height: 4.3;
  }
  .agencyJantou {
    padding-right: 40px;
    position: relative;
  }
  .agencyName {
    margin-left: 30px;
    border-bottom: 1px solid #cccccc;
    line-height: 3.8
  }
  .essentialInformation input, .essentialInformation select {
    width: 100%;
    text-indent: 10px;
    border: 0;
    -webkit-appearance: none;
    background: transparent;
  }
  .essentialInformation select {
    height: 55px;
    position: relative;
    z-index: 0;
  }
  .agencyBut {
    margin-top: 100px;
  }
  .squadButton {
    text-align: center;
    color: #fff;
    background: #fbac36;
    margin: 0 30px;
    line-height: 2.5;
    font-size: 16px;
    box-shadow: 0px 1px 5px #ccc;
  }
  .agencyBut {
    margin-top: 100px;
  }

</style>

vue select的change事件，將點擊過的城市名存在數組中，下次調用不需要再調用接口