<template>
  <div class="dept_box" style="background-color: rgb(245, 245, 245);height: 100%;">
    <van-nav-bar :title="this.title" left-text="返回" @click-left="$route_back" left-arrow>
      <template slot="right">
        <span v-if="formdata.name" class="van-nav-bar__text" @click="save_btn">保存</span>
      </template>
    </van-nav-bar>
    <div class="body_com has_header">
      <scroller>
        <van-cell-group style="margin-bottom: 0.4rem;">
          <!-- 部门名称 -->
          <van-field label="部门名称" required name="部门名称" v-model="formdata.name" v-validate="'required|max:15'" :placeholder="this.dept_name_placeholder" />
          <!-- 上级部门选择 -->
          <DeptSelectorCell title="选择部门" v-model="depts" :multi="false"></DeptSelectorCell>
          <!-- 部门主管选择 -->
          <EmployeeSelectorCell title="部门主管" v-model="formdata.manager" :multi="false" ></EmployeeSelectorCell>
        </van-cell-group>
        <van-button type="danger" v-if="this.$route.query.type == 'edit'" @click="del_dept" block>删除部门</van-button>
      </scroller>
    </div>

  </div>
</template>

<script>
import request from '@/utils/request'
import EmployeeSelector from '@/components/common/EmployeeSelector'
import EmployeeSelectorCell from '@/components/common/EmployeeSelectorCell'
import DeptSelectorCell from '@/components/common/DeptSelectorCell'
import Vue from 'vue'
import {Dialog} from 'vant'
Vue.use(Dialog)

export default {
  // 状态
  data () {
    return {
      title: '新增部门',
      formdata: {},
      employee_formdata: {
        id: '',
        name: '',
        img_url: ''
      },
      selecte_employee_name: '',
      user_info: this.$store.getters.user_info,
      company_info: this.$store.getters.user_info.company_info,
      select_name: '',
      select_dept: '',
      show_dept_selector: false,
      show_employee_selector: false,
      dept_name_placeholder: '输入部门名称(15个字以内)',
      dept_info: [],
      parent_dept_info: [],
      save_url: '/api/department/create',
      selected: {employee: [], dept: []},
      employee_list: {employee: [], dept: []},
      depts: []
    }
  },
  // 组件
  components: {
    EmployeeSelector, EmployeeSelectorCell, DeptSelectorCell
  },
  watch: {
    depts: function (val) {
      if (val.length > 0) {
        this.formdata.pid = val[0].dept_id
      } else {
        this.formdata.pid = '0'
      }
    },
    'formdata.manager': function (val) {
      if (val.length > 0) {
        this.formdata.manage_dept_ids = val[0].id
      } else {
        this.formdata.manage_dept_ids = 0
      }
    }
  },
  // 方法
  methods: {
    // 编辑部门
    edit_dept_list () {
      this.$toast.loading({
        message: '正在保存...',
        forbidClick: true
      })
      let data = {
        'id': this.formdata.id,
        'name': this.formdata.name,
        'pid': this.formdata.pid,
        'manage_dept_ids': this.formdata.manage_dept_ids
      }
      request('POST', this.save_url, data).then((res) => {
        if (res.data.code == 1) {
          this.$toast.clear()
          this.$toast(res.data.msg)
          data.selecte_employee_name = this.selecte_employee_name
          data['type'] = this.$route.query.type
          this.$keep_alive_update('update_dept_list', data)
          setTimeout(() => {
            this.$route_back()
          }, 500)
        } else {
          this.$toast(res.data.msg)
        }
      }).catch((e) => {})
    },
    // 部门详情信息
    get_dept_info () {
      this.$toast.loading({
        message: '加载中...',
        forbidClick: true
      })
      request('get', '/api/department/info', {id: this.$route.query.id}).then((res) => {
        if (res.data.code == 1) {
          this.formdata = res.data.data
          if (res.data.data.super_department == null) {
            this.depts = []
          } else {
            this.depts = [{dept_name: res.data.data.super_department.name, dept_id: res.data.data.super_department.id}]
          }
          this.$toast.clear()
        } else {
          this.$toast(res.data.msg)
        }
      }).catch((e) => {})
    },
    // 上级部门信息
    get_parent_dept_info () {
      request('get', '/api/department/info', {id: this.$route.query.parent_id}).then((res) => {
        if (res.data.code == 1) {
          this.depts = [{dept_name: res.data.data.name, dept_id: res.data.data.id}]
        } else {
          this.$toast(res.data.msg)
        }
      }).catch((e) => {})
    },
    // 删除部门
    del_dept () {
      Dialog.confirm({
        title: '提示',
        message: '确认删除该部门?'
      }).then((res) => {
        request('POST', '/api/department/delete', {id: this.$route.query.id}).then((res) => {
          if (res.data.code == 1) {
            this.$toast(res.data.msg)
            this.$keep_alive_update('del_dept_info', {})
            setTimeout(() => {
              this.$route_back()
            }, 300)
          } else {
            this.$toast(res.data.msg)
          }
        })
      })
    },
    save_btn () {
      let self = this
      self.$validator.validate().then(result => {
        if (!result) {
          self.$notify({ type: 'danger', message: self.$validator.errors.items[0].msg })
        } else {
          self.edit_dept_list()
        }
      })
    }
  },
  mounted () {
    if (this.$route.query.type == 'edit') {
      this.save_url = '/api/department/update'
      this.title = '编辑部门'
      this.get_dept_info()
    } else {
      if (this.$route.query.parent_id) {
        this.get_parent_dept_info()
      } else {
        this.depts = [{dept_name: this.company_info.name}]
      }
    }
  },
  // 生命周期 --- 创建完成
  created () {

  }
}
</script>

<style scoped>
  .body_com {
    height: calc(100% - 1rem);
    position: relative;
  }

  .van-button--normal{
    position:relative;
    width:calc(100vw - 0.64rem);
    margin:0 auto;
    color:#FFF;
    font-size:0.32rem;
  }
  .dept_box /deep/ .child_btn{
    right: 0.32rem;
    font-size:0.28rem;
  }
  .dept_box /deep/ .child_btn:active{
    color:#238dfa;
    opacity: 0.5;
  }
  .dept_box /deep/ .van-cell__title .child_btn:active{
    color:#238dfa;
    opacity: 0.5;
  }
  .dept_box /deep/ .van-button--primary{
    background:#238dfa;
    border:0.02rem solid #238dfa;

  }
</style>
