<template>
	<div class="warp">
		<el-col :span="24" class="ss">
		  <div class="djclass">
		    <el-col :span="3" class="km-title">
		      <span class="zlTitle">功能标签:</span>
		    </el-col>
		    <el-col :span="10">
		      <el-select
		        v-model="fnLevel"
		        placeholder="请选择所在功能"
		        @change="currFnSel"
		        value-key="name"
		      >
		        <el-option
		          v-for="item in fnOptions"
		          :key="item.id"
		          :label="item.name"
		          :value="item"
		        ></el-option>
		      </el-select>
		    </el-col>
        <el-col :span="2" class="iconde">
          <div class="iconde">
            <i class="el-icon-delete" v-if="index" @click="deleteStudent"></i>
          </div>
        </el-col>
		  </div>
		</el-col>
	</div>
</template>

<script>
	export default {
		props: {
		  index: {
		    type: Number,
		    required: true
		  },
		  userGroup: {
		    type: Array,
		    default: Array
		  }
		},
		data() {
		  return {
		    fnOptions:[
          {
          	id: 0,
          	name: "所有已购、未购用户"
          },
          {
          	id: 1,
          	name: "全部未购用户"
          },
          {
          	id: 2,
          	name: "全部已购买用户"
          },
          {
          	id: 3,
          	name: "基础题库"
          },
          {
          	id: 4,
          	name: "经典案例"
          },
          {
          	id: 5,
          	name: "经典案例版"
          },
          {
          	id: 6,
          	name: "面审版"
          }
        ],
        student: {
          one: {},
        },
      fnLevel:''
		  };
		},
    watch: {
      student: {
        handler(newV, oldV) {
          if (newV.one.length === 0) {
            return false;
          }

          this.$emit("uploadUserGroup", {
            index: this.index,
            data: newV
          });
        },
        deep: true
      },
      userGroup: {
        handler(newV, oldV) {
          if (newV.length !== 0) {
            this.student = { ...newV[this.index]
            };
          }
        },
        deep: true
      }
    },
    methods: {
      // 选择功能标签
      currFnSel(val) {
        let stair={
           name:  val.name,
        }
        this.student.one = stair;
        this.fnLevel = val.name;
      },
      deleteStudent: function() {
        console.log("我是子组件的", this.index)
        this.$emit("deleteUserGroup", this.index);
      },
      }
	}
</script>

<style>
  .km-title {
    text-align: right;
    font-size: 20px;
    margin-right: 10px;
  }
</style>
