<template>
  <el-form ref="basicInfoForm" :model="info" :rules="rules" label-width="150px">
    <el-row :gutter="20">
      <el-col :span="12">
        <el-form-item label="表名称" prop="tableName">
          <el-input v-model="info.tableName" placeholder="请输入表名称" />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="实际数据库表" prop="realTableName">
          <el-input v-model="info.realTableName" placeholder="请输入实际数据库表" />
        </el-form-item>
      </el-col>
      <el-col :span="24">
        <el-form-item label="表描述" prop="tableComment">
          <el-input v-model="info.tableComment" placeholder="请输入表描述" />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item  label="是否菜单" >
          <el-radio-group v-model="info.isMenu">
            <el-radio label="Y">是</el-radio>
            <el-radio label="N">否</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item  label="列数" prop="tableColumn">
          <el-input type="number" :max="4" :min="1" v-model="info.tableColumn" placeholder="请输入列数" />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item  label="菜单权限" prop="menuRole">
         <!-- <el-input v-model="info.menuRole" placeholder="请输入菜单权限" />
          <div style="color: red; line-height: 20px;">*只能分别输入AMDSQU大写字母,A:新增，M:修改，D:删除S:提交，Q:查询，U：反提交</div> -->
          <el-select  v-model="info.menuRole" :multiple ="true" clearable placeholder="请选择菜单权限" @visible-change = "visiblechange" @change="changetr" @blur="blurkde" filterable>
             <div style="margin-left: 20px;">
               <!-- <el-checkbox v-model="checked" @change="checkedAll"/> 全选/反选 -->
             </div>
              <el-option
                ref="tree"
                v-for="item in userList"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item  label="页面模板" prop="tplCategory">
          <el-select style="width: 100%;" v-model="info.tplCategory" placeholder="页面模板" clearable>
            <el-option v-for="dict in embedEdit" :key="dict.id" :label="dict.name" :value="dict.id" />
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="12" >
        <el-form-item label="新增程序" prop="triggerCreate">
          <el-input v-model="info.triggerCreate" placeholder="请输入新增程序" />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item  label="检索程序" prop="triggerRetrieve">
          <el-input v-model="info.triggerRetrieve" placeholder="请输入检索程序" maxlength="50" />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item  label="修改程序" prop="triggerUpdate">
          <el-input v-model="info.triggerUpdate" placeholder="请输入修改程序" maxlength="50" />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item  label="删除程序" prop="triggerDelete">
          <el-input v-model="info.triggerDelete" placeholder="请输入删除程序" maxlength="50" />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item  label="提交程序" prop="triggerSubmit">
          <el-input v-model="info.triggerSubmit" placeholder="请输入提交程序" maxlength="50" />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item  label="过滤条件" prop="filterConditions">
          <el-input v-model="info.filterConditions" placeholder="请输入过滤条件" maxlength="50" />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item   label="显示字段" prop="dkColumn">
          <el-input  :disabled="true" :value="info.dkColumnName" placeholder="请输入显示字段" maxlength="50" />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item  label="输入字段" prop="akColumn">
          <el-input :disabled="true" :value="info.akColumnName" placeholder="请输入输入字段" maxlength="50" />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item   label="主键" prop="tablePrimaryKeyName">
          <el-input :disabled="true" :value="info.tablePrimaryKeyName" placeholder="请输入主键" maxlength="50" />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item  label="扩展属性" prop="extendedAttributes">
            <el-input v-model="info.extendedAttributes" type="textarea" placeholder="请输入内容"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item  label="备注" prop="remark">
            <el-input v-model="info.remark" type="textarea" placeholder="请输入内容"></el-input>
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
</template>
<script>
export default {
  name: "BasicInfoForm",
  props: {
    info: {
      type: Object,
      default: null
    },
  },
  data() {
    return {
      embedEdit: [{
        name: '单表',
        id: 'crud',
      },{
        name: '头页签',
        id: 'headTab',
      },{
        name: '主子表',
        id: 'itemTab',
      },{
        name: '树表',
        id: 'tree',
      }],
      rules: {
        tableName: [
          { required: true, message: "表名称不能为空", trigger: "blur" }
        ],
        tableComment: [
          { required: true, message: "表描述不能为空", trigger: "blur" }
        ],
        menuRole: [
          { required: true, message: "菜单权限不能为空", trigger: "blur" }
        ],
        viewType: [
          { required: true, message: "页面模板不能为空", trigger: "blur" }
        ],
        tableColumn: [
          { required: true, message: "列数不能为空", trigger: "blur" }
        ]
      },
      userList:[{
        value: 'A',
        label: 'A:新增'
      },
      {
        value: 'M',
        label: 'M:修改'
      },
      {
        value: 'D',
        label: 'D:删除'
      },
      {
        value: 'S',
        label: 'S:提交'
      },{
        value: 'Q',
        label: 'Q:查询'
      },{
        value: 'U',
        label: 'U:反提交'
      }],
      ie:false,
    };
  },
  created(){
   // console.log(this.jeutgqa)
   // if(this.info.menuRole !== undefined){
   //   this.ie = true
   //   this.deptNamety = this.info.menuRole.split('')
   // }

  },

  mounted() {

  },
  methods:{
    // 下拉框出现/隐藏时触发
    visiblechange(val){
     console.log(val)
    },
    changetr(val){
      console.log(val)
      let name = []
      let huej = []
      name = val
      // for(var i = 0 ; i <this.userList.length; i++ ){
      //   if(this.userList[i].userId == name[i]){

      //   }
      // }
      // var flag;
      // for (var i in name) {
      //   flag = true;
      //   for (var j in this.userList) {
      //     if (this.userList[j].userId == name[i]) {
      //       // flag = false;
      //       huej.push(this.userList[j])
      //       // break;
      //     }
      //   }
      //   // if (flag) {
      //   //   this.userList.push(name[i]);
      //   // }
      // }
      this.info.menuRole = name
      if(this.info.menuRole.length == 0){
        this.info.menuRole == undefined
      }
      // this.userList
      console.log(val)
      console.log(this.info.menuRole)
    },
    blurkde(){

    }
  }
};
</script>
