<template>
  <div>
    <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
      <el-form-item label="公司名称" prop="pass" style="width: 30%">
        <el-input type="text" v-model="ruleForm.firmName" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm')">查询</el-button>
        <el-button @click="resetForm('ruleForm')">重置</el-button>
      </el-form-item>
    </el-form>
    <el-divider></el-divider>
    <el-button type="success" round @click="toadd()">新增企业</el-button>
    <el-button @click="reconfiguration()" type="primary" style="margin-left: 16px;">
      权限等级重构
    </el-button>
    <el-table
      :data="tableData"
      style="width: 100%">
      <el-table-column
        label="公司名称"
        width="180">
        <template slot-scope="scope">
          <el-popover trigger="hover" placement="top">
            <div slot="reference" class="name-wrapper">
              <el-tag size="medium">{{ scope.row.firmName }}</el-tag>
            </div>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column
        label="公司邮箱"
        width="180">
        <template slot-scope="scope">
          <el-popover trigger="hover" placement="top">
            <div slot="reference" class="name-wrapper">
              <el-tag size="medium">{{ scope.row.email }}</el-tag>
            </div>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column
        label="公司号码"
        width="180">
        <template slot-scope="scope">
          <el-popover trigger="hover" placement="top">
            <div slot="reference" class="name-wrapper">
              <el-tag size="medium">{{ scope.row.phonenumber }}</el-tag>
            </div>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column
        label="公司所用数据库"
        width="180">
        <template slot-scope="scope">
          <el-popover trigger="hover" placement="top">
            <div slot="reference" class="name-wrapper">
              <el-tag size="medium">{{ scope.row.databaseName }}</el-tag>
            </div>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column
        label="权限等级"
        width="180">
        <template slot-scope="scope">
          <el-popover trigger="hover" placement="top">
            <div slot="reference" class="name-wrapper">
              <el-tag size="medium">{{ scope.row.permissionLevel }}</el-tag>
            </div>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            size="mini"
            @click="handleEdit(scope.row)">企业详情</el-button>
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.row)">删除</el-button>
          <el-button
            size="mini"
            type="danger"
            @click="handlePermission(scope.row)">权限分配</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!--分页-->
    <center>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="ruleForm.pageNum"
        :page-sizes="[3, 5, 10, 15]"
        :page-size="ruleForm.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </center>

    <!--权限分配页面-->
    <el-dialog
      title="权限分配"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose">
      <el-form :model="PermissionForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="权限等级:" prop="pass">
          {{PermissionForm.permissionLevel}}
        </el-form-item>
        <el-form-item label="车辆数目:" prop="pass">
          {{PermissionForm.carNumber}}
        </el-form-item>
        <el-form-item label="车类型数目:" prop="pass">
         {{PermissionForm.carTypeNumber}}
        </el-form-item>
      </el-form>
      <el-divider></el-divider>
      <el-form :model="givePermissionForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="公司Id:" prop="pass" hidden>
          {{givePermissionForm.firmId}}
        </el-form-item>
        <el-form-item label="权限等级:" prop="pass">
          <el-input type="text" v-model="givePermissionForm.permissionLevel" autocomplete="off"></el-input>
          <el-radio-group v-model="givePermissionForm.permissionLevel">
            <el-radio label="v1"></el-radio>
            <el-radio label="v2"></el-radio>
            <el-radio label="v3"></el-radio>
            <el-radio label="v4"></el-radio>
            <el-radio label="v5"></el-radio>
            <el-radio label="v6"></el-radio>
            <el-radio label="v7"></el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="Yes()">确 定</el-button>
  </span>
    </el-dialog>

    <!---重构权限等级-->
    <el-drawer
      title="权限等级重构"
      :visible.sync="drawer"
      :direction="direction"
      :before-close="handleClose1"
      :size="800">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="权限等级展示" name="first">
          <el-table
            :data="PermissiontableData"
            style="width: 100%">
            <el-table-column
              prop="permissionId"
              label="Id"
              width="180">
            </el-table-column>
            <el-table-column
              prop="permissionLevel"
              label="权限等级"
              width="180">
            </el-table-column>
            <el-table-column
              prop="carNumber"
              label="车辆数目"
              width="180">
            </el-table-column>
            <el-table-column
              prop="carTypeNumber"
              label="车辆类型数目"
              width="180">
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="新增等级" name="second">
          <el-form :model="addForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
            <el-form-item label="权限等级" prop="pass" style="width: 50%">
              <el-input type="text" v-model="addForm.permissionLevel" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="车辆数目" prop="pass" style="width: 50%">
              <el-input type="text" v-model="addForm.carNumber" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="车辆类型数目" prop="pass" style="width: 50%">
              <el-input type="text" v-model="addForm.carTypeNumber" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="doaddpermission('ruleForm')">新增</el-button>
              <el-button @click="resetForm('ruleForm')">重置</el-button>
            </el-form-item>
          </el-form>
        </el-tab-pane>
        <el-tab-pane label="修改等级" name="third">
          <el-form :model="updForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
            <el-form-item label="Id" prop="pass" style="width: 50%">
              <el-input type="text" v-model="updForm.permissionId" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="权限等级" prop="pass" style="width: 50%">
              <el-select v-model="updForm.permissionId" placeholder="请选择">
                <el-option
                  v-for="item in PermissiontableData"
                  :key="item.permissionId"
                  :label="item.permissionLevel"
                  :value="item.permissionId">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="车辆数目" prop="pass" style="width: 50%">
              <el-input type="text" v-model="updForm.carNumber" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="车辆类型数目" prop="pass" style="width: 50%">
              <el-input type="text" v-model="updForm.carTypeNumber" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="doupdpermission('ruleForm')">修改</el-button>
              <el-button @click="resetForm('ruleForm')">重置</el-button>
            </el-form-item>
          </el-form>
        </el-tab-pane>
      </el-tabs>


    </el-drawer>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）,
//例如：import 《组件名称》 from '《组件路径》,
  import {resetForm} from "../../../utils/muyu";
import {
  addpermission,
  getFirmList,
  getpermission,
  givepermission,
  updpermission
} from "../../../api/firmoperations/firmmanage";

export default {
    name: "firmmanage",
    //import引入的组件需要注入到对象中才能使用"
    components: {},
    props: {},
    data() {
      //这里存放数据"

      return {
        ruleForm:{
          pageNum:1,
          pageSize:10
        },
        total:0,
        tableData:[],
        dialogVisible: false,
        PermissionForm:{},
        givePermissionForm:{},
        drawer: false,
        direction: 'rtl',
        addForm:{},
        updForm:{},
        activeName: 'first',
        PermissiontableData:[]
      };
    },
    //计算属性 类似于data概念",
    computed: {},
    //监控data中的数据变化",
    watch: {},
    //方法集合",
    methods: {
      //重置
      resetForm,
      //查询
      submitForm(){
        this.getFirmList()
      },
      //企业信息展示
      getFirmList(){
        getFirmList(this.ruleForm).then(response=>{
          this.tableData=response.data.firmListRespList
          this.total=response.data.total
        })
      },
      //分页
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
        this.ruleForm.pageSize=val
        this.getFirmList()
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
        this.ruleForm.pageNum=val
        this.getFirmList()
      },
      //去权限分配页面
      handlePermission(row){
        this.dialogVisible=true;
        this.PermissionForm={
          permissionId: row.permissionId,
          permissionLevel: row.permissionLevel,
          carNumber: row.carNumber,
          carTypeNumber: row.carTypeNumber
        }
        this.givePermissionForm={
          firmId: row.firmId
        }
      },
      //确定分配
      Yes(){
        givepermission(this.givePermissionForm).then(response=>{
          alert(response.msg)
          if (response.code==200){
            this.dialogVisible=false
            this.getFirmList()
          }
        })
      },
      //关闭权限分配页面
      handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
      },
      //打开权限重构页面
      reconfiguration(){
        this.drawer=true
      },
      //关闭权限等级重构页面
      handleClose1(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
      },
      //去企业新增页面
      toadd(){
        this.$router.push("/firmoperations/addfirm")
      },
      handleClick(tab, event) {
        console.log(tab, event);
      },
      //获取权限列表
      getpermissionList(){
        getpermission().then(response=>{
          this.PermissiontableData=response.data
        })
      },
      //完成企业权限新增
      doaddpermission(){
        addpermission(this.addForm).then(response=>{
          alert(response.msg)
          if (response.code==200){
            this.getpermissionList()
          }
        })
      },
      //完成企业权限修改
      doupdpermission(){
        updpermission(this.updForm).then(response=>{
          alert(response.msg)
          if (response.code==200){
            this.getpermissionList()
          }
        })
      }
    },
    //生命周期 - 创建完成（可以访问当前this实例）",
    created() {
      this.getFirmList()
      this.getpermissionList()
    },
    //生命周期 - 挂载完成（可以访问DOM元素）",
    mounted() {
    },
    beforeCreate() {
    }, //生命周期 - 创建之前",
    beforeMount() {
    }, //生命周期 - 挂载之前",
    beforeUpdate() {
    }, //生命周期 - 更新之前",
    updated() {
    }, //生命周期 - 更新之后",
    beforeDestroy() {
    }, //生命周期 - 销毁之前",
    destroyed() {
    }, //生命周期 - 销毁完成",
    activated() {
    } //如果页面有keep-alive缓存功能，这个函数会触发",
  };
</script>
<style scoped>

</style>
