<template>
  <div class="course-outer-wrapper">
    <div class="course-wrapper" :style="{paddingLeft: coursetypes.level * 20 + 'px'}">
      <div style="display: flex;">
        <div v-if="coursetypes.children && coursetypes.children.length > 0">
          <div v-if="coursetypes.isShow" class="down-triangle" @click="coursetypes.isShow = false" />
          <div v-else class="right-triangle" @click="coursetypes.isShow = true" />
        </div>
        <div v-else style="width: 20px;" />
        <div>{{ coursetypes.name }}</div>
      </div>
      <div style="display: flex;">
        <el-button type="primary" icon="el-icon-edit" size="mini" @click="editCourseName">编辑</el-button>
        <el-button type="primary" icon="el-icon-plus" size="mini" @click="editChildType">添加子分类</el-button>
      </div>
    </div>
    <coursetype v-for="item in coursetypes.children" v-show="coursetypes.isShow" :coursetypes="item" />
    <el-dialog
      title="编辑课程名称"
      :visible.sync="editNameShow"
    >
      <el-form
        :model="editFormInfo"
        label-width="120px"
        :rules="rules"
      >
        <el-form-item
          prop="title"
          label="课程名称"
        >
          <el-input v-model="editFormInfo.title" />
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button type="info">取消</el-button>
        <el-button type="primary">提交</el-button>
      </div>
    </el-dialog>
    <el-dialog
      title="添加子类"
      :visible.sync="addTypeShow"
    >
      <el-form
        :model="addTypeFormInfo"
        label-width="120px"
        :rules="addTypeRules"
      >
        <el-form-item
          prop="type"
          label="类别名称:"
        >
          <el-input v-model="addTypeFormInfo.type" />
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button type="info">取消</el-button>
        <el-button type="primary">提交</el-button>
      </div>
    </el-dialog>
  </div>

</template>

<script>
export default {
  name: 'Coursetype',
  components: {
    coursetype: () => import('./coursetype.vue')
  },
  props: {
    coursetypes: {
      type: Object,
      required: true,
      default: function() {
        return {
          id: 1,
          name: 'aa',
          children: [
            {
              id: 2,
              name: 'bb',
              children: [],
              isShow: false,
              level: 2
            }
          ],
          isShow: false,
          level: 1
        }
      }
    }
  },
  data() {
    return {
      editNameShow: false,
      editFormInfo: {
        title: this.coursetypes.name
      },
      rules: {
        title: [
          {
            required: true,
            message: '请输入课程名称',
            trigger: 'blur'
          }
        ]
      },
      addTypeShow: false,
      addTypeFormInfo: {
        type: ''
      },
      addTypeRules: {
        type: [
          { required: true, message: '请输入类别名称', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    editCourseName() {
      this.editNameShow = true
    },
    editChildType() {
      this.addTypeShow = true
    }
  }
}
</script>

<style lang="scss">
.course-wrapper{
  display: flex;
  justify-content: space-between;
  height: 50px;
  border-bottom: 1px solid #eee;
  align-items: center;
  margin: 0px 10px;
}
  .down-triangle {
    width: 20px;
    height: 20px;
    background-image: url('../../assets/home/下三角.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    cursor: pointer;
  }
  .right-triangle {
    width: 20px;
    height: 20px;
    background-image: url('../../assets/home/右三角.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    cursor: pointer;
  }
</style>
