<template>
  <div>
    <el-card class="box-card" style="padding-left: 50px;">

      <el-checkbox class="checkbox" v-model="accountType" @change="canLoginChange">允许登录</el-checkbox>

      <div style="display: flex;flex-direction: row;width: 100%;margin-top: 10px;">
        <div style="display: flex;flex-direction: row;flex: 1 ; align-items: center;">
          <span style="width: 80px;text-align: right;"><span class="must">*</span> 用户名：</span>
          <el-input style="margin-left: 10px;flex: 1 " v-model="form.userName"></el-input>
        </div>
        <div style="display: flex;flex-direction: row;flex: 1 ;align-items: center;margin-left: 20px;">
          <span style="width: 80px;text-align: right;"><span class="must">*</span> 姓名：</span>
          <el-input style="margin-left: 10px; flex: 1" v-model="form.name"></el-input>
        </div>
      </div>

      <div style="display: flex;flex-direction: row;width: 100%;margin-top: 10px;">
        <div style="display: flex;flex-direction: row;flex: 1 ; align-items: center;">
          <span style="width: 80px;text-align: right;"><span class="must">*</span> 部门：</span>
          <el-select v-model="form.sysStaffOrg.orgName" placeholder="请选择" style="margin-left: 10px; flex: 0.8;">
            <el-option hidden :key="form.sysStaffOrg.orgSid" :label="form.sysStaffOrg.orgName"
              :value="form.sysStaffOrg.orgName"></el-option>
            <el-tree :data="treedata" ref="Tree" accordion node-key="sid" :default-checked-keys="checkedId"
              :default-expand-all='true' :check-strictly='true' :props="defaultProps" @check-change="checkchange">
            </el-tree>
          </el-select>
          <el-checkbox class="checkbox" style="margin-left: 15px;" v-model="manageType"
            @change="manageTypeChange">主管</el-checkbox>
        </div>
        <div style="display: flex;flex-direction: row;flex: 1 ;align-items: center;margin-left: 20px;">
          <span style="width: 80px;text-align: right;"><span class="must">*</span> 角色：</span>
          <el-select v-model="form.roleSid" placeholder="请选择" style="margin-left: 10px; flex: 1" filterable multiple
            @change="roleChange">
            <el-option v-for="(item,i) in roleListAll" :key="i" :label="item.name" :value="item.sid"></el-option>
          </el-select>

        </div>
      </div>

      <div style="display: flex;flex-direction: row;width: 100%;margin-top: 10px;">
        <div style="display: flex;flex-direction: row;flex: 1 ; align-items: center;">
          <span style="width: 80px;text-align: right;">备注：</span>
          <el-input style="margin-left: 10px; flex: 0.8" v-model="form.remarks"></el-input>
          <el-checkbox class="checkbox" style="margin-left: 15px;" v-model="userType"
            @change="supplierChange">供应商账号</el-checkbox>
        </div>
      </div>
      <div style="margin-top: 20px; text-align: center;">
        <el-button type="primary" @click="save()">保 存</el-button>
      </div>

    </el-card>
  </div>
</template>

<script>
  import {
    userAdd,
    userUpdata,
    userSingle,
    orgList,
    postList,
    getCode,
    roleList,
  } from '@/api/system/userManage/index.js'

  export default {
    data() {
      return {
        form: {
          "userName": "",
          "name": "",
          "sysStaffOrg": {
            "orgSid": "",
            "orgName": "",
            "orgCode": "",
            "manageType": "3"
          },
          "sysUserRoles": [],
          "remarks": "",
          "userType": "1",
          "accountType": "3",
          "orgSid": window.sessionStorage.getItem('orgSid')
        },
        accountType: false,
        manageType: false,
        userType: false,
        treedata: [],
        checkedId: [],
        // orgName: '',
        defaultProps: {
          children: 'children',
          label: 'name'
        },
        roleListAll: []
      };
    },
    props: ['dataObj'],
    // watch: {
    //   dataObj: {
    //     handler(val) {
    //       this.form1.sid = val.sid
    //       this.getUserSingle()
    //       this.getOrgList()
    //     },
    //     deep: true,
    //   },
    // },
    mounted() {
      this.getOrgList()
      this.getRoleList()
    },
    methods: {
      getRoleList() {
        var param = {
          orgSid: window.sessionStorage.getItem('orgSid')
        }
        roleList(param).then(res => {
          if (res.code === '200') {
            this.roleListAll = res.data
          }
        })
      },
      canLoginChange(val) {
        console.log("canLoginChange", val);

        this.accountType = val

        this.form.accountType = val ? "2" : "3"

      },
      manageTypeChange(val) {
        console.log("manageTypeChange", val);

        this.manageType = val

        this.form.sysStaffOrg.manageType = val ? "1" : "3"
      },
      supplierChange(val) {
        console.log("supplierChange", val);
        this.userType = val

        this.form.userType = val ? "3" : "1"
      },

      roleChange(val) {
        console.log("roleChange", val);
        this.form.sysUserRoles = []
        for (var i = 0; i < val.length; i++) {

          this.form.sysUserRoles.push({
            roleSid: val[i]
          })

        }

      },

      getUserSingle() {
        userSingle(this.form1).then(res => {
          if (res.code == '200') {
            this.form.sid = res.data.sid
            this.form.name = res.data.name
            this.form.userType = res.data.userType
            this.form.orgSid = res.data.orgSid
            this.orgName = res.data.departmentName
            this.form.postSid = res.data.postSid
            this.form.mobile = res.data.mobile
          }
        })
      },
      // 获取部门树形
      getOrgList() {
        //      this.roleDialog = true
        this.checkedId = []
        this.loading = true
        let params = {}
        orgList(window.sessionStorage.getItem('orgSid')).then(res => {
          this.treedata = res.data
        })

      },
      treeNodeClick() {
        this.$refs.el_select.visible = false
      },
      checkchange(data, checked, indeterminate) {

        console.log("checkchange", data);
        if (checked) {
          this.form.sysStaffOrg.orgSid = data.sid
          this.form.sysStaffOrg.orgName = data.name
          this.form.sysStaffOrg.orgCode = data.orgCode
          let arr = []
          arr = [data.sid];
          this.$refs.Tree.setCheckedKeys(arr);

          return;
        }

        //   this.form.orgSid = data.sid
        //   this.orgName = data.name
        //   let arr = []
        //   arr = [data.sid];
        //   this.$refs.Tree.setCheckedKeys(arr);
        //   this.form.postSid = ''
        //   this.getPost(data.sid)
        //   return;
        // }
      },
      getPost(orgSid) {
        let params = {
          sid: orgSid
        }
        postList(params).then(res => {
          this.postSidData = res.data
        })
      },
      save() {

        console.log("save", this.form);

        if (this.form.userName == '') {
          this.$message({
            message: '账号不能为空',
            type: 'warning'
          })
          return
        }
        if (this.form.name == '') {
          this.$message({
            message: '姓名不能为空',
            type: 'warning'
          })
          return
        }

        if (this.form.sysStaffOrg.orgSid == '' || this.form.sysStaffOrg.orgName == '') {
          this.$message({
            message: '部门不能为空',
            type: 'warning'
          })
          return
        }

        if (this.form.sysUserRoles.length == 0) {
          this.$message({
            message: '角色不能为空',
            type: 'warning'
          })
          return
        }



        if (this.form.sid) {
          userUpdata(this.form).then(res => {
            if (res.code == '200') {
              this.$message({
                message: res.msg,
                type: 'success'
              })
              this.$emit('status', false)
            }
          })
        } else {
          userAdd(this.form).then(res => {
            if (res.code == '200') {
              this.$message({
                message: res.msg,
                type: 'success'
              })
              this.$emit('status', false)
            }
          })
          let arr = []
          this.$refs.Tree.setCheckedKeys(arr);
        }
        this.reset()
      },
      reset() {
        this.accountType = false
        this.manageType = false
        this.userType = false

        this.form = {
          "userName": "",
          "name": "",
          "sysStaffOrg": {
            "orgSid": "",
            "orgName": "",
            "orgCode": "",
            "manageType": "3"
          },
          "sysUserRoles": [],
          "remarks": "",
          "userType": "1",
          "accountType": "3",
          "orgSid": window.sessionStorage.getItem('orgSid')
        }
      },
      //获取验证码
      getIdentifying() {
        if (this.form.mobile == "") {
          this.$alert('请填写手机号码', '', {
            confirmButtonText: '确定'
          })
          return;
        }
        //验证码倒计时
        const TIME_COUNT = 60;
        if (!this.timer) {
          this.phoneCodeCount = TIME_COUNT;
          this.showCode = false;
          this.timer = setInterval(() => {
            if (this.phoneCodeCount > 0 && this.phoneCodeCount <= TIME_COUNT) {
              this.phoneCodeCount--;
            } else {
              this.showCode = true;
              clearInterval(this.timer);
              this.timer = null;
            }
          }, 1000)
        }

        let obj = {
          phone: this.form.mobile,
        }
        getCode(obj).then(res => {
          if (res.code == '200') {
            this.orginTranceNo = res.data.tranceNo;
          }
        })
      },
      cancel() {
        this.$emit('status', false)
      }
    }
  }
</script>

<style>
  .checkbox {
    zoom: 130%;
  }

  .must {
    color: #f00;
  }
</style>
