<template>
  <a-card :bordered="false" class="collector-table-page-search-wrapper">
    <div class="collector-searchForm">
      <a-form layout="inline" v-bind="formItemLayout" @keyup.enter.native="$refs.table.refresh(true)">
        <a-row :gutter="24">
          <a-col :xs="24" :sm="12" :md="8" :lg="6">
            <a-form-item label="创建时间" :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol">
              <a-range-picker
                id="collector-time"
                v-model="time"
                :format="dateFormat"
                :placeholder="['开始时间','结束时间']"
                :disabledDate="disabledDate"
                @change="onChange" />
            </a-form-item>
          </a-col>
          <a-col :xs="24" :sm="12" :md="8" :lg="6">
            <a-form-item label="网点名称" :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol">
              <a-input id="collector-stationName" allowClear :maxLength="30" v-model="queryParam.stationName" placeholder="请输入网点名称" />
            </a-form-item>
          </a-col>
          <a-col :xs="24" :sm="12" :md="8" :lg="6">
            <a-form-item label="采集员" :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol">
              <a-input id="collector-nameOrPhone" allowClear :maxLength="30" v-model="queryParam.nameOrPhone" placeholder="请输入姓名/手机号码" />
            </a-form-item>
          </a-col>
          <a-col :xs="24" :sm="12" :md="8" :lg="6">
            <a-button class="handle-btn serach-btn" id="collector-btn-serach" type="primary" @click="$refs.table.refresh(true)">查询</a-button>
            <a-button class="handle-btn" type="" id="collector-btn-reset" @click="handleReset">重置</a-button>
          </a-col>
        </a-row>
      </a-form>
    </div>
    <div class="table-operator">
      <a-button class="add-btn" icon="plus" id="collector-btn-add" type="primary" @click="handleEdit">新增</a-button>
    </div>
    <s-table
      ref="table"
      size="default"
      :rowKey="(record) => record.id"
      :columns="columns"
      :data="loadData"
      bordered>
      <!-- 启禁用 -->
      <span slot="status" slot-scope="text, record">
        <a-switch
          checkedChildren="启用"
          unCheckedChildren="禁用"
          v-model="record.loginFlag"
          @change="changeFlagHandle(text, record)"
          id="collector-changeFlagHandle" />
        <!-- <span v-if="!$hasPermissions('B_userManage_enable')">--</span> -->
      </span>
      <!-- 操作 -->
      <template slot="action" slot-scope="text, record">
        <a-icon type="edit" title="编辑" class="actionBtn icon-blues" @click="handleEdit(record)" />
        <a-icon
          id="collector-resetPassword"
          type="unlock"
          title="重置密码"
          class="actionBtn icon-orange"
          v-if="record.loginFlag==1"
          @click="resetPassword(record)" />
        <a-icon
          type="delete"
          title="删除"
          class="actionBtn icon-red"
          id="collector-delect"
          v-if="record.loginFlag==0"
          @click="delect(record)" />
          <!-- <span v-if="!$hasPermissions('B_userManage_edit') && !($hasPermissions('B_userManage_resetPwd') && record.loginFlag==1) && !($hasPermissions('B_userManage_del') && record.loginFlag==0) ">--</span> -->
      </template>
    </s-table>
    <!-- 新增编辑 -->
    <add-Collector :openModal="openCollectorModal" :collectorId="collectorId" @refresh="handleReset" @close="closeModal" id="collector-addBtn"/>
  </a-card>
</template>

<script>
import { STable, VSelect } from '@/components'
import moment from 'moment'
import addCollector from './addCollector.vue'
import { getCollectorList, resetPSD, updateEnableStatus, delectCollector } from '@/api/collector'
export default {
  name: 'Collector',
  components: { STable, VSelect, addCollector },
  data () {
    return {
      formItemLayout: {
        labelCol: { span: 7 },
        wrapperCol: { span: 17 }
      },
      // 查询参数
      queryParam: {
        registerBeginDate: null, // 开始时间
        registerEndDate: null, // 结束时间
        nameOrPhone: '', // 采集员姓名或手机号
        stationName: '' //  网点名称
      },
      // 表头
      columns: [
        { title: '序号', dataIndex: 'no', width: 80, align: 'center' },
        { title: '创建时间', dataIndex: 'createDate', width: 200, align: 'center' },
        { title: '网点名称', dataIndex: 'stationName', width: 200, align: 'center', customRender: text => { return text || '--' } },
        { title: '采集员姓名', dataIndex: 'gatherName', width: 150, align: 'center', ellipsis: true, customRender: text => { return text || '--' } },
        { title: '采集员手机', dataIndex: 'gatherPhone', width: 150, align: 'center', ellipsis: true, customRender: text => { return text || '--' } },
        { title: '状态', width: 100, align: 'center', scopedSlots: { customRender: 'status' } },
        { title: '操作', scopedSlots: { customRender: 'action' }, width: 150, align: 'center' }
      ],
      // 加载数据方法 必须为 Promise 对象
      loadData: parameter => {
        return getCollectorList(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.loginFlag = _item.loginFlag + '' === '1'
            }
            return res.data
          }
        })
      },
      // 将默认当天时间日期回显在时间选择框中
      time: [],
      dateFormat: 'YYYY-MM-DD',
      openCollectorModal: false, //  新增编辑网点信息
      collectorId: null //  网点id
    }
  },
  methods: {
    moment,
    // 不可选日期
    disabledDate (date, dateStrings) {
      return date && date.valueOf() > Date.now()
    },
    // 创建时间change
    onChange (dates, dateStrings) {
      if ((dates, dateStrings)) {
        this.queryParam.registerBeginDate = dateStrings[0]
        this.queryParam.registerEndDate = dateStrings[1]
      }
    },
    filterOption (input, option) {
      return (
        option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
      )
    },
    // 重置
    handleReset () {
      this.queryParam.registerBeginDate = undefined
      this.queryParam.registerEndDate = undefined
      this.queryParam.nameOrPhone = ''
      this.time = []
      this.$refs.table.refresh(true)
      this.queryParam.stationName = ''
    },
    //  新增、编辑网点
    handleEdit (row) {
      this.collectorId = row ? row.id : null
      this.openCollectorModal = true
    },
    //  关闭弹框
    closeModal () {
      this.collectorId = null
      this.openCollectorModal = false
    },
    // 修改状态
    changeFlagHandle (text, record) {
      const _data = {
        id: record.id,
        flag: record.loginFlag ? '1' : '0'
      }
      updateEnableStatus(_data).then(res => {
        if (res.status + '' === '200') {
          this.$message.success(res.message)
        } else {
          record.loginFlag = !record.loginFlag
        }
      })
    },
    // 重置密码
    resetPassword (row) {
      resetPSD({
        id: row.id
      }).then(res => {
        if (res.status == 200) {
          this.$message.success(res.message)
        }
      })
    },
    // 删除
    delect (row) {
      const _this = this
      this.$confirm({
        title: '警告',
        centered: true,
        content: '删除后无法恢复，确认删除?',
        okText: '确定',
        cancelText: '取消',
        onOk () {
          delectCollector({
            id: row.id
          }).then(res => {
            if (res.status == 200) {
              _this.$message.success(res.message)
              _this.$refs.table.refresh()
            }
          })
        }
      })
    }
  }
}
</script>
<style lang="less" scoped>
  .collector-table-page-search-wrapper{
    .collector-searchForm{
      .ant-form-inline .ant-form-item{
        width: 100%;
      }
      // 搜索框的下间距
      .ant-form-item {
      	margin-bottom: 10px;
      }
      .handle-btn{
        margin-top: 4px;
      }
      .serach-btn{
        margin-right: 10px;
      }
    }
    .actionBtn {
    	font-size: 20px;
    	padding: 0 10px;
    }
  }
</style>
