<template>
  <div style="width:100%;height:50vh;padding:0px 23px; z-index:10;">
    <el-form ref="form" size="mini" :model="addForm" :rules="rules" label-width="140px">

      <el-form-item label="姓名: " prop="name">
        <el-input v-model="addForm.name" style="width:300px ;"></el-input>
      </el-form-item>

      <el-form-item label="账号: " prop="account">
        <el-input v-model="addForm.account" style="width:300px ;"></el-input>
      </el-form-item>

      <el-form-item label="密码：" prop="passWord">
        <el-input v-model="addForm.passWord" style="width:300px ;"></el-input>
      </el-form-item>

      <el-form-item label="性别：" prop="sex">
        <el-select v-model="addForm.sex" placeholder="请选择" style="width:300px ;">
          <el-option
            v-for="item in sexOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="用户身份：" prop="sex">
        <el-select v-model="addForm.identity" placeholder="请选择" style="width:300px ;">
          <el-option
            v-for="item in identityOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="单位：" prop="sex">
        <el-select v-model="addForm.unitName" placeholder="请选择" style="width:300px ;">
          <el-option
            v-for="item in orgsTree"
            :key="item.unitName"
            :label="item.unitName"
            :value="item.unitName">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="自然村：" prop="zrcName">
        <treeselect ref="modulesTree" :normalizer="normalizer" :disabled="treeDisabled" :options="modulesTreeRoot" style="width:300px;"
              :default-expand-level="2" :multiple="true" :open-on-click="true" :open-on-focus="true" :clear-on-select="true" placeholder="请选择"
              v-model="selectOrgs" />
        
      </el-form-item>


      
      <el-form-item style="margin-top: 16%;">
        <el-button @click="close()">取消</el-button>
        <el-button type="primary" @click="submitForm('form')" >保存</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
  import Treeselect from '@riophae/vue-treeselect'
  import '@riophae/vue-treeselect/dist/vue-treeselect.css'
  import { postMethodCommon, getMethodCommon } from '../../../api/common';
  import { validateMobile, validID, validateStock } from './validate.js'
  import form from '../../../store/modules/form';
 
  export default {
    name: "AddForm",
    components: {
      Treeselect
    },
    data() {
      return {
        normalizer(node) {
          // treeselect定义字段
          return {
            label: node.areaName,
            id: node.id,
            children: node.child && node.child.length > 0 ? node.child: 0
          }
        },
        treeDisabled: false, // 树选择框时候可用
        addForm: { },
        rules: {
          name: [
            { required: true, message: '姓名不能为空', trigger: 'blur' },
          ],
          account: [
            { required: true, message: '账号不能为空', trigger: 'blur' },
            // { validator: validateMobile.bind(this), trigger: 'blur' }
          ],
          passWord: [
            { required: true, message: '密码不能为空', trigger: 'blur' },
          ],
        },
        orgsTree: [], // 用户可访问到的所有机构组成的树
        sexOptions:[
          { value: 0 , label: '男' },
          { value: 1 , label: '女'}
        ],
        identityOptions: [
          { value: 2, label: '护林员' },
          { value: 3, label: '消防员' },
          { value: 4, label: '巡查员' },
          { value: 5, label: '管理人员' }
        ],
        modulesTreeRoot:[]
      }
    },
    computed: {
      selectOrgs: {
        get: function () {
          return []
        },
        set: function (v) {
          console.log('set org:', v)
          var _this = this
          _this.addForm.areaId = v
        }
      }
    },
    created() {
      this.getUnitListData()
      this.getVillageListData()
    },
    mounted() {
   
    },
    methods: {
      getUnitListData(){
        let listQuery = {
          pageIndex: 1,
          pageSize: 99999,
        }
        getMethodCommon("/FireCodePC/GetUserUnit", listQuery).then(res => {
          if (res.code == 200) {
            this.orgsTree = res.data; 
          }
        })
      },
      getVillageListData(){
        getMethodCommon("/Grid/LoadAllGrid").then(res => {
          this.modulesTreeRoot = res.data
        })
      },
      submitForm() {
        var _this = this
        this.$refs['form'].validate((valid) => {
          if (valid) {
            // 添加
            postMethodCommon("/FireCodeApp/Register", _this.addForm).then(response => {
                if (response.code == 200) {
                  // 上传shp
                  this.$emit("addSuccess");
                  this.$message({
                    type: "success",
                    message: "添加成功"
                  })
                }
              })

          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      
      close() {
        this.$emit("close");
      }
    }
  }
</script>
<style scoped>
  ::v-deep .vue-treeselect__control {
    background: rgba(0, 9, 34, 0);
  }

  ::v-deep .el-form-item__label {
    color: #333;
  }

  ::v-deep .el-radio {
    color: #333;

  }

  .service-type-btn {
    width: 100%;
    height: 180px;
    text-align: center;
    margin-top: 100px;
  }

</style>