<template>
  <div style="height: 100%;">
    <div class="new_employee_box">
      <el-page-header style="margin-bottom: 20px;" @back="goBack" content="详情页面"></el-page-header>
      <el-row style="margin-bottom: 20px;" >
        <el-col :span="12">
          <el-button @click="batch_pass" :disabled="multipleSelection.length == 0">批量通过</el-button>
        </el-col>
        <el-col :span="12"></el-col>
      </el-row>
      <el-table :data="new_employee_list" @selection-change="handleSelectionChange" ref="multipleTable" style="width: 100%">
        <el-table-column
          type="selection"
          :selectable="isDisabled"
          width="55">
        </el-table-column>

        <el-table-column
          prop="employee_name"
          label="姓名">
          <template slot-scope="scope">
            <userImage class="fl" :id="scope.row.account_id" :user_name="scope.row.account_name" :img_url="scope.row.account_img_url" width="50px" height="50px" ></userImage>
            <span style="line-height:50px; display: inline-block; margin-left: 10px;">{{scope.row.account_name}}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="account_tel"
          label="手机号">
        </el-table-column>

        <el-table-column label="操作" prop="status" align="center">
          <template slot-scope="scope">
            <el-button @click="refuse(scope.row)" v-if="scope.row.status == 0">拒绝</el-button>
            <el-button type="primary" @click="agree(scope.row)" v-if="scope.row.status == 0">同意</el-button>
            <el-button type="primary" plain v-if="scope.row.status == 1 && (scope.row.invitee !== null && scope.row.invitee.employee_detail.dept_list?scope.row.invitee.employee_detail.dept_list.length === 0:'')" @click="perfect(scope.row)">完善成员信息</el-button>
            <span v-if="scope.row.status == 1 && (scope.row.invitee !== null && scope.row.invitee.employee_detail.dept_list?scope.row.invitee.employee_detail.dept_list.length > 0:'')" style="color: #606266">信息已完善</span>
            <span v-if="scope.row.status == 1 && (scope.row.invitee === null)" style="color: red">员工已被删除</span>
            <span v-if="scope.row.status == 2" style="color: green">不同意加入</span>
          </template>
        </el-table-column>
        <template slot="empty">
          <div class="nopoint_box">
            <div class="noimg noperson"></div>
            <span class="title">没有对应的数据</span>
          </div>
        </template>
      </el-table>

      <el-dialog
        title="完善信息"
        :visible.sync="perfect_dialog_show"
        :before-close="colse"
        width="25%">
        <el-form :model="infoForm" :rules="rules" ref="infoForm" label-width="80px">
          <el-form-item label="姓名">
            <el-input v-model="infoForm.name" autocomplete="off" disabled></el-input>
          </el-form-item>
          <el-form-item label="电话">
            <el-input v-model="infoForm.tel" autocomplete="off" disabled></el-input>
          </el-form-item>
          <el-form-item label="所属部门">
            <el-cascader
              style="width: 100%;"
              ref="myCascader"
              class="date-picker-width"
              v-model="dept_arr"
              :options="dept_tree"
              :props="{ multiple: true, checkStrictly: true}"
              collapse-tags
              filterable
              change-on-select
              placeholder="请选择所属部门"
            ></el-cascader>
          </el-form-item>
          <el-form-item label="入职时间" prop="accedence_time">
            <el-date-picker
              style="width: 100%;"
              v-model="infoForm.accedence_time"
              type="date"
              value-format="yyyy-MM-dd"
              placeholder="选择入职时间">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="工号">
            <el-input v-model="infoForm.company_id" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="职位">
            <el-input v-model="infoForm.post" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer">
          <el-button @click="colse()">取 消</el-button>
          <el-button type="primary" :loading="save_loading" @click="submitForm('infoForm')">确 定</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>
<script>
import { log } from 'util';
  export default {
    data() {
      const validateTel = (rule, value, callback) => {
        let validValue = value
          ? value.replace(/\s/g, "").replace(/&nbsp;/gi, "")
          : value;
        let pattern = /^1\d{10}$/;
        if (pattern.test(value)) {
          callback();
        } else {
          return callback(new Error("无效的手机号，请重新输入"));
        }
      };
      return {
        loading: false,
        save_loading: false,
        perfect_dialog_show: false,
        new_employee_list: [],
        infoForm:{
          name:'',
          company_id:'',
          tel:'',
          accedence_time:'',
          post:'',
          dept_list:[],
        },
        accedence_time:'',
        dept_arr: null,
        dept_tree: [],
        multipleSelection: [],
        rules:{
          dept_arr:[
            { required: true, message: '请选择部门', trigger: 'blur' },
          ],
          company_id: [
            { min: 1, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' }
          ],
          name: [
            { required: true, message: '请输入姓名', trigger: 'blur' },
            { min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' }
          ],
          tel: [
            { required: true, message: '请输入手机号码', trigger: 'blur' },
            { validator: validateTel, trigger: "blur" }
          ],
          accedence_time:[
            { required: true, message: '请选择入职时间', trigger: 'blur' },
          ],
          post:[
            { min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' },
          ]
        }
      }
    },
    mounted(){
			if (localStorage.getItem('dept_tree')) {
				this.dept_tree = JSON.parse(localStorage.getItem('dept_tree'))
      }
      this.get_new_employee_list()
      this.$emit("test",()=>{})
    },
    watch:{
      'dept_arr'(val){
        let arr = []
        this.infoForm.dept_list = []
        val.forEach(element => {
          arr.push({id: element[element.length - 1]})
          this.infoForm.dept_list = arr
        });
      }
    },
    methods:{
      get_new_employee_list(){
        // let self = this
        // self.$http('get','/api/join/index').then((res) => {
        //   if (res.data.code == 1) {
        //     self.new_employee_list = res.data.data.list
        //   }else{
        //     self.$message.error(res.data.msg)
        //   }
        // }).finally(() => {
        //   self.loading = false
        // })
      },
      refuse(item){
        let self = this
        let data = {id: item.id}
        self.loading = true
        self.$confirm('拒绝'+item.account_name+'加入企业?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          self.$http('post','/api/join/refuse',data,).then((res) => {
            if (res.data.code == 1) {
              self.$message.success(res.data.msg)

              self.get_new_employee_list()
            } else{
              self.$message.error(res.data.msg)
            }
          }).catch((e) => {self.$message.error(e.data.msg)}).finally(() => {
            self.loading = false
          })
        }).catch(() => {});
      },
      agree(item){
        let self = this
        let data = {ids: [item.id]}
        self.loading = true
        self.$confirm('同意加入企业, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          self.$http('post','/api/join/agree',data,).then((res) => {
            if (res.data.code == 1) {
              self.$message.success(res.data.msg)
              self.get_new_employee_list()
            } else{
              self.$message.error(res.data.msg)
            }
          }).catch((e) => {self.$message.error(e.data.msg)}).finally(() => {
            self.loading = false
          })
        }).catch(() => {});
      },
      batch_pass(){
        let self = this
        self.loading = true
        self.$confirm('批量同意加入企业, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          self.$http('post','/api/join/agree',{ids: self.multipleSelection},).then((res) => {
            if (res.data.code == 1) {
              self.$message.success(res.data.msg)
            } else{
              self.$message.error(res.data.msg)
            }
          }).catch((e) => {self.$message.error(e.data.msg)}).finally(() => {
            self.loading = false
          })
        }).catch(() => {});
      },
      perfect(item){
        
        let self = this
        self.perfect_dialog_show = true
        self.$http('/api/employee/info',{id: item.invitation_employee_id}).then((res) => {
          if (res.data.code == 1) {
            self.infoForm = res.data.data
          } else{
            self.$message.error(res.data.msg)
          }
        }).catch((e) => {self.$message.error(e.data.msg)}).finally(() => {
          self.loading = false
        })
      },
      goBack(){
        this.$router.push('/employee_table')
      },
      submitForm(infoForm) {
        let self = this
        self.$refs[infoForm].validate((valid) => {
          if (valid) {
            self.save_loading = true;

            if(self.infoForm.dept_list == undefined || (self.infoForm.dept_list !== null && self.infoForm.dept_list.length == 0)){
              self.$message.error('部门不能为空')
              self.save_loading = false
            }else{
              let data = {
                id: self.infoForm.id,
                name: self.infoForm.name,
                tel: self.infoForm.tel,
                accedence_time: self.infoForm.accedence_time,
                company_id: self.infoForm.company_id,
                post: self.infoForm.post,
                status: self.infoForm.status,
                dept_list: self.infoForm.dept_list
              }
              self.$http('post','/api/employee/update',data,).then((res) => {
                if (res.data.code == 1) {
                  self.$message.success(res.data.msg)
                  self.colse();
                  self.get_new_employee_list()
                } else{
                  self.$message.error(res.data.msg)
                }
              }).catch((e) => {self.$message.error(e.data.msg)}).finally(() => {self.save_loading = false})
            }
          } else {
            return false;
          }
        });
      },
      colse(){
        this.dept_arr=[];
        this.$refs.infoForm.resetFields();
        this.perfect_dialog_show = false
      },
      isDisabled(row){
        if(row.status !== 0){
          return 0;
        }
        return 1;
      },
      handleSelectionChange(val) {
        this.multipleSelection = []
        val.forEach(item => {
          this.multipleSelection.push(item.id)
        });
      }
    }
  }
</script>
<style scoped lang="scss">
  .new_employee_box{
    background-color: #ffffff;
    padding: 20px;
    min-height: calc(100vh - 160px);
  }
</style>
