<template>
  <a-card :bordered="false" class="network-table-page-search-wrapper">
    <div class="network-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="network-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="network-stationNo" allowClear :maxLength="30" v-model="queryParam.stationNo" 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="network-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="network-btn-serach" type="primary" @click="$refs.table.refresh(true)">查询</a-button>
            <a-button class="handle-btn" type="" id="network-btn-reset" @click="handleReset">重置</a-button>
          </a-col>
        </a-row>
      </a-form>
    </div>
    <div class="table-operator">
      <a-button v-if="$hasPermissions('B_network_add')" class="add-btn" id="network-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="userList-changeFlagHandle" />
        <!-- <span v-if="!$hasPermissions('B_userManage_enable')">--</span> -->
      </span>
      <!-- 操作 -->
      <template slot="action" slot-scope="text, record">
        <a-icon
          type="unlock"
          title="重置密码"
          class="actionBtn icon-orange"
          @click="resetPassword(record)" />
        <a-icon type="edit" title="编辑" class="actionBtn icon-blues" @click="handleEdit(record)" />
        <a-icon
          type="delete"
          title="删除"
          class="actionBtn icon-red"
          @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" />
  </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: {
        registerregisterBeginDate: null, // 开始时间
        registerregisterEndDate: null, // 结束时间
        nameOrPhone: '', //  网点名称
        stationNo: ''
      },
      // 表头
      columns: [
        { title: '序号', dataIndex: 'no', width: 80, align: 'center' },
        { title: '创建时间', dataIndex: 'createDate', width: 200, align: 'center' },
        { title: '网点名称', dataIndex: 'stationNo', 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: '状态', dataIndex: 'loginFlag', width: 100, align: 'center', slot: '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
            }
            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.registerregisterEndDate = 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.networkId = undefined
      this.queryParam.stationNo = ''
    },
    //  新增、编辑网点
    handleEdit (row) {
      this.collectorId = row ? row.id : null
      this.openCollectorModal = true
      console.log(this.collectorId)
    },
    //  关闭弹框
    closeModal () {
      this.collectorId = null
      this.openCollectorModal = false
      this.$refs.table.refresh()
    },
    // 修改状态
    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 () {
        //   delectUserPower({
        //     id: row.id
        //   }).then(res => {
        //     if (res.status == 200) {
        //       _this.$message.success(res.message)
        //       _this.$refs.table.refresh()
        //     }
        //   })
        // }
      })
    }
  }
}
</script>
<style lang="less" scoped>
  .network-table-page-search-wrapper{
    .network-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;
    }
    // 合计
    .total {
    	margin: 15px 0 25px;
    	width: 100%;
    	background-color: #e6f7ff;
    	border: 1px solid #91d5ff;
    	padding: 8px 15px 8px 27px;
    	border-radius: 4px;
    	.iconImg {
    		color: #1890FF;
    		margin-right: 10px;
    	}
    }
  }
</style>
