<template>
  <div class="role-div">
    <Tabs type="card" ref="tabs" v-model="tabValue" @on-click="changeTab">
      <TabPane label="用户列表" name="1">
        <Form inline>
          <FormItem>
            <Input type="text" v-model="user_name" clearable>
              <span slot="prepend">用户名</span>
            </Input>
          </FormItem>
          <FormItem>
            <Input type="text" v-model="office_name" clearable>
              <span slot="prepend">机构名称</span>
            </Input>
          </FormItem>
          <FormItem>
            <Input type="text" v-model="phone" clearable>
              <span slot="prepend">手机号</span>
            </Input>
          </FormItem>
          <FormItem>
            <Button :loading="tableLoading" @click="search" type="success"
              >搜索</Button
            >
            <Button type="primary" @click="reset" style="margin-left: 10px;">重置</Button>
          </FormItem>
        </Form>
        <Table stripe :columns="columns" :data="dataList">
          <template slot-scope="{ row, index }" slot="action">
            <Button
              type="primary"
              size="small"
              class="mr5"
              @click="editUser(row)"
              >编辑</Button
            >
            <Button type="error" size="small" @click="deleteUser(row)"
              >删除</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="what === 'add' ? '添加用户' : '修改用户'" name="2">
        <Form
          ref="formValidate"
          :model="formData"
          :label-width="120"
          style="margin-left: 200px; width: 30%"
        >
          <!-- <FormItem
            label="机构类别："
            v-if="what === 'add' && user_level !== '6'"
            prop="officeType"
            :rules="[{ required: true, message: '必填', trigger: 'change' }]">
            <Select
              v-model="formData.officeType"
              @on-change="changeJj(formData.value)"
            >
              <Option
                v-for="item in officeDict"
                :value="item.value"
                :key="item.value"
                placeholder="请选择机构类型"
                >{{ item.label }}</Option
              >
            </Select>
          </FormItem> -->
          <FormItem
            label="机构："
            prop="id"
            v-if="!pageParams.id && what === 'add' && user_level !== '6'"
            :rules="[{ required: true, message: '必填', trigger: 'change' }]"
          >
            <Select v-model="formData.id" :disabled="what === 'edit'">
              <Option
                v-for="item in officeList"
                :value="item.id"
                :key="item.value"
                placeholder="请选择机构"
                >{{ item.name }}</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="cardno"
            :rules="[{ required: true, message: '必填', trigger: 'blur' }]"
          >
            <Input
              v-model="formData.cardno"
              placeholder="请添加身份证号码"
            ></Input>
          </FormItem>
          <FormItem
            label="手机号："
            prop="phone"
            :rules="[{ required: true, message: '必填', trigger: 'blur' }]"
          >
            <Input v-model="formData.phone" 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>
  </div>
</template>
<script>
import {
  selectUserCompanyList,
  selectDictList,
  insertUser,
  selectOfficeTypeParentList,
  updateUser
} from '@//api/contradiction.js'
import { testid } from '@/api/common.js'
export default {
  name: 'roleManager',
  data () {
    return {
      user_name: '',
      office_name: '',
      phone: '',
      formData: {},
      columns: [
        { title: '序号', type: 'index', align: 'center' },
        { title: '机构名称', key: 'officeName', align: 'center' },
        { title: '用户姓名', key: 'user_name', align: 'center' },
        // { title: '手机号', key: 'phone', align: 'center' },
        { title: '登录账号', key: 'login_name', align: 'center' },
        { title: '手机号', key: 'mobile', align: 'center' },
        { title: '用户备注', key: 'remarks', align: 'center' },
        { title: '操作', slot: 'action', align: 'center' }
      ],
      dataList: [],
      dictList: [],
      tableLoading: false,
      user_level: '',
      tabValue: '1',
      pageParams: this.$route.params,
      formData1: {},
      officeList: [],
      officeDict: [
        { label: '综治中心', value: '1' },
        { label: '单位', value: '2' }
      ],
      what: 'add',
      params: {
        totalRecord: 0,
        pageNo: 1,
        pageSize: 10
      }
    }
  },
  mounted () {
    this.user_level = this.$store.state.user.severUserInfo.company_grade
    this.getUserList()
    this.getDictList()
    if (this.pageParams) {
      this.formData.id = this.pageParams.id
    }
  },
  methods: {
    reset () {
      this.user_name = ''
      this.office_name = ''
      this.phone = ''
      this.search()
    },
    search () {
      this.getUserList()
    },
    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)
      })
    },
    getOfficeList (officeType) {
      selectOfficeTypeParentList({ officeType: officeType }).then((res) => {
        if (res.data.errcode === 0) {
          this.officeList = 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.getUserList()
    },
    getUserList () {
      // 处理条件
      let condition = {}
      if (this.user_name !== '') {
        condition.user_name = this.user_name
      }
      if (this.office_name !== '') {
        condition.office_name = this.office_name
      }
      if (this.phone !== '') {
        condition.phone = this.phone
      }
      selectUserCompanyList({ id: this.pageParams.id, ...this.params, ...condition }).then(
        (res) => {
          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)
        }
      )
    },
    changeJj () {
      // 选择机构
      this.getOfficeList(this.formData.officeType)
    },
    save () {
      this.$refs['formValidate'].validate((valid) => {
        if (valid) {
          if (testid(this.formData.cardno)) {
            let url = this.what === 'add' ? insertUser : updateUser
            if (this.user_level === '6') {
              this.formData.id = this.$store.state.user.severUserInfo.company_id
              this.formData.officeType = '2'
            } else {
              this.formData.id = this.pageParams.id
              this.formData.officeType = '2'
            }
            url(this.formData).then((res) => {
              if (res.data.errcode === 0) {
                this.$Message.success('操作成功')
                this.goToFirstTab()
                return
              }
              this.$Message.error(res.data.errmsg)
            })
          } else {
            this.$Message.error('身份证校验不合规')
          }
        } else {
          console.log('表单校验失败')
          return false
        }
      })
    },
    goToFirstTab () {
      this.$refs.tabs.activeKey = '1' // 假设Tabs组件的ref设置为tabs
      this.getUserList()
    },
    editUser (item) {
      this.$refs.tabs.activeKey = '2'
      this.what = 'edit'
      selectUserCompanyList({ user_id: item.id }).then((res) => {
        if (res.data.errcode === 0) {
          this.formData = res.data.data.results[0]
          return
        }
        this.$Message.error(res.data.errmsg)
      })
    },
    deleteUser (item) {
      if (confirm('确定删除该用户吗')) {
        updateUser({ id: item.id, del_flag: '1' }).then((res) => {
          if (res.data.errcode === 0) {
            this.$Message.success('删除成功')
            this.getUserList()
            return
          }
          this.$Message.error(res.data.errmsg)
        })
      }
    },
    changeTab (name) {
      this.what = 'add'
      if (name === '2' && this.what === 'add') {
        this.formData = {}
      }
    }
  }
}
</script>
<style scoped lang="less">
.role-div {
}
.flex-div {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
.mr5 {
  margin-right: 5px;
}
.page_style {
  margin-top: 10px;
  text-align: right;
}
</style>
