<template>
  <!-- 编辑员工 -->
  <main-page
    left-arrow
    @click-left="$router.go(-1)"
  >
    <div class="pt-14 px-4">
      <input-cell
        v-model="name"
        required
        :limit="10"
        label="真实姓名"
        placeholder="请输入姓名"
        error-msg="姓名不能为空"
      />
      <input-cell
        v-model="position"
        :limit="10"
        label="职位"
        placeholder="请输入职位"
        class="mt-4"
      />
      <c-cell
        v-model="phone"
        title="手机号"
        type="input"
        placeholder="请输入手机号"
        class="mt-4"
      />
      <c-cell
        title="员工编号"
        content="12"
      />
      <c-cell
        dot
        title="入职时间"
        content="2019-12-18"
      />
      <group-cell class="mt-4" title="所属部门">
        <c-cell title="产品设计部(主要部门)" />
        <c-cell title="设计部(子部门)" />
      </group-cell>
      <c-button
        round
        type="secondary"
        class="mt-10"
        @click="deleteMember"
      >
        删除员工
      </c-button>
    </div>
  </main-page>
</template>

<script lang="ts">
import Vue from 'vue'

export default Vue.extend({
  name: 'EditMember',
  components: {
    // 'app-icon':()=>import('./components/common/Icon.vue'),
    'main-page': () => import('@/layout/main-page.vue'),
    'input-cell': () => import('@/components/common/input-cell.vue'),
    'c-cell': () => import('@/components/common/c-cell.vue'),
    'c-button': () => import('@/components/common/c-button.vue'),
    'group-cell': () => import('@/components/common/group-cell.vue')
  },
  data() {
    return {
      name: '张三',
      position: '',
      memberId: '',
      show: true,
      phone: '13112345678'
    }
  },
  created() {
    this.memberId = this.$route.params.id
  },
  methods: {
    deleteMember() {
      this.$dialog.confirm({
        title: '提示',
        message: '删除员工后，将移出对应的部门群和全员群，若是主管，则对应部门和群均会删除，确定删除吗？',
        confirmButtonText: '全部删除'
      }).then((res) => {
        console.log(res, 'res')
      }).catch(err => {
        console.log(err, 'error')
      })
    }
  }
})
</script>

<style lang="less">

</style>
