<template>
	<div>
  <el-tabs class="my-tabs" v-model="activeName" type="card" @tab-click="handleClick">
    <el-tab-pane label="功能列表" name="roleList">

      <div class="container">
        <div class="tab-header">
          <el-form ref="form" :inline="true" :model="search" label-width="80px">
            <el-row :gutter="20">
              <el-col :span="24">
                <el-form-item label="功能名称">
                  <el-input v-model="search.name" clearable></el-input>
                </el-form-item>
                <el-button @click="getList">查询</el-button>
              </el-col>
            </el-row>
          </el-form>
        </div>
        <!-- table -->
        <el-table :data="roleTable" border style="width: 100%;"
        	:tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
        	row-key="sid"
        	ref="multipleTable"
        	header-cell-class-name="table-header"
        	>
          <!--<el-table-column label="序号" width="50px" type="index" align="center"></el-table-column>-->
          <el-table-column prop="name" label="功能名称" width="200px" align="left"></el-table-column>
          <el-table-column label="操作" width="280px" align="center">
            <template slot-scope="scope">
              <el-button @click="addChildren(scope.row)" type="primary" size="mini"> 添加子功能 </el-button>
              <el-button @click="editRow(scope.row)" v-if="scope.row.isSource == '0'" type="primary" size="mini"> 修改 </el-button>
              <el-button @click="delRow(scope.row)" v-if="scope.row.isSource == '0'" type="danger" size="mini"> 删除 </el-button>
            </template>
          </el-table-column>
          <el-table-column prop="actionUrl" label="url地址" width="200" align="center"></el-table-column>
          <!--<el-table-column prop="sourceName" label="模块名称" align="center"></el-table-column>-->
          <el-table-column prop="isEnable" label="是否可用" align="center">
          	<template slot-scope="scope">
	          	<el-switch
							  v-model="scope.row.isEnable"
							  active-value='1'
							  inactive-value='0'
							  active-color="#13ce66"
							  inactive-color="#ff4949"
							  @change="enabledChange($event,scope.row)">
							</el-switch>
						</template>	
          </el-table-column>
        </el-table>
        <!--<pagination :total="page.total" :page.sync="page.current" :limit.sync="page.size" @pagination="pagination" />-->

        <!-- 编辑功能信息 -->
        <el-dialog :title="dialogTitle + '功能信息'" :visible.sync="editDialog" width="40%">
          <table class="e-table" cellspacing="0">
            <tr>
	            <td>上级功能</td>
	            <td><el-input v-model="roleForm.parentName" :disabled="true"></el-input></td>
	          </tr>
	          <tr>
	            <td>功能名称</td>
	            <td><el-input v-model="roleForm.name"></el-input></td>
	          </tr>
	          <tr>
	            <td>url地址</td>
	            <td><el-input v-model="roleForm.actionUrl"></el-input></td>
	          </tr>
	          <tr>
	            <td>模块名称</td>
	            <td>
	            	<el-select v-model="roleForm.sourceSid">
	                <el-option
	                  v-for="(item, i) in sourceNameData"
	                  :key="i"
	                  :label="item.sourceName"
	                  :value="item.sid">
	                </el-option>
	             </el-select>
	            </td>
	          </tr>
	          <tr>
	            <td>终端权限</td>
	            <td>
	            	<el-checkbox-group v-model="phoneFunction">
							    <!--<el-checkbox v-for="(item,index) in phoneFunctionData" :label="item.name"></el-checkbox>-->
							    <el-checkbox label="0" name="type">pc端</el-checkbox>
							    <el-checkbox label="1" name="type">移动端</el-checkbox>
							  </el-checkbox-group>
	            </td>
	          </tr>
	          <tr>
	            <td>说明</td>
	            <td> <el-input type="textarea" :autosize="{ minRows: 4, maxRows: 6}" v-model="roleForm.remarks"></el-input></td>
	          </tr>
          </table>
          <div style="margin-top: 20px; text-align: center;">
            <el-button type="primary" @click="save()">保 存</el-button>
            <el-button @click="editDialog = false">关 闭</el-button>
          </div>
        </el-dialog>
      </div>
    </el-tab-pane>
    <el-tab-pane label="新增功能" name="addrole">
      <el-card class="box-card">
        <table class="e-table" cellspacing="0">
          <tr>
            <td>上级功能</td>
            <td><el-input v-model="roleForm.parentName" :disabled="true"></el-input></td>
          </tr>
          <tr>
            <td>功能名称</td>
            <td><el-input v-model="roleForm.name"></el-input></td>
          </tr>
          <tr>
            <td>url地址</td>
            <td><el-input v-model="roleForm.actionUrl"></el-input></td>
          </tr>
          <tr>
            <td>模块名称</td>
            <td>
            	<el-select v-model="roleForm.sourceSid">
                <el-option
                  v-for="(item, i) in sourceNameData"
                  :key="i"
                  :label="item.sourceName"
                  :value="item.sid">
                </el-option>
             </el-select>
            </td>
          </tr>
          <tr>
            <td>终端权限</td>
            <td>
            	<el-checkbox-group v-model="phoneFunction">
						    <!--<el-checkbox v-for="(item,index) in phoneFunctionData" :label="item.name"></el-checkbox>-->
						    <el-checkbox label="0" name="type">pc端</el-checkbox>
						    <el-checkbox label="1" name="type">移动端</el-checkbox>
						  </el-checkbox-group>
            </td>
          </tr>
          <tr>
            <td>说明</td>
            <td> <el-input type="textarea" :autosize="{ minRows: 4, maxRows: 6}" v-model="roleForm.remarks"></el-input></td>
          </tr>
        </table>
        <div style="margin-top: 20px; text-align: center;">
          <el-button type="primary" @click="save()">保 存</el-button>
        </div>
      </el-card>
    </el-tab-pane>
  </el-tabs>
  </div>
</template>

<script>
  import {
    pageList,
    savePost,
    sourceList,
    delOrgroles,
    getSingleData,
    putOrgroles,
    IsEnable
  } from '@/api/system/functional/functional.js'
  export default {
    data() {
      return {
        dialogTitle: '',
        activeName: 'roleList',
        roleForm: {
        	sid:'',
        	parentName:'顶级菜单',
        	parentSid:'0',
        	name:'',
        	actionUrl:'',
//      	controllerName:'',
        	sourceSid:'',
        	phoneFunction:'',
          remarks: "",
        },
        phoneFunction:[],
        phoneFunctionData:[{
        	name:'PC端',
        	id:'0'
        },{
        	name:'移动端',
        	id:'1'
        }],
//      模块名称
        sourceNameData:[],
        formBackup: {},
        search: {
          name: ''
        },
        orgName:'',
        roleTable: [],
        editDialog: false,
        // 树形
        loading: false,
        defaultProps: {
          children: 'children',
          label: 'name'
        },
        orgdata:[],           // 部门
        checkedId: [],
        treedata: [],
//      chace: [],
//      roleDialog: false,
//      Thisrow: {},
//      orgListAll:[]
        
      };
    },
    mounted() {
      this.formBackup = Object.assign({}, this.roleForm),
      this.getList()
      this.getsourceList()
    },
    methods: {
      // 分页列表
      getList() {
//      let params = this.search
        let params={
        	name: this.search.name
        }
        pageList(params).then(res => {
          this.roleTable = res.data
          console.log(res.data)
        })
      },
      // 模块名称
      getsourceList(){
      	let params={}
      	sourceList(params).then(res => {
          this.sourceNameData = res.data
          this.loading = false
        })
      },
      handleClick(tab, event) {
        if(tab.name == 'addrole'){
          this.dialogTitle = '新增'
          this.roleForm = Object.assign({}, this.formBackup)
        }else{
					this.getList()
				}
      },
      editRow(row) {
        this.dialogTitle = '编辑'
        this.editDialog = true
        this.roleForm = Object.assign({}, row)
        getSingleData({id: row.sid }).then(res => {
            this.roleForm.parentName= res.data.parentName
            this.roleForm.sourceSid= res.data.sourceSid
            this.roleForm.sourceName= ''
            this.phoneFunction = res.data.phoneFunction.split(",")
        })
      },
      addChildren(row){
      	this.refersh()
      	this.activeName= 'addrole'
    		this.roleForm.parentName = row.name
      	this.roleForm.parentSid = row.sid
      	if(row.isSource == '1'){
      		this.roleForm.parentName = '顶级菜单'
        	this.roleForm.parentSid = 0
        }else{
        	this.roleForm.parentName = row.name
        	this.roleForm.parentSid = row.sid
        }
      },
      delRow(row) {
        this.$confirm('确定要删除该功能吗, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          delOrgroles({
            sid: row.sid
          }).then(res => {
            this.getList()
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
          })
        })
      },
      // 保存角色
      save() {
      	this.roleForm.phoneFunction = this.phoneFunction.toString()
        if (this.roleForm.sid) {
          putOrgroles(this.roleForm).then(res => {
            if (res.code == '200') {
              this.getList()
              this.editDialog = false
              this.$message({
                message: res.msg,
                type: 'success'
              })
            }
          })
        } else {
          savePost(this.roleForm).then(res => {
            if (res.code == '200') {
              this.getList()
              this.activeName = "roleList"
              this.$message({
                message: res.msg,
                type: 'success'
              })
            }
          })
        }
      },
      refersh(){
      	this.roleForm= {
	      	parentName:'顶级菜单',
	      	parentSid:'0',
	      	name:'',
	      	actionUrl:'',
	      	sourceSid:'',
	      	phoneFunction:'',
	        remarks: "",
        }
      },
      // 是否可用 按钮
      enabledChange(value, row) {
        IsEnable({
          sid: row.sid
        }).then(res => {
          this.$message({
            type: 'success',
            message: res.msg
          });
        })
      }
    }
  };
</script>


<style scoped="scoped">
	.el-select > .el-input {
      display: block;
      width: 300px;
  }
 .my-tabs{
 	 margin-top: 10px;
 }
</style>