<template>
  <!-- 确认收货地址对话框  -->
  <el-dialog
    title="确认收货地址"
    :visible.sync="dialogVisible"
    width="40%"
    @open="open()"
    @close="cancelBtn()"
  >
    <el-form ref="addressRef" :model="addressForm" :rules="addressRules">
      <el-form-item label="收件人" prop="certificate_name">
        <el-input
          v-model="addressForm.certificate_name"
          placeholder="填写真实姓名"
          clearable
        ></el-input>
      </el-form-item>
      <el-form-item label="收件人电话" prop="certificate_phone">
        <el-input
          v-model="addressForm.certificate_phone"
          placeholder="填写真实电话"
          clearable
        ></el-input>
      </el-form-item>
      <el-row :gutter="20">
        <el-col :span="8">
          <el-form-item label="收货地址" prop="certificate_province">
            <el-select
              ref="certificate_province"
              v-model="addressForm.certificate_province"
              clearable
              placeholder="选择省份"
              @change="changeProvince($event)"
            >
              <el-option
                v-for="item in selectProvince"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item class="no_label" label=" " prop="certificate_city">
            <el-select
              ref="certificate_city"
              v-model="addressForm.certificate_city"
              clearable
              placeholder="选择城市"
            >
              <el-option
                v-for="item in selectCitySchool"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item class="no_label" label=" " prop="county">
            <!-- <el-select
                ref="school"
                v-model="addressForm.school"
                clearable
                placeholder="选择所在区县"
              >
                <el-option
                  v-for="item in selectSchoolList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                >
                </el-option>
              </el-select> -->
            <el-input
              v-model="county"
              placeholder="选择所在区县"
              clearable
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item label="" prop="certificate_address">
        <el-input
          ref="certificate_address"
          v-model="certificate_address"
          placeholder="填写详细地址"
          clearable
        ></el-input>
      </el-form-item>
    </el-form>
    <div class="btn">
      <el-button type="primary" @click="setAddress()">确 定</el-button>
    </div>
  </el-dialog>
</template>
<script>
/* eslint-disable */
import { getProAndCity } from "r/index/signUp";
import { setAddress, getAddress } from "r/index/certificate";
import validator from "common/validator";

export default {
  name: "deliveryAddress",
  props: {
    dialogVisibleAddress: Boolean,
  },
  data() {
    return {
      dialogVisible: false, //确认收货地址对话框
      addressRules: {
        certificate_name: [
          { required: true, message: "姓名不能为空！", trigger: "blur" },
        ],
        certificate_phone: [
          {
            required: true,
            message: "手机号不能为空！",
            trigger: "blur",
          },
          { validator: validator.validatePhone, trigger: "blur" },
        ],
        certificate_province: [
          {
            required: true,
            message: "请选择所在省份！",
            trigger: "change",
          },
        ],
        certificate_city: [
          {
            required: true,
            message: "请选择所在城市！",
            trigger: "change",
          },
        ],
        // county: [
        //   { required: true, message: "请选择所在区县！", trigger: "blur" },
        // ],
        certificate_address: [
          { required: true, message: "详细地址不能为空！", trigger: "blur" },
        ],
      },
      addressForm: {
        certificate_name: "",
        certificate_phone: "",
        certificate_province: null,
        certificate_city: null,
        certificate_address: "",
      },
      county: "", //区县
      certificate_address: "", //详细地址
      selectProvince: [], //省份
      CityName: {}, //根据省份筛选出所有城市的对象
      selectCityJiguan: [], //籍贯城市列表
      selectCitySchool: [], //就读中学-城市列表
      jgProvinceCode: "", //省份id
      jiguan_city: "", //城市id(和省份id拼接)
    };
  },
  created() {
    // this.getProAndCity();
  },
  watch: {
    dialogVisibleAddress() {
      this.dialogVisible = this.dialogVisibleAddress;
    },
  },
  methods: {
    // 确认,关闭弹框，修改父组件的值
    cancelBtn() {
      this.dialogVisible = false;
      this.$emit("closeAddressDialog", this.dialogVisible, false);
    },
    open() {
      this.getProAndCity();
      this.getAddress();
    },
    getAddress() {
      console.log(111111)
      getAddress({}).then((res) => {
        // console.log(res, "getAddress");
        if (res.data.code != 200) {
          return this.$message.error(res.data.message);
        }
        console.log(res.data.info)
        console.log(res.data.info.length==0 )
        if (res.data.info.length==0) {
            console.log(111111)
          return;
        } else {
          // console.log(Object.keys(res.data.info),'info')
          // if (Object.keys(res.data.info).length != 0) {
          //   return this.$message.error("已保存地址");
          // }
          // this.dialogVisible = true;
          this.addressForm.certificate_name = res.data.info.certificate_name;
          this.addressForm.certificate_phone = res.data.info.certificate_phone;
          this.addressForm.certificate_province =
            res.data.info.certificate_province;
          this.addressForm.certificate_city = res.data.info.certificate_city;
          this.selectCitySchool = this.getCurrentCityLists(
            this.addressForm.certificate_province
          );
          if (res.data.info.certificate_address) {
            this.county = res.data.info.certificate_address.split("-")[0];
            this.certificate_address =
              res.data.info.certificate_address.split("-")[1];
          }
        }
      });
    },

    // 获取省份城市
    getProAndCity() {
      getProAndCity({}).then((res) => {
        // console.log(res, "getProAndCity");
        if (res.data.code != 200) {
          return this.$message.error(res.data.message);
        }
        this.selectProvince = res.data.province_list;
        this.CityName = res.data.city_list;
      });
    },

    //选择籍贯省份change事件
    changeProvince(val, status) {
      console.log(val);
      this.selectCitySchool = [];
      this.selectCitySchool = this.getCurrentCityLists(val); //在此调用城市筛选列表
      if (!status) {
        this.addressForm.certificate_city = "";
      }
    },

    //返回当前省份下的城市列表
    getCurrentCityLists(val) {
      console.log(val);
      let currentCity = [];
      if (
        this.CityName == null ||
        !this.CityName ||
        Object.values(this.CityName).length == 0
      ) {
        getProAndCity({})
          .then((res) => {
            if (res.data.code === 200) {
              this.CityName = res.data.city_list;
              for (let key in this.CityName) {
                if (this.CityName[key].parent_id == val) {
                  currentCity.push(this.CityName[key]);
                }
              }
              return currentCity;
            } else {
              this.$message.error(res.data.message);
            }
          })
          .catch((err) => {
            this.$message.error(err);
          });
      } else {
        for (let key in this.CityName) {
          if (this.CityName[key].parent_id == val) {
            currentCity.push(this.CityName[key]);
          }
        }
        return currentCity;
      }
      return currentCity;
    },
    // 提交
    setAddress() {
      this.addressForm.certificate_address =
        this.county.toString() + "-" + this.certificate_address.toString();
      this.$refs["addressRef"].validate((valid, object) => {
        console.log(valid, "valid");
        if (!valid) {
          return false;
        }
      });

      setAddress(this.addressForm).then((res) => {
        // console.log(res, "setAddress");
        if (res.data.code != 200) {
          return this.$message.error(res.data.message);
        }
        this.$message.success(res.data.message);
        this.dialogVisible = false;
      });
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep.el-form-item {
  margin-bottom: 20px;

  // item的验证红点点
  .el-form-item__label {
    height: 32px;
    line-height: 32px;
    font-size: 12px;
    font-family: PingFang SC;
    font-weight: 500;
    color: #12141c;
  }
  &.no_label .el-form-item__label {
    width: 0 !important;
  }
  &.no_label .el-form-item__label::before {
    content: "" !important;
  }

  &.no_label .el-form-item__content {
    margin-left: 0 !important;
  }
}
</style>