<template>
  <div
    class="select"
    ref="select"
  >
    <div
      v-for="(item,index) in Data"
      :key='index'
      class="item"
    >
      <div class="name">{{item.name}}：</div>
      <div class="types">
        <div
          v-for="(it,ind) in item.list"
          :key="it"
          @click="ClassChangeFunc(index,ind)"
        >{{it}}</div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    Data: {
      type: Array,
      default: []
    }
  },
  data () {
    return {
      active: []
    }
  },
  methods: {
    // dom操作添加class
    ClassAddDom () {
      return new Promise(resolve => {
        let active = JSON.parse(JSON.stringify(this.active));
        let dom = this.$refs.select;
        dom.querySelectorAll(".item .types").forEach((item, index) => {
          item.querySelectorAll("div").forEach((it, ind) => {
            ind == active[index] ?
              it.classList.add("focus")
              :
              it.classList.remove('focus')
              ;
          })
        })
        resolve(active)
      })
    },
    // 点击改变事件
    ClassChangeFunc (no_1, no_2) {
      let active = this.active;
      active[no_1] = no_2;
      this.ClassAddDom().then(res => this.$emit('select', res));
    }
  },
  created () {
    // 生成活动函数
    let Data = JSON.parse(JSON.stringify(this.Data)), active = [];
    Data.forEach(item => {
      active.push(item.value);
    })
    this.active = active;
  },
  mounted () {
    this.ClassAddDom()
  },
  updated () {
    // 生成活动函数
    let Data = JSON.parse(JSON.stringify(this.Data)), active = [];
    Data.forEach(item => {
      active.push(item.value);
    })
    this.active = active;
    this.ClassAddDom();
  },
}
</script>
<style lang="less" scoped>
.select {
  width: 100%;
  font-size: 14px;
  .item {
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: center;
    .name {
      width: 50px;
    }
    .types {
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      div {
        margin: 5px;
        padding: 5px 10px;
        border-radius: 5px;
      }
      .focus {
        color: #fff;
        background-color: #409eff;
      }
    }
  }
}
</style>