<template>
  <div>
    <Row :gutter="20">
      <Col span="2">
        <div style="text-align: right;">
          <Button type="primary" @click="add()" v-if="params.grade >= 2 ">{{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="name" title="机构名称" align="center"/>
        <vxe-table-column field="area_id" title="区划编码" align="center"/>
        <!-- <vxe-table-column field="name" title="机构层级" align="center"/>
        <vxe-table-column field="mobile" 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)" style="margin-right: 5px" >编辑</Button> -->
            <Button type="warning" size="small" @click="showDetail(row)" style="margin-right: 5px" >修改</Button>
            <!-- <Button type="error" size="small" @click="deleteInstitution(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="institutionModal" :title="title">
      <Form :model="formInline" :label-width="100" :rules="formRules" ref="officeForm">
        <FormItem label="机构类别：" >
          <Select v-model="formInline.grade" disabled>
            <Option value="3">市</Option>
            <Option value="4">区</Option>
            <Option value="5">街道</Option>
            <Option value="6">社区</Option>
<!--            <Option value="6.5">小区</Option>
            <Option value="7">网格</Option>
            <Option value="8">楼</Option>
            <Option value="9">单元</Option>-->
          </Select>
        </FormItem>
        <FormItem label="机构名称：" prop="name">
          <Input v-model="formInline.name"></Input>
        </FormItem>
        <FormItem label="区划编码：" prop="area_id">
          <Input :disabled="flag === 'edit'" v-model="formInline.area_id"></Input>
        </FormItem>
        <FormItem label="地址：" >
          <Input v-model="formInline.address"></Input>
        </FormItem>
        <FormItem label="排序：" >
          <Input v-model="formInline.sort"></Input>
        </FormItem>
        <FormItem label="备注：" >
          <Input v-model="formInline.remarks"></Input>
        </FormItem>
      </Form>
      <div slot="footer">
        <Button type="default" @click="institutionModal=false">取消</Button>
        <Button type="primary" @click="saveUser('officeForm')">确定</Button>
      </div>
    </Modal>
  </div>
</template>
<script>
import { findOfficeChildrenList, updateUserById, createOffice, updateOfficeInfoById } from '@/api/contradiction'
export default {
  name: 'officeManage',
  data () {
    return {
      url: '',
      flag: 'what',
      institutionModal: false,
      showWin: false,
      tableLoading: true,
      params: {
        pageNo: 1,
        pageSize: 10,
        totalRecord: 0
      },
      tableData: [],
      formInline: {},
      title: '',
      formRules: {
        area_id: [
          { required: true, message: '请输入区划编码', trigger: 'blur' }
        ],
        name: [
          { 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.url = this.flag === 'what' ? createOffice : updateOfficeInfoById
          this.url(this.formInline).then(res => {
            if (res.data.errcode === 0) {
              this.institutionModal = false
              this.$Notice.success({ title: '', desc: '保存成功' })
              this.$emit('updateOffice')
              this.getRecordList()
            } else {
              this.$Notice.error({ title: '', desc: res.data.errmsg })
            }
          })
        }
      })
    },
    changeTime (time) {
      this.$set(this.params, 'patrol_time', time)
    },
    search () {
      this.pageAction(1)
    },
    add () { // 添加机构
      this.formInline = {}
      this.formInline.parent_id = this.params.id
      this.formInline.grade = (parseInt(this.params.grade) + 1) + ''

      this.institutionModal = true
      this.$forceUpdate()
      this.flag = 'what'
    },
    showDetail (row) {
      this.formInline = JSON.parse(JSON.stringify(row))
      this.institutionModal = true
      this.flag = 'edit'
    },
    getRecordList () {
      findOfficeChildrenList(this.params).then(res => {
        if (res.data.errcode === 0) {
          this.tableLoading = false
          this.tableData = res.data.data
          // 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, '点击的数据')
      this.params.id = e.id
      this.params.grade = e.grade
      this.formInline.parent_id = e.id
      this.getRecordList()
      switch (parseInt(this.params.grade)) {
        case 3:
          this.title = '添加区级机构'
          break
        case 4:
          this.title = '添加街道机构'
          break
        case 5:
          this.title = '添加社区机构'
          break
        default:
          this.title = '添加机构'
      }
    },
    save () { // 添加机构

    }
  }
}
</script>
<style scoped>
  .button_row {
    margin-top: 10px;
    margin-bottom: 10px;
  }
  .table_div {
    margin-top: 20px;
  }

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