<template>
  <view class="w-full">
    <view class="w-full flex flex-col">
      <view class="flex flex-nowrap bg-white mb-2 px-2" style="height: 48px; line-height: 48px">
        <view class="col1">排名</view>
        <view class="col2">单位/个人</view>
        <view class="col2">提交总数</view>
        <view class="col2">高危人数</view>
      </view>
      <view class="rankings" v-if="lists.length">
        <view class="bg-white px-2">
          <view class="ranking flex flex-nowrap" v-for="(list, index) in lists" :key="index">
            <view class="col1">
              {{ index + 1 }}
            </view>
            <view class="col2 text-blue-500">{{ list.doctorName }}</view>
            <view class="col2 font-bold">
              <span>{{ list.highNum }}</span>
            </view>
            <view class="col2 font-bold">{{ list.totalNum }}</view>
          </view>
        </view>
        <u-line></u-line>
      </view>
      <u-empty v-else mode="list" class="mt-10"> </u-empty>
    </view>
  </view>
</template>

<script>
import { mapState } from 'vuex';

export default {
  data() {
    return { lists: [] };
  },

  computed: mapState('role', ['roleId']),

  created() {
    this.getData();
  },

  methods: {
    // 卫生院查看村医工作量
    async getData() {
      try {
        uni.$t.ui.showLoading('玩命加载中...');
        this.lists = [];
        const params = { roleId: this.roleId };
        const data = await this.$u.api.centerWorkload(params);
        this.lists = data;
      } catch (error) {
        console.log(error);
      }
    },
  },
};
</script>

<style>
.rankings {
  overflow-y: scroll;
}

.ranking {
  height: 48px;
  line-height: 48px;
  border-bottom: 1px solid #f4f4f4;
}

.col1 {
  width: 16%;
  text-align: center;
}

.col2 {
  width: 28%;
  text-align: center;
}
</style>
