<template>
  <!-- <div class="title">整体进度</div>
  <div style="margin-top: 10px;">
    <el-progress :text-inside="true" :stroke-width="26" :percentage="1" status="warning" />
  </div> -->

  <!-- <el-card style="margin-top: 10px;">
    <template #header>
      <div class="card-header">
        <span>气质类型测试量表(1/75)</span>
      </div>
    </template>

<el-progress :text-inside="true" :stroke-width="26" :percentage="1" />
</el-card> -->

  <el-card style="margin-top: 10px">
    <template #header>
      <div class="card-header">
        <span>活动摘要</span>
      </div>
    </template>
    <el-descriptions title="摘要详情" :column="3">
      <el-descriptions-item label="活动名称">{{ info.sessionName }}</el-descriptions-item>
      <el-descriptions-item label="发起人">{{ info.createName }}</el-descriptions-item>

      <el-descriptions-item label="截止时间">
        {{ info.expireTime }}
      </el-descriptions-item>

      <el-descriptions-item label="相关量表">
        {{ info.scaleNames.join() }}
      </el-descriptions-item>

      <el-descriptions-item label="相关班级">
        {{ info.deptNames.join() }}
      </el-descriptions-item>
    </el-descriptions>
  </el-card>

  <el-card style="margin-top: 10px;">
    <template #header>
      <div class="card-header">
        <span>进度列表</span>
      </div>
    </template>

    <el-row justify="start">
      <el-form :model="queryParams" ref="queryFormRef" :inline="true" label-width="68px">
        <el-form-item label="量表" prop="scaleId">
          <el-select v-model="queryParams.scaleId" placeholder="请选择量表" style="width: 240px" @keyup.enter="handleQuery"
            @change="handleScaleChange">
            <el-option v-for="item in scaleList" :key="item.scaleId" :label="item.scaleName" :value="item.scaleId" />
          </el-select>
        </el-form-item>
        <el-form-item label="部门" prop="deptId">
          <el-tree-select v-model="queryParams.deptId" :data="deptOptions" style="width: 240px"
            :props="{ value: 'id', label: 'label', children: 'children' }" value-key="id" placeholder="请选择归属部门"
            check-strictly @node-click="handleDeptClick" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
          <el-button icon="Refresh" @click="resetQuery">重置</el-button>
          <el-button type="warning" @click="exportUncomplete">导出未测名单</el-button>
        </el-form-item>
      </el-form>
    </el-row>

    <el-row justify="center">
      <el-table :data="completeTableData" style="width: 100%;">
        <el-table-column prop="scaleName" label="量表" />
        <el-table-column prop="nickName" label="用户姓名" />
        <el-table-column prop="deptName" label="班级" />
        <el-table-column prop="status" label="状态">
          <template #default="scope">
            <el-tag :type="scope.row.status <= 0 ? 'danger' : 'success'">{{ scope.row.status <= 0 ? '未测' : '已测'
                }}</el-tag>
          </template>
        </el-table-column>
      </el-table>
    </el-row>

    <el-row justify="end">
      <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum"
        v-model:limit="queryParams.pageSize" @pagination="getList" />
    </el-row>
  </el-card>
</template>

<script setup lang="ts">
import { getScalePublish } from '@/api/scale/scalePublish';
import { getSchedule } from '@/api/activity/statistics'
import { deptTreeSelect } from "@/api/system/user"

const { proxy } = getCurrentInstance() as ComponentInternalInstance;

const props = defineProps({
  batchNo: {
    type: String,
    default: ''
  },
  sessionName: {
    type: String,
    default: ''
  }
})
const batchNo = props.batchNo
const sessionName = props.sessionName
const scaleList = ref<any[]>([])

const currentScale = ref({ scaleId: '', scaleName: '' })
const currentDept = ref({ deptId: '', deptName: '' })

const total = ref(10)
const completeTableData = ref<any[]>([])

const deptOptions = ref<any[]>([]);

const queryFormRef = ref()
const queryParams = ref({
  batchNo: batchNo,
  pageNum: 1,
  pageSize: 10,
  scaleId: '',
  deptId: ''
})

const getTreeSelect = async () => {
  const res = await deptTreeSelect();
  deptOptions.value = res.data;

  if (res.data && res.data.length > 0) {
    queryParams.value.deptId = res.data[0].id;

    currentDept.value = { deptId: res.data[0].id, deptName: res.data[0].label }
  }
}

const info = ref({ sessionName: '', createName: '', expireTime: '', scaleNames: [], deptNames: [] })
async function getScalePublishList() {
  const res = await getScalePublish(batchNo)
  info.value = res.data

  const scaleIds = res.data.scaleIds
  const scaleNames = res.data.scaleNames
  scaleIds.forEach((item: any, index: any) => {
    scaleList.value.push({ scaleId: item, scaleName: scaleNames[index] })
  })

  if (scaleIds.length) {
    queryParams.value.scaleId = scaleIds[0]
    currentScale.value = { scaleId: scaleIds[0], scaleName: scaleNames[0] }

    getList()
  }
}

function handleQuery() {
  queryParams.value.pageNum = 1
  getList()
}

function resetQuery() {
  queryParams.value.scaleId = ''
  queryParams.value.deptId = ''

  handleQuery()
}

async function getList() {
  const res = await getSchedule(queryParams.value)
  completeTableData.value = res.rows
  total.value = res.total
}

function handleScaleChange(val: any) {
  const current = scaleList.value.find(item => item.scaleId === val)
  currentScale.value = { scaleId: current.scaleId, scaleName: current.scaleName }
}

function handleDeptClick(dept: any) {
  currentDept.value = { deptId: dept.id, deptName: dept.label }
}

function exportUncomplete() {
  proxy?.download('scale/publish/evaluation/undone/export', {
    batchNo, sessionName, scaleId: currentScale.value.scaleId, deptId: currentDept.value.deptId
  }, `${sessionName}-${currentScale.value.scaleName}-${currentDept.value.deptName}.xlsx`)
}


onMounted(() => {
  getTreeSelect()
  getScalePublishList()
})
</script>

<style lang="scss" scoped>
.title {
  font-size: 20px;
  font-weight: bold;
  line-height: 40px;
}
</style>