<template>
  <!-- 跟进成员 -->
  <main-page
    left-arrow
    @click-left="$router.go(-1)"
  >
    <app-icon
      slot="right"
      icon-name="plus-black"
      class-name="w-6.5 h-6.5"
      @click="show=true"
    />
    <van-action-sheet
      v-model="show"
      :actions="actions"
      cancel-text="取消"
      close-on-click-action
      @select="onSelect"
    />
    <div class="pt-12 px-4 pb-4">
      <div v-if="follows.length < 1" class="text-center text-sm text-text-secondary mt-20">暂无跟进人员</div>
      <div
        v-for="follow in follows"
        v-else
        :key="follow.id"
        @click="selectFollow(follow)"
      >
        <div class="flex items-center">
          <div v-if="showRadio" class="h-6 w-6 flex items-center justify-center flex-shrink-0 mr-3">
            <app-icon
              v-if="selected.indexOf(follow.id) < 0"
              icon-name="radio"
              class-name="w-4 h-4"
            />
            <app-icon
              v-else
              icon-name="radio-checked"
              class-name="w-4 h-4"
            />
          </div>
          <div class="title flex-1 py-2 flex items-center overflow-hidden">
            <app-icon
              icon-name="avator"
              class-name="w-9 h-9 flex-shrink-0"
            />
            <div class="ml-2 flex-1 truncate">{{ follow.name }}</div>
          </div>
        </div>
      </div>
    </div>
    <div v-if="showRadio && follows.length > 0" class="fixed bg-common-bg w-full bottom-0 left-0 px-4 py-1.5">
      <c-button type="secondary" @click="deleteFollow">删除</c-button>
    </div>
  </main-page>
</template>

<script lang="ts">
import Vue from 'vue'
import { ActionSheet, Toast } from 'vant'
Vue.use(ActionSheet).use(Toast)

interface Follow {
  name: string,
  id: string
}

export default Vue.extend({
  name: 'Follows',
  components: {
    'main-page': () => import('@/layout/main-page.vue'),
    'app-icon': () => import('@/components/common/Icon.vue'),
    'c-button': () => import('@/components/common/c-button.vue')
  },
  data() {
    const selected: Array<string> = []
    const follows: Array<Follow> = []
    return {
      follows,
      show: false,
      showRadio: false,
      selected,
      actions: [
        { name: '添加新成员', type: 'add' },
        { name: '删除成员', type: 'delete' }
      ]
    }
  },
  created() {
    const arr: Array<Follow> = []
    for (let i = 0; i <= 6; i++) {
      const name = i === 3 ? '有一只鱼名字很长很长很长很长很长的话后面就省略' : '真实姓名'
      arr.push({
        name,
        id: i + name
      })
    }
    this.follows = arr
  },
  methods: {
    onSelect(item: {name: string, type: string}) {
      console.log(item.type, 'type')
      if (item.type === 'add') {
        this.$router.push({
          path: '/team/team-frame',
          query: {
            transfer: '1'
          }
        })
      } else if (item.type === 'delete') {
        this.showRadio = true
      }
    },
    selectFollow(follow: Follow) {
      const index = this.selected.findIndex(i => i === follow.id)
      if (index < 0) {
        this.selected.push(follow.id)
      } else {
        this.selected.splice(index, 1)
      }
    },
    deleteFollow() {
      if (this.selected.length < 1) {
        Toast('请选择需要删除的成员')
        return
      }
      this.$dialog.confirm({
        title: '提示',
        message: '确定要删除选中的成员吗？'
        // confirmButtonText: '解散'
      }).then(() => {
        this.selected.forEach(id => {
          const index = this.follows.findIndex(follow => follow.id === id)
          this.follows.splice(index, 1)
        })
        this.selected = []
      }).catch(() => {
        console.log('取消解散')
      })
    }
  }
})
</script>

<style lang="less">

</style>
