<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
          v-model="date"
          dot
          title="入职时间"
          :content="formatDate(joinTime || 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: '1223',
      //     email: '123@12.com'
      //   },
      //   reason: '申请加入',
      //   status: 1,
      //   types: 0
      // }, {
      //   applyId: '12121212',
      //   createTime: new Date().getTime(),
      //   details: {
      //     fromName: '测试',
      //     phone: '16112345678',
      //     shortPhone: '1223',
      //     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: new Date().getTime(),
      date: '0',
      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.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())
      this.showCalendar = false
      this.date = this.formatDate(date)
    },
    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) {
          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>