<template>
  <ht-table
    @load="loadData"
    :data="data"
    :page-result="pageResult"
    ref="htTable"
    quick-search-props="account,name,mobile"
    :default-sorter="[{direction: 'DESC',property: 'name'}]"
    @select="select"
    :advance-reset="advanceReset"
    :rowStripe="false"
  >
    <template v-slot:toolbar>
      <el-button size="small" @click="changeShow">隐藏账号按钮</el-button>
      <el-button size="small">添加</el-button>
      <el-button size="small">删除</el-button>
      <el-button size="small" type="primary" @click="showSelect">显示所选数据</el-button>
      <el-button @click="testClick2">测试2</el-button>
    </template>
    <template v-slot:search>

      <el-button @click="testClick">测试</el-button>

      <ht-table-search-panel :divide="3" ref="htTableSearch">
        <ht-table-search-field  label="姓名" ref="ref_name" prop="name" defaultValue="myname" />
        <ht-table-search-field  label="账号" prop="account" operation="EQUAL" type="custom" ref="custom_account">
          <template v-slot:custom>
            <ht-select
                    v-model="test3"
                    :options="options.zy"
                    :remote-method="handleSelectOptions"
                    @change="change"
            />
          </template>
        </ht-table-search-field>
        <!--        <ht-table-search-field label="账号" prop="account" />-->
        <ht-table-search-field  label="邮箱" prop="email" />
        <ht-table-search-field  label="电话" prop="mobile" />
        <ht-table-search-field  label="日期" prop="mobile2" type="date" />
        <ht-table-search-field  label="日期期间" ref="ref_daterange" prop="mobile3"  type="daterange"  />
        <ht-table-search-field  label="月份期间" prop="mobile4" type="monthrange" />
        <ht-table-search-field
          label="状态1"
          ref="refStatus"
          prop="status1"
          type="select"
          :clearable="true"
          :multiple="false"
          :filterable="true"
          :changeFun="onChange"
          :defaultValue="0"
          :options="[{value:'男士', key:0},{value:'女士', key:1}]"
        />
        <ht-table-search-field :clearable="true"  :append-default="true" ref="mystatus" :props="{ key: 'k', value: 'v'}" label="状态2" prop="status" type="select" />

        <ht-table-search-field
          label="关联点位"
          prop="rsPointId"
          type="select"
          ref="rsPointIdRef"
          :clearable="true"
          :options="[{value:'是', key:'1'},{value:'否', key:'2'}]"
        />

        <template v-slot:custom>
          <el-button size="small" @click="dataExport" icon="el-icon-top">自定义按钮</el-button>
        </template>
      </ht-table-search-panel>
    </template>
    <template>
      <ht-table-column type="index" width="50" align="center" label="序号" />
      <ht-table-column
        prop="name"
        label="名称"
        width="300"
        :sortable="true"
        :show-overflow-tooltip="true"
      />
      <ht-table-column prop="account" label="账号" :sortable="true" />
      <ht-table-column prop="email" label="邮箱" hidden />
      <ht-table-column prop="mobile" label="电话" sortable :hidden="true" />
      <ht-table-column
        hidden
        prop="sex"
        label="性别"
        width="80"
        :filters="[{text:'男士', value:'0'},{text:'女士', value:'1'}]"
      >
        <template v-slot="{row}">
          <el-tag v-if="row.sex==0">男士</el-tag>
          <el-tag type="danger" v-if="row.sex==1">女士</el-tag>
        </template>
      </ht-table-column>
      <ht-table-column
        prop="status"
        label="状态"
        width="110"
        :filters="[{text:'正常', value:'0'},{text:'锁定', value:'1'},{text:'已删除', value:true}]"
      >
        <template v-slot="{row}">
          <el-tag v-if="row.status==0">正常</el-tag>
          <el-tag type="warning" v-if="row.status==1">锁定</el-tag>
          <el-tag type="danger" v-if="row.status==2">已删除</el-tag>
        </template>
      </ht-table-column>
      <ht-table-column label="操作" fixed="right">
        <template v-slot="{row}">
          <el-button type="text">编辑</el-button>
        </template>
      </ht-table-column>
    </template>
  </ht-table>
</template>
<script>
import user from '@/api/user.js'

export default {
  name: 'table-code',
  data() {
    return {
      myname: '默认姓名',
      show: true,
      mystatus: [],
      data: [],
      test3: '',
      pageResult: {
        page: 1,
        pageSize: 20,
        total: 0
      },
      options: {
        ah: [
          { key: '1', value: '爬山' },
          { key: '2', value: '游泳' },
          { key: '3', value: '美食' },
          { key: '4', value: '下棋' }
        ],
        xb: [
          { code: 0, desc: '男士', disabled: true },
          { code: true, desc: '女士' },
          { code: false, desc: '无性' }
        ],
        zy: null,
        zy2: [
          { key: '1', value: '医生' },
          { key: '2', value: '护士' },
          { key: '3', value: '老师' }
        ]
      }
    }
  },
  mounted() {

  },
  watch: {
    '$route.path'() {
      this.$refs.htTable.load()
      this.$refs.htTable.$refs.htTable.clearFilter()
      this.$refs.htTable.clearQueryByGroupName('filter')
    }
  },
  methods: {
    changeShow() {
      this.show = !this.show
      this.$refs.ref_name.changeShow(this.show)
    },
    dataExport() {
      console.log(111)
    },
    onChange(data, p2) {
      console.log('datadatadatadatadata')
      console.log(data)
      console.log(p2)
    },
    advanceReset(cb) {
      // do something..
      cb(false) // cb(cancelSearch) 为true取消查询，不填或者false会执行查询
    },
    testClick2() {
      this.$refs.ref_name.changeLabel('1111111')
      // this.$refs.rsPointIdRef.changeValue('1')
      // this.$refs.htTableSearch.doSearch(true)
      // this.$refs.htTable.load()
    },
    testClick() {
      // 不点搜索，直接获取当前查询参数。
      this.$refs.htTableSearch.doSearch(true)
      let params = this.$refs.htTable.getParams()
      console.log(params)
      // let time=new Date().getTime();
      // this.myStatus=[{v:time+"选项1", k:'0'},{v:time+"选项2", k:'1'}];
      // console.log("ok========================>"+this.myStatus.length);
      // let param=this.$refs.htTable.getParams();
      // console.log(param);
      // this.$refs.mystatus.changeOptions(this.myStatus);
      // this.$refs.ref_name.changeValue(time);
      // let defaultValue=[new Date("2021/03/01"),new Date("2021/03/24")]
      // this.$refs.ref_daterange.changeValue(defaultValue);

      // this.$refs.htTableSearch.search();

      // this.$refs.htTable.querys=[...]///

      // 条件区域----》htTable
      this.$refs.htTableSearch.doSearch(true, 'key1')
      this.$refs.htTable.load(true)

      // let param=this.$refs.htTable.getParams();
      // this.$refs.refStatus.changeValue("1");
    },
    change(data, selectObj) {
      console.log('data', data)
      console.log('selectObj', selectObj)
      // account
      this.$refs.custom_account.changeValue(data)
    },
    handleSelectOptions: function(query) {
      let _me = this
      return new Promise((resolve, reject) => {
        setTimeout(() => {
          _me.options.zy = _me.options.zy2
          console.log(1)
          resolve()
        }, 1000)
      })
    },
    loadData(param, cb) {
     // let myParam= param.invokParam;
     // if(myParam){
     // }
      console.log(JSON.stringify(param, null, 2))
      cb()
      return
      user
        .getUsers(param)
        .then(response => {
          this.data = response.rows

          this.pageResult = {
            page: response.page,
            pageSize: response.pageSize,
            total: response.total
          }
        })
        .finally(() => cb())
    },
    select(selection, row) {},
    showSelect() {
      this.$message(JSON.stringify(this.$refs.htTable.selection))
    }
  }
}
</script>

<style>
  .field-input-panel > .inputs {
    display: block;
  }
</style>
