<template>
  <div>
    <Row :gutter="20" class="button_row">
      <Col span="4">
        <div>
          <div style="margin-bottom: 5px;">账号类型</div>
          <Select v-model="params.fax" clearable style="width:100%;">
            <Option value="1">综治中心</Option>
            <Option value="2">进驻部门</Option>
          </Select>
        </div>
      </Col>
      <Col span="4">
        <div>
          <div style="margin-bottom: 5px;">姓名</div>
          <Input v-model="params.name" clearable placeholder="请输入姓名"></Input>
        </div>
      </Col>
      <Col span="4">
        <div>
          <div style="margin-bottom: 5px;">联系电话</div>
          <Input v-model="params.mobile" clearable placeholder="请输入联系电话"></Input>
        </div>
      </Col>
      <Col span="4">
        <div>
          <div style="margin-bottom: 5px;">身份证号</div>
          <Input v-model="params.cardno" clearable placeholder="请输入身份证号"></Input>
        </div>
      </Col>
      <Col span="8">
        <div style="text-align: right;margin-top: 25px;">
          <Button type="primary" @click="search()" style="margin-right:5px;">查询</Button>
          <Button type="primary" @click="add('', 'what')" >{{title}}</Button>
        </div>
      </Col>
    </Row>
    <div class="table_div">
      <vxe-table border
        auto-resize
        row-id="id"
        :row-key="true"
        highlight-hover-row
        align="center"
        header-align="center"
        ref="xTree"
        :loading="tableLoading"
        :data="tableData">
        <vxe-table-column field="type" title="账号类型" align="center"/>
        <vxe-table-column field="officeName" title="单位名称" align="center"/>
        <vxe-table-column field="name" title="姓名" align="center"/>
        <vxe-table-column field="phone" title="联系电话" align="center"/>
        <vxe-table-column field="cardno" title="身份证号" align="center"/>
        <vxe-table-column field="login_name" title="登录账号" align="center"/>
        <vxe-table-column title="操作" align="center" width="220" fixed="right">
          <template #default="{row}">
            <Button type="success" size="small" @click="showDetail(row, 'edit')" style="margin-right: 5px" >编辑</Button>
            <Button type="warning" size="small" @click="resetPassWord(row)" style="margin-right: 5px" >重置密码</Button>
            <Button type="error" size="small" @click="deleteUser(row)" >账号注销</Button>
          </template>
        </vxe-table-column>
      </vxe-table>
      <Page :total="params.totalRecord" :page-size="params.pageSize" show-total class="paging" @on-change="pageAction"
        :current="params.pageNo" style="margin-bottom: 10px"></Page>
    </div>
    <Modal
      v-model="showWin"
      title="账号信息"
      width="500">
      <div>
        <Form :model="formInline" :rules="formRules" ref="userForm" label-position="left" :label-width="80">
          <Row :gutter="16">
            <Col span="24">
              <FormItem label="姓名" prop="name">
                <Input v-model="formInline.name" placeholder="请输入姓名"></Input>
              </FormItem>
            </Col>
            <Col span="24">
              <FormItem label="身份证号" prop="cardno">
                <Input v-model="formInline.cardno" placeholder="请输入身份证号"></Input>
              </FormItem>
            </Col>
            <Col span="24">
              <FormItem label="联系电话" prop="phone">
                <Input v-model="formInline.phone" placeholder="请输入联系电话"></Input>
              </FormItem>
            </Col>
          </Row>
        </Form>
      </div>
      <div slot="footer">
        <Button @click="showWin = false" >取消</Button>
        <Button type="primary" :loading="loading" @click="saveUser('userForm')" >确定</Button>
      </div>
    </Modal>
  </div>
</template>
<script>
import { selectOfficeUserList, updateUserInfoById, updateUserById, createUser } from '@/api/contradiction'
// import { testid } from '@/api/common.js'
export default {
  name: 'officeManage',
  data () {
    return {
      url: '',
      flag: 'what',
      showWin: false,
      title: '',
      tableLoading: true,
      params: {
        pageNo: 1,
        pageSize: 10,
        totalRecord: 0
      },
      loading: false,
      tableData: [],
      formInline: {},
      formRules: {
        // name: [
        //   { required: true, message: '请输入姓名', trigger: 'blur' }
        // ]
        // cardno: [
        //   { required: true, message: '请输入身份证号', trigger: 'blur' }
        // ]
      }
    }
  },
  mounted () {},
  methods: {
    resetPassWord (row) {
      this.$Modal.confirm({
        title: '提示',
        content: '确定重置此账号密码？',
        loading: true,
        onOk: () => {
          updateUserById({
            password: 'reset',
            userId: row.userId
          }).then(res => {
            if (res.data.errcode === 0) {
              this.$Notice.success({ title: '', desc: '密码重置成功' })
              this.getRecordList()
              this.$Modal.remove()
            } else {
              this.$Notice.error({ title: '', desc: res.data.errmsg })
            }
          })
        },
        onCancel: () => {
          this.$Modal.remove()
        }
      })
    },
    deleteUser (row) {
      this.$Modal.confirm({
        title: '提示',
        content: '确定注销此账号？',
        loading: true,
        onOk: () => {
          updateUserById({
            del_flag: '1',
            userId: row.userId
          }).then(res => {
            if (res.data.errcode === 0) {
              this.$Notice.success({ title: '', desc: '注销成功' })
              this.getRecordList()
              this.$Modal.remove()
            } else {
              this.$Notice.error({ title: '', desc: res.data.errmsg })
            }
          })
        },
        onCancel: () => {
          this.$Modal.remove()
        }
      })
    },
    saveUser (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.loading = true
          // if (testid(this.formInline.cardno)) {
          this.url = this.flag === 'what' ? createUser : updateUserInfoById
          this.url(this.formInline).then(res => {
            if (res.data.errcode === 0) {
              this.showWin = false
              this.$Notice.success({ title: '', desc: '保存成功' })
              this.getRecordList()
            } else {
              this.$Notice.error({ title: '', desc: res.data.errmsg })
            }
            this.loading = false
          })
          // } else {
          //   this.$Notice.error({ title: '提示', desc: '身份证号码格式不正确' })
          // }
        }
      })
    },
    changeTime (time) {
      this.$set(this.params, 'patrol_time', time)
    },
    search () {
      this.pageAction(1)
    },
    add (row, flag) { // 添加账号
      this.formInline = {}
      this.formInline['company_id'] = this.params.company_id
      this.showWin = true
      this.flag = flag
    },
    showDetail (row, flag) {
      this.formInline = JSON.parse(JSON.stringify(row))
      this.formInline['id'] = JSON.parse(JSON.stringify(row)).userId
      this.showWin = true
      this.flag = flag
    },
    getRecordList () {
      selectOfficeUserList(this.params).then(res => {
        if (res.data.errcode === 0) {
          this.tableLoading = false
          this.tableData = res.data.data.results
          this.params.totalRecord = res.data.data.totalRecord
        } else {
          this.$Notice.error({ title: '', desc: res.data.errmsg })
          this.tableLoading = false
        }
      })
    },
    pageAction (page) {
      this.params.pageNo = page
      this.getRecordList()
    },
    setTimeTwo (num) {
      if (num < 10) {
        return ('0' + num)
      }
      return num
    },
    load (e) {
      console.log(e, 'erewr')
      this.params.id = e.id
      this.params.grade = e.grade
      this.formInline['company_id'] = e.id
      this.params['company_id'] = e.id
      switch (parseInt(this.params.grade)) {
        case 3:
          this.title = '添加市用户'
          break
        case 4:
          this.title = '添加区级用户'
          break
        case 5:
          this.title = '添加街道级用户'
          break
        case 6:
          this.title = '添加社区级用户'
          break
      }
      this.getRecordList()
    }
  }
}
</script>
<style scoped>
  .button_row {
    margin-top: 10px;
    margin-bottom: 10px;
  }
  .table_div {
    margin-top: 20px;
  }

.paging {
  margin-top: 10px;
  text-align: right;
}
</style>
