<template>
  <div class="order-manage-wrapper">
    <el-dialog
        title="修改买家收货信息"
        :visible="changeInfoDialog"
        @close="cancelChangeInfo"
        width="600px"
        center
        class="send-set-body">
      <el-form ref="changeInfoForm" :model="changeInfoForm" :rules="rules" label-width="90px" label-suffix=":">
        <el-form-item label="收货人" prop="receiver">
          <el-input type="text" v-model="changeInfoForm.receiver" placeholder="请输入收货人姓名"></el-input>
        </el-form-item>
        <el-form-item label="手机号" prop="receiverMobile">
          <el-input type="text" v-model="changeInfoForm.receiverMobile" maxlength="11" placeholder="请输入收货人手机号"></el-input>
        </el-form-item>
        <el-form-item label="所在地区" prop="area">
          <el-cascader
              size="small"
              ref="cascaderRegion"
              :options="optionsRegion"
              :props="props"
              v-model="changeInfoForm.area"
              @change="handleChange"
              filterable
              style="width: 100%"
              placeholder="请选择地区"
          ></el-cascader>
        </el-form-item>
        <el-form-item label="详细地址" prop="address">
          <el-input type="textarea"
                    v-model="changeInfoForm.address"
                    rows="5"
                    placeholder="请输入收货人详细地址"
                    style="width: 100%;">
          </el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" type="primary" @click="submitChange">完成</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
  import { openLoading, closeLoading } from "@/utils/utils";
  import * as operationData from "@/utils/operation";
  import { checkMobile } from '@/utils/patients/checkValid'
  let vm = null;
  export default {
    components: {
    },
    props: {
      receiveInfo: {
        type: Object,
        required: true,
        default: () => {}
      },
    },
    data(){
      return{
        changeInfoDialog: true,
        optionsRegion: [],
        administrativeValue: '',
        changeInfoForm: {
          receiver: '',
          receiverMobile: '',
          area: '',
          address: '',
          provinceName: '',
          cityName: '',
          countyName: '',
          townName: '',
          provinceId: null,
          cityId: null,
          countyId: null,
          townId: null,
        },
        provinceList: [],
        cityList: [],
        countyList: [],
        townList: [],
        props: {
          lazy: true,
          lazyLoad(node, resolve) {
            //第一个参数node为当前点击的节点，第二个resolve为数据加载完成的回调(必须调用)
            const { level } = node;
            console.log("当前点击的节点node", node);
            if (node.level == 1) {
              vm.changeInfoForm.provinceName = node.data.label;
              vm.changeInfoForm.provinceId = node.data.value;
              let req = {
                provinceId: node.data.value
              };
              vm.GET("basic-data/position/cities", req).then(res => {
                vm.cityList = res.data.cityList;
                let newData = vm.setMoreOption(res.data.cityList, "cities");
                resolve(newData);
              });
            } else if (node.level == 2) {
              vm.changeInfoForm.cityName = node.data.label;
              vm.changeInfoForm.cityId = node.data.value;
              let req = {
                cityId: node.data.value
              };
              vm.GET("basic-data/position/counties", req).then(res => {
                vm.countyList = res.data.countyList;
                let newData = vm.setMoreOption(res.data.countyList, "counties");
                resolve(newData);
              });
            } else if (node.level == 3) {
              vm.changeInfoForm.countyName = node.data.label;
              vm.changeInfoForm.countyId = node.data.value;
              let req = {
                countyId: node.data.value
              };
              vm.GET("basic-data/position/towns", req).then(res => {
                vm.townList = res.data.townList;
                let newData = vm.setMoreOption(res.data.townList, "towns");
                resolve(newData);
              });
            }
          }
        },
        rules: {
          receiver: [
            { required: true, message: '请输入收货人姓名', trigger: "blur"},
          ],
          receiverMobile: [
            { required: true, message: '请输入收货人手机号', trigger: "blur"},
            {validator: checkMobile, trigger: ['change','blur']}
          ],
          area: [
            { required: true, message: '请选择所在地区', trigger: "blur"},
          ],
          address: [
            { required: true, message: '请输入收货人详细地址', trigger: "blur"},
          ],
        },
      }
    },
    created() {
      vm = this;

      this.initData();
      this.getRegionOption();
    },
    methods: {
      initData() {
        console.log('父级传入的值',this.receiveInfo);
        const { receiver, receiverMobile,  provinceId, provinceName, cityId, cityName, countyId, countyName, townId, townName, address } = this.receiveInfo;
        this.changeInfoForm.receiver = receiver;
        this.changeInfoForm.receiverMobile = receiverMobile;
        this.changeInfoForm.address = address;
        let arrayLike = {
          0: provinceId,
          1: cityId,
          2: countyId,
          3: townId,
          'length': 4
        }
        let arr = Array.from(arrayLike)
        console.log('初始化后的值',arr);
        this.changeInfoForm.area = arr;
      },
      handleChange(value) {
        let areaId = "000";
        for (let i = 0; i < value.length; i++) {
          areaId += "_" + value[i];
        }
        this.administrativeValue = areaId;
        console.log('修改后的值',value, this.administrativeValue);
      //  000_110_110100000000_110101000000_110101001000
      },
      //获取地区
      getRegionOption() {
        let req = {};
        openLoading(vm);
        vm.GET("basic-data/position/provinces", req).then(res => {
          closeLoading(vm);
          if (res.code == "000000") {
            this.provinceList = res.data.provinceList;
            vm.optionsRegion = operationData.setRegionOption3(
              res.data.provinceList
            );
            console.log('region',vm.optionsRegion)
          }
        });
      },
      setMoreOption(data, type) {
        let option = [];
        for (let i = 0; i < data.length; i++) {
          let obj = data[i];
          if (type == "cities") {
            obj.label = data[i].cityName;
            obj.value = data[i].cityId;
          } else if (type == "counties") {
            obj.label = data[i].countyName;
            obj.value = data[i].countyId;
            // obj.leaf = true;
          } else if (type == "towns") {
            obj.label = data[i].townName;
            obj.value = data[i].townId;
            obj.leaf = true;
          }
          option.push(obj);
        }
        return option;
      },
      cancelChangeInfo() {
        this.$emit('closeChangeInfo',{type: 1})
      },
      submitChange() {
        this.$refs.changeInfoForm.validate((valid) => {
          if (valid) {
            // this.submit();
            this.changeInfoForm.townId = null;
            this.changeInfoForm.townName = '';
            if (this.changeInfoForm.area.length == 4) {
              this.changeInfoForm.townId = this.changeInfoForm.area[3];
              this.townList.map((item) => {
                if (this.changeInfoForm.townId == item.townId) {
                  this.changeInfoForm.townName = item.townName;
                }
              })
            }
            console.log('确定值',this.changeInfoForm)
            this.$emit('closeChangeInfo',{type: 2, data: this.changeInfoForm})
          } else {
            return false;
          }
        })
      },
    },
  }
</script>
<style lang="scss">
  .send-set-body{
    .address-content{
      width: 100%;
      background-color: #F0F2F5;
      border: 1px solid #E4E7ED;
      border-radius: 4px;
      padding: 10px 15px;
      .address-title{
        display: flex;
        justify-content: space-between;
        align-items: center;
        .title{
          font-size: 13px;
          color: #999999;
        }
      }
      .address-info{
        p{
          line-height: 26px;
        }
      }
    }
    .form-title{
      margin-top: 15px;
      margin-bottom: 15px;
    }
    .el-dialog__body{
      padding-bottom: 0;
    }
  }
</style>
