<template>
  <!-- <div class=""> -->
  <main-page
    left-arrow
    @click-left="$router.go(-1)"
    class="relative"
    :loading="loading"
  >
    <div v-if="isEdit" class="bg-common-bg h-full fixed top-0 left-0 z-2001 w-full overflow-y-scroll">
      <dep-selector
        :ent-id="entId"
        :show.sync="showDepSelector"
        :selected.sync="selectedDepId"
      ></dep-selector>
      <div class="header relative h-12 flex items-center justify-center">
        <div class="absolute left-4" @click="isEdit=false">
          <app-icon
            icon-name="left-arrow"
            class-name="w-6.5 h-6.5"
          ></app-icon>
        </div>
        <div class="">完善成员信息</div>
      </div>
      <div class="px-4 pb-6">
        <!-- 姓名/职位 -->
        <input-cell
          v-model="detail.fromName"
          required
          :limit="10"
          label="真实姓名"
          placeholder="请输入姓名"
          error-msg="姓名不能为空"
        />
        <input-cell
          class="mt-4"
          v-model="detail.position"
          :limit="10"
          label="职位"
          placeholder="请输入职位"
          error-msg="职位不能为空"
        />
        <!-- 选择部门 -->
        <group-cell class="mt-4" title="所属部门" @click.native="selectDep">
          <c-cell dot :title="currentDep.name" />
        </group-cell>
        <!-- 手机号/员工编号/入职时间  -->
        <c-cell
          title="手机号"
          :content="detail.phone"
          class="mt-4"
        />
        <c-cell
          v-model="detail.shortPhone"
          title="短号"
          placeholder="请输入短号"
          type="input"
          input-type="number"
        />
        <c-cell
          v-model="detail.email"
          title="邮箱"
          placeholder="请输入邮箱"
          type="input"
          :validator="checkMail"
        />
        <c-cell
          dot
          title="入职时间"
          :content="formatDate(joinTime*1000 || new Date().getTime(), 'YYYY-MM-DD')"
          @click="showCalendar = true"
        />
        <van-calendar
          v-model="showCalendar"
          :round="false"
          color="#4F62C1"
          :show-confirm="true"
          :style="{ height: '100%' }"
          :min-date="new Date(1971,1,1)"
          @confirm="selectJoinTime"
        />
        <!--按钮-->
        <div class="mt-4">
          <c-button @click="confirm">通过申请</c-button>
          <!-- <c-button class="mt-2" type="secondary">删除员工</c-button> -->
        </div>
      </div>
    </div>
    <!-- 申请信息 -->
    <div v-else class="request relative px-4 pt-14">
      <div v-if="applyList.length !== 0" class="left-border w-0.5 bg-border-lighter h-full top-0 left-8 absolute"/> 
      <!-- 申请详情 -->
      <vue-custom-scrollbar class="custom-scroll" @ps-y-reach-end="scrollHanle">
        <div v-if="applyList.length === 0" class="text-text-secondary text-sm text-center mt-12">
          暂无申请列表
        </div>
        <div class="relative" v-for="item in applyList" :key="item.id">
          <!-- <div v-for="(detail,i) in item.children" :key="i"> -->
          <request
            :detail="item"
            class="pb-4"
            @pass="pass"
            @reject="reject"
            @showDetail="showDetail"
          />
          <!-- </div> -->
        </div>
        <div v-if="counts === 0 && applyList.length > 0" class="py-1 text-center text-text-secondary text-sm">暂无更多审批</div>
      </vue-custom-scrollbar>
    </div>
  </main-page>
  <!-- </div> -->
</template>

<script lang="ts">
import Vue, { PropType } from 'vue'
import { List, Info, details } from '@/DTO/request'
import { ApplyItem, ApplyStatus, Department } from '@/Interface'
import { Calendar } from 'vant'
import { validateMail } from '@/util/Validator'
import { formatDate } from '@/util/FormatDate'
// import BScroll from 'better-scroll'
import vueCustomScrollbar from 'vue-custom-scrollbar'
import "vue-custom-scrollbar/dist/vueScrollbar.css"

Vue.use(Calendar)

export default Vue.extend({
  name:'ApplyList',
  components:{
    'main-page': () => import('@/layout/main-page.vue'),
    'app-icon':()=>import('@/components/common/Icon.vue'),
    'c-button': () => import('@/components/common/c-button.vue'),
    'input-cell': () => import('@/components/common/input-cell.vue'),
    'c-cell': () => import('@/components/common/c-cell.vue'),
    'group-cell': () => import('@/components/common/group-cell.vue'),
    'request':()=>import('@/views/team/components/request.vue'),
    'dep-selector': () => import('@/views/team/components/dep-selector.vue'),
    vueCustomScrollbar
  },
  data(){
    let List :Array<List> = details
    return{
      List,
      entId: '',
      limit: 10,
      offset: 1,
      counts: 0,
      applyList: [
      // {
      //   applyId: '1212211212',
      //   createTime: new Date().getTime(),
      //   details: {
      //     fromName: '测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试',
      //     phone: '16112345678',
      //     shortPhone: '1223122312231223122312231223122312231223',
      //     email: '123@12.com'
      //   },
      //   reason: '申请加入',
      //   status: 1,
      //   types: 0
      // }, {
      //   applyId: '12121212',
      //   createTime: new Date().getTime(),
      //   details: {
      //     fromName: '测试',
      //     phone: '16112345678',
      //     shortPhone: '1223122312231223122312231223122312231223122312231122312231122312231',
      //     email: '123@12.com'
      //   },
      //   reason: '申请加入',
      //   status: 0,
      //   types: 0
      // }, {
      //   applyId: '12111111',
      //   createTime: new Date().getTime(),
      //   details: {
      //     fromName: '测试',
      //     phone: '16112345678',
      //     shortPhone: '1223',
      //     email: '123@12.com'
      //   },
      //   reason: '申请加入',
      //   status: 0,
      //   types: 0
      // }, {
      //   applyId: '11111112',
      //   createTime: new Date().getTime(),
      //   details: {
      //     fromName: '测试',
      //     phone: '16112345678',
      //     shortPhone: '1223',
      //     email: '123@12.com'
      //   },
      //   reason: '申请加入',
      //   status: 0,
      //   types: 0
      // }, {
      //   applyId: '12121222211212',
      //   createTime: new Date().getTime(),
      //   details: {
      //     fromName: '测试',
      //     phone: '16112345678',
      //     shortPhone: '1223',
      //     email: '123@12.com'
      //   },
      //   reason: '申请加入',
      //   status: 0,
      //   types: 0
      // }
      ] as ApplyItem[],
      applyCount: 1,
      showOverLay: false,

      showCalendar: false,
      fromName: '12',
      phone: '12',
      shortPhone: '222',
      position: '产品',
      email: '1@123.com',
      joinTime: Math.round(new Date().getTime()/1000),
      isEdit: false,
      showDepSelector: false,
      selectedDepId: '',
      currentDep: {} as Department,
      parentDep: {} as Department,
      currentApply: {} as ApplyItem,
      detail: {
        fromName: '',
        position: '',
        phone: '',
        shortPhone: '',
        email: ''
      },
      rootDepId: '',
      loading: false,
    }
  },
  created() {
    this.entId = JSON.parse(localStorage.getItem('ENT_INFO') as string).id
    const depId = JSON.parse(localStorage.getItem('ENT_INFO') as string).rootDepId
    this.rootDepId = depId
    this.selectedDepId = depId
    this.getApplyList()
  },
  methods: {
    formatDate,
    scrollHanle() {
      if (this.counts === 0) return
      this.getApplyList()
    },
    selectDep() {
      this.showDepSelector = true
    },
    pass(detail: any) {
      const details = detail.details
      const applyId = detail.applyId
      const {fromName, phone} = details
      const data = {
        fromName, phone, applyId, status: ApplyStatus.AGREE
      }
      this.approval(data)
    },
    reject(detail: any) {
      const details = detail.details
      const applyId = detail.applyId
      const {fromName, phone} = details
      const data = {
        fromName, phone, applyId, status: ApplyStatus.REJECT
      }
      this.approval(data)
    },
    approval(data: any) {
      this.loading = true
      this.$service.apply.approvalJoin(data).then((res: any) => {
        const {data} = res
        this.loading = false
        if (data.code === this.$global.success) {
          this.$toast('操作成功')
          this.selectedDepId = this.rootDepId
          this.isEdit = false
          this.offset = 1
          this.getApplyList()
        }
      }).catch(() => this.loading=false)
    },
    confirm() {
      const {fromName, position, phone, shortPhone, email} = this.detail
      const data = {
        fromName, position, phone, shortPhone, email,
        joinTime: this.joinTime,
        depId: this.currentDep.id,
        applyId: this.currentApply.applyId,
        status: ApplyStatus.AGREE
      }
      this.approval(data)
    },
    // 入职日期
    selectJoinTime(date: Date) {
      this.joinTime = Math.round(new Date(date).getTime()/1000)
      this.showCalendar = false
    },
    checkMail(value: string, callback: Function) {
      if (!validateMail(value)) {
        callback(new Error('邮箱格式有误，请重新输入'))
      } else {
        callback()
      }
    },
    getApplyList() {
      const {entId, limit, offset} = this
      this.loading = true
      this.$service.apply.getApply({
        entId,
        limit,
        offset
      }).then((res: any) => {
        const {data} = res
        this.loading = false
        if (data.code === this.$global.success) {
          if (this.offset === 1) {
            this.applyList = []
          }
          this.applyList = this.applyList.concat(data.data.applyList)
          this.offset += data.data.counts
          this.counts = data.data.counts
        } else {
          this.$toast(data.msg)
        }
      })
    },
    showDetail(detail: any) {
      if (detail.status !== ApplyStatus.PENDING) return
      this.currentApply = detail
      this.detail = Object.assign(this.detail, detail.details)
      this.showOverLay = true
      this.isEdit = true
    },
    getDepInfo(id: string) {
      // this.loading = true
      this.$service.department.getDep({
        entId: this.entId,
        id
      }).then((res: any) => {
        // this.loading = false
        const {data} = res
        if (data.code === this.$global.success) {
          this.currentDep = data.data
        } else {
          this.$toast(data.msg)
        }
      })
    },
  },
  watch: {
    selectedDepId(val: string) {
      this.getDepInfo(val)
    }
  }
})
</script>

<style lang="less">
  .custom-scroll {
    height: calc(100vh - 64px);
  }
</style>