<template>
  <page-header-wrapper>
    <div class="tableClass">
      <!-- 头部搜索 -->
      <div class="table-page-search-wrapper ">
        <a-form layout="inline">
          <a-row :gutter="24">
            <a-col :md="12" :xs="12" :xl="4" class="mb-15">
                <a-input placeholder="请输入昵称" v-model="queryParam.BusinessId"></a-input>
            </a-col>
            <a-col :md="12" :xs="12" :xl="4" class="mb-15" >
                <a-input placeholder="请选择设备" v-model="queryParam.BusinessName" />
            </a-col>
            <a-col :md="12" :xs="12" :xl="4" class="mb-15" >
                <a-input placeholder="请输入手机号" v-model="queryParam.TelPhone" />
            </a-col>
            <a-col :md="12" :xs="12" :xl="4" class="mb-15">
                <a-select  v-model="Status" @change="handleChangeSex">
                  <a-select-option value="0">未知</a-select-option>
                  <a-select-option value="1">男</a-select-option>
                  <a-select-option value="2">女</a-select-option>
                </a-select>
            </a-col>
            <a-col :md="12" :xs="12" :xl="4" class="mb-15">
                <a-select v-decorator="['note',{ rules: [{ required: true, message: '必填项' }] }]" placeholder="请选则标签" @change="handleChangeTag">
                  <a-select-option v-for="i in tagList" :key="i.key">
                    {{ i.name }}
                  </a-select-option>
                </a-select>
            </a-col>
            <a-col :md="2" :xs="12" class="mb-15 ">
              <a-button type="primary" html-type="submit" @click="handleSubmit">查询</a-button>
            </a-col>
          </a-row>
        </a-form>
      </div>
      <!-- 表格 -->
      <a-table
        bordered 
        :columns="columns" 
        :data-source="loadData"
        :scroll="{ x: 1600,}"
       >
       <span slot="sex" slot-scope="text">{{ text==0?'其他':text==1?'男':'女' }}</span>
       <a slot="nickname" slot-scope="text,record">
         <a-tooltip placement="bottomRight">
           <template slot="title">
             <div class="img"><img :src="record.headimgurl" /></div>
           </template>
           {{ text }}
         </a-tooltip>
       </a>
       <span slot="action" slot-scope="text, record">
         <template>
         <a @click="handleList(record)" class="mr-15">测量记录</a>
         <a @click="handleTag(record)">标签</a>
         </template>
       </span>
      </a-table>
      <!-- 标签 -->
      <create-tag
        ref="createModal"
        :visible="visible"
        :loading="confirmLoading"
        :model="mdl"
        @cancel="handleCancel"
        @ok="handleOk"
      /> 
      
    </div>
  </page-header-wrapper>

</template>

<script>
	const columns = [{
			title: '昵称',
			dataIndex: 'nickname',
	    key: 'nickname',
			width: 140,
      ellipsis: true,
      scopedSlots: {
      	customRender: 'nickname'
      },
		},
		{
			title: '手机号',
			dataIndex: 'TelPhone',
	    key: 'TelPhone',
		},
		{
			title: '公众号',
			dataIndex: 'PublicName',
		  key: 'PublicName',
     	ellipsis: true,
		},
		{
			title: '设备',
			dataIndex: 'equname',
	    key: 'equname',
      	ellipsis: true,
		},
		{
			title: '标签',
			dataIndex: 'tagname',
	    key: 'tagname',
      	ellipsis: true,
		},
		{
			title: '性别',
			dataIndex: 'sex',
	    key: 'sex',
      scopedSlots: {
      	customRender: 'sex'
      },
		},
		{
			title: '年龄',
			dataIndex: 'age',
		 key: 'age',
		},
		{
			title: '身高',
			dataIndex: 'height',
		 key: 'height',
		},
		{
			title: '体重',
			dataIndex: 'weight',
		 key: 'weight',
		},
		{
			title: 'BMI',
			dataIndex: 'bmi',
		 key: 'bmi',
		},
		{
			title: '身份',
			dataIndex: 'rolename',
		 key: 'rolename',
			ellipsis: true,
		},
		{
			title: '绑定时间',
			dataIndex: 'subscribe_time',
	    key: 'subscribe_time',
			ellipsis: true,
      width: 180,
		},
		{
			title: '操作',
			key: 'action',
      fixed: 'right',
			scopedSlots: {
				customRender: 'action'
			},
      width:140
		},
	]
  import CreateTag from './components/tag'
  import data from '@/static/data.json'
  import tag from '@/static/tag.json'
  export default {
    components: {
      CreateTag
    },
    data() {
      return {
        loadData:[],
        columns,
        tagList:[],
        content: 8,
        selectedRowKeys: [],
        loading: false,
        userClick: true,
        Type: '全部',
        Status: '请选择性别',
        // 查询参数
        queryParam: {
          BusinessId: '',
          Type: 0,
          Status: 0,
        },
        visible: false,
        confirmLoading: false,
        mdl: null,
        Tablevisible: false,
        Servicevisible: false,
        // loadData: parameter => {
        //   const requestParameters = Object.assign({}, parameter, this.queryParam)
        //   console.log('loadData request parameters:', requestParameters)
        //   return this.$http.POST('http://localhost:8080/static/data.json')
        //     .then(res => {
        //       console.log('res------------------》',res)
        //       // return res.data
        //     })
        // },
      }
    },
    computed: {
      hasSelected() {
        return this.selectedRowKeys.length > 0
      },
    },
    created() {
      this.loadData=data.data
      this.tagList= tag.data
    },
    methods: {
      //搜索
      handleSubmit() {
        console.log(this.queryParam)
      },
      // 记录
      handleList(){
        this.$router.push('/reguser/resultlist')
        this.Tablevisible=true
      },
      // 打标签
      handleTag() {
        this.visible = true
      },
      handleCancel() {
        console.log('取消')
        this.visible = false
        const form = this.$refs.createModal.form
        form.resetFields()
      },
      // 确定打标签
      handleOk() {
        const that = this
        const form = that.$refs.createModal.form
        that.confirmLoading = true
        form.validateFields((errors, values) => {
          if (!errors) {
            console.log('values', values)
            that.visible = false
            that.confirmLoading = false
            form.resetFields()
            that.$message.info('成功')
          } else {
            that.confirmLoading = false
          }
        })
      },
      //性别筛选
      handleChangeSex(value) {
        console.log(`selected ${value}`)
        this.queryParam.Sex = value
      },
      //性别筛选
      handleChangeTag(value) {
        console.log(`selected ${value}`)
        this.queryParam.Tag = value
      }

    },
  }
</script>
<style lang="less" scoped="scoped">
  /deep/.ant-tooltip-inner {
    width: 100px;
    height: 100px;
  }
  
  img {
    width: 100%;
    height: 100%;
  }
</style>
