<template>
    <div>
      <el-form ref="form" :rules="rules"  :model="form" label-width="120px">
        <el-form-item
            label="栏目名称："
            prop="column_name"
        >
          <el-input v-model.number="form.column_name"  placeholder="请输入栏目名称"></el-input>
        </el-form-item>
        <el-form-item
            label="父级栏目："
            prop="column_arr_id"
        >
        <el-cascader
        v-model="form.column_arr_id"
        :options="websiteColumnList"
        :props="{
                  checkStrictly: true,
                  value:'id',
                  label:'column_name',
                  children:'children',
                }" 
        clearable></el-cascader>
      </el-form-item>
        <el-form-item label="sort：" prop="sort">
          <el-input v-model="form.sort"  placeholder="请输入排序" ></el-input>
        </el-form-item>
        <el-form-item label="备注信息：" prop="remark">
          <el-input v-model="form.remark"  placeholder="请输入站备注信息" ></el-input>
        </el-form-item>
        <el-form-item>
          <div style="text-align: center">
            <el-button type="primary" @click="onSubmit" :disabled="Isdisabled" :loading="isloading">保存</el-button>
            <el-button style="color: #5075FC " @click="closeDlg">取消</el-button>
          </div>
        </el-form-item>
      </el-form>
    </div>
  </template>
  <script>
  export default {
    props: {
      websiteColumnDataForm: {
        type: Object,
        default: () => {}
      },
      isloading:{
        type:Boolean,
        default: true
      },
      closeDlg:{
        type:Function
      }
    },
    data() {
      let self = this
      return {
        websiteColumnList:[],
        form: {
          id:'',
          column_name: '',
          column_arr_id:[0],
          sort:"",
          remark:"",
        },
        menulist: [],
        Isdisabled: false,
        rules: {
          column_name: [
            { required: true, message: '栏目名称必填' },
          ],
          column_arr_id: [
            { required: true, message: '请选择栏目' }
          ]
        }
      }
    },
    mounted() {
      if(this.websiteColumnDataForm) {
        this.form = Object.assign({} , this.websiteColumnDataForm)
        this.form.column_arr_id =  this.websiteColumnDataForm.column_arr_id
      }
  
      this.getwebsiteColumnColumnList()
    },
    methods: {
      closeDlg() {
        // this.isloading = false
        console.log("edit提交")
        this.$emit('closeDlg',1)
      },
      onSubmit() {
        let that = this
        that.$refs['form'].validate((valid) => {
          if (valid) {
            this.$emit('websiteColumnSubmitClick', this.form)
          }
        })
      },
      getwebsiteColumnColumnList(){
        let _t= this
        let parames = {}
       this.$api.website.websiteColumnList(parames).then(res=>{
                  if(res.code==200){
                     console.log(res.data)
                    _t.websiteColumnList = res.data
                  }else{
                      this.$message.error("查询失败")
                  }
              })
      },
  
      
    }
  }
  </script>
  <style>
  .el-cascader-node>.el-radio{
    margin-top:25px;
  }
  </style>
  