<template>
  <div class="employee_edit_box">
    <van-nav-bar title="修改员工信息" left-text="返回" @click-left="$route_back" left-arrow>
    <!-- <van-nav-bar right-text="保存" title="修改员工信息" left-text="返回" @click-left="$route_back" @click-right="save_btn" left-arrow> -->

    </van-nav-bar>
    <div class="body_com">
      <scroller>
        <van-cell-group>
          <van-field label="姓名" name="姓名" :disabled="employee_info.status != 1" required v-model="employee_info.name" v-validate="'required|min:2|max:20'" placeholder="请输入姓名" />
          <van-field label="手机" name="手机" :disabled="employee_info.status != 1" required v-model="employee_info.tel" v-validate="'required|phone'" type="tel" placeholder="请输入手机号码" />
        </van-cell-group>
        <van-cell-group>
          <van-cell required name="部门" title="部门" :disabled="employee_info.status == 2" is-link @click="show_dept_selector = true" :value="selecte_dept_name" />
          <van-cell required name="状态" title="状态" :disabled="employee_info.status == 2" :value="employee_info.status == 0?'待邀':(employee_info.status == 1?'在职':'离职')" />
          <van-field label="工号" name="工号" :disabled="employee_info.status == 2" v-model="employee_info.company_id" v-validate="'max:20'" placeholder="请输入工号" />
          <van-field label="职位" name="职位" :disabled="employee_info.status == 2" v-model="employee_info.post" placeholder="如：技术经理" />
          <van-cell title="入职日期" :disabled="employee_info.status == 2" name="入职日期" class="hiredate-cell" @click="select_date=true">{{employee_info.accedence_time}}</van-cell>
        </van-cell-group>

        <div class="submit_btn_box">
          <van-button hairline :disabled="employee_info.status == 2" type="info" size="large" @click="save_btn">保存修改</van-button>
        </div>
        <div style="padding: 0 0.32rem" v-show=" (get_id != company_info.creator_id) && employee_info.status == 1">
          <van-button hairline type="warning" size="large" @click="employee_quit">办理离职</van-button>
        </div>
        <div style="padding: 0 0.32rem" v-show=" (get_id != company_info.creator_id) && (employee_info.status == 2 || employee_info.status == 0)">
          <van-button hairline type="danger" size="large" @click="employee_delete">删除成员</van-button>
        </div>
      </scroller>

      <EmployeeSelector :can_select_employee="false" :can_select_dept="true" :dept_multi="true" @confirm="move_confirm"
        :visible.sync="show_dept_selector" @cancel="move_cancel"></EmployeeSelector>
      <van-action-sheet
        v-model="show"
        :actions="actions"
        @select="onSelect"
        cancel-text="取消"
        @cancel="onCancel"
      />
      <van-action-sheet v-model="select_date">
        <van-datetime-picker
          v-model="currentDate"
          type="date"
          :min-date="minDate"
          @confirm="select_date_confirm"
          @cancel="select_date_cancel"
        />
      </van-action-sheet>
    </div>
  </div>
</template>

<script>
import moment from 'moment'
import request from '@/utils/request'
import EmployeeSelector from '@/components/common/EmployeeSelector'
import {getToken} from '@/utils/auth'
import Vue from 'vue'
import { DatetimePicker, Notify, ActionSheet } from 'vant'
Vue.use(DatetimePicker).use(Notify).use(ActionSheet)
export default {
  name: 'employee_edit',
  data () {
    return {
      submit_loading: false,
      employee_info: {},
      select_date: false,
      show_dept_selector: false,
      show_superior_selector: false,
      company_info: this.$store.getters.user_info.company_info,
      click_count: 0,
      show: false,
      dept_list: '',
      get_id: this.$route.query.id,
      actions: [
        // { name: '待邀', value: '0' },
        { name: '在职', value: '1' },
        { name: '离职', value: '2' }
      ],
      dept_selected_list: '',
      dept_selected: '',
      selecte_dept_name: '',
      currentDate: new Date(),
      minDate: new Date(1950, 0, 1)
    }
  },
  // 组件
  components: {
    EmployeeSelector
  },
  methods: {
    // 选择日期确认
    select_date_confirm (value) {
      this.select_date = false
      this.employee_info.accedence_time = moment(value).format('YYYY-MM-DD')
    },
    // 选择时间取消
    select_date_cancel () {
      this.select_date = false
    },
    // 关闭选择部门弹窗
    move_cancel () {
      this.employee_selected_list = []
      this.dept_selected_list = []
      this.employee_selected = []
      this.dept_selected = []
    },
    // 选择部门 完成
    move_confirm (data) {
      if (data.dept) {
        let arr_name = [], arr_id = []
        this.employee_info.employee_detail.dept_list = []
        for (let i = 0; i < data.dept.length; i++) {
          arr_name.push(data.dept[i].dept_name)
          this.employee_info.employee_detail.dept_list.push(data.dept[i])
        }
        this.selecte_dept_name = arr_name.join(',')
      }
      this.move_cancel()
    },

    // 加载
    showLoading () {
      this.$toast.loading({
        mask: true,
        message: '正在处理'
      })
    },
    onSelect (item) {
      this.show = false
      this.employee_info.status = item.value
    },
    onCancel () {
      this.show = false
    },
    // 获取员工信息
    get_employee_detail (d) {
      let self = this
      self.showLoading()
      request('get', '/api/employee/info', {id: d.id}).then((res) => {
        if (res.data.code == 1) {
          if (res.data.data.accedence_time) {
            self.hiredate = res.data.data.accedence_time
          }
          self.employee_info = res.data.data
          if (res.data.data.employee_detail.dept_list.length > 0) {
            let arr = []
            for (let i = 0; i < self.employee_info.employee_detail.dept_list.length; i++) {
              arr.push(res.data.data.employee_detail.dept_list[i].dept_name)
            }
            self.selecte_dept_name = arr.join(',')
          } else {
            self.selecte_dept_name = self.company_info.name
          }
          self.$toast.clear()
        } else {
          self.$toast(res.data.msg)
        }
      }).catch((e) => {

      })
    },
    // 删除员工
    employee_delete () {
      let self = this
      let data = {
        id: self.$route.query.id
      }
      this.$dialog.confirm({
        title: '删除成员',
        message: '确定要删除当前成员吗？'
      }).then((res) => {
        request('POST', '/api/employee/delete', data).then((res) => {
          if (res.data.code == 1) {
            self.$toast('删除成功')
            self.$keep_alive_update('del_employee', data)
            setTimeout(() => {
              self.$route_back(-2)
            }, 500)
          } else {
            self.$toast(res.data.msg)
          }
        }).catch((e) => {
          self.$toast(e.msg)
        })
      }).catch(() => {
        // on cancel
      })
    },
    // 办理离职
    employee_quit () {
      let self = this
      let data = {
        id: self.employee_info.id
      }
      this.$dialog.confirm({
        title: '办理离职',
        message: '给此员工办理离职将不可恢复，确认要办理离职吗？'
      }).then((res) => {
        request('POST', '/api/employee/quit', data).then((res) => {
          if (res.data.code == 1) {
            self.$toast('离职成功')
            self.$keep_alive_update('quit_employee', data)
            setTimeout(() => {
              self.$route_back()
            }, 500)
          } else {
            self.$toast(res.data.msg)
          }
        }).catch((e) => {
          self.$toast(e.msg)
        })
      }).catch(() => {
        // on cancel
      })
    },
    // 编辑员工
    employee_update () {
      let self = this
      self.submit_loading = true
      self.$toast.loading({
        mask: true,
        message: '正在处理'
      })
      let data = {
        'id': self.employee_info.id,
        'name': self.employee_info.name,
        'tel': self.employee_info.tel,
        'accedence_time': self.employee_info.accedence_time,
        'company_id': self.employee_info.company_id,
        'post': self.employee_info.post,
        'status': self.employee_info.status,
        'dept_list': self.employee_info.employee_detail.dept_list
      }
      request('POST', '/api/employee/update', data).then((res) => {
        self.submit_loading = false
        if (res.data.code == 1) {
          self.$toast.clear()
          self.$toast(res.data.msg)
          switch (data.status) {
            case 1:
              data.status_remark = '在职'
              break
            case 2:
              data.status_remark = '离职'
              break
            default:
              data.status_remark = '待邀请'
              break
          }
          self.$keep_alive_update('employee_list', data)
          setTimeout(() => {
            self.$route_back()
          }, 500)
        } else {
          self.$toast(res.data.msg)
        }
      }).catch((e) => {
        self.$toast(e)
      })
    },
    // 保存
    save_btn () {
      let self = this
      self.$validator.validate().then(result => {
        if (!result) {
          Notify({ type: 'danger', message: self.$validator.errors.items[0].msg })
        } else {
          self.employee_update()
        }
      })
    }
  },
  mounted () {
    let query_data = this.$route.query
    this.get_employee_detail(query_data)
  }
}
</script>

<style scoped>
  /deep/ .child_btn{
    right: 0.32rem !important;
  }
  /deep/ .dept_path{
    font-size:0.28rem !important;
  }
  .submit_btn_box{padding:0.32rem;}
  .body_com{height: calc(100% - 0.92rem); position: relative;}
  .sex-cell .van-cell__title{width:1.8rem; display: block;-webkit-box-flex: none;
    -webkit-flex: none;
    flex: none;}
  .sex-cell .van-radio{float:left; margin-right:0.3rem;}
  .hiredate-cell .van-cell__title{width:1.8rem; display: block;-webkit-box-flex: none;
    -webkit-flex: none;
    flex: none;}
  .hiredate-cell .van-cell__value{
    text-align: left;}
  .user_img_w .van-cell__title,.user_img_w .van-icon{
    line-height: 1rem
  }
  .user_img{
    width: 1rem;
    height: 1rem;
    border-radius: 0.1rem;
  }
  .employee_edit_box /deep/ .van-button--primary{
    background:#238dfa;
    border:0.02rem solid #238dfa;
  }
  .employee_edit_box /deep/ .employee_cell .child_btn:active{
    color:#238dfa;
    opacity: 0.5;
  }
  .employee_edit_box /deep/ .van-picker__cancel{
    padding:0 1rem;
  }
  .employee_edit_box /deep/ .van-picker__confirm{
    padding:0 1rem;
  }
</style>
