<template>
  <!-- 用户定向 -->
  <div>
    <div class="drawer-item">
      <div class="drawer-item-title">用户定向</div>
      <div class="drawer-item-con">
        <el-form>
          <!-- 城市 -->
          <el-form-item label="城市"> </el-form-item>

          <!-- 性别 -->
          <el-form-item label="性别">
            <el-radio-group v-model="orientation.allowGender">
              <template v-for="item of globleEnums.targetGender">
                <el-radio-button
                  :key="item.value"
                  :label="item.value"
                  :value="item.value"
                  >{{ item.name }}</el-radio-button
                >
              </template>
            </el-radio-group>
          </el-form-item>

          <!-- 年龄 -->
          <el-form-item label="年龄">
            <el-checkbox-group v-model="checkedAge" @change="handleAgeDire">
              <el-checkbox-button
                v-for="item in globleEnums.targetAge"
                :label="item.value"
                :key="item.value"
                >{{ item.name }}</el-checkbox-button
              >
            </el-checkbox-group>
          </el-form-item>

          <!-- 操作系统版本 -->
          <el-form-item label="操作系统版本"></el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    /* 公共参数 */
    globleEnums: {
      type: Object,
      default() {
        return {};
      },
    },
    /* 用户定向 */
    orientation: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  data() {
    return {
      targetAge: "不限", // 年龄
      checkedAge: [""], // 被选中的年龄段
    };
  },
  created() {
    this.orientation.allowAge = this.checkedAge.toString;
  },

  methods: {
    testChange() {
      console.log(this.allowAge);
    },

    /* 选择不同的年龄段 */
    handleAgeDire(value) {
      console.log("改变：", value);
      console.log(111, this.checkedAge);
      let ages = [...this.checkedAge];
      let len = ages.length;
      if (len > 1) {
        if (ages[len - 1] !== "") {
          this.checkedAge = ages.filter((i) => i !== "");
        } else {
          this.checkedAge = ages.filter((i) => i === "");
        }
      }
      this.orientation.allowAge = this.checkedAge.toString;
    },
  },
};
</script>

<style>
</style>