<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-form-item prop='name' label="收货人">
          <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item prop='mobile' label="手机号">
          <el-input v-model="form.mobile"></el-input>
        </el-form-item>
        <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-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-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-form-item prop='detail' label="详细地址">
          <el-input placeholder='请填写详细地址' :number='true' v-model='form.detail'>
          </el-input>
        </el-form-item>
      </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
    })
    console.log(value)
    // console.log(list,75)
    // console.log(filtered)
    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
      console.log(this.form)
    },
    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);
          console.log(this.form)
        },
        deep: true
      },
      name: {
        handler: function (val) {
          console.log(val)
          // this.$emit('change', val);
          // console.log(this.city)
          // if(this.province){
          //   this.form.province = this.province
          // }
          // if(this.city){
          //   this.form.city = this.city
          // }
          // if(this.district){
          //   this.form.district = this.district
          // }
          // if(this.detail){
          //   this.form.detail = this.detail
          // }
          // if(this.name){
          //   this.form.name = this.name
          // }
          // if(this.mobile){
          //   this.form.mobile = this.mobile
          // }
          // console.log(this.form)
          this.form = {
            province: this.province,
            city: this.city,
            district: this.district,
            detail: this.detail,
            name: this.name,
            mobile: this.mobile
          }
          console.log(this.form)
        },
        deep: true
      }
    },
    methods: {
      proChange: function (val, oldVal) {
        if (oldVal) {
          this.form.city = '';
          this.form.district = '';
        }
        // console.log(this.val)
        // console.log(this.oldVal)
        // console.log(this.form)
        this.form.city = this.cities[0].value;
        this.form.district = this.districts[0].value;
        console.log(this.province)
      },
      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>