<template>
  <a-card :bordered="false" class="shopOrder-table-page-search-wrapper">
    <div class="shopOrder-searchForm">
      <a-form layout="inline" v-bind="formItemLayout" @keyup.enter.native="refresh">
        <a-row :gutter="48">
          <a-col :span="6">
            <a-form-item label="用户手机" :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol">
              <a-input id="releaseRecordList-mobile" allowClear :maxLength="11" v-model="queryParam.mobile" placeholder="请输入用户手机" />
            </a-form-item>
          </a-col>
          <a-col :span="6">
            <a-form-item label="乐豆余额" :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol">
              <div class="input-number">
                <a-input-number id="releaseRecordList-inputNumber" v-model="queryParam.currentGoldMin" :min="1" @change="onChange" />-
                <a-input-number id="inputNumber" v-model="queryParam.currentGoldMax" :min="1" @change="onChange" />
              </div>
            </a-form-item>
          </a-col>
          <a-col :span="6">
            <a-form-item label="账户状态" :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol">
              <v-select
                v-model="queryParam.state"
                id="releaseRecordList-state"
                code="ENABLE_FLAG"
                placeholder="请选择订单状态"
                allowClear></v-select>
            </a-form-item>
          </a-col>
          <a-col :span="6">
            <a-button class="handle-btn serach-btn" id="releaseRecordList-btn-serach" type="primary" @click="refresh">查询</a-button>
            <a-button class="handle-btn" type="" id="releaseRecordList-btn-reset" @click="handleReset">重置</a-button>
          </a-col>
        </a-row>
      </a-form>
    </div>
    <a-divider />
    <div class="table-operator">
      <a-button
        class="export-btn"
        id="releaseRecordList-btn-export"
        type=""
        :loading="loading"
        @click="handleExport"
        v-hasPermission="'B_user_userManage_export'">导出</a-button>
    </div>
    <s-table
      ref="table"
      size="default"
      :rowKey="(record) => record.id"
      :columns="columns"
      :data="loadData"
      bordered>
      <!--启用禁用 -->
      <template slot="state" slot-scope="text, record">
        <a-switch
          v-hasPermission="'B_user_userManage_enable'"
          checkedChildren="启用"
          unCheckedChildren="禁用"
          id="releaseRecordList-changeFlagHandle"
          :checked="record.state == 1 ? true : false"
          @change="changeFlagHandle(text, record)" />
        <span v-if="!$hasPermissions('B_user_userManage_enable')">--</span>
      </template>
      <!-- 操作 -->
      <template slot="action" slot-scope="text, record">
        <a-button id="releaseRecordList-handleUser" type="link" @click="handleUser(record)" v-hasPermission="'B_user_userManage_userDetails'">用户详情</a-button>
        <a-button id="releaseRecordList-handleLd" type="link" @click="handleLd(record)" v-hasPermission="'B_user_userManage_userDetails'">乐豆明细</a-button>
        <span v-if="!$hasPermissions('B_user_userManage_userDetails') && !$hasPermissions('B_user_userManage_userDetails')">--</span>
      </template>
    </s-table>
  </a-card>

</template>

<script>
import {
  STable,
  VSelect
} from '@/components'
import {
  customerList,
  changeStatus,
  customeExport
} from '@/api/userInfo.js'
export default {
  name: 'UserManageList',
  components: {
    STable,
    VSelect
  },
  data () {
    return {
      formItemLayout: {
        labelCol: {
          span: 7
        },
        wrapperCol: {
          span: 17
        }
      },
      // 查询参数
      queryParam: {
        mobile: '', //  用户手机
        state: '', // 账户状态
        currentGoldMin: '', // 乐豆余额最小值
        currentGoldMax: '' // 乐豆余额最大值
      },
      loading: false, // 导出loading
      // 表头
      columns: [{
        title: '序号',
        dataIndex: 'no',
        width: 80,
        align: 'center'
      },
      {
        title: '用户手机',
        dataIndex: 'mobile',
        width: 100,
        align: 'center'
      },
      {
        title: '乐豆余额',
        dataIndex: 'currentGold',
        width: 100,
        align: 'center',
        customRender: (text) => {
          return text || 0
        }
      },
      {
        title: '累计乐豆',
        dataIndex: 'totalCarbon',
        width: 100,
        align: 'center',
        customRender: (text) => {
          return text || 0
        }
      },
      {
        title: '注册时间',
        dataIndex: 'registerTime',
        width: 200,
        align: 'center'
      },
      {
        title: '最后登录时间',
        dataIndex: 'lastLoginTime',
        width: 200,
        align: 'center'
      },
      {
        title: '最后投递时间',
        dataIndex: 'lastDeliveryTime',
        width: 200,
        align: 'center'
      },
      {
        title: '状态',
        width: 100,
        dataIndex: 'state',
        align: 'center',
        scopedSlots: {
          customRender: 'state'
        }
      },
      {
        title: '操作',
        scopedSlots: {
          customRender: 'action'
        },
        width: 100,
        align: 'center'
      }
      ],
      // 加载数据方法 必须为 Promise 对象
      loadData: parameter => {
        return customerList(Object.assign(parameter, this.queryParam)).then(res => {
          if (res.status == 200) {
            const no = (res.data.pageNo - 1) * res.data.pageSize
            for (let i = 0; i < res.data.list.length; i++) {
              const _item = res.data.list[i]
              _item.no = no + i + 1
              _item.status = _item.status + '' === '1'
            }
            return res.data
          }
        })
      }
    }
  },
  beforeRouteEnter (to, from, next) {
    next(vm => {
      vm.handleReset()
    })
  },
  methods: {
    // 查询条件change
    onChange () {

    },
    refresh () {
      if ((this.queryParam.currentGoldMin && this.queryParam.currentGoldMax) && (this.queryParam.currentGoldMin >= this.queryParam
        .currentGoldMax)) {
        this.$message.error('请输入正确的查询范围！')
        return
      }
	  if ((!this.queryParam.currentGoldMin && this.queryParam.currentGoldMax) || (this.queryParam.currentGoldMin && !this.queryParam.currentGoldMax)) {
        this.$message.error('请输入正确的查询范围！')
        return
	  } else {
        this.$refs.table.refresh()
	  }
      this.$refs.table.refresh()
    },
    // 查看用户详情
    handleUser (row) {
      this.$router.push({
        path: `/userInfo/userManageList_user/detail/${row.id}`
      })
    },
    // 查看乐豆详情
    handleLd (row) {
      this.$router.push({
        path: `/userInfo/userManageList_Ld/detail/${row.customerNo}`
      })
    },
    // 启用禁用
    // 更改启用禁用状态
    changeFlagHandle (text, record) {
      console.log(text)
      const _this = this
      const _data = {
        id: record.id,
        state: record.state == 1 ? '0' : '1'
      }
      changeStatus(_data).then(res => {
        if (res.status == 200) {
          _this.$message.success(res.message)
          _this.$refs.table.refresh()
        } else {
          record.state = !record.state
        }
      })
    },
    // 重置
    handleReset () {
      this.queryParam.mobile = ''
      this.queryParam.currentGoldMin = ''
      this.queryParam.currentGoldMax = ''
      this.queryParam.state = ''
      this.$refs.table.refresh(true)
    },
    // 导出
    handleExport () {
      const params = {
        mobile: this.queryParam.mobile,
        currentGoldMin: this.queryParam.currentGoldMin,
        currentGoldMax: this.queryParam.currentGoldMax,
        state: this.queryParam.state = ''
      }
      this.loading = true
      customeExport(params).then(res => {
        this.loading = false
        this.download(res)
      })
    },
    download (data) {
      if (!data) {
        return
      }
      const url = window.URL.createObjectURL(new Blob([data]))
      const link = document.createElement('a')
      link.style.display = 'none'
      link.href = url
      // const a = moment().format('YYYYMMDDhhmmss')
      const fname = '用户列表'
      link.setAttribute('download', fname + '.xlsx')
      document.body.appendChild(link)
      link.click()
    }
  }
}
</script>
<style lang="less" scoped>
	.shopOrder-table-page-search-wrapper {
		.shopOrder-searchForm {
			.ant-form-inline .ant-form-item {
				width: 100%;
			}

			// 搜索框的下间距
			.ant-form-item {
				margin-bottom: 10px;
			}

			.input-number {
				display: flex;
				margin-top: 3px;
			}

			.handle-btn {
				margin-top: 4px;
			}

			.serach-btn {
				margin-right: 10px;
			}
		}

		.export-btn {
			background-color: #ff9900;
			border-color: #ff9900;
			color: #fff;
		}

		.export-btn.ant-btn:focus:not(.ant-btn-primary):not(.ant-btn-danger),
		.export-btn.ant-btn:hover:not(.ant-btn-primary):not(.ant-btn-danger) {
			color: #fff;
			border-color: #ff9900;
		}

		.blue {
			color: #1890FF;
		}

		.green {
			color: #16b50e;
		}

		.red {
			color: red;
		}
	}
</style>
