<template>
<div>
    <Row type="flex" justify="center" align="middle">
        <Col span="20">
            <Form ref="searchForm" :model="searchData" inline>
                <Form-item>
                    <Input type="text" style="width:250px" v-model="searchData.userName" placeholder="用户名">
                    </Input>
                </Form-item>
                <Form-item>
                        <Select v-model="searchData.isactive" style="width:200px" placeholder="全部">
                        <Option value="0">{{ $t('isactive_0') }}</Option>
                        <Option value="1">{{ $t('isactive_1') }}</Option>
                    </Select>
                </Form-item>
                <Form-item>
                    <Button type="primary" size="small" @click="search">搜索</Button>
                    &nbsp;&nbsp;
                    <Button type="text" size="small" @click="addwebusershow">新增</Button>
                </Form-item>
            </Form>
        </Col>
        <Col span="20">
            <Table :columns="column" :data="list"></Table>
            <Page :total="pagedata.total" size="small" :current="pagedata.current" :page-size="pagedata.pageSize" :page-size-opts="pagedata.pageSizeOpts"
                @on-change="pageChange" @on-page-size-change="sizeChange"
            show-elevator show-sizer></Page>
        </Col>
    </Row>
    <Modal v-model="addwebuser" title="用户编辑">
        <Form ref="webuserForm" :model="webuser" :rules="formRule" :label-width="100">
          <Form-item label="用户名"  prop="name" v-if="!updatewebuser">
              <Input type="text" v-model="webuser.name">
              </Input>
          </Form-item>
          <Form-item label="邮箱"  prop="email">
              <Input type="text" v-model="webuser.email">
              </Input>
          </Form-item>
          <Form-item label="密码"  prop="password" v-if="!updatewebuser">
              <Input type="text" v-model="webuser.password">
              </Input>
          </Form-item>
        </Form>
        <div slot="footer">
            <Button type="primary" @click="savewebuser">保存</Button>
        </div>
    </Modal>
</div>
</template>
<script>
import { listwebuser, editwebuser, updatewebuseractive } from '@/api/user'
export default {
  name: 'webuserlist',
  data () {
    var self = this
    return {
      updatewebuser: false,
      addwebuser: false,
      webuser: {
        id: 0,
        name: '',
        password: '',
        userid: this.$store.state.user.userId,
        email: ''
      },
      formRule: {
        name: [
          { type: 'string', required: true, message: '用户名必填', trigger: 'blur' }
        ],
        email: [
          { type: 'string', pattern: /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/, message: '邮箱格式错误', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '密码必填', trigger: 'blur' },
          { type: 'string', min: 6, message: '至少六位数', trigger: 'blur' }
        ]
      },
      searchData: {
        userName: '',
        isactive: ''
      },
      list: [],
      column: [
        {
          title: 'ID',
          key: 'id',
          width: 80
        },
        {
          title: '用户名',
          key: 'user_name'
        },
        {
          title: '用户组',
          key: 'access_name',
          render: function (h, params) {
            const access = params.row.setting.access
            const access_name = params.row.setting.access_name
            let label = ''
            if (access) {
              label = access + ':' + access_name
            }
            var div = h('div', {}, label)
            return div
          }
        },
        {
          title: '邮箱',
          key: 'email'
        },
        {
          title: '状态',
          key: 'isactive',
          render: function (h, params) {
            const usestr = self.$t('isactive_' + params.row.isactive)
            var div = h('div', {}, usestr)
            return div
          }
        },
        {
          title: '操作',
          key: 'option',
          align: 'center',
          width: 250,
          render: function (h, params) {
            var btn1 = h('Button', {
              props: {
                type: 'primary',
                size: 'small'
              },
              on: {
                click: (data) => {
                  const usedata = { id: params.row.id, isactive: 1 }
                  self.updatewebuseractive(usedata)
                }
              }
            }, '启用')
            var btn2 = h('Button', {
              props: {
                type: 'text',
                size: 'small'
              },
              on: {
                click: (data) => {
                  self.updatewebusershow(params.row)
                }
              }
            }, '修改')
            var btn3 = h('Button', {
              props: {
                type: 'warning',
                size: 'small'
              },
              on: {
                click: (data) => {
                  const usedata = { id: params.row.id, isactive: 0 }
                  self.updatewebuseractive(usedata)
                }
              }
            }, '禁用')
            var btn4 = h('Button', {
              props: {
                type: 'text',
                size: 'small'
              },
              on: {
                click: (data) => {
                  self.$router.push({ path: 'usersetting', query: { id: params.row.id } })
                }
              }
            }, '设置')
            var btns = []
            if (params.row.user_name !== 'admin') {
              btns.push(btn2)
              if (params.row.isactive === 1) {
                btns.push(btn4)
                btns.push(btn3)
              } else {
                btns.push(btn1)
              }
            }

            return btns
          }
        }
      ],
      pagedata: {
        total: 10,
        current: 1,
        pageSize: 10,
        pageSizeOpts: [10, 50, 100]
      }
    }
  },
  methods: {
    search () {
      this.pagedata.current = 1
      this.getList()
    },
    getList () {
      this.searchData.page = this.pagedata.current
      this.searchData.size = this.pagedata.pageSize
      listwebuser(this.searchData).then(res => {
        const data = res.data
        if (data.code !== 200) {
          this.$Message.error(data.msg)
          this.list = []
          this.pagedata.total = 0
          this.pagedata.current = 1
        } else {
          const usedata = data.data
          this.pagedata.total = usedata.count
          this.list = usedata.list
        }
      })
    },
    pageChange (current) {
      this.pagedata.current = current
      this.getList()
    },
    sizeChange (pageSize) {
      this.pagedata.pageSize = pageSize
      this.pagedata.current = 1
      this.getList()
    },
    addwebusershow () {
      this.addwebuser = true
    },
    savewebuser () {
      editwebuser(this.webuser).then(res => {
        const data = res.data
        if (data.code !== 200) {
          this.$Message.error(data.msg)
        } else {
          this.$Message.success('操作成功')
          this.getList()
          this.addwebuser = false
          this.updatewebuser = false
        }
      })
    },
    updatewebusershow (data) {
      this.updatewebuser = true
      this.addwebuser = true
      const webuserdata = data
      this.webuser.id = webuserdata.id
      this.webuser.email = webuserdata.email
    },
    updatewebuseractive (data) {
      const id = data.id
      const isactive = data.isactive
      updatewebuseractive({ id, isactive }).then(res => {
        const data = res.data
        if (data.code === 200) {
          this.$Message.success('操作成功')
          this.getList()
        } else {
          this.$Message.error(data.msg)
        }
      })
    }
  },
  mounted () {
    this.getList()
  }
}
</script>
