<template>
  <page-header-wrapper>
    <a-card :bordered="false" class="tableClass">
      <a-alert
            message="设备名称 : 小白秤123"
            description=""
            type="info"
            show-icon
            class="mb-25"
          />
    <a-table 
      ref="table" 
      bordered 
      :columns="columns" 
      :data-source="data"
      :scroll="{ x: 1200,}"
    >
      <span slot="sex" slot-scope="text">{{ text==0?'其他':text==1?'男':'女' }}</span>
      <a slot="tagname" slot-scope="text,record">
        <a-tooltip placement="bottomRight">
          <template slot="title">
            <div class="img"><img :src="record.headimgurl" /></div>
          </template>
          {{ text }}
        </a-tooltip>
      </a>
      <a slot="bindcount" slot-scope="text">
        <a-popover placement="bottom">
          <template slot="content">
             <template v-for="(tag, index) in tags">
              <a-tooltip v-if="tag.length > 20" :key="tag" :title="tag">
                <a-tag :key="tag" :closable="index !== 0" >
                  {{ `${tag.slice(0, 20)}...` }}
                </a-tag>
              </a-tooltip>
              <a-tag v-else :key="tag"  >
                {{ tag }}
              </a-tag>
             </template>
                  <a-input
                    v-if="inputVisible"
                    ref="input"
                    type="text"
                    size="small"
                    :style="{ width: '78px' }"
                    :value="inputValue"
                    @change="handleInputChange"
                    @blur="handleInputConfirm"
                    @keyup.enter="handleInputConfirm"
                  />
                  <a-tag v-else style="background: #fff borderStyle: dashed" @click="showInput">
                    <a-icon type="plus" />添加
                  </a-tag>
                </template>
                <a>
                 {{ text }}
                 </a>
              </a-popover>
       <!-- <a-tooltip placement="bottomRight">
          <template slot="title">
            <span>查看绑定情况</span>
          </template>
         <a @click="handleLock(record)">
             {{ text }}
          </a>
        </a-tooltip> -->
      </a>
      <a slot="RealName" 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="handleCancel(record)" class="mr-15">解绑</a>
         <a @click="handleResult(record.id)">测量记录</a>
        </template>
      </span>
    </a-table>
    </a-card>
  </page-header-wrapper>
</template>

<script>
  const columns = [{
  		title: '昵称',
  		dataIndex: 'RealName',
  		width: 120,
      scopedSlots: {
        customRender: 'RealName'
      },
  	},
  	{
  		title: '公众号',
  		dataIndex: 'PublicName',
      ellipsis: true,
  	},
  	{
  		title: '标签',
  		dataIndex: 'bindcount',
  		ellipsis: true,
      scopedSlots: {
        customRender: 'bindcount'
      },
  	},
  	{
  		title: '性别',
  		dataIndex: 'sex',
  		ellipsis: true,
      scopedSlots: {
        customRender: 'sex'
      },
  	},
  	{
  		title: '年龄',
  		dataIndex: 'age',
  		ellipsis: true,
  	},
  	{
  		title: 'BMI',
  		dataIndex: 'bmi',
  		ellipsis: true,
  	},
  	{
  		title: '身高',
  		dataIndex: 'height',
  		ellipsis: true,
  	},
    {
    	title: '体重',
    	dataIndex: 'weight',
    	ellipsis: true,
    },
    {
    	title: '身份',
    	dataIndex: 'rolename',
    	ellipsis: true,
    },
  	{
  		title: '绑定时间',
  		dataIndex: 'subscribe_time',
      width:180,
  	},
  	{
  		title: '操作',
  		key: 'action',
      width:150,
  		scopedSlots: {
  			customRender: 'action'
  		},
  	},
  ]
  import data from '@/static/data.json'
  export default {
    data() {
      return {
        data:[],
        columns,
        tags: ['Unremovable', 'Tag 2', 'Tag 3'],
       inputVisible: false,
       inputValue: '',
        // loadData: parameter => {
        //   const requestParameters = Object.assign({}, parameter, this.queryParam)
        //   console.log('loadData request parameters:', requestParameters)
        //   return getServiceList(requestParameters)
        //     .then(res => {
        //       return res.result
        //     })
        // },
      }
    },
    created() {
      this.data=data.data
    },
    methods: {
      //暂停
      handleCancel(record){
        this.$confirm({
          title:'提示',
          content: '确定解绑？',
          okText: '确定',
          okType: 'danger',
          cancelText: '取消',
          onOk() {
            console.log('OK')
          },
          onCancel() {
            console.log('Cancel')
          },
        })
      },
     handleClose(removedTag) {
          const tags = this.tags.filter(tag => tag !== removedTag)
          console.log(tags)
          this.tags = tags
        },
    
        showInput() {
          this.inputVisible = true
          this.$nextTick(function() {
            this.$refs.input.focus()
          })
        },
    
        handleInputChange(e) {
          this.inputValue = e.target.value
        },
        handleResult(id){
          console.log(id)
          this.$router.push('/device/result?id='+id)
        },
        handleInputConfirm() {
          const inputValue = this.inputValue
          let tags = this.tags
          if (inputValue && tags.indexOf(inputValue) === -1) {
            tags = [...tags, inputValue]
          }
          console.log(tags)
          Object.assign(this, {
            tags,
            inputVisible: false,
            inputValue: '',
          })
        },
    }
  }
</script>
<style scoped="scoped" lang="less">
.ant-popover-inner,
.ant-popover-placement-bottom,
.ant-popover-content,
.ant-popover-inner-content{
  width: 200px !important;
  height: 150px !important;
}
.ant-tag{
  margin-top: 10px !important;
  padding: 0 10px !important;
}
</style>
