<template>
  <div>
    <template v-if="!lookflag">
      <el-select
        v-loading="selLoading"
        class="w-100"
        v-model="selectValue"
        :placeholder="placeholder"
        :clearable="false"
        style="width: 240px"
        size="mini"
        refs="mySelect"
        :reserve-keyword="true"
        :disabled="disabled"
        filterable
        popper-class="sele"
        :filter-method="filter"
        @change="fun"
        @focus="funx"
        @blur="funb"
        @visible-change="hidden"
        clearable
      >
        <el-option
          v-for="item in options"
          :key="item[itemObj.value]"
          :label="item[itemObj.label]"
          remote
          :value="item[itemObj.value]"
          placeholder="请输入"
        >
        </el-option>

        <div style="bottom: -10px">
          <el-pagination
            v-if="pageModel.total > pageModel.limit"
            small
            @current-change="handleCurrentChange"
            :current-page="pageModel.pageIndex"
            :page-size="pageModel.limit"
            layout="prev, pager,next,total"
            :total="pageModel.total"
          >
          </el-pagination>
        </div>
      </el-select>
    </template>
    <template v-else
    >
      <div v-loading="selLoading">{{ showValue }}</div>
    </template
    >
  </div>
</template>


<style scoped lang="scss">
::v-deep .el-input--mini .el-input__inner {
  height: 38px;
}

.w-100 {
  width: 100% !important;
}

.drop > > > .el-input__inner {
  background: #5183ff !important;
  color: white;
  border: none;
  height: 26px;
  padding: 10px 22px 10px 10px;
  text-align: center;
}

.drop {
  width: 250px;
}

.drop > > > .el-select .el-input .el-select__caret {
  display: none;
}
</style>

<el-select
  v-loading="selLoading"
  class="w-100"
  v-model="selectValue"
  :placeholder="placeholder"
  :clearable="false"
  style="width: 240px"
  size="mini"
  refs="mySelect"
  :reserve-keyword="true"
  :disabled="disabled"
  filterable
  popper-class="sele"
  :filter-method="filter"
  @change="fun"
  @focus="funx"
  @blur="funb"
  @visible-change="hidden"
>
<el-option
  v-for="item in options"
  :key="item.id"
  :label="item.label"
  remote
  :value="item.id"
  placeholder="请输入"
>
</el-option>

<div style="bottom: -10px">
  <el-pagination
    v-if="pageTotal > pageSize"
    small
    @current-change="handleCurrentChange"
    :current-page="currentpage"
    :page-size="pageSize"
    layout="prev, pager,next,total"
    :total="pageTotal"
  >
  </el-pagination>
</div>
</el-select>
</template>

<script>
import debounce from "lodash/debounce";
import {getUserModuleApi} from "@/api/integrationOption/integrationOption.js";
import panelGroup from "@/views/dashboard/PanelGroup.vue";

export default {
  props: {
    // 是否禁用
    disabled: {
      type: Boolean,
      default: false,
    },
    placeholder: String,
    value: {
      type: String,
    },
    appId: {
      type: String,
      default: ""
    },
    itemObj: {
      type: Object,
      default: () => {
        return {
          label: "label",
          value: "value"
        };
      },
    },
    lookflag: {
      type: Boolean,
      default: false,
    },
    flag: {
      type: Boolean,
      default: false,
    }
  },
  data() {
    return {
      options: [], //当前页码的数据
      pageModel: {
        total: 0,
        pageIndex: 1,
        limit: 10,
      },
      selLoading: false,
      showValue: "",
      lookLoading: false,
    };
  },
  computed: {
    selectValue: {
      get() {
        return this.value;
      },
      set(val) {
        this.$emit("input", val);
      },
    },
  },
  created() {
    // if (Object.keys(this.ruleForm).length && this.ruleForm[this.itemObj.id]) {
    //   this.getSelectdata(this.ruleForm[this.itemObj.id]);
    // }
  },
  methods: {
    // 请求select信息（分页）
    async getUserModuleHandle(obj = {}) {
      if (this.flag) {
        if (this.appId) {
          this.selLoading = true;
          const res = await getUserModuleApi({
            tl: "sysApplicationService",
            as: "application",
            dj: "queryAppApi"
          }, {
            pageNum: this.pageModel.pageIndex,
            pageSize: this.pageModel.limit,
            appId: this.appId,
            ...obj
          })
          console.log(res)
          if (res.status === '200') {
            this.selLoading = false;
            this.pageModel.total = res.attribute.total;
            this.options = res.attribute.list;
          }
        }
      } else {
        this.selLoading = true;
        const res = await getUserModuleApi(
          {
            tl: "sysApplicationService",
            as: "application",
            dj: "queryApp",
          },
          {
            pageNum: this.pageModel.pageIndex,
            pageSize: this.pageModel.limit,
            ...obj,
          }
        );
        if (res.status == 200) {
          console.log(res)
          this.pageModel.total = res.attribute.total;
          this.selLoading = false;
          this.options = res.attribute.list;
        }
      }
    },
    // 根据selectid找到value
    async getSelectdata(id) {
      if (this.flag) {
        this.selLoading = true;
        const res = await getUserModuleApi({
          tl: "sysApplicationService",
          as: "application",
          dj: "debugAppApi",
        }, {
          id: this.value,
          appId: this.appId,
        })
        console.log(res, 'api查询')
        this.options = []
        this.options.push({...res.attribute.api})
        this.selLoading = false;
      } else {
        this.selLoading = true;
        const res = await getUserModuleApi({
          tl: "sysApplicationService",
          as: "application",
          dj: "getApp",
        }, {
          id: id
        })
        this.selLoading = false;
        console.log(res, '应用查询')
        this.options = []
        this.options.push({
          ...res.attribute
        })
      }
    },
    // 页码改变事件
    handleCurrentChange(val) {
      this.pageModel.pageIndex = val;
      this.getUserModuleHandle();
    },
    // select选中更改事件
    fun(val) {
      this.$emit("seleChange", this.value);
    },
    // 获得焦点
    funx() {
      this.getUserModuleHandle();
    },
    // 失去焦点
    funb() {
    },
    hidden() {
    },
    //搜索方法,将符合的数据存入options中，并分页展示
    filter: debounce(function (val) {
      //   this.pageModel.pageIndex = 1;
      //   this.getUserModuleApi({ lableValue: val });
      // }, 300),
    })
  },
  //监听来自父组件的数据，当数据更新时，重置展示
  watch: {
    value: {
      immediate: true,
      handler(NewV, oldV) {
        if (this.flag) {
          if (!NewV) {
            this.options = []
          }
        }
        if (NewV && this.options.length === 0) {
          console.log(1)
          this.getSelectdata(this.value)
        }
      }
    },
  },
};
</script>
