<template>
  <el-cascader
    :size="size || 'medium'"
    style="width: 100%"
    filterable
    clearable
    v-model="values"
    :options="options"
    :placeholder="placeholder || ''"
    :props="{
      expandTrigger: 'hover',
      children: 'child',
      value: 'id',
      label: 'name',
      disabled: 'disabled',
    }"
    :disabled="disabled"
    @change="handleChange"
  ></el-cascader>
</template>

<script>
import asyncRequest from "./http";

import resToken from "@/mixins/resToken";

export default {
  name: "searchExclusive",
  mixins: [resToken],
  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) {
      this.values = val;
    },
  },
  data() {
    return {
      values: [],
      options: [],
      loading: true,
    };
  },
  mounted() {
    this.options = [];
    this.loading = false;
    this.remoteMethod();
  },
  methods: {
    handleChange(value) {
      this.$emit("selectChange", value);
    },
    async remoteMethod() {
      this.loading = true;
      this.options = [];
      const res = await asyncRequest.list({});
      const { code, data, message } = await this.useResHandle(res);
      if (code === 0) {
        let list = JSON.parse(JSON.stringify(data));
        list.map((e) => {
          if (e.child.length === 0) {
            e.disabled = e.status === "0";
            delete e["child"];
          } else {
            e.child.map((a) => {
              a.disabled = a.status === "0";
              if (a.child.length === 0) {
                delete a["child"];
              }
              return a;
            });
          }
          return e;
        });
        this.options = list;
      } else {
        this.options = [];
      }
      this.loading = false;
    },
  },
};
</script>

<style lang="scss" scoped></style>
