<template>
<section class="columnSet">
  <el-dialog
    v-dialogDrag
    title="列配置"
    :visible="dialogFormVisible"
    @close="cancelForm"
    :close-on-click-modal="false"
    class="el-dialog-single"
  >
   
   <section class="columnTitle">注：列配置只影响当前用户登录时查看的内容，不影响其他用户查看。</section>
   <section class="columnUl">
     <ul>
       <li>
         <strong>列字段</strong>
         <em>显示设置</em>
       </li>
       <li v-for="(item,index) in tableColumn" :key='index'>
         <strong>{{item.label}}</strong>
         <em v-if='item.label=="姓名"'>固定显示</em>
         <em v-else><el-switch active-color="#13ce66" v-model="item.show" /></em>
       </li>
       <!-- <li>
         <strong>手机号</strong>
         <em><el-switch active-color="#13ce66" v-model="value" /><el-checkbox v-model="value" >显示完整信息</el-checkbox></em>
       </li> -->
     </ul>
   </section>
      

    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submitForm()">确 定</el-button>
      <el-button @click="cancelForm()">取 消</el-button>
    </div>
  </el-dialog>


</section>  
</template>
<script>
// import selectTree from "@/components/SelectTree";
export default {
  props: ["showdialogColumnSet",'typeFlag'],
  watch: {
    showdialogColumnSet() {
      this.dialogFormVisible = this.showdialogColumnSet;
      this.defaulDataParent=[]
    },
  },
  components: {
  },
  data() {
    return {     
      title: "",
      dialogFormVisible: this.showdialogColumnSet,
      OperType: 0, //0 新增  1修改
      formList: {},  
      rules: {
        // employeeId: [{required: true, message: "请选择用户", trigger: "blur" }],            
      },
      value:true,
      tableColumn:[]
    };
  },
  methods: {     
    getTableRow(data, type) { 
      let newRowData = JSON.parse(JSON.stringify(data)); //拷贝一份存储对象
      this.tableColumn = newRowData; //拷贝一份存储对象引用不同地址    
      this.OperType = type;  
      this.rolecheck=false
      if(this.OperType===0){
         this.title="列配置"        
      }else{
         this.title="列配置" 
       }  
    },
    submitForm() {   
         let tableColumnArr=localStorage.getItem('tableColumnArr')&&JSON.parse(localStorage.getItem('tableColumnArr'))||[]
         
         let obj={}
          obj.type=this.typeFlag
          obj.tableColumn=this.tableColumn  
          if(tableColumnArr.length){
            tableColumnArr.forEach(item=>{
              if(this.typeFlag==item.type){
                  item.tableColumn=this.tableColumn
              }else{
                  tableColumnArr.push(obj) 
              }
            })
          }else{
             tableColumnArr.push(obj) 
          }
          localStorage.setItem('tableColumnArr',JSON.stringify(tableColumnArr))   

          this.cancelForm()       
    },
    cancelForm() {
      //取消关闭
      this.$emit("update:showdialogColumnSet", false);
      this.$nextTick(function () {
         this.$emit('refurlist',{})
        // this.$refs.ruleForm.resetFields(); //重置输入框提示
      });
    },
    refurlist(){

    }
  },
};
</script>
<style lang="scss">
.columnSet{
  text-align:left;
  .el-dialog__body{padding:20px;}  
   .columnTitle{color: #f8b225;margin-bottom: 10px;text-align:left;}
   .columnUl{
     border:1px solid #aaa;  
     border-bottom: 0;   
     max-height: 600px;
     overflow: auto;
     li{
       display: flex;height: 50px;line-height: 50px;
       border-bottom: 1px solid #aaa;
       strong{border-right:1px solid #aaa; width: 250px;}
       em{margin-left:20px; display: flex; align-items: center;
         .el-switch{margin-right:20px;}
       }
     }
   }
}
</style>