<template>
  <div class="main">
    <van-form class="form">
        <van-field v-model="store.current.group_name" label="小组名称" readonly colon />
        <van-field :model-value="groupTypeName(store.current.group_type)" readonly label="小组类型" colon />
        <van-field class="user-field" readonly label="小组成员" colon />
        <div class="user-list">
            <van-tag type="primary" v-for="user in store.current.users.vals">{{user.real_name}}</van-tag>
        </div>
        <van-field class="user-field" readonly label="助理老师" colon />
        <div class="user-list">
            <van-tag type="primary" v-for="user in store.current.owners?.vals">{{user.real_name}}</van-tag>
        </div>
        <van-field v-model="store.current.group_desc" label="小组描述" readonly autosize maxlength="100" colon type="textarea" rows="3"/>
        <div class="foot" v-if="is_creator">
            <van-button type="primary" @click="$router.push('/user-group/edit?id=' + store.current.id)">编辑</van-button>
            <van-button type="danger" @click="onRemove()">删除</van-button>
        </div>
    </van-form>
  </div>
</template>

<script lang="ts">
import {defineComponent, computed} from 'vue';
import {Button, showConfirmDialog, Field, Form, Image, Loading, Toast, Picker, Popup, Tag, showFailToast} from 'vant';
import {useRouter} from "vue-router";
import useUserGroup from '~/store/user-group';
import {GroupTypes} from '~/types'
import useUser from '~/store/user';

export default defineComponent({
  name: "user-group-detail",
  components: {
    [Loading.name]: Loading,
    [Toast.name]: Toast,
    [Button.name]: Button,
    [Image.name]: Image,
    [Form.name]: Form,
    [Field.name]: Field,
    [Picker.name]: Picker,
    [Popup.name]: Popup,
    [Tag.name]: Tag
  },
  props: ['params'],
  setup({params}) {
    const router = useRouter();
    const {store, remove, reset} = useUserGroup();
    const usingUser = useUser();
    reset();

    if (params.id) {
        let item = [...store.mine, ...store.assigned].find(x => x.id === params.id)
        if (item) {
            store.current = item
        } else {
          showFailToast('未找到指定数据！')
            router.push('/user-group')
        }
    }

    const groupTypeName = (group_type: GroupTypes) => {
        return {
            [GroupTypes.TeacherGroup]: '教师小组',
            [GroupTypes.TeacherWithStudent]: '师生小组',
            [GroupTypes.StudentGroup]: '学生小组',
        }[group_type];
    }

    const onRemove = () => {
      showConfirmDialog({
            title: "删除小组",
            message: "操作不可撤销，确定删除该小组？",
            
        }).then(async () => {
            await remove(store.current.id);
            router.back();
        })
    }

    const is_creator = computed(() => usingUser.store.current.hty_id === store.current.created_by)


    return {
      store, groupTypeName, onRemove, is_creator
    };
  }

});
</script>

<style scoped lang="less">
.main {
    background: #FFFFFF;
    overflow: auto;
    .form {
        .user-field {
            &::after {
                display: none!important;
            }
        }

        .user-list {
            position: relative;
            padding: 0 0.24rem 0.16rem;

            :deep(.van-tag) {
                margin: 0.06rem 0.08rem;
            }
            &::after {
                position: absolute;
                box-sizing: border-box;
                content: " ";
                pointer-events: none;
                right: var(--van-padding-md);
                bottom: 0;
                left: var(--van-padding-md);
                border-bottom: 1px solid var(--van-cell-border-color);
                transform: scaleY(.5);
            }
        }

        .foot {
            padding: 0.32rem;
            display: flex;
            align-content: center;
            justify-content: space-between;

            button {
                width: 45%;
            }
        }
    }
}
</style>
