<template>
  <div class="linkage">
    <el-select
      v-model="province_code"
      placeholder="选择省"
      @change="choseProvince"
    >
      <el-option
        v-for="item in province"
        :key="item.id"
        :label="item.name"
        :value="item.id"
      />
    </el-select>
    <el-select
      v-model="cityid_code"
      placeholder="选择市"
      @change="choseCity"
      v-if="shi1"
    >
      <el-option
        v-for="item in shi1"
        :key="item.id"
        :label="item.name"
        :value="item.id"
      />
    </el-select>
    <el-select
      v-model="countyid_code"
      placeholder="选择区县"
      @change="choseBlock"
      v-if="qu1"
    >
      <el-option
        v-for="item in qu1"
        :key="item.id"
        :label="item.name"
        :value="item.id"
      />
    </el-select>
  </div>
</template>

<script>
export default {
  props: {
    provinceid: {
      type: String,
      default: "",
    },
    cityid: {
      type: String,
      default: "",
    },
    countyid: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      province: [],
      province_code: "",
      shi1: [],
      cityid_code: "",
      qu1: [],
      countyid_code: "",
    };
  },
  watch: {
    provinceid: {
      immediate: true,
      handler(val) {
        console.log("province_code", val);
        this.province_code = val;
      },
      deep: true,
    },
    cityid: {
      immediate: true,
      handler(val) {
        this.cityid_code = val;
      },
      deep: true,
    },
    countyid: {
      immediate: true,
      handler(val) {
        this.countyid_code = val;
      },
      deep: true,
    },
  },
  created: function () {
    setTimeout(() => {
      this.getCityData();
    }, 100);
  },
  methods: {
    // 加载china地点数据，三级
    getCityData: function () {
      const params = {
        type: "getArea",
        data: {
          type: "0",
        },
      };
      this.$http.post(this.$api.getArea, params).then((res) => {
        console.log("11", res);
        this.province = res;
        // console.log("this.province", this.province);
      });
      setTimeout(() => {
        this.$http
          .post(this.$api.getArea, {
            type: "getArea",
            data: {
              type: "1",
              areaid: this.province_code,
            },
          })
          .then((res) => {
            this.shi1 = res;
          });
      }, 100);
      setTimeout(() => {
        this.$http
          .post(this.$api.getArea, {
            type: "getArea",
            data: {
              type: "2",
              areaid: this.cityid_code,
            },
          })
          .then((res) => {
            this.qu1 = res;
          });
      }, 100);
    },
    // 选省
    choseProvince: function (e) {
      console.log(e);
      let obj = {};
      this.cityid_code = "";
      this.countyid_code = "";
      const params = {
        type: "getArea",
        data: {
          type: "1",
          areaid: e,
        },
      };
      this.$http.post(this.$api.getArea, params).then((res) => {
        this.shi1 = res;
      });

      obj = this.province.find((item) => {
        return item.id === e;
      });
      this.$emit("getAreaCode", { key: "city", obj });
      // this.$emit("getAreaCode", { key: "street", obj: { id: "", name: "" } });?\
      // this.$emit("getAreaCode", { key: "village", obj: { id: "", name: "" } });
    },
    // 选市
    choseCity: function (e) {
      let obj = {};
      this.countyid_code = "";
      const params = {
        type: "getArea",
        data: {
          type: "2",
          areaid: e,
        },
      };
      this.$http.post(this.$api.getArea, params).then((res) => {
        this.qu1 = res;
      });

      obj = this.shi1.find((item) => {
        return item.id === e;
      });
      this.$emit("getAreaCode", { key: "street", obj });
      // this.$emit("getAreaCode", { key: "village", obj: { id: "", name: "" } });
    },
    // 选区
    choseBlock: function (e) {
      let obj = {};
      this.E = e;
      obj = this.qu1.find((item) => {
        return item.id === e;
      });
      this.$emit("getAreaCode", { key: "village", obj });
    },
  },
};
</script>

<style lang="scss" scoped>
.linkage {
  .el-select {
    margin-right: 10px;
  }
}
</style>
