<template>
  <page-header-wrapper>
    <div @click="Tablevisible=false;ScreenVisible=false" class="tableClass">
      <!-- 头部搜索 -->
      <div class="table" style="position: relative;">
        <a-form>
          <a-row :gutter="24">
            <a-col :md="12" :lg="4" :xs="12" class="mb-15">
              <a-input placeholder="请输入设备序列号" v-model="queryParam.BusinessId"></a-input>
            </a-col>
            <a-col :md="12" :lg="4" :xs="12" class="mb-15">
              <a-input placeholder="请选择渠道" v-model="queryParam.BusinessName" @click.stop="Tablevisible=!Tablevisible" />
            </a-col>
            <a-col :md="12" :lg="4" :xs="12" class="mb-15">
              <a-input placeholder="请输入昵称" v-model="queryParam.TelPhone" />
            </a-col>
            <a-col :md="12" :lg="4" :xs="12" class="mb-15">
              <a-select v-model="sex" @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" :lg="6" class="mb-15">
              <a-button type="primary" html-type="submit" @click.stop="ScreenVisible=!ScreenVisible">高级搜索</a-button>
              <a-button type="primary" class="ml-15" html-type="submit" @click="handleSubmit">查询</a-button>
            </a-col>
          </a-row>
        </a-form>
        <!-- 选择渠道 -->
        <create-table ref="createTable" v-show="Tablevisible" @ok="handleTableOk" @click.stop="Tablevisible=true" />
        <!-- 高级搜索 -->
       <a-col :xl="{span:24,offset:9}" :xs="{span:24,offset:0}">
        <div class="Screen" v-show="ScreenVisible" @click.stop="ScreenVisible=true">
          <a-form layout="inline" :form="form" @submit="handleSearch">
            <a-row :gutter="24" class="mt-15">
              <a-col :md="12" :lg="8" :xs="12">
                <a-form-item label="身高">
                  <a-input placeholder="placeholder"  />
                </a-form-item>
              </a-col>
              <a-col :md="12" :lg="8" :xs="12">
                <a-form-item label="体脂率">
                  <a-input class="inputL" placeholder="最小值" />
                  <a-input class="inputC" placeholder="~" disabled />
                  <a-input class="inputR" placeholder="最大值" />
                </a-form-item>
              </a-col>
              <a-col :md="12" :lg="8" :xs="12">
                <a-form-item label="年龄">
                  <a-input placeholder="placeholder" />
                </a-form-item>
              </a-col>
              <a-col :md="12" :lg="8" :xs="12">
                <a-form-item label="体重">
                  <a-input placeholder="placeholder" />
                </a-form-item>
              </a-col>
              <a-col :md="12" :lg="8" :xs="12">
                <a-form-item label="肌肉量">
                  <a-input class="inputL" placeholder="最小值" />
                  <a-input class="inputC" placeholder="~" disabled />
                  <a-input class="inputR" placeholder="最大值" />
                </a-form-item>
              </a-col>
              <a-col :md="12" :lg="8" :xs="12">
                <a-form-item label="BMI">
                  <a-input class="inputL" placeholder="最小值" />
                  <a-input class="inputC" placeholder="~" disabled />
                  <a-input class="inputR" placeholder="最大值" />
                </a-form-item>
              </a-col>
              <a-col :md="12" :lg="8" :xs="12">
                <a-form-item label="骨重">
                  <a-input class="inputL" placeholder="最小值" />
                  <a-input class="inputC" placeholder="~" disabled />
                  <a-input class="inputR" placeholder="最大值" />
                </a-form-item>
              </a-col>
              <a-col :md="12" :lg="8" :xs="12">
                <a-form-item label="脂肪率">
                  <a-input class="inputL" placeholder="最小值" />
                  <a-input class="inputC" placeholder="~" disabled />
                  <a-input class="inputR" placeholder="最大值" />
                </a-form-item>
              </a-col>
              <a-col :md="12" :lg="8" :xs="12">
                <a-form-item label="水分">
                  <a-input class="inputL" placeholder="最小值" />
                  <a-input class="inputC" placeholder="~" disabled />
                  <a-input class="inputR" placeholder="最大值" />
                </a-form-item>
              </a-col>
              <!-- <a-col :span="9">
                <a-form-item label="基础代谢">
                  <a-input class="inputL" placeholder="最小值" />
                  <a-input class="inputC" placeholder="~" disabled />
                  <a-input class="inputR" placeholder="最大值" />
                </a-form-item>
              </a-col> -->
            </a-row>
            <a-row class="mt-15 mb-15">
              <a-col :span="24" :style="{ textAlign: 'right' }">
                <a-button type="primary" html-type="submit">
                  搜索
                </a-button>
                <a-button class="ml-15 " @click.stop="ScreenVisible=false">
                  取消
                </a-button>
                <a class="mr-15 ml-15 " @click="toggle">
                  展开 <a-icon :type="expand ? 'up' : 'down'" />
                </a>
              </a-col>
            </a-row>
          </a-form>
        </div>
        </a-col>
      </div>
      <!-- 表格 -->
      <a-table bordered :columns="columns" :data-source="dataLise" :scroll="{ x: 1500,}">
        <a slot="name" slot-scope="name"> {{ name }}</a>
        <span slot="sex" slot-scope="text">{{ text==0?'其他':text==1?'男':'女' }}</span>
        <span slot="agent" slot-scope="text">{{ text==1?'安卓':'苹果' }}</span>
      </a-table>
    </div>
  </page-header-wrapper>
</template>

<script>
  const columns = [{
      title: '渠道',
      key: 'RealName',
      width: 120,
      dataIndex: 'RealName',
      fixed: 'left'
    },
    {
      title: '昵称',
      key: 'equname',
      width: 120,
      dataIndex: 'equname',
    },
    {
      title: '设备',
      key: 'businessid',
      width: 180,
      dataIndex: 'businessid',
    },
    {
      title: '性别',
      dataIndex: 'sex',
      key: 'sex',
      width: 100,
      scopedSlots: {
        customRender: 'sex'
      },
    },
    {
      title: '年龄',
      key: 'age',
      width: 100,
      dataIndex: 'age',
    },
    {
      title: '终端',
      key: 'agent',
      width: 100,
      dataIndex: 'agent',
    },
    {
      title: '身高',
      key: 'height',
      width: 100,
      dataIndex: 'height',
    },
    {
      title: '体重',
      key: 'weight',
      width: 100,
      dataIndex: 'weight',
    },
    {
      title: 'BMI',
      key: 'bmi',
      width: 100,
      dataIndex: 'bmi',
    },
    {
      title: '体脂率',
      key: 'fat_r',
      width: 100,
      dataIndex: 'fat_r',
    },
    {
      title: '肌肉率',
      key: 'muscle',
      width: 100,
      dataIndex: 'muscle',
    },
    {
      title: '脂肪量',
      key: 'fat_w',
      width: 100,
      dataIndex: 'fat_w',
    },
    {
      title: '骨重',
      key: 'bone',
      width: 100,
      dataIndex: 'bone',
    },
    {
      title: '基础代谢',
      key: 'kcal',
      width: 100,
      dataIndex: 'kcal',
    },
    {
      title: '水分',
      key: 'water',
      width: 100,
      dataIndex: 'water',
    },
    {
      title: '内脏指数',
      key: 'visceral',
      width: 100,
      dataIndex: 'visceral',
    },
    {
      title: '蛋白率',
      key: 'protein',
      width: 100,
      dataIndex: 'protein',
    },
    {
      title: '肌肉量',
      key: 'muscleval',
      width: 100,
      dataIndex: 'muscleval',
    },
    {
      title: '皮下脂肪',
      key: 'sfr',
      width: 100,
      dataIndex: 'sfr',
    },
    {
      title: '蛋白量',
      key: 'proteinval',
      width: 100,
      dataIndex: 'proteinval',
    },
    {
      title: '去脂体重',
      key: 'lbm',
      width: 100,
      dataIndex: 'lbm',
    },
    {
      title: '标准体重',
      key: 'standardweight',
      width: 100,
      dataIndex: 'standardweight',
    },
    {
      title: '体龄',
      key: 'bodyage',
      width: 100,
      dataIndex: 'bodyage',
    },
    {
      title: '肥胖等级',
      key: 'fat',
      width: 100,
      dataIndex: 'fat',
    },
    {
      title: '体型',
      key: 'body',
      width: 100,
      dataIndex: 'fat_r',
    },
    {
      title: '测量时间',
      key: 'createtime',
      width: 180,
      dataIndex: 'createtime',
      fixed: 'right'
    },
  ]



  import CreateTable from '../components/CreateTable'
  import data from '@/static/data.json'
  export default {
    components: {
      CreateTable,
    },
    data() {
      return {
        dataLise: [],
        columns,
        content: 8,
        selectedRowKeys: [],
        loading: false,
        userClick: true,
        sex: '请选择性别',
        Status: '全部',
        // 查询参数
        queryParam: {
          BusinessId: '',
          Type: 0,
          Status: 0,
        },
        ScreenVisible:false,
        Tablevisible: false,
        Servicevisible: false,
        // 高级搜索
        expand: false,
        form: this.$form.createForm(this, { name: 'advanced_search' }),
      }
    },
    computed: {
      hasSelected() {
        return this.selectedRowKeys.length > 0
      },
      count() {
        return this.expand ? 18 : 7
      },
    },
    mounted() {
      console.log(this.$route.query.id)
      const that = this
      if (this.$route.query.id) {
        const id = this.$route.query.id
        var arr = []
        data.data.forEach(item => {
          if (item.id == id) {
            arr.push(item)
          }
        })
        this.dataLise = arr
      } else {
        this.dataLise = data.data
      }
    },
    methods: {
      //搜索
      handleSearch(e) {
        e.preventDefault()
        this.form.validateFields((error, values) => {
          console.log('error', error)
          console.log('Received values of form: ', values)
        })
      },
  
      handleReset() {
        this.form.resetFields()
      },
  
      toggle() {
        this.expand = !this.expand
      },
      handleSubmit() {
        console.log(this.queryParam)
      },
      //选择渠道
      handleTableOk(item) {
        this.Tablevisible = false
        console.log(item)
      },
      //数据筛选
      // handleTableOk(){
        
      // },
      //
      handleChangeStatus(value) {
        console.log(`selected ${value}`)
        this.queryParam.Status = value
      },
      handleChangeSex(value) {
        console.log(`selected ${value}`)
        this.queryParam.sex = value
      }
    },
  }
</script>
<style lang="less" scoped="scoped">
  .tableClass {
    padding: 20px;
  }
  // 高级搜索
  .Screen{
    min-width: 600px;
    max-width: 850px;
    position: absolute;
    background: #fbfbfb;
    border: 1px solid #d9d9d9;
    z-index: 9999;
    // left: 36%;
    // top: 38px;
    padding: 10px auto;
    overflow: hidden;
    padding-left: 20px;
  }
  .inputL{
    margin-left: 3px;
  }
  .inputL,.inputR{
    width: 73px !important;
  }
  .inputC{
    width: 29px;
    text-align: center;
    padding: 4px 0;
  }
  .ant-col-8{
    text-align: center;
    // margin-right: -12px !important;
  }
</style>
