<style>
.signimg{
    width: 100px;
}
</style>
<template>
    <div>
        <Row type="flex" justify="center" align="middle">
            <Col span="24">
                <Form ref="searchForm" :model="searchData" inline>
                    <Form-item prop="code">
                        <Input type="text" style="width:250px" v-model="searchData.wname" placeholder="姓名">
                        </Input>
                    </Form-item>
                    <Form-item prop="telno">
                        <Input type="text" style="width:250px" v-model="searchData.telno" placeholder="手机号">
                        </Input>
                    </Form-item>
                    <Form-item prop="telno">
                        <Input type="text" style="width:250px" v-model="searchData.sfzid" placeholder="身份证">
                        </Input>
                    </Form-item>
                     <Form-item prop="isactive">
                         <Select v-model="searchData.isactive" style="width:200px" placeholder="会员状态">
                           <Option value="">全部</Option>
                            <Option value="0">{{ $t('isactive_0') }}</Option>
                            <Option value="1">{{ $t('isactive_1') }}</Option>
                        </Select>
                    </Form-item>
                    <Form-item prop="isright">
                         <Select v-model="searchData.isright" style="width:200px" placeholder="发布状态">
                           <Option value="">全部</Option>
                            <Option value="0">{{ $t('isright_0') }}</Option>
                            <Option value="1">{{ $t('isright_1') }}</Option>
                        </Select>
                    </Form-item>
                    <Form-item>
                        <Button type="primary" @click="search">搜索</Button>
                    </Form-item>
                </Form>
            </Col>
            <Col span="24">
                <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 show-total></Page>
            </Col>
        </Row>
        <Modal v-model="showdisableModel" width="360" title="用户禁用">
            <Form ref="disableForm" :model="updateisrightData">
                 <Form-item label="用户名">
                    {{ updateisrightData.wname }}
                </Form-item>
                <Form-item label="禁用原因">
                    <Input v-model="updateisrightData.node" type="textarea" :rows="4" placeholder="禁用原因"></Input>
                </Form-item>
            </Form>
            <div slot="footer">
                <Button type="error" size="large" @click="disableuser">提交</Button>
                <Button type="primary" size="large" @click="closemodel">关闭</Button>
            </div>
        </Modal>
        <Modal v-model="showduserinfoModel" title="用户信息" width="500">
            <Row type="flex" :gutter="10">
                <Col span="3">姓名</Col>
                <Col span="5">{{userinfo.wname}}</Col>
                <Col span="3">会员状态</Col>
                <Col span="5">{{$t("isactive_"+userinfo.isactive)}}</Col>
                <Col span="3">发布状态</Col>
                <Col span="5">{{$t("isright_"+userinfo.isright)}}</Col>

                <Col span="3">性别</Col>
                <Col span="5">{{userinfo.gender}}</Col>
                <Col span="3">年龄</Col>
                <Col span="5">{{userinfo.wage}}</Col>
                <Col span="3">昵称</Col>
                <Col span="5">{{userinfo.nickname}}</Col>

                <Col span="4">民族</Col>
                <Col span="20">{{userinfo.nation}}</Col>

                <Col span="4">openid</Col>
                <Col span="20">{{userinfo.openid}}</Col>

                <Col span="4">unionid</Col>
                <Col span="20">{{userinfo.unionid}}</Col>

                <Col span="3">电话号码</Col>
                <Col span="9">{{userinfo.telno}}</Col>
                <Col span="3">身份证号</Col>
                <Col span="9">{{userinfo.sfzid}}</Col>

                <Col span="5">身份证截止日期</Col>
                <Col span="7">{{userinfo.sfzenddate}}</Col>
                <Col span="3">创建时间</Col>
                <Col span="9">{{userinfo.createtime}}</Col>

                <Col span="3">企业名称</Col>
                <Col span="9">{{userinfo.enterprisename}}</Col>
                <Col span="3">来源平台</Col>
                <Col span="9">{{userinfo.platform}}</Col>

                <Col span="2">地址</Col>
                <Col span="22">{{userinfo.city}}{{userinfo.disc}}{{userinfo.address}}</Col>

                <Col span="2">签名</Col>
                <Col span="22"><img :src="userinfo.signurl" alt="" class="signimg"></Col>
            </Row>
        </Modal>
    </div>
</template>
<script>
import { getuserlist, updateuserisright } from '@/api/user'
export default {
  name: 'userlist',
  data () {
    var self = this
    return {
      wehuserid: this.$store.state.user.userId,
      showdisableModel: false,
      showduserinfoModel: false,
      userinfo: {},
      list: [],
      column: [
        {
          title: 'ID',
          key: 'id',
          width: 70
        },
        {
          title: '姓名',
          key: 'wname',
          width: 100
        },
        {
          title: '手机号',
          key: 'telno',
          width: 120
        },
        {
          title: '身份证',
          key: 'sfzid',
          width: 170
        },
        {
          title: '微信数据',
          key: 'openid',
          render: function (h, params) {
            var openid = ''
            var unionid = ''
            if (params.row.openid !== null) {
              openid = params.row.openid
            }
            if (params.row.unionid !== null) {
              unionid = params.row.unionid
            }
            const usestr = `openid: ${openid}<br/>unionid:${unionid}`
            var div = h('span', {
              domProps: {
                innerHTML: usestr
              }
            })
            return div
          }
        },
        {
          title: '企业名称',
          key: 'enterprisename',
          width: 200
        },
        {
          title: '状态',
          key: 'isactive',
          width: 80,
          render: function (h, params) {
            const usestr = self.$t('isactive_' + params.row.isactive)
            var div = h('div', {}, usestr)
            return div
          }
        },
        {
          title: '发布状态',
          key: 'isright',
          width: 200,
          render: function (h, params) {
            const usestr = self.$t('isright_' + params.row.isright)
            var div = h('span', {}, usestr)
            var btn3 = h('Button', {
              props: {
                type: 'warning',
                size: 'small'
              },
              on: {
                click: (data) => {
                  self.showdisableModel = true
                  self.updateisrightData.userid = params.row.id
                  self.updateisrightData.wname = params.row.wname
                }
              }
            }, '禁用')
            var btn4 = h('Button', {
              props: {
                type: 'primary',
                size: 'small'
              },
              on: {
                click: (data) => {
                  self.updateisrightData.userid = params.row.id
                  self.ableuser()
                }
              }
            }, '启用')
            var btns = []
            btns.push(div)
            if (params.row.isright === 1) {
              btns.push(btn3)
            } else {
              btns.push(btn4)
            }
            return btns
          }
        },
        {
          title: '操作',
          key: 'option',
          align: 'left',
          width: 150,
          render: function (h, params) {
            var btn1 = h('Button', {
              props: {
                type: 'text',
                size: 'small'
              },
              on: {
                click: (data) => {
                  self.userinfo = params.row
                  self.showduserinfoModel = true
                }
              }
            }, '查看')
            var btns = []
            btns.push(btn1)
            if (params.row.isactive === 1) {

            } else if (params.row.isactive === 0) {

            }
            return btns
          }
        }
      ],
      searchData: {
        wname: '',
        telno: '',
        sfzid: '',
        isactive: '',
        isright: ''
      },
      pagedata: {
        total: 10,
        current: 1,
        pageSize: 10,
        pageSizeOpts: [10, 50, 100]
      },
      updateisrightData: {
        userid: 0,
        wname: '',
        node: ''
      }
    }
  },
  methods: {
    search () {
      this.pagedata.current = 1
      this.getList()
    },
    getList () {
      this.searchData.page = this.pagedata.current
      this.searchData.size = this.pagedata.pageSize
      getuserlist(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()
    },
    closemodel () {
      this.showdisableModel = false
    },
    disableuser () {
      this.updateisrightData.isright = 0
      this.updateisrightData.wuid = this.wehuserid
      this.updateisrightData.type = 2
      updateuserisright(this.updateisrightData).then(res => {
        const data = res.data
        if (data.code === 200) {
          this.$Message.success('操作成功')
          this.resetupdateisrightData()
          this.showdisableModel = false
          this.getList()
        } else {
          this.$Message.error(data.msg)
        }
      })
    },
    ableuser () {
      this.updateisrightData.isright = 1
      this.updateisrightData.wuid = this.wehuserid
      this.updateisrightData.type = 3
      this.updateisrightData.node = '启用'
      updateuserisright(this.updateisrightData).then(res => {
        const data = res.data
        if (data.code === 200) {
          this.$Message.success('操作成功')
          this.resetupdateisrightData()
          this.getList()
        } else {
          this.$Message.error(data.msg)
        }
      })
    },
    resetupdateisrightData () {
      this.updateisrightData.isright = ''
      this.updateisrightData.wuid = this.wehuserid
      this.updateisrightData.type = ''
      this.updateisrightData.wname = ''
      this.updateisrightData.node = ''
    }
  },
  mounted () {
    this.getList()
  }

}
</script>
