<template>
  <div>
    <div class="flx">
      <Card class="car1">
        <Spin fix v-if="treeLoading"></Spin>
        <Tree :data="data1" @on-select-change="clic" ref="tree"></Tree>
      </Card>
      <Card class="car2">
        <Tabs v-model="tabname">
          <TabPane label="用户列表" name="name1">
            <Row>
              <Form :model="selectObj" inline>
                <FormItem>
                  <Input v-model="selectObj.login_name" clearable placeholder="登录名"/>
                </FormItem>
                <FormItem>
                  <Input v-model="selectObj.mobile" clearable placeholder="手机号"/>
                </FormItem>
                <FormItem>
                  <Button type="primary" @click="selectmsg()">搜索</Button>
                </FormItem>
              </Form>
            </Row>
            <Table :loading="tableLoading" border :columns="columns7" :data="data6">
              <template slot-scope="{ row }" slot="action">
                <Button type="primary" size="small" @click="update(row)" style="margin-right: 5px">修改
                </Button>
                <Button type="error" size="small" style="margin-right: 5px">删除</Button>
                <Button type="warning" size="small" @click="cancellation(row)">作废</Button>
              </template>
            </Table>
            <div class="page">
              <Page :total="totalnum" :current="currentPageNo" :page-size="currentPageSize"
                    @on-change="change"/>
            </div>
          </TabPane>
          <template v-if="this.type==='1'">
            <TabPane label="用户添加" name="name2">
              <user-form :treeID="treeID" :treeIDName="treeIDName" :btnlist="btnlist"
                         @cancel="qiehuan"></user-form>
            </TabPane>
          </template>
          <template v-if="this.type==='2'">
            <TabPane label="用户修改" name="name3">
              <Form ref="formInline" :model="obj" :label-width="90">
                <FormItem label="归属地：">
                  <Input v-model="obj.company_name" :placeholder="this.obj.company_name" disabled
                         class="wid"></Input>
                </FormItem>
                <FormItem label="登录手机：">
                  <Input v-model="obj.mobile" placeholder="登录手机号" class="wid"></Input>
                </FormItem>
                <FormItem label="身份证号：">
                  <Input v-model="obj.cardno" placeholder="身份证号" class="wid"></Input>
                </FormItem>
                <FormItem label="登录名：">
                  <Input v-model="obj.login_name" placeholder="登录名" class="wid"></Input>
                </FormItem>
                <FormItem label="工号：">
                  <Input v-model="obj.no" maxlength="20" placeholder="工号" class="wid"></Input>
                </FormItem>
                <FormItem label="姓名：">
                  <Input v-model="obj.name" placeholder="姓名" class="wid"></Input>
                </FormItem>
                <FormItem label="密码：">
                  <Input v-model="obj.password" maxlength="20" type="password" placeholder="密码"
                         class="wid"></Input>
                </FormItem>
                <FormItem label="确认密码：">
                  <Input v-model="obj.passwordc" maxlength="20" type="password" placeholder="确认密码"
                         class="wid"></Input>
                </FormItem>
                <FormItem label="邮箱：">
                  <Input v-model="obj.email" placeholder="邮箱" class="wid"></Input>
                </FormItem>
                <FormItem label="电话：">
                  <Input v-model="obj.phone" placeholder="电话" class="wid"></Input>
                </FormItem>
                <FormItem label="允许登录：">
                  <i-switch v-model="obj.login_flag" true-value="1" false-value="0" size="large">
                    <span slot="1">On</span>
                    <span slot="0">Off</span>
                  </i-switch>
                </FormItem>
                <FormItem label="用户类型：">
                  <Select v-model="obj.user_type" class="wid">
                    <Option value="1">系统管理</Option>
                    <Option value="2">部门经理</Option>
                    <Option value="3">普通用户</Option>
                    <Option value="9">接口对接</Option>
                  </Select>
                </FormItem>
                <FormItem label="用户角色：">
                  <CheckboxGroup v-model="border">
                    <Checkbox v-for="(item,index) in btnlist" :key="index" :label="item.name"
                              border>{{ item.name }}
                    </Checkbox>
                  </CheckboxGroup>
                </FormItem>
                <FormItem label="备注：">
                  <Input v-model="obj.remarks" type="textarea" class="wid" placeholder=""/>
                </FormItem>
                <FormItem label="备注：">
                  <span class="lef">时间：{{ obj.update_date }}</span>
                </FormItem>
              </Form>
              <div>
                <Button class="clic" type="primary" shape="circle" @click="updateadd(obj)">保存</Button>
                <Button class="ml20" shape="circle" @click="updatequxiao">取消</Button>
              </div>
            </TabPane>
          </template>
        </Tabs>
      </Card>
    </div>
    <Modal v-model="cancelModal" title="详细信息" width="700" cancel-text="关闭"
           @on-ok="ok111(paramData)" @on-cancel="cancelModal=false" ok-text="确定">
      <span>确定作废此账号吗？</span>
    </Modal>
  </div>
</template>

<script>
import {
  getForUserList,
  getList,
  getUserList,
  setUserInfo,
  userIdGetAdminUserInfo
} from '../../../api/system/system'
import { updateUser } from '@/api/eventlist'
import UserForm from './components/user-form'

export default {
  name: 'WlUserManager',
  components: { UserForm },
  data () {
    return {
      treeLoading: false,
      tableLoading: false,
      cancelModal: false,
      btnlist: [],
      treelist1: {},
      title: '',
      logic: '',
      type: '1',
      tabname: '',
      compan_name: '',
      treelist: [],
      disabled: false,
      currentPageNo: 1,
      currentPageSize: 20,
      totalnum: 0,
      obj: {},
      rolelist: [],
      selectObj: {},
      border: [],
      columns7: [
        {
          title: '归属地',
          key: 'company_name',
          align: 'center'
        },
        {
          title: '登录名',
          key: 'login_name',
          align: 'center'
        },
        {
          title: '名称',
          key: 'name',
          align: 'center'
        },
        {
          title: '手机',
          key: 'mobile',
          align: 'center'
        },
        {
          title: '操作',
          slot: 'action',
          width: 200,
          align: 'center'
        }
      ],
      treeID: '',
      treeIDName: '',
      data6: [],
      data1: [],
      dataList: [],
      updaterow: {},
      paramData: {}
    }
  },
  methods: {
    // 作废账号
    cancellation (item) {
      this.paramData = item
      this.cancelModal = true
    },
    ok111 () {
      updateUser(this.paramData).then(res => {
        if (res.data.errcode === 0) {
          this.$Notice.success({ title: '此账号已作废', desc: '' })
        } else {
          this.$Notice.error({
            title: '失败',
            desc: res.data.errmsg
          })
        }
      })
    },
    //  取消按钮
    qiehuan () {
      this.tabname = 'name1'
      // console.log(this.tabname)
    },
    updatequxiao () {
      this.type = '1'
      this.tabname = 'name1'
    },
    //  修改按钮
    update (value) {
      this.border = []
      this.type = '2'
      this.tabname = 'name3'
      value.contain_role = '1'
      userIdGetAdminUserInfo(value).then(ret => {
        let result = ret.data
        if (result.errcode === 0) {
          this.rolelist = []
          this.getForUserList()
          this.obj = ret.data.data
          this.updaterow = ret.data.data
          if (result.data.rolelist) {
            result.data.rolelist.forEach(item => {
              this.border.push(item.name)
            })
          }
        } else {
          this.$Notice.error({
            title: '失败',
            desc: ret.data.errmsg
          })
        }
      })
    },
    //  搜索
    selectmsg () {
      let data = {
        id: this.treeID,
        loginname: this.selectObj.login_name,
        mobile: this.selectObj.mobile,
        pageSize: this.currentPageSize
      }
      this.tableLoading = true
      getUserList(data).then(ret => {
        if (ret.data.errcode === 0) {
          this.data6 = ret.data.data.results
          this.totalnum = ret.data.data.totalRecord
          this.tableLoading = false
        } else {
          this.$Notice.error({
            title: '失败',
            desc: ret.data.errmsg
          })
          this.tableLoading = false
        }
      })
    },
    //  分页
    change (pageNo) {
      this.currentPageNo = pageNo
      this.currentPageSize = 20
      this.clic()
    },
    //  树状图
    clic (data) {
      if (data.length > 0) {
        this.tabname = 'name1'
        this.treeID = data[0].id
        this.treeIDName = data[0].name
        // console.log(this.treeID, this.treeIDName)
        let data1 = {
          id: this.treeID,
          pageNo: this.currentPageNo,
          pageSize: this.currentPageSize
        }
        this.tableLoading = true
        getUserList(data1).then(ret => {
          if (ret.data.errcode === 0) {
            this.data6 = ret.data.data.results
            this.totalnum = ret.data.data.totalRecord
            this.getForUserList()
            this.tableLoading = false
          } else {
            this.$Notice.error({
              title: '失败',
              desc: ret.data.errmsg
            })
            this.tableLoading = false
          }
        })
      }
    },
    //  树状图处理数据
    tree () {
      this.data1 = this.$common.toTree(this.treelist, 'children', 'id', 'parent_id')
      this.treeID = this.data1[0].id
      this.treeIDName = this.data1[0].name
    },
    //  获取树状图数据
    init () {
      let data = {}
      this.treeLoading = true
      getList(data).then(ret => {
        if (ret.data.errcode === 0) {
          this.treelist = ret.data.data
          for (let i = 0; i < this.treelist.length; i++) {
            this.treelist[i].title = this.treelist[i].name
          }
          this.tree()
          this.compan_name = this.treelist[0].name
          this.obj.company_name = this.compan_name
          this.getForUserList()
          this.treeLoading = false
        } else {
          this.$Notice.error({
            title: '失败',
            desc: ret.data.errmsg
          })
          this.treeLoading = false
        }
      })
    },
    //  添加用户--用户角色数据
    getForUserList () {
      let data = {
        flag: '1',
        company_id: this.treeID
      }
      getForUserList(data).then(ret => {
        if (ret.data.errcode === 0) {
          this.btnlist = ret.data.data
        } else {
          this.$Notice.error({
            title: '失败',
            desc: ret.data.errmsg
          })
        }
      })
    },
    // 修改用户信息确定按钮
    updateadd (obj) {
      // console.log()
      if (this.obj.mobile === null || this.obj.mobile === '' || this.obj.mobile === undefined) {
        this.$Message.info('请填写手机号码！')
        return
      }
      var reg = /^((13[0-9])|(17[0-1,6-8])|(15[^4,\\D])|(18[0-9]))\d{8}$/
      if (reg.test(this.obj.mobile) === false) {
        this.$Message.info('请输入正确手机号！')
        this.obj.mobile = ''
      }
      if (this.obj.name === null || this.obj.name === '' || this.obj.name === undefined) {
        this.$Message.info('请填写姓名！')
        return
      }
      if (this.obj.cardno === null || this.obj.cardno === '' || this.obj.cardno === undefined) {
        this.$Message.info('请填写身份证号！')
        return
      }
      // if (this.obj.password === null || this.obj.password === '' || this.obj.password === undefined) {
      //  this.$Message.info('请填写密码！')
      //  return
      // }
      // if (this.obj.passwordc === null || this.obj.passwordc === '' || this.obj.passwordc === undefined) {
      //  this.$Message.info('请再次填写密码！')
      //  return
      // }
      if (this.obj.passwordc !== this.obj.password) {
        this.$Message.info('两次密码不相同！')
        return
      }
      if (this.obj.user_type) {
        this.logic = '1'
      } else {
        this.logic = '2'
      }
      this.border.forEach(item => {
        this.btnlist.forEach(item1 => {
          if (item === item1.name) {
            this.rolelist.push(item1)
          }
        })
      })

      this.rolelist.forEach(item2 => {
        item2.active = true
      })
      let data = {
        id: this.updaterow.id,
        company_id: this.treeID,
        company_name: this.obj.company_name,
        email: this.obj.email,
        login_flag: this.logic,
        mobile: this.obj.mobile,
        name: this.obj.name,
        password: this.obj.password,
        passwordc: this.obj.passwordc,
        phone: this.obj.phone,
        remarks: this.obj.remarks,
        rolelist: this.rolelist,
        user_type: this.obj.user_type,
        cardno: this.obj.cardno
      }
      // console.log(data)
      setUserInfo(data).then(ret => {
        if (ret.data.errcode === 0) {
          this.$Notice.success({
            title: ret.data.data.Message,
            desc: ret.data.data,
            duration: 0
          })
          this.updatequxiao()
          this.$emit('cancel')
          this.obj = {}
          this.border = []
        } else {
          this.$Notice.error({
            title: '失败',
            desc: ret.data.errmsg
          })
        }
      })
    }
  },
  mounted () {
    this.init()
  }
}
</script>

<style scoped>
.flx {
  display: flex;
}

.wid {
  width: 70%;
}

.car1 {
  width: 25%;
}

.car2 {
  margin-left: 50px;
  width: 70%
}

.ml20 {
  margin-left: 20px;
}

.clic {
  margin-left: 100px;
}

.m10 {
  margin-left: 5px;
}

.page {
  margin-top: 10px;
  text-align: right;
}

.lef {
  margin-left: 150px;
}
</style>
