<template>
  <div class="address">
      <section style="width:100%; height: 100%;">
        <el-form :model='form' class='demo-ruleForm' ref='form' label-width="100px" :rules='rules'>
          <el-row :gutter='20'>
            <el-col :span='20'>
              <el-form-item prop='name' label="收货人">
                <el-input v-model="form.name"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter='20'>
            <el-col :span='20'>
              <el-form-item prop='mobile' label="手机号">
                <el-input v-model="form.mobile"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
            <el-row :gutter='20' class='address'>
              <el-col :span='20'>
                <el-form-item prop='province' label="省">
                  <el-select v-model='form.province' placeholder='请选择省' @change='proChange'>
                    <el-option v-for='item in provinces' :key='item.value' :value='item.value' :label="item.label">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
          <el-row :gutter='20' class='address'>
            <el-col :span='20'>
              <el-form-item prop='city' label="市">
                <el-select v-model='form.city' placeholder='请选择市' @change='cityChange'>
                  <el-option v-for='item in cities' :key='item.value' :value='item.value' :label="item.label">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter='20' class='address'>
            <el-col :span='20'>
              <el-form-item prop='district' label="县／区">
                <el-select v-model='form.district' placeholder='请选择区/县' @change='districtChange'>
                  <el-option v-for='item in districts' :key='item.value' :value='item.value' :label="item.label">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter='20' class='address'>
            <el-col :span='20'>
              <el-form-item prop='detail' label="详细地址">
                <el-input placeholder='请填写详细地址' :number='true' v-model='form.detail'>
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </section>
  </div>
</template>

<script>
  import Address from './addr.js'
  let type = 1
//  let provinceValue = 2
//  let cityValue = 52
  //根据apid查找对象
  function findcity(item) {
    return item.type == type;
  }
  function findChildren(list, value) {
    let filtered = list.filter((item) => {
      return item.value === value
    })
    return filtered[0].children
  }
  //筛选出各省级对象
  let pObj = Address.filter(findcity)

  export default {
    name: 'vueAddress',
    props: ['province', 'city', 'district', 'detail', 'name', 'mobile'],
    created() {
    },
    mounted() {
      let vm = this
      vm.show = vm.showAddressPicker
    },
    computed: {
        cities: function () {
            if(this.form.province){
                return findChildren(pObj, this.form.province)
            } else {
                return []
            }
        },
        districts: function () {
            if(this.form.city){
                return findChildren(this.cities, this.form.city)
            } else {
                return []
            }
        }
    },
    data() {
      return {
          rules: {
              province: [{ required: true, message: '请选择省份', trigger: 'change' }],
              city: [{ required: true, message: '请选择城市', trigger: 'change' }],
              district: [{ required: true, message: '请选择区/县', trigger: 'change' }],
              detail: [{ required: true, message: '请填写详细地址', trigger: 'change' }],
              name: [{ required: true, message: '请填写收货人', trigger: 'change' }],
              mobile: [{ required: true, message: '请填写手机号', trigger: 'change' }]
          },
          form: {
              province: this.province,
              city: this.city,
              district: this.district,
              detail: this.detail,
              name: this.name,
              mobile: this.mobile
          },
          provinces: pObj
      }
    },
    watch: {
        form: {
            handler: function (val) {
                this.$emit('change', val);
            },
            deep: true
        }
    },
    methods: {
        proChange: function (val, oldVal) {
            if (oldVal) {
                this.form.city = '';
                this.form.district = '';
            }
            this.form.city = this.cities[0].value;
            this.form.district = this.districts[0].value;
        },
        cityChange: function (val, oldVal) {
            this.form.district = this.districts[0].value;
        },
        districtChange: function (val, oldVal) {
            if (oldVal) {
                this.form.detail = '';
            }
        },
        detailChange: function (val) {
            console.log(val);
        }
    }
  }

</script>

<style scoped>
  .mint-popup {
    width: 100%;
  }

  .footer-btn {
    box-sizing: border-box;
    position: fixed;
    width: 100%;
    z-index: 2;
    left: 0;
    bottom: 3rem;
  }

  .input {
    border: none;
  }

  .padding {
    padding: 1.5rem;
    font-size: 1.4rem;
  }

  .float-right {
    float: right;
  }

</style>