<template>
  <el-form
    ref="form"
    :model="value"
    :rules="rules"
    :label-width="labelWidth + 'px'"
  >
    <el-row>
      <el-col :span="24">
        <el-form-item label="所在地:" required>
          <el-row type="flex" justify="space-between">
            <el-col :span="7">
              <el-form-item prop="province">
                <el-select
                  v-model="value.province"
                  clearable
                  placeholder="请选择"
                  @change="provinceCodeChange"
                >
                  <el-option
                    v-for="(key, value) in provinceSelectList"
                    :key="value"
                    :label="key"
                    :value="value"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="7">
              <el-form-item prop="city">
                <el-select
                  v-model="value.city"
                  clearable
                  placeholder="请选择"
                  @change="cityCodeChange"
                >
                  <el-option
                    v-for="(key, value) in citySelectList"
                    :key="value"
                    :label="key"
                    :value="value"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="7">
              <el-form-item prop="district">
                <el-select
                  v-model="value.district"
                  clearable
                  placeholder="请选择"
                >
                  <el-option
                    v-for="(key, value) in districtSelectList"
                    :key="value"
                    :label="key"
                    :value="value"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
</template>
<script>
import { areaList } from "@/api/config";
export default {
  props: {
    value: Object,
    labelWidth: {
      type: Number,
      default: 120,
    },
  },
  data() {
    return {
      provinceSelectList: [], // 省
      citySelectList: [], // 市
      districtSelectList: [], // 区
      rules: {
        province: [
          { required: true, message: "请选择", trigger: ["change", "blue"] },
        ],
        city: [
          { required: true, message: "请选择", trigger: ["change", "blue"] },
        ],
        district: [
          { required: true, message: "请选择", trigger: ["change", "blue"] },
        ],
      },
    };
  },
  watch: {
    value(newOld) {
      const data = Object.assign({}, newOld);
      this.provinceCodeChange(data.province);
      this.cityCodeChange(data.city);
      newOld.city = data.city;
      newOld.district = data.district;
    },
  },
  methods: {
    getProvinceByParent(id) {
      return new Promise((resolve, reject) => {
        areaList({ code: id })
          .then(({ code, msg, data }) => {
            if (code == 200) {
              resolve(data);
            } else {
              this.$modal.msgError(msg);
              reject({ msg, code });
            }
          })
          .catch((error) => {
            reject(error);
          });
      });
    },
    async provinceCodeChange(id) {
      // delete this.value.city;
      // delete this.value.district;
      this.value.city = undefined;
      this.value.district = undefined;
      if (!id) {
        this.citySelectList = [];
        this.districtSelectList = [];
        return false;
      }
      this.citySelectList = await this.getProvinceByParent(id);
    },
    async cityCodeChange(id) {
      // delete this.value.district;
      this.value.district = undefined;
      if (!id) {
        this.districtSelectList = [];
        return false;
      }
      this.districtSelectList = await this.getProvinceByParent(id);
    },
    submitForm() {
      let flag = false;
      this.$refs["form"].validate((valid) => {
        flag = valid;
      });
      return flag;
    },
  },
  created() {
    areaList().then((res) => {
      this.provinceSelectList = res.data;
    });
  },
};
</script>