<template>
  <div class="select-area">
    <el-cascader
      v-if="!loading"
      :size="size || 'medium'"
      style="width: 100%"
      filterable
      clearable
      v-model="value"
      :placeholder="placeholder || ''"
      :props="props"
      :disabled="disabled"
      @change="handleChange"
    ></el-cascader>
    <div class="loading-input" :class="{ disabled: disabled }" v-else>
      <i class="el-icon-loading"></i>
      <span>{{ placeholder || "" }}</span>
    </div>
  </div>
</template>

<script>
import asyncRequest from "./http";
export default {
  name: "SelectArea",
  props: ["size", "value", "isDetail", "placeholder", "disabled"],
  /**
   * 属性集合
   * @param {String}        size                   : 组件大小 非必填
   * @param {Array}         value                  : 选中值  必填
   * @param {String}        placeholder            : 提示信息            非必填
   * @param {Boolean}       isDetail               : 是否是详情逻辑       必填
   * @param {Boolean}       disabled               : 是否禁用            必填
   */
  /**
   * 事件集合
   * @selectChange            : 选中值变化调用   抛出选中数据
   */
  watch: {
    value: function (val, old) {
      if (val) {
        this.loading = true;
        setTimeout(() => {
          this.loading = false;
        }, 10);
      }
    },
  },
  data() {
    return {
      loading: false,
      props: {
        lazy: true, //开启远程加载
        expandTrigger: "hover",
        async lazyLoad(node, resolve) {
          // console.log(node);
          const { level, value, root, loading } = node;
          let list = [];
          let res = {};
          if (level === 0) {
            res = await asyncRequest.provinceList({});
          } else if (level === 1) {
            res = await asyncRequest.cityList({ code: value });
          } else {
            res = await asyncRequest.areaList({ code: value });
          }
          const { code, data } = res;
          if (code === 0) {
            data.forEach((v1) => {
              let province = {
                value:
                  level === 0
                    ? v1.province_code
                    : level === 1
                    ? v1.city_code
                    : v1.area_code,
                label: v1.name,
                leaf: level >= 2,
              };
              list.push(province);
            });
            resolve(list);
          } else {
            resolve([]);
          }
        },
      },
    };
  },
  methods: {
    // getCheckedNodes(e) {
    //    @getCheckedNodes="getCheckedNodes"
    // },
    handleChange(value) {
      this.$emit("selectChange", value);
    },
  },
};
</script>

<style lang="scss" scoped>
.select-area {
  .loading-input {
    background-color: transparent;
    border: 1px solid #dfe4ed;
    color: #c0c4cc;
    width: 100%;
    height: 36px;
    line-height: 36px;
    padding: 0 30px 0 12px;
    border-radius: 4px;
    &.disabled {
      background-color: #f5f7fa;
    }
    span {
      font-size: 16px;
      height: 36px;
      line-height: 36px;
      padding: 0 0 0 3px;
      vertical-align: top;
    }
  }
}
</style>
