<template>
  <el-form-item prop="master">
    <el-select
      size="mini"
      name="master"
      v-model="selectedOption"
      placeholder="请选择"
      @change="selectDataSet"
    >
    <el-option
      key=""
      label=""
      value=""
    />
    <el-option
      v-for="item in dataSet"
      :key="item.id"
      :label="item.setName"
      :value="item.id"
    />
    </el-select>
  </el-form-item>
</template>
<script>
import { queryAllDataSet} from "@/api/bigscreen";
export default {
  name: "data-source-select",
  components: {},
  model: {
    prop: "value",
    event: "input"
  },
  props: {
    value: {
      type: "",
      default: ""
    }
  },
  data() {
    return {
      selectedOption: {},
      dataSet: [], // 数据集
    };
  },
  watch: {
      value: {
        handler(newValue, oldValue) {
          if (typeof newValue === "string") {
            this.selectedOption = newValue;
          } else {
            this.selectedOption = this.parseString(newValue);
          }
        },
        immediate: true
    }
  },
  computed: {},
  created() {
    this.loadDataSet();
  },
  // mounted() {
  //   this.loadDataSet();
  // },
  methods: {
    async loadDataSet() {
      const { code, data } = await queryAllDataSet();
      this.dataSet = data;
      const selectKey = this.value;
      if (code != "200"){
        return
      }else{
        for (let i = 0; i < this.dataSet.length; i++) {
          let item = this.dataSet[i];
          if (item.id == selectKey) {
            this.selectedOption = this.dataSet[i];
          }
        }
      }
    },
    //选中，回刷父节点
    async selectDataSet() {
      this.$emit("input", this.selectedOption);
      this.$emit("change", this.selectedOption);
    },
    // 数据集回显
    async echoDataSet(val) {
      if (!val) return;
      //改变全局数据集 动态获取数据(获取根据数据源ID)改变静态组件的值

    },
  }
};
</script>
