<template>
  <div>
    <div v-if="!disabled">
      <el-select class="mr15 wh33" v-model="faNode[(item.province||'province')]" filterable clearable :placeholder="placeholder" @change="onChange" v-bind="$attrs" v-on="$listeners" :disabled="item.disabled2">
        <el-option :value="item.id+''" v-for="(item) in optionsList1" :key="item.id" :label="item.areaName"></el-option>
      </el-select>
      <el-select class="mr15 wh33" v-model="faNode[(item.city||'city')]" filterable clearable :placeholder="placeholder" v-bind="$attrs" @change="onChange2" v-on="$listeners" :disabled="disabled">
        <el-option :value="item.id+''" v-for="(item) in optionsList2" :key="item.id" :label="item.areaName"></el-option>
      </el-select>
      <el-select class="wh33" v-model="faNode[nodeKey]" filterable clearable :placeholder="placeholder" v-bind="$attrs" v-on="$listeners" :disabled="disabled">
        <el-option :value="item.id+''" v-for="(item) in optionsList3" :key="item.id" :label="item.areaName"></el-option>
      </el-select>
    </div>
    <div v-if="disabled">
      {{getName(faNode[(item.province||'province')],this.optionsList1)}}- {{getName(faNode[(item.city||'city')],this.optionsList2)}}- {{getName(faNode[nodeKey],this.optionsList3)}}
    </div>
  </div>

</template>
<script>
import { getArea } from "@/components/api/";

export default {
  name: "mgArea",
  props: {
    item: {
      type: Object,
      required: true,
    },
    faNode: {
      type: Object,
      required: true,
    },
    nodeKey: {
      type: String,
      required: true,
    },
    type: {
      type: String,
      default: "input",
    },
    disabled: {
      type: Boolean,
      default: false,
    },
    label: {
      type: String,
      default: "",
    },
    placeholder: {
      type: String,
      default() {
        return `请选择${this.item.label}`;
      },
    },
  },
  data() {
    return {
      model: "",
      optionsList1: [],
      optionsList2: [],
      optionsList3: [],
    };
  },
  mounted() {
    getArea({ id: -1 }).then((res) => {
      this.optionsList1 = res.data;
    });
    if (this.faNode[this.item.province || "province"]) {
      this.onChange(this.faNode[this.item.province || "province"]);
    }
    if (this.faNode[this.item.city || "city"]) {
      this.onChange2(this.faNode[this.item.city || "city"]);
    }
  },
  methods: {
    getName(value, list) {
      let label = "";
      list = list || [];
      list.forEach((item) => {
        if (item.id == value) {
          label = item.areaName;
        }
      });
      return label;
    },
    onChange(value) {
      if (value) {
        getArea({ id: value }).then((res) => {
          this.optionsList2 = res.data;
        });
      } else {
        this.optionsList2 = [];
      }
    },
    onChange2(value) {
      if (value) {
        getArea({ id: value }).then((res) => {
          this.optionsList3 = res.data;
        });
      } else {
        this.optionsList3 = [];
      }
    },
  },
};
</script>
<style scoped>
.wh33 {
  width: 32%;
}
</style>