<template>
  <div class="role-div">
    <Tabs type="card" ref="tabs" v-model="tabValue">
      <TabPane label="横向部门机构列表" name="1">
        <div class="search-div">
          <div style="width:50%;float: left;">
            <Row class="mb10">
              <Col span="6">
                <span>机构名称：</span>
                <Input style="width: 70%;" v-model="searchInfo.name" placeholder="请输入"/>
              </Col>
            </Row>
          </div>
          <div style="width:50%;float: left;">
            <Row>
              <Col span="24" style="display: flex;justify-content: end;">
                <!--                <Button type="primary" @click="getRoleList('1')" style="margin-right: 10px">搜索</Button>-->
                <Button type="primary" @click="getList('1')" style="margin-right: 10px">本级</Button>
                <Button type="primary" @click="getList('2')" style="margin-right: 10px">下级</Button>
                <Button type="primary" @click="getList('3')" style="margin-right: 10px">本级及下级</Button>
              </Col>
            </Row>
          </div>
        </div>
        <Table stripe :columns="columns" :loading="loading" :data="dataList">
          <template slot-scope="{row, index}" slot="action">
            <Button type="info" style="margin-right: 10px;" @click="upd(row.id)">修改</Button>
            <Button type="primary" style="margin-right: 10px;" @click="getUserInfo(row.id)">用户信息</Button>
            <!--            <Button type="error"  @click="remove(row.id)">删除</Button>-->
          </template>
        </Table>
        <Page class="page_style" :total="params.totalRecord" :current="params.pageNo"
              :page-size="params.pageSize" @on-change="changePageNo" show-total show-sizer @on-page-size-change="size"/>
      </TabPane>
      <TabPane label="添加横向部门机构" name="2">
        <Form ref="formValidate" :model="formData" :label-width="120" style="margin-left:200px;width:30%;">
          <FormItem label="机构类别：">
            <Select v-model="formData.label">
              <Option v-for="item in dictList" :value="item.label" :key="item.value" placeholder="请选择机构类型">
                {{ item.label }}
              </Option>
            </Select>
          </FormItem>
          <FormItem label="机构名称：" prop="name" :rules="[{required: true, message: '必填', trigger: 'blur' }]">
            <Input v-model="formData.name" placeholder="请添加机构名称"></Input>
          </FormItem>
          <FormItem label="排序：" prop="sort" :rules="[{required: true, message: '必填', trigger: 'blur' }]">
            <Input v-model="formData.sort" placeholder="请添加排序"></Input>
          </FormItem>
          <FormItem label="是否开设用户" prop="userJurisdiction" v-if="false"
                    :rules="[{required: true, message: '必填', trigger: 'change' }]">
            <Select v-model="formData.userJurisdiction" placeholder="请选择是否开设用户">
              <Option value="1">是</Option>
              <Option value="2">否</Option>
            </Select>
          </FormItem>
          <FormItem label="用户名称：" prop="user_name" :rules="[{required: true, message: '必填', trigger: 'blur' }]">
            <Input v-model="formData.user_name" placeholder="请添加用户名称"></Input>
          </FormItem>
          <FormItem label="手机号：" prop="phone">
            <Input v-model="formData.phone" placeholder="请添加手机号"></Input>
          </FormItem>
          <FormItem label="机构详细地址：" prop="address">
            <Input v-model="formData.address" placeholder="请添加机构详细地址"></Input>
          </FormItem>
          <FormItem label="用户备注：" prop="remarks">
            <Input v-model="formData.remarks" placeholder="请添加用户备注"></Input>
          </FormItem>
          <FormItem>
            <div class="flex-div">
              <Button type="primary" @click="save">保存</Button>
            </div>
          </FormItem>
        </Form>
      </TabPane>
    </Tabs>
    <Modal v-model="updModal" title="修改" width="900" footer-hide="false">
      <Form ref="form" :model="form" :label-width="120" style="margin-left:200px;width:50%;">
        <FormItem label="机构类别：">
          <Select v-model="form.label">
            <Option v-for="item in dictList" :value="item.label" :key="item.value" placeholder="请选择机构类型">
              {{ item.label }}
            </Option>
          </Select>
        </FormItem>
        <FormItem label="机构名称：" prop="name" :rules="[{required: true, message: '必填', trigger: 'blur' }]">
          <Input v-model="form.name" placeholder="请添加机构名称"></Input>
        </FormItem>
        <FormItem label="排序：" prop="sort" :rules="[{required: true, message: '必填', trigger: 'blur' }]">
          <Input v-model="form.sort" placeholder="请添加排序"></Input>
        </FormItem>
        <FormItem>
          <div class="flex-div">
            <Button type="primary" @click="updSave">保存</Button>
          </div>
        </FormItem>
      </Form>
    </Modal>
  </div>
</template>
<script>
import {
  selectOfficeParentList,
  selectDictList,
  insertOffice,
  selectOfficeParentInfo,
  updateSysOffice
} from '@//api/contradiction.js'

export default {
  name: 'roleManagerList',
  data () {
    return {
      formData: {},
      columns: [
        { title: '序号', type: 'index', align: 'center' },
        // { title: '机构类别', key: 'index', align: 'center' },
        { title: '机构名称', key: 'name', align: 'center' },
        // { title: '用户姓名', key: 'user_name', align: 'center' },
        // { title: '手机号', key: 'phone', align: 'center' },
        // { title: '机构详细地址', key: 'address', align: 'center' },
        { title: '用户备注', key: 'remarks', align: 'center' },
        { title: '操作', slot: 'action', align: 'center', width: '260' }
      ],
      searchInfo: {
        name: '',
        companyId: '',
        companyGrade: '',
        companyName: ''
      },
      sysUserId: '',
      dataList: [],
      dictList: [],
      form: {},
      tabValue: '1',
      updModal: false,
      params: {
        totalRecord: 0,
        pageNo: 1,
        pageSize: 10
      },
      loading: false,
      type: ''
    }
  },
  computed: {
    serverUserInfo () {
      return this.$store.state.user.severUserInfo
    }
  },
  mounted () {
    // this.getRoleList()
    this.getDictList()
  },
  methods: {
    remove (id) {
      this.$Modal.confirm({
        title: '确认删除此机构么？',
        content: '此操作会删除该机构下全部用户',
        onOk: () => {
          this.deleteInstitution(id)
        }
      })
    },
    upd (id) {
      selectOfficeParentInfo({ id: id }).then(res => {
        if (res.data.errcode === 0) {
          this.form = res.data.data
          this.form.sort = res.data.data.sort + ''
          this.updModal = true
          return
        }
        this.$Message.error(res.data.errmsg)
      })
    },
    deleteInstitution (id) {
      updateSysOffice({ id: id, del_flag: '1' }).then(res => {
        if (res.data.errcode === 0) {
          this.$Message.success('操作成功')
          this.goToFirstTab()
          return
        }
        this.$Message.error(res.data.errmsg)
      })
    },
    getDictList () {
      selectDictList({ type: 'sys_type_office' }).then(res => {
        if (res.data.errcode === 0) {
          this.dictList = res.data.data
          return
        }
        this.$Message.error(res.data.errmsg)
      })
    },
    size (pageSize) {
      this.params.pageSize = pageSize
      this.changePageNo(1)
    },
    changePageNo (pageNo) {
      this.params.pageNo = pageNo
      this.getRoleList()
    },
    getList (type) {
      this.params.pageNo = 1
      this.type = type || this.type
      this.getRoleList()
    },
    getRoleList (sysUserId) {
      this.loading = true
      this.params = { ...this.params, ...this.searchInfo }
      if (sysUserId) {
        this.sysUserId = sysUserId
      }
      let params = JSON.parse(JSON.stringify(this.params))
      if (this.type === '1') {
        params.sysUserId = this.sysUserId
        params.companyId = ''
      } else if (this.type === '2') {
        params.sysUserId = ''
        params.companyId = this.searchInfo.companyId
      } else if (this.type === '3') {
        params.sysUserId = this.sysUserId
        params.companyId = this.searchInfo.companyId
      } else {
        params.sysUserId = this.sysUserId
        params.companyId = ''
      }
      selectOfficeParentList(params).then(res => {
        this.loading = false
        if (res.data.errcode === 0) {
          this.dataList = res.data.data.results
          this.params.totalRecord = res.data.data.totalRecord
          return
        }
        this.$Message.error(res.data.errmsg)
      })
    },
    updSave () {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          this.form.dict_type_id = this.dictList.find(item => item.label === this.form.label).id
          updateSysOffice(this.form).then(res => {
            if (res.data.errcode === 0) {
              this.$Message.success('操作成功')
              this.goToFirstTab()
              this.updModal = false
              return
            }
            this.$Message.error(res.data.errmsg)
          })
        } else {
          console.log('修改机构校验失败')
          return false
        }
      })
    },
    save () {
      this.$refs['formValidate'].validate((valid) => {
        if (valid) {
          this.formData.dict_type_id = this.dictList.find(item => item.label === this.formData.label).id
          this.formData.userJurisdiction = '1' // 是否开设用户默认是:'1'
          insertOffice(this.formData).then(res => {
            if (res.data.errcode === 0) {
              this.$Message.success('操作成功')
              this.goToFirstTab()
              return
            }
            this.$Message.error(res.data.errmsg)
          })
        } else {
          console.log('添加机构校验失败')
          return false
        }
      })
    },
    goToFirstTab () {
      this.$refs.tabs.activeKey = '1' // 假设Tabs组件的ref设置为tabs
      this.getRoleList()
    },
    getUserInfo (id) {
      this.$router.push({
        name: 'contradictionUserManager',
        params: {
          id: id
        }
      })
    }
  }
}
</script>
<style scoped lang="less">
.role-div {
  .search-div {
    width: 100%;
    padding: 15px 30px 15px 15px;
    float: left;
    // min-height: 200px;
    border: 1px solid skyblue;
    border-radius: 5px;;
    background-color: #f6fdfd;
    margin-bottom: 15px;
  }
}

.flex-div {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

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