<template>
  <div class="app-container">
    <el-form ref="postForm" :rules="formRules" :model="formData" label-width="120px">
      <el-form-item label="管理账号：" prop="username">
        <el-col :span="6">
          <el-input v-model="formData.username" placeholder="请输入管理账号"/>
        </el-col>
      </el-form-item>
      <el-form-item label="管理密码：" prop="password">
        <el-col class="flex" :span="6">
          <el-input :disabled="!passwordValue" type="password" v-model="formData.password" placeholder="请输入管理密码"/>
          <el-switch class="mt-10 ml-10" v-if="$props.id" v-model="passwordValue" active-color="#13ce66" inactive-color="#ff4949"></el-switch>
        </el-col>
      </el-form-item>
      <el-form-item label="账号昵称：" prop="fullname">
        <el-col :span="6">
          <el-input v-model="formData.fullname" placeholder="请输入账号昵称"/>
        </el-col>
      </el-form-item>
      <el-form-item label="权限选择：">
        <div class="box">
          <el-col>
            <el-col class="line-r tac flex-clome" :span="2">
              <div class="line-b">&nbsp;</div>
              <div class="line-b" v-for="(item, index) in perm_list" :key="index">
                <el-checkbox v-model="item.flag" :value="index" @change="changeLeve2(index, item.flag)"></el-checkbox>
              </div>
            </el-col>
            <el-col class="line-r tac" :span="4">
              <div class="line-b">一级菜单</div>
              <div class="line-b" v-for="(item, index) in level1" :key="index">
                {{item.name}}
              </div>
            </el-col>
            <el-col class="line-r tal ti2" :span="6">
              <div class="line-b">二级菜单</div>
              <div class="line-b" v-for="(item, index) in level2" :key="index">
                {{item.name}}
              </div>
            </el-col>
            <el-col class="tac" :span="12">
              <div class="line-b">操作</div>
              <!-- 司机列表 -->
              <div class="line-b flex-row">
                <div v-for="(item, index) in A1" :key="index+'A1'">
                  <el-checkbox class="ml-30" v-model="item.flag" @change="changeLimit('A1', 0)">{{item.name}}</el-checkbox>
                </div>
              </div>
              <!-- 调度员列表 -->
              <div class="line-b flex-row">
                <div v-for="(item, index) in A2" :key="index+'A2'">
                  <el-checkbox class="ml-30" v-model="item.flag" @change="changeLimit('A2', 1)">{{item.name}}</el-checkbox>
                </div>
              </div>
              <!-- 供应商列表 -->
              <div class="line-b flex-row">
                <div v-for="(item, index) in A3" :key="index+'A3'">
                  <el-checkbox class="ml-30" v-model="item.flag" @change="changeLimit('A3', 2)">{{item.name}}</el-checkbox>
                </div>
              </div>
               <!-- 客户名称 -->
              <div class="line-b flex-row">
                <div v-for="(item, index) in A7" :key="index+'A7'">
                  <el-checkbox class="ml-30" v-model="item.flag" @change="changeLimit('A7', 3)">{{item.name}}</el-checkbox>
                </div>
              </div>
              <!-- 客户列表 -->
              <div class="line-b flex-row">
                <div v-for="(item, index) in A4" :key="index+'A4'">
                  <el-checkbox class="ml-30" v-model="item.flag" @change="changeLimit('A4', 4)">{{item.name}}</el-checkbox>
                </div>
              </div>
              <!-- 工地列表 -->
              <div class="line-b flex-row">
                <div v-for="(item, index) in A5" :key="index+'A5'">
                  <el-checkbox class="ml-30" v-model="item.flag" @change="changeLimit('A5', 5)">{{item.name}}</el-checkbox>
                </div>
              </div>
              <!-- 品种列表 -->
              <div class="line-b flex-row">
                <div v-for="(item, index) in A6" :key="index+'A6'">
                  <el-checkbox class="ml-30" v-model="item.flag" @change="changeLimit('A6', 6)">{{item.name}}</el-checkbox>
                </div>
              </div>
              <!-- 配送列表 -->
              <div class="line-b flex-row">
                <div v-for="(item, index) in B1" :key="index+'B1'">
                  <el-checkbox class="ml-30" v-model="item.flag" @change="changeLimit('B1', 7)">{{item.name}}</el-checkbox>
                </div>
              </div>
              <!-- 列表 -->
              <div class="line-b flex-row" v-for="(item, index) in 16" :key="index">&nbsp;</div>
              <!-- 系统管理 -->
              <!-- <div class="line-b flex-row">
                <div v-for="(item, index) in D1" :key="index+'D1'">
                  <el-checkbox class="ml-30" v-model="item.flag" @change="changeLimit('D1', 20)">{{item.name}}</el-checkbox>
                </div>
              </div> -->
            </el-col>
          </el-col>
        </div>
      </el-form-item>
      <el-form-item align="center">
        <el-button type="primary" @click="submitForm">保存</el-button>
        <el-button @click="onCancel">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { checkRqInput, checkPwdLength } from '@/utils/validate'
import { detailAdmin, updateAdmin, createAdmin,  } from '@/api/user/index'

export default {
  name: 'ArticleDetail',
  // 配合路由配置的props属性实现在组件中通过props获取参数
  props: {
    id: {
      type: String,
      default() {
        return this.$route.params.id;
      }
    }
  },
  data() {
    return {
      list: [],
      formData: { },
      // 校验规则
      formRules: {
        username: [ checkRqInput ],
        password: [ checkRqInput, checkPwdLength ],
        fullname: [checkRqInput],
      },
      // 二级菜单
      perm_list_flag: [ "A1", "A2", "A3", "A7", "A4", "A5", "A6", "B1", "B2", "C14", "C1", "C2", "C13", "C4", "C15", "C5", "C3",
        "C6",  "C8", "C9", "C10", "C11", "C7", "C12" ],  
      perm_list: [ {flag: false}, {flag: false}, {flag: false}, {flag: false}, {flag: false}, {flag: false}, {flag: false}, 
        {flag: false}, {flag: false}, {flag: false}, {flag: false}, {flag: false}, {flag: false}, {flag: false}, {flag: false}, 
        {flag: false}, {flag: false}, {flag: false}, {flag: false}, {flag: false}, {flag: false}, {flag: false}, {flag: false}, 
        {flag: false} ],  
      // 一级菜单
      level1: [ {name: '基本信息'}, {name: '基本信息'}, {name: '基本信息'}, {name: '基本信息'}, {name: '基本信息'}, {name: '基本信息'}, {name: '基本信息'}, 
        {name: '配送管理'}, {name: '配送管理'}, {name: '配送管理'}, {name: '财务管理'}, {name: '财务管理'}, {name: '财务管理'}, {name: '财务管理'}, 
        {name: '财务管理'}, {name: '财务管理'}, {name: '财务管理'}, {name: '财务管理'}, {name: '财务管理'}, {name: '财务管理'}, 
        {name: '财务管理'}, {name: '财务管理'}, {name: '财务管理'}, {name: '财务管理'} ],
      // 二级菜单
      level2: [ {name: '司机列表'}, {name: '调度员列表'}, {name: '供应商列表'}, {name: '客户名称'}, {name: '客户列表'}, {name: '工地列表'}, {name: '品种列表'},
        {name: '配送列表'}, {name: '配送明细'}, {name: '运费单价'}, {name: '司机—司机账款'}, {name: '司机—运费明细'}, {name: '司机—运费利润'}, 
        {name: '客户—应收订单管理'}, {name: '客户—收款明细'}, {name: '客户—退款明细'}, {name: '客户—客户账款'}, {name: '客户—销项票管理'}, {name: '供应商—应付订单管理'}, 
        {name: '供应商—付款明细'}, {name: '供应商—汇票记账明细'}, {name: '供应商—现金记账明细'}, {name: '供应商—供应商账款'}, {name: '供应商—进项票管理'} ], 
      // 操作权限列表
      A1: [ {flag: false, name: '新增', value: 'A1-00'}, {flag: false, name: '编辑', value: 'A1-01'}, {flag:false, name: '删除', value: 'A1-02'}, {flag:false, name: '冻结/解冻', value: 'A1-03'} ],
      A2: [ {flag: false, name: '新增', value: 'A2-00'}, {flag: false, name: '编辑', value: 'A2-01'}, {flag:false, name: '删除', value: 'A2-02'}, {flag:false, name: '冻结/解冻', value: 'A2-03'} ],
      A3: [ {flag: false, name: '新增', value: 'A3-00'}, {flag: false, name: '编辑', value: 'A3-01'}, {flag:false, name: '删除', value: 'A3-02'} ],
      A4: [ {flag: false, name: '新增', value: 'A4-00'}, {flag: false, name: '编辑', value: 'A4-01'}, {flag:false, name: '删除', value: 'A4-02'} ],
      A5: [ {flag: false, name: '新增', value: 'A5-00'}, {flag: false, name: '编辑', value: 'A5-01'}, {flag:false, name: '删除', value: 'A5-02'} ],
      A6: [ {flag: false, name: '新增', value: 'A6-00'}, {flag: false, name: '编辑', value: 'A6-01'}, {flag:false, name: '删除', value: 'A6-02'} ],
      A7: [ {flag: false, name: '新增', value: 'A7-00'}, {flag: false, name: '编辑', value: 'A7-01'}, {flag:false, name: '删除', value: 'A7-02'} ],
      B1: [ {flag: false, name: '新增配送', value: 'B1-00'}, {flag: false, name: '录入信息', value: 'B1-01'} ],
      // D1: [ {flag: false, name: '新增', value: 'D1-00'}, {flag: false, name: '编辑', value: 'D1-01'}, {flag:false, name: '删除', value: 'D1-02'} ],
      perm_operate: ['A1', 'A2', 'A3', 'A7', 'A4', 'A5', 'A6', 'B1'], 
      passwordValue: this.$props.id?false:true, // 密码按钮状态
    }
  },
  created() {
    this.fetchDetail()
  },
  methods: {
    // 获取企业详情
    fetchDetail() {
      const id = this.$props.id
      if (id) {
        this.$http(detailAdmin(id), (res) => {
          if (res.code == 0) {
            this.formData = res.data
            this.setDetailFlag()
          }
        })
      }
    },
    // 进入分配权限
    setDetailFlag() {
      let perm_list = this.formData.perm_list
      let perm_operate = this.formData.perm_operate
      // 遍历二级菜单
      perm_list.map(val => { 
        this.perm_list_flag.map((item, index) => {
          if (val == item) {
            this.perm_list[index].flag = true
          }
        })
      })
      // 遍历操作权限
      perm_operate.map(val => {
        let tag = val.substring(0,2)
        let flag = val.substring(4)
        this[tag][flag].flag = true
      })
    },
    // 修改二级菜单
    changeLeve2(index, flag) {
      if(index==20||index<8) {
        if (index == 0) {
          for(let i=0;i<this.A1.length;i++) {
            this.A1[i].flag = flag
          }
        } else if(index == 1) {
          for(let i=0;i<this.A2.length;i++) {
            this.A2[i].flag = flag
          }
        } else if(index == 2) {
          for(let i=0;i<this.A3.length;i++) {
            this.A3[i].flag = flag
          }
        } else if(index == 3) {
          for(let i=0;i<this.A7.length;i++) {
            this.A7[i].flag = flag
          }
        } else if(index == 4) {
          for(let i=0;i<this.A4.length;i++) {
            this.A4[i].flag = flag
          }
        } else if(index == 5) {
          for(let i=0;i<this.A5.length;i++) {
            this.A5[i].flag = flag
          }
        } else if(index == 6) {
          for(let i=0;i<this.A6.length;i++) {
            this.A6[i].flag = flag
          }
        } else if(index == 7) {
          for(let i=0;i<this.B1.length;i++) {
            this.B1[i].flag = flag
          }
        } 
        // else if(index == 20) {
        //   for(let i=0;i<this.D1.length;i++) {
        //     this.D1[i].flag = flag
        //   }
        // }
      }
    },
    // 权限选择
    changeLimit(name, index) {
      let flag = false
      this[name].map(val => {
        if (val.flag) {
          flag = true
        }
      })
      this.perm_list[index].flag = flag ? true : false
    },   
    // 设置权限
    setFlag() {
      // 二级菜单操作
      let perm_list = [], perm_operate = [];
      this.perm_list.map((val, index) => {
        if(val.flag) {
          perm_list.push(this.perm_list_flag[index])
        }
      })
      // 权限操作设置
      this.perm_operate.map((val, index) => {
        this[val].map((item, index) => {
          if (item.flag) {
            perm_operate.push(item.value)
          }
        })
      })
      this.formData.perm_list = perm_list
      this.formData.perm_operate = perm_operate
    }, 
    // 提交表单
    submitForm() {
      this.setFlag()
      this.$refs['postForm'].validate((valid) => {
        if (valid) {
          // 修改
          if (this.formData.user_id) {
            this.$http(updateAdmin(this.formData), res => {
              this.$message({
                message: '成功',
                type: 'success'
              })
              this.$router.go(-1)
            })
          } else {
            // 新增
            this.$http(createAdmin(this.formData), res => {
              this.$message({
                message: '成功',
                type: 'success'
              })
              this.$router.go(-1)
            })
          }
        } else {
          return false
        }
      })
    },
    // 取消
    onCancel() {
      this.$message({
        message: '已取消!',
        type: 'warning'
      })
      this.$router.go(-1)
    },
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  .box {
    min-width: 760px;
    display: flex;
    flex-direction: column;
    border-top: 1px solid #ccc;
    border-right: 1px solid #ccc;
    border-left: 1px solid #ccc;
    .line-r {
      border-right: 1px solid #ccc;
    }
    .line-b {
      border-bottom: 1px solid #ccc;
    }
    .flex-clome {
      display: flex;
      flex-direction: column;
    }
    .flex-row {
      display: flex;
      justify-content: flex-start;
    }
  }
</style>
