<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="name">
          <el-input type="text" v-model="changeInfoForm.name" placeholder="请输入快递公司"></el-input>
        </el-form-item>
        <el-form-item label="手机号" prop="phone">
          <el-input type="text" v-model="changeInfoForm.phone" 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
              change-on-select
              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";
  let vm = null;
  export default {
    components: {
    },
    props: {
      // sendSetFormData: {
      //   type: Object,
      //   required: true,
      //   default: () => {}
      // },
    },
    data(){
      return{
        changeInfoDialog: true,
        optionsRegion: [],
        administrativeValue: '',
        changeInfoForm: {
          name: '',
          phone: '',
          area: '',
          address: '',
        },
        props: {
          lazy: true,
          lazyLoad(node, resolve) {
            const { level } = node;
            console.log("node", node);
            if (node.level == 1) {
              let req = {
                provinceId: node.data.value
              };
              vm.GET("basic-data/position/cities", req).then(res => {
                let newData = vm.setMoreOption(res.data.cityList, "cities");
                resolve(newData);
              });
            } else if (node.level == 2) {
              let req = {
                cityId: node.data.value
              };
              vm.GET("basic-data/position/counties", req).then(res => {
                let newData = vm.setMoreOption(res.data.countyList, "counties");
                resolve(newData);
              });
            } else if (node.level == 3) {
              let req = {
                countyId: node.data.value
              };
              vm.GET("basic-data/position/towns", req).then(res => {
                let newData = vm.setMoreOption(res.data.townList, "towns");
                resolve(newData);
              });
            }
          }
        },
        rules: {
          name: [
            { required: true, message: '请输入收货人姓名', trigger: "blur"},
          ],
          phone: [
            { required: true, message: '请输入收货人手机号', trigger: "blur"},
          ],
          area: [
            { required: true, message: '请选择所在地区', trigger: "blur"},
          ],
          address: [
            { required: true, message: '请输入收货人详细地址', trigger: "blur"},
          ],
        },
      }
    },
    created() {
      vm = this;
      this.getRegionOption();
    },
    methods: {
      handleChange(value) {
        let areaId = "000";
        for (let i = 0; i < value.length; i++) {
          areaId += "_" + value[i];
        }
        this.administrativeValue = areaId;
        console.log('修改后的值',value, this.administrativeValue);
      },
      //获取地区
      getRegionOption() {
        let req = {};
        openLoading(vm);
        vm.GET("basic-data/position/provinces", req).then(res => {
          closeLoading(vm);
          if (res.code == "000000") {
            vm.optionsRegion = operationData.setRegionOption2(
              res.data.provinceList
            );
          }
        });
      },
      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.$emit('closeChangeInfo',{type: 2})
      },
    },
  }
</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>
