<template>
  <div class="file-set">
    <p class="title">素材设置</p>
    <el-form ref="form" :model="ruleForm" label-width="90px" label-position="left" :rules="rules">
      <el-form-item label="标题" prop="title">
        <el-input style="width:270px" v-model="ruleForm.title" @input="titleChange" size="small"></el-input>
      </el-form-item>
      <el-form-item label="素材分类" prop="category">
        <el-cascader :options="seleteList" :show-all-levels="false" v-model="ruleForm.category" :props="props"
          @change="changeSelect" size="small">
        </el-cascader>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import CategorySelect from '@/components/category-select/CategorySelect'
export default {
  name: 'Set',
  data() {
    return {
      select: {
        "classname": "saletool.sharematerial.sharematerial",
        "method": "select",
        "content": {
          "nocache": true,
          "parentid": 0
        }
      },
      props: {
        value: 'sat_sharematerial_classid',
        label: 'classname',
        setTitleChange: {
          type: Function
        },
        setSelectChange: {
          type: Function
        }
      },
      ruleForm: {
        title: '',
        category: ''
      },
      rules: {
        title: [
          { required: true, message: '请输入标题', trigger: 'blur' },
        ],
        category: [
          { required: true, message: '请选择分类', trigger: 'blur' }
        ],
      },
      seleteList: [],
      aaa: true
    };
  },
  components: {
    CategorySelect
  },
  computed: {
  },
  watch: {

  },
  created() {
    this.getSeleteData()
  },
  methods: {
    /* 修改分类 */
    changeSelect(id) {
      this.$emit("setSelectChange", id[id.length - 1])
    },
    /* 修改标题 */
    titleChange(val) {
      this.$emit("setTitleChange", val)
    },
    getSeleteData() {
      this.$api.requested(this.select).then(res => {
        this.seleteList = res.data
      })
    }
  },
};
</script>

<style scoped>
* {
  box-sizing: border-box;
}

.file-set {
  padding: 16px 16px;
  background: #ffffff;
}

.file-set .title {
  font-size: 14px;
  font-weight: bold;
  color: #333333;
  margin-bottom: 30px;
}

.file-set .el-input {
  width: 400px;
  height: 32px;
  border-radius: 4px 4px 4px 4px;
}

.el-form {
  display: flex;
}

.el-form-item {
  margin-right: 50px;
}
</style>
