<template>
  <div class="page-header-index-wide">
  <a-card :bordered="false">
    <!-- 查询区域 -->
    <div class="table-page-search-wrapper">
      <a-form layout="inline" @keyup.enter.native="searchQuery">
        <a-row :gutter="24">
          <a-col :md="6" :sm="8">
            <a-form-item label="姓名">
              <a-input placeholder="请输入姓名" v-model="queryParam.name"></a-input>
            </a-form-item>
          </a-col>
          <a-col :md="6" :sm="8">
            <a-form-item label="手机号">
              <a-input placeholder="请输入手机号" :maxlength="11" v-model="queryParam.phone"></a-input>
            </a-form-item>
          </a-col>
          <a-col :md="6" :sm="8">
            <a-form-item label="身份证号">
              <a-input placeholder="请输入身份证号" :maxlength="18" v-model="queryParam.idcardNumber"></a-input>
            </a-form-item>
          </a-col>
          <template v-if="toggleSearchStatus">
            <a-col :md="6" :sm="8">
              <a-form-item label="身份证照片">
                <j-dict-select-tag :triggerChange="false" v-model="queryParam.idcardPictureType" placeholder="请选择身份证照片查询"
                                   dictCode="idcardPictureType" v-decorator="['idcardPictureType', {}]"/>
              </a-form-item>
            </a-col>

            <a-col :md="6" :sm="8">
              <a-form-item label="银行卡号">
                <a-input placeholder="请输入银行卡号"  v-model="queryParam.cardNumber"></a-input>
              </a-form-item>
            </a-col>
            <a-col :md="6" :sm="8">
              <a-form-item label="用户类型">
                <j-dict-select-tag :triggerChange="false" v-model="queryParam.type" placeholder="请选择用户类型查询"
                                   dictCode="hw_user_type" v-decorator="['type', {}]"/>
              </a-form-item>
            </a-col>
            <a-col :md="6" :sm="8">
              <a-form-item label="认证状态">
                <j-dict-select-tag :triggerChange="false" v-model="queryParam.authenticationStatus" placeholder="请选择认证状态查询"
                                   dictCode="hw_user_status" v-decorator="['authenticationStatus', {}]"/>
              </a-form-item>
            </a-col>
            <a-col :md="6" :sm="8">
              <a-form-item label="注册时间">
                <a-range-picker
                  style="width: 100%"
                  v-model="queryParam.registerTimeRange"
                  format="YYYY-MM-DD"
                  :placeholder="['开始时间', '结束时间']"
                  @change="onDateChange"
                  @ok="onDateOk"
                  :allowClear="allowClear"
                />
              </a-form-item>
            </a-col>
          </template>
          <a-col :md="6" :sm="8">
            <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
              <a @click="handleToggleSearch">
                {{ toggleSearchStatus ? '取消' : '展开' }}
                <a-icon :type="toggleSearchStatus ? 'up' : 'down'"/>
              </a>
              <a-button ghost type='primary' @click="searchQuery" icon="search" style="margin-left: 8px">查询</a-button>
              <a-button ghost type='primary' @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
            </span>
          </a-col>
        </a-row>
      </a-form>
    </div>
    <!-- 查询区域-END -->

    <!-- 操作按钮区域 -->
    <div class="table-operator">
      <a-button @click="handleAdd" type="primary" icon="plus" v-has="'hwuser:add'">新增用户</a-button>
<!--      <a class="ant-btn ant-btn-primary" @click="handleImportExcel1()" icon="import" type="primary" v-has="'require:companyImport'">批量导入</a>-->

    </div>

    <!-- table区域-begin -->
    <div>

      <a-table
        ref="table"
        size="middle"
        bordered
        rowKey="id"
        :columns="columns"
        :dataSource="dataSource"
        :pagination="ipagination"
        :loading="loading"
        :scroll="{ x: 1730}"
        @change="handleTableChange">

        <span slot="action" slot-scope="text, record">
          <a @click="handleEdit(record)" v-has="'require:userEdit'">编辑</a>
        </span>



        <span slot="action1" slot-scope="text, record">
          <template v-if="record.idcardFront">
           已上传
            </template>
            <template v-if="!record.idcardFront">
            未上传
            </template>
        </span>

      </a-table>
    </div>

    <hwUser-modal ref="modalForm" @ok="modalFormOk"></hwUser-modal>
    <hw-user-export-modal ref="modalSelectRequireForm" @ok="modalFormOk"></hw-user-export-modal>
  </a-card>
  </div>
</template>

<script>

  import { JeecgListMixin } from '@/mixins/JeecgListMixin'
  import HwUserModal from './modules/HwUserModal'
  import { filterObj } from '@/utils/util';
  import HwUserExportModal from './modules/HwUserExportModal'

  export default {
    name: "HwUserList",
    mixins:[JeecgListMixin],
    components: {
      HwUserExportModal,
      HwUserModal
    },
    data () {
      return {
        description: 'hw_user管理页面',
        allowClear:false,
        // 查询条件
        queryParam: {
          registerTimeRange:[],
          idcardPictureType:[]
        },
        // 表头
        columns: [
          {
            title:'姓名',
            align: 'left',
            dataIndex: 'name'
          },
          {
            title:'手机号',
            align: 'left',
            dataIndex: 'phone'
          },
          {
            title:'身份证号',
            align: 'left',
            dataIndex: 'idcardNumber'
          },
          {
            title:'身份证照片',
            align:"left",
            dataIndex: 'idcardFront',
            scopedSlots: { customRender: 'action1' }
          },
          {
            title:'银行卡号',
            align: 'left',
            dataIndex: 'hwBankAccount.cardNumber'
          },
          {
            title:'性别',
            align: 'left',
            dataIndex: 'gender_dictText'
          },
          {
            title:'认证状态',
            align: 'left',
            dataIndex: 'authenticationStatus_dictText'
          },
          {
            title:'注册时间',
            align: 'left',
            dataIndex: 'registerTime'
          },
          {
            title:'注册来源',
            align: 'left',
            dataIndex: 'registerFrom_dictText'
          },
          {
            title: '操作',
            dataIndex: 'action',
            align: 'left',
            fixed: 'right',
            width: 160,
            scopedSlots: { customRender: 'action' },
          }
        ],
        url: {
          list: "/hwuser/hwUser/list",
          delete: "/hwuser/hwUser/delete",
          deleteBatch: "/hwuser/hwUser/deleteBatch",
          exportXlsUrl: "/hwuser/hwUser/exportXls",
          importExcelUrl: "hwuser/hwUser/importExcel",
        },
        dictOptions:{
        }
      }
    },
    computed: {
      importExcelUrl: function(){
        return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`;
      }
    },
    methods: {
      getQueryParams(){
        console.log(this.queryParam.registerTimeRange)
        var param = Object.assign({}, this.queryParam,this.isorter);
        param.field = this.getQueryField();
        param.pageNo = this.ipagination.current;
        param.pageSize = this.ipagination.pageSize;
        delete param.registerTimeRange; // 时间参数不传递后台
        return filterObj(param);
      },
      initDictConfig(){
      },
      onDateChange: function (value, dateString) {
        console.log(dateString[0],dateString[1]);
        this.queryParam.registerTime_begin=dateString[0]+" 00:00:00";
        this.queryParam.registerTime_end=dateString[1] +" 23:59:59";
      },
      onDateOk(value) {
        console.log(value);
      },
      handleImportExcel1(){
        this.$refs.modalSelectRequireForm.edit()
        this.$refs.modalSelectRequireForm.title = '导入接单人'
        this.$refs.modalSelectRequireForm.disableSubmit = false
      },
    }
  }
</script>
<style scoped>
  @import '~@assets/less/common.less';
  ::v-deep .ant-table-pagination{
    float: none;
    display: flex;
    align-items: center;
    justify-content: center;
  }
</style>