<template>
  <section class="AppRemoteSelect">
    <div class="label">课长</div>
    <el-select v-model="value" placeholder="全部" size="small" @change="handleSearch" filterable>
      <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"/>
    </el-select>
  </section>
</template>

<script>
export default {
  name: "AppRemoteSelect",
  label: "下拉菜单(接口源)",
  data() {
    return {
      options: [],
      value: ''
    }
  },
  computed: {
    refs: v => v.$parent.getItemRefs(),
  },
  methods: {
    getOptions() {
      return $http.get("/data-boot/ca/screen/scStoreInfo/listGroup").then(res => {
        if (res?.data) {
          return this.options = res.data.map(e => ({label: e.supervisorName, value: e.groupCode}))
        }
      })
    },
    handleSearch(v) {
      const list = this.refs['6e6c93d7-5b24-4d75-a0d0-4beb130045ed'].$refs.main
      list.search.groupCodeList = [v]
      list.getData()
    }
  },
  created() {
    this.getOptions().then(() => this.value = this.options[0].value)
  }
}
</script>
<style scoped>
.AppRemoteSelect {
  display: flex;
  align-items: center;
  gap: 8px;
}

.AppRemoteSelect .el-input__inner {
  background: linear-gradient(180deg, rgba(12, 53, 111, 0) 0%, #0C356F 100%);
  border: 1px solid #1760AE;
  border-radius: 0;
}

.AppRemoteSelect .label {
  white-space: nowrap;
  color: #fff;
  font-size: 14px;
}
</style>
