<template>
    <d2-container>
        <div v-if="isExpend" class="d2-fl d2-tree-view">
            <el-tree :data="equTree"
                     default-expand-all
                     :props="defaultProps"
                     ref="equTree"
                     @node-click="handleNodeClick"
                 >
									<span class="icon-tree" slot-scope="{ node, data }">
										<div v-if="data.alias == 'top'">
											<i class="fa fa-university"></i>
											<span>&nbsp;{{node.label}}</span>
										</div>
										<div v-if="data.alias == 'fix02'">
											<i class="fa fa-building"></i>
											<span>&nbsp;{{node.label}}</span>
										</div>
										<div v-if="data.alias == 'equi'">
											<i class="fa fa-users"></i>
											<span>&nbsp;{{node.label}}</span>
										</div>
                                        <div v-if="data.alias == 'door'">
											<i class="fa fa-users"></i>
											<span>&nbsp;{{node.label}}</span>
										</div>
                                        <!-- <div v-if="data.alias == 'equi'">
                                            <i class="fa fa-cogs"></i>
                                            <span>&nbsp;{{node.label}}</span>
                                        </div> -->
								</span>
            </el-tree>
        </div>
        <!--</transition>-->
        <div @click="isExpend = !isExpend" :class="[{'angle-view':isExpend},{'angle-view-none':!isExpend}]">
            <i :class="['fa', {'fa-angle-left':isExpend},{'fa-angle-right':!isExpend}]"></i>
        </div>
        <div :class="[{'d2-fl':isExpend},{'d2-table-view':isExpend},{'d2-table-view-full':!isExpend}]" style="overflow: hidden">
            <div class="d2-table-view-header" style="height: 20px">
            </div>
                <el-form ref="form" :model="form" label-width="150px" labelPosition="right" :rules="rules" :disabled="isEdit">
                    <el-row :gutter="15">
                        <el-col :span="14">
                            <el-form-item label="门牌编号" prop="doorplateCode">
                                <el-input maxlength="20" v-model.trim="form.doorplateCode" disabled/>
                            </el-form-item>
                        </el-col>
                        <el-col :span="14">
                            <el-form-item label="普通密码6位" prop="commonPwd">
                                <el-input maxlength="6"  v-model.trim="form.commonPwd"/>
                            </el-form-item>
                        </el-col>
                        <el-col :span="14">
                            <el-form-item label="超级密码6位" prop="superPwd">
                                <el-input maxlength="6"  v-model.trim="form.superPwd"/>
                            </el-form-item>
                        </el-col>
                        <el-col :span="14">
                            <el-form-item label="胁迫密码6位" prop="forcePwd">
                                <el-input maxlength="6" min='6' v-model.trim="form.forcePwd"/>
                            </el-form-item>
                        </el-col>
                        <el-col :span="14">
                            <el-form-item label="布防密码4位" prop="preparePwd">
                                <el-input maxlength="4"  v-model.trim="form.preparePwd"/>
                            </el-form-item>
                        </el-col>
                        <el-col :span="14">
                            <el-form-item label="撤防密码4位" prop="retreatPwd">
                                <el-input maxlength="4"  v-model.trim="form.retreatPwd"/>
                            </el-form-item>
                        </el-col>
                        <el-col :span="24">
                            <el-form-item>
                                <zl-button :loading="staLoading" @click="operInstance">保存</zl-button>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
        </div>
    </d2-container>
</template>

<script>
  import { tableOptions } from '../../../assets/options'
  import {EquipmentDoorTree,getPassword,saveOrUpdatePassword} from '@/api/accessControl/settingPassword'

  export default {
    name: 'equipment-onlie',
    data () {
      let checkCardId4 = (rule, value, callback) => {
        if(!value){
          return callback(new Error('不能为空'))
        }
        let reg = /[0-9a-zA-Z]{4,}/
        if (!reg.test(value)) {
          return callback(new Error('请输入4位数字或英文'))
        } else {
          callback ()
        }
      }
      let checkCardId6 = (rule, value, callback) => {
        if(!value){
          return callback(new Error('不能为空'))
        }
        let reg = /[0-9a-zA-Z]{6,}/
        if (!reg.test(value)) {
          return callback(new Error('请输入6位数字或英文'))
        } else {
          callback ()
        }
      }
      return {
        isEdit:true,
        staLoading: false,
        id:"",
        equTree:[],
        defaultProps: {
          children: 'children',
          label: 'name'
        },
        func:{
          select:false
        },
        isExpend:true,
        tableOptions,
        loading: false,
        type:'equ',
        currentPage:1,
        pagination: {
          total: 0
        },
        treeData: [],
        defaultProps: {
          children: 'children',
          label: 'name'
        },
        data: [],
        // filter:{
        //   doorplateCode:""
        // },
        form:{
          doorplateCode:"",
          ptPwd:"",
          cjPwd:"",
          xpPwd:"",
          bfPwd:"",
          cfPwd:""
        },
        rules:{
          doorplateCode:[{required: true, message: '门编号不能为空', trigger: 'blur'}],
          commonPwd:[{validator:checkCardId6,required: true, trigger: 'blur'}],
          superPwd:[{validator:checkCardId6,required: true, trigger: 'blur'}],
          forcePwd:[{validator:checkCardId6,required: true, trigger: 'blur'}],
          preparePwd:[{validator:checkCardId4,required: true,trigger: 'blur'}],
          retreatPwd:[{validator:checkCardId4,required: true,trigger: 'blur'}],
        }
      }
    },
    methods: {
      handleNodeClick (data, node, com) {
        if (data.alias === 'top') {
          // this.filter.doorplateCode = ''
        } else {
          // this.filter.doorplateCode = data.id
        }
        if (data.alias === 'door') {
          // console.log(data)
          this.isEdit = false
          this.form.doorplateCode = data.id
          this.handleList(this.form.doorplateCode)
        } else {
          this.isEdit = true
          this.clearForm()
        }
        // this.handleList()
      },
      EquTreeTraverse (node) {
        if (!node || !node.children) {return}
        if (node.alias === 'door') {
          node.disabled = false
        } else {
          node.disabled = true
        }
        node.children.forEach((item) => {
          this.EquTreeTraverse(item)
        })
      },
      handleList (val) {
        this.loading = true
        getPassword({doorplateCode:this.form.doorplateCode}).then(res => {
          this.loading = false
          this.form= res.updateValue
        }).catch(err => {
          this.loading = false
        })
      },
      operInstance (val) {
        this.$refs['form'].validate(valid => {
          if (valid) {
            this.staLoading = true
            saveOrUpdatePassword(this.form).then(res => {
              this.staLoading = false
              this.$message({
                message: '操作成功',
                type: 'success'
              })
              this.isEdit=true
                this.handleList(this.form.doorplateCode)
            }).catch(err => {
              this.staLoading = false
            })
          }
        })
      },
      clearForm () {
        if (this.$refs['form'] !== undefined) {
          this.$refs['form'].resetFields()
        }
        this.form = {}
        // this.isEdit=true
      },
    },

    mounted () {
      //this.getFunction ()
      EquipmentDoorTree().then(res=>{
        this.equTree = JSON.parse(res.msgDat)
        this.EquTreeTraverse(this.equTree[0])
      })
      this.tableOptions.stripe = false
      this.tableOptions = this.$calcTableHeight(tableOptions,20)
      this.tableOptions.stripe=false
      // this.handleList()
    }
  }
</script>
<style>
    .el-table .success-row {
        background: #90EE90;
    }
</style>
