<template>
  <div class="user" v-loading="loading">
    <el-form ref="searchFrom" :model="searchFrom" label-width="80px" inline>
      <el-form-item label="ID">
        <el-input v-model="searchFrom.id" clearable></el-input>
      </el-form-item>
      <el-form-item label="姓名">
        <el-input v-model="searchFrom.name" clearable></el-input>
      </el-form-item>
      <el-form-item label="手机号码">
        <el-input v-model="searchFrom.mobile" clearable></el-input>
      </el-form-item>
      <el-form-item label="身份证号">
        <el-input v-model="searchFrom.id_card" clearable></el-input>
      </el-form-item>
      <el-form-item label="岗位">
        <el-select v-model="searchFrom.type" placeholder="请选择" clearable>
          <el-option
            v-for="item in STAFF_TYPE"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="状态">
        <el-select v-model="searchFrom.status" clearable>
          <el-option label="在职" value="0"></el-option>
          <el-option label="离职" value="1"></el-option>
        </el-select>
      </el-form-item>
      <!--<el-form-item label="入职日期">
        <el-date-picker
          v-model="startTime"
          type="datetimerange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :default-time="['00:00:00','23:59:59']"
          @change="onSearch">
        </el-date-picker>
      </el-form-item>-->
      <el-form-item>
        <!--<div class="flexRow">-->
          <el-button @click="onSearch" type="primary" plain>搜索</el-button>
          <el-button v-if="!$store.state.readonly" @click="onAdd" type="success" plain>添加</el-button>
        <!--</div>-->
      </el-form-item>
    </el-form>
    <el-table :data="tableData">
      <el-table-column prop="id" label="ID"></el-table-column>
      <el-table-column prop="name" label="真实姓名"></el-table-column>
      <el-table-column prop="mobile" label="手机号码"></el-table-column>
      <el-table-column prop="id_card" label="身份证号" width="200">
        <template slot-scope="scope">
          <span style="white-space: nowrap">
            {{scope.row.id_card}}
          </span>
        </template>
      </el-table-column>
      <el-table-column label="岗位" width="80">
        <template slot-scope="scope">
          <!--{{scope.row.type == 1 ? '销售' : ''}}-->
          {{filterName(scope.row.type, 'STAFF_TYPE')}}
        </template>
      </el-table-column>
      <el-table-column prop="in_at" label="入职时间"></el-table-column>
      <el-table-column label="离职时间">
        <template slot-scope="scope">
          {{scope.row.status == 1 ? scope.row.over_at : '-'}}
        </template>
      </el-table-column>
      <el-table-column label="状态">
        <template slot-scope="scope">
          {{scope.row.status == 0 ? '在职' : '离职'}}
        </template>
      </el-table-column>
      <el-table-column label="操作" v-if="!$store.state.readonly" width="100">
        <template slot-scope="scope">
          <el-button size="mini" plain type="primary" @click="onEdit(scope.row)">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>
    <page :total="total" :limit="limit" @pageChange="onPageChange" @sizeChange="onSizeChange"/>
    <el-dialog :title="dialog.title" :visible.sync="dialog.show" width="800px">

      <el-form ref="dialogForm" :rules="dialog.form.rules" :model="dialog.form" label-width="100px">
        <el-form-item label="真实姓名：" prop="name">
          <el-input v-model="dialog.form.name" type="text"></el-input>
        </el-form-item>
        <el-form-item label="手机号码：" prop="mobile">
          <el-input v-model="dialog.form.mobile" type="number"></el-input>
        </el-form-item>
        <el-form-item label="身份证号：" prop="id_card">
          <el-input v-model="dialog.form.id_card" type="text"></el-input>
        </el-form-item>
        <el-form-item label="岗位：" prop="type">
          <el-select v-model="dialog.form.type" placeholder="请选择">
            <el-option
              v-for="item in STAFF_TYPE"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="入职日期：" prop="in_at">
          <el-date-picker
            v-model="dialog.form.in_at" type="date" value-format="yyyy-MM-dd" :clearable="false" placeholder="选择日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item v-if="dialog.title != '添加员工'" label="离职日期：" prop="over_at">
          <el-date-picker
            v-model="dialog.form.over_at" type="date" value-format="yyyy-MM-dd" :clearable="true" placeholder="选择日期">
          </el-date-picker>
        </el-form-item>

      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogToggle">取消</el-button>
        <el-button type="primary" @click="dialogSave">确定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  import {getStaffListApi, postStaffListApi, putStaffListApi} from "../../service/api";
  import page from '../framework/page'
  import {STAFF_TYPE} from '@/util/wordbook'

  export default {
    name: "index",
    data() {
      return {
        searchFrom: {
          id: '',
          name: '',
          mobile: '',
          id_card: '',
          type: '',
          status: '',
          start_in: '',
          over_in: ''
        },
        startTime: [],
        tableData: [],
        dialog: {
          title: '',
          show: false,
          form: {
            id: '',
            name: '',
            mobile: '',
            id_card: '',
            type: '',
            in_at: '',
            over_at: '',
            rules: {
              name: [{required: true, message: '请输入', trigger: 'blur'}],
              mobile: [{required: true, message: '请输入', trigger: 'blur'}],
              id_card: [{required: true, message: '请输入', trigger: 'blur'}],
              type: [{required: true, message: '请选择', trigger: 'change'}],
              in_at: [{required: true, message: '请选择', trigger: 'change'}],
            },
          }
        },
        STAFF_TYPE: STAFF_TYPE,
        dialogDetail: {
          show: false,
          id: ''
        },
        userList: [],
        total: 0,
        nowPage: 1,
        limit: 10,
        showDetail: false,
        showId: '',
        dialogObj: {
          show: false,
          title: '绑定老师',
          id: 0,
          teacher_id: 0
        },
        dialogDetailObj: {
          show: false,
          id: ''
        },
        loading: false
      }
    },
    components: { page },
    mounted() {
      this.getData()
    },
    methods: {

      filterName(string, type) {
        return this[type].find(i => {return i.value == string}).label
      },
      dialogToggle() {
        this.dialog.show = !this.dialog.show;
        if (!this.dialog.show) {
          this.dialogReset();
        }
      },
      dialogReset() {
        /*this.dialog.title = '';
        this.dialog.form.id = '';
        this.dialog.form.name = '';
        this.dialog.form.mobile = '';
        this.dialog.form.id_card = '';
        this.dialog.form.type = '';
        this.dialog.form.in_at = '';*/
        this.$nextTick(()=>{
          this.$refs['dialogForm'].resetFields();
        })
      },
      dialogSave() {
        this.$refs['dialogForm'].validate((valid) => {
          if (valid) {
            var json = {
              name: this.dialog.form.name,
              mobile: this.dialog.form.mobile,
              id_card: this.dialog.form.id_card,
              type: this.dialog.form.type,
              in_at: this.dialog.form.in_at
            };
            if (this.dialog.form.id) { // 编辑
              json.id = this.dialog.form.id;
              // 离职
              if (this.dialog.form.over_at) {
                json.over_at = this.dialog.form.over_at;
                json.status = 1;
              } else {
                json.over_at = '0000-00-00';
                json.status = 0
              }
              putStaffListApi(json).then(res => {
                this.$message({ type: 'success', message: '编辑成功!' });
                this.dialogToggle();
                this.getData();
              })
            } else {
              postStaffListApi(json).then(res => {
                this.$message({ type: 'success', message: '添加成功!' });
                this.dialogToggle();
                this.getData();
              })
            }
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },

      getData() {
        let json = {
          limit: this.limit,
          page: this.nowPage
        };
        this.searchFrom.id?json.id = this.searchFrom.id:'';
        this.searchFrom.name?json.name = this.searchFrom.name:'';
        this.searchFrom.mobile?json.mobile = this.searchFrom.mobile:'';
        this.searchFrom.id_card?json.id_card = this.searchFrom.id_card:'';
        this.searchFrom.type?json.type = this.searchFrom.type:'';
        this.searchFrom.status?json.status = this.searchFrom.status:'';

        getStaffListApi(json).then(res => {
          this.tableData = res.list;
          this.total = res.total
        });
      },

      onAdd() {
        this.dialog.title = '添加员工';
        this.dialogToggle();
        this.$nextTick(()=>{
          this.dialogReset();
        });
      },

      onEdit(item) {
        this.dialogToggle();
        this.dialogReset();
        this.$nextTick(()=>{
          this.dialog.title = '编辑员工';
          this.dialog.form.id = item.id;
          this.dialog.form.name = item.name;
          this.dialog.form.mobile = item.mobile;
          this.dialog.form.id_card = item.id_card;
          this.dialog.form.type = item.type;
          this.dialog.form.in_at = item.in_at;
          if (item.status == 1) { // 离职
            this.dialog.form.over_at = item.over_at;
          } else {
            this.dialog.form.over_at = ''
          }
        });
      },

      onSearch(){
        this.getData();
      },

      onPageChange(val) {
        this.nowPage = val
        this.getData()
      },
      onSizeChange(val) {
        this.limit = val;
        this.nowPage = 1;
        this.getData()
      },
    }
  }
</script>

<style scoped lang="less">
  @import "../../util/public";

  .el-form {
    .el-form-item:last-child {
      margin-bottom: 0;
    }
  }

  .avatar {
    width: 50px;
    margin-right: 5px;
    border-radius: 50%;
    height: 50px;
  }

  .user {
    /*height: 100%;*/
    overflow: auto;
    padding: 20px 0;

    .btn-content {
      text-align: center;
    }
  }

  .flexRow {
    display: flex;
    flex-flow: row;
    justify-content: flex-start;
    align-items: center;
  }

</style>
<style>
  .f-c > div {
    display: flex !important;
    flex-flow: row;
    justify-content: flex-start;
    align-items: center;
  }
</style>