<script setup lang="ts" name="ListItemDisciplinary">
import MyAvatar from '@/component/Avatar/MyAvatar.vue'
import { selectDictLabel } from '@/common/utils/ruoyi'

const emit = defineEmits<{
  'on-detail': [item: any]
}>()
const props = defineProps<{
  list: any
  disciplinary_type: any
}>()

function onClickItem(item) {
  emit('on-detail', item)
}
</script>

<template>
  <div class="list">
    <template v-if="props.list?.length">
      <template v-for="(item, index) in props.list" :key="index">
        <div class="list-item" @click="onClickItem(item)">
          <div class="list-item-title">
            <div class="list-item-title-content">
              <div class="list-item-title-label">{{ item.name }}</div>
              <div class="list-item-desc">
                <span class="sex">{{ item.department }}</span>
                <van-divider vertical />
                <span class="place">{{ item.position }}</span>
                <van-divider vertical />
              </div>
              <div class="list-item-remark-disciplinary">
                <div :span="12" class="list-item-remark-content">奖惩金额：{{ item.amount }}</div>
                <div :span="12" class="list-item-remark-content" style="margin-left: 1rem;">奖惩分数：{{ item.scores }}</div>
              </div>
            </div>
          </div>
          <div class="list-item-remark">
            <DictTag
              plain
              :options="props.disciplinary_type"
              :value="item.type" />
          </div>
        </div>
      </template>
    </template>
    <van-empty v-if="!props.list?.length" description="暂无数据" />
  </div>
</template>

<style lang="less" scoped>
.list {
  padding: var(--container-pd);
  &-item {
    display: flex;
    margin-top: 1.2rem;
    padding: var(--container-pd);
    line-height: 1;
    border-radius: 24rpx;
    box-shadow: 0 4rpx 40rpx  rgba(64, 103, 251, 0.14);
    &-title {
      flex: 1;
      display: flex;
      align-items: center;
      overflow: hidden;
      &-content {
        margin-left: 0.8rem;
      }
      &-value {
        // color: var(--van-gray-7);
      }
    }
    &-desc {
      display: flex;
      align-items: center;
      margin: 0.4rem 0;
      color: var(--van-gray-6);
      font-size: 1.2rem;
    }
    &-remark {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: flex-end;
      &-content {
        // margin-top: 2rem;
        overflow: hidden;
        color: var(--van-gray-6);
        font-size: 1.2rem;
        :last-of-type {
          margin-left: 1rem;
        }
      }
      &-disciplinary {
        display: flex;
      }
    }
  }
}
</style>
