<template>
  <el-dialog :loading="loading" :visible.sync="visible" :title="title" :append-to-body="true" :before-close="handleClose">
    <el-form ref="form" :model="form" label-width="110px">
      <el-row :gutter="2">
        <el-col :span="12">
          <el-form-item label="关键字" prop="KEYWORDS">
            <el-input id="NAME" ref="KEYWORDS" v-model="form.KEYWORDS" maxlength="100" placeholder="这里输入姓名或手机号..." />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label-width="10px">
            <el-button v-waves class="filter-item" type="primary" icon="el-icon-search" @click="getQuery">
              搜索
            </el-button>
            <el-button v-waves class="filter-item" type="success" icon="el-icon-refresh" @click="goKeyReset">
              重置
            </el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <el-table ref="table" :data="varList" border style="width: 100%" height="500px">
      <el-table-column prop="USERNAME" label="用户名" width="180"/>
      <el-table-column prop="NAME" label="姓名" width="180"/>
      <el-table-column prop="DEPARTMENT_NAME" label="部门"/>
<!--      <el-table-column prop="POST_NAME" label="工种"/>-->
      <el-table-column v-if="IS_FLOW === 1" prop="POST_NAME" label="年份">
        <span>{{ new Date().getFullYear() }}</span>
      </el-table-column>
      <el-table-column v-if="IS_FLOW === 1" prop="POST_NAME" label="年度入场培训">
        <span>已培训</span>
      </el-table-column>
      <el-table-column v-if="IS_FLOW===1" prop="TRAIN_AREA" label="流动范围"/>
      <el-table-column prop="action" label="操作">
        <template slot-scope="{row,$index}">
          <el-button v-if="todoAction(row.USER_ID)" type="primary" icon="el-icon-edit" size="mini" @click="choose(row,$index)">选择</el-button>
          <el-button v-if="!todoAction(row.USER_ID)" type="danger" icon="el-icon-edit" size="mini" @click="unchoose(row.USER_ID,$index)">取消选择</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="page-btn-group">
      <div/>
      <pagination :total="listQuery.total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" layout="total, prev, pager, next, jumper" @pagination="getData" />
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button @click="handleClose">取 消</el-button>
      <el-button type="primary" @click="confirm">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import waves from '@/directive/waves' // waves directive
import { requestFN } from '@/utils/request'
import Pagination from '@/components/Pagination' // 通过 el-pagination二次打包

export default {
  components: { Pagination },
  directives: { waves },
  data() {
    return {
      visible: false,
      loading: false,
      title: '',
      IS_FLOW: '',
      SERVICE_PROVIDER_ID: '',
      form: {
        PHONE: '',
        KEYWORDS: ''
      },
      varList: [],
      listQuery: {
        page: 1,
        limit: 10,
        total: 0
      },
      list: []
    }
  },
  methods: {
    init(e) {
      this.visible = true
      this.listQuery = {
        page: 1,
        limit: 10,
        total: 0
      }
      this.IS_FLOW = e.IS_FLOW
      if (this.IS_FLOW === 1) {
        this.title = '选择流动人员'
      } else {
        this.title = '选择固定人员'
      }
      this.SERVICE_PROVIDER_ID = e.SERVICE_PROVIDER_ID
      this.list = [...e.selectedList]
      this.getData()
    },

    getData() {
      this.loading = true
      requestFN(
        '/service_corp/getEmployment?showCount=' + this.listQuery.limit + '&currentPage=' + this.listQuery.page,
        {
          KEYWORDS: this.form.KEYWORDS,
          PHONE: this.form.PHONE,
          ISFLOW: this.IS_FLOW,
          SERVICE_PROVIDER_ID: this.SERVICE_PROVIDER_ID
        }
      ).then((data) => {
        this.loading = false
        this.varList = data.varList
        this.listQuery.total = data.page.totalResult
      }).catch((e) => {
        this.loading = false
      })
    },

    getQuery() {
      this.listQuery = {
        page: 1,
        limit: 10
      }
      this.getData()
    },

    goKeyReset() {
      this.form = {
        PHONE: '',
        KEYWORDS: ''
      }
      this.getQuery()
    },

    todoAction(USER_ID) {
      for (let i = 0; i < this.list.length; i++) {
        if (this.list[i].USER_ID === USER_ID) {
          return false
        }
      }
      return true
    },

    choose(row, index) {
      this.list.push(row)
      // this.$set(this.varList[index], 'selected', 1)
    },
    unchoose(USER_ID, index) {
      this.list = this.list.filter(item => {
        return item.USER_ID != USER_ID
      })
      // this.$set(this.varList[index], 'selected', 0)
    },

    confirm() {
      this.$emit('selectedUser', this.list, this.IS_FLOW)
      this.handleClose()
    },

    handleClose() {
      this.visible = false
    }

  }
}

</script>
