<template>
  <div class="departmentalAssessment publicContainer">
    <el-row class="topBox">
      <el-col :span="16" class="topLeft">
        <div class="topItem">
          <span class="topTitle">考核维度</span>
          <el-select v-model="queryParams.assessDimension" placeholder="请选择" style="width: 80px; margin-right: 10px">
            <el-option v-for="item in dimension" :key="item.value" :label="item.lable" :value="item.value"></el-option>
          </el-select>

          <el-date-picker
            v-if="queryParams.assessDimension === 'month'"
            placeholder="请选择"
            v-model="dimensionTime"
            type="month"
            format="YYYY-MM"
            value-format="YYYY-MM"
          />
          <el-date-picker
            v-if="queryParams.assessDimension === 'year'"
            placeholder="请选择"
            v-model="dimensionTime"
            type="year"
            format="YYYY"
            value-format="YYYY"
          />
        </div>
        <div class="topItem">
          <span class="topTitle">部门</span>
          <el-select v-model="queryParams.assessDeptId" placeholder="请选择" style="width: 270px">
            <el-option
              v-for="item in orderStore.systemDeptList"
              :key="item.deptId"
              :label="item.deptName"
              :value="item.deptId"
            ></el-option>
          </el-select>
        </div>
      </el-col>
      <el-col :span="8" class="topRight">
        <el-button type="primary" icon="search" @click="getList">查询</el-button>
        <el-button type="primary" icon="Refresh" @click="resetQuery">重置</el-button>
        <el-button type="primary" icon="" @click="exportOut">导出</el-button>
        <el-button type="primary" icon="Download" @click="downPdf">评估考核规则下载</el-button>
      </el-col>
    </el-row>
    <el-table class="tableBox" :data="tableData" style="width: 100%" v-loading="loading" v-setHeight="{ bottom: 80 }">
      <el-table-column type="index" label="序号" width="50"></el-table-column>
      <el-table-column prop="assessDate" label="考核时间"></el-table-column>
      <el-table-column prop="assessDeptId" label="考核部门" min-width="120">
        <template #default="{ row }">
          <div>{{ orderStore.systemDeptList.find(item => item.deptId == row.assessDeptId)?.deptName || row.assessDeptId }}</div>
        </template>
      </el-table-column>
      <el-table-column prop="needHandleCount" label="应处置数"></el-table-column>
      <el-table-column prop="unHandleCount" label="未处置数"></el-table-column>
      <el-table-column prop="handleCount" label="已处置数"></el-table-column>
      <el-table-column prop="ontimeHandleCount" label="按期处置数"></el-table-column>
      <el-table-column prop="overdueHandleCount" label="超期处置数"></el-table-column>
      <el-table-column prop="overdueUnHandleCount" label="超期未处置数"></el-table-column>
      <el-table-column prop="reworkCount" label="返工数"></el-table-column>
      <el-table-column prop="assessScore" label="考核评分"></el-table-column>
      <el-table-column prop="assessGrade" label="考核等级"></el-table-column>

      <el-table-column label="操作" min-width="100">
        <template #default="{ row }">
          <div style="display: flex; justify-content: space-evenly">
            <el-button link type="primary" @click="showDeatil(row)">详情</el-button>
            <el-button link type="primary" @click="outReport(row)">导出报告</el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <pagination
      class="pagingPosition"
      v-show="total > 0"
      :total="total"
      v-model:page="queryParams.pageNum"
      v-model:limit="queryParams.pageSize"
      @pagination="getList"
    />

    <!-- 详情 -->
    <el-dialog v-model="dialogConfig.open" :show-close="true" class="dia" destroy-on-close width="500px">
      <template #header>
        <div class="diaHeader">
          {{ dialogConfig.title }}
        </div>
      </template>
      <el-form :model="addForm" label-width="auto">
        <el-row>
          <el-col :span="24">
            <el-form-item label="应处置数" prop="">
              <el-input v-model="addForm.needHandleCount" placeholder="请输入" clearable disabled />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="24">
            <el-form-item label="未处置数" prop="">
              <el-input v-model="addForm.unHandleCount" placeholder="请输入" clearable disabled />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row justify="space-between">
          <el-col :span="24">
            <el-form-item label="已处置数" prop="">
              <el-input v-model="addForm.handleCount" placeholder="请输入" clearable disabled />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row justify="space-between">
          <el-col :span="24">
            <el-form-item label="按期处置数" prop="">
              <el-input v-model="addForm.ontimeHandleCount" placeholder="请输入" clearable disabled />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row justify="space-between">
          <el-col :span="24">
            <el-form-item label="超期处置数" prop="">
              <el-input v-model="addForm.overdueHandleCount" placeholder="请输入" clearable disabled />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row justify="space-between">
          <el-col :span="24">
            <el-form-item label="超期未处置数" prop="">
              <el-input v-model="addForm.overdueUnHandleCount" placeholder="请输入" clearable disabled />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row justify="space-between">
          <el-col :span="24">
            <el-form-item label="返工数" prop="">
              <el-input v-model="addForm.reworkCount" placeholder="请输入" clearable disabled />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row justify="space-between">
          <el-col :span="24">
            <el-form-item label="结案率" prop="">
              <el-input v-model="addForm.closeRate" placeholder="请输入" clearable disabled />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row justify="space-between">
          <el-col :span="24">
            <el-form-item label="按期结案率" prop="">
              <el-input v-model="addForm.ontimeCloseRate" placeholder="请输入" clearable disabled />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row justify="space-between">
          <el-col :span="24">
            <el-form-item label="返工率" prop="">
              <el-input v-model="addForm.reworkRate" placeholder="请输入" clearable disabled />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row justify="space-between">
          <el-col :span="24">
            <el-form-item label="超期未处置率" prop="">
              <el-input v-model="addForm.overdueUnHandleRate" placeholder="请输入" clearable disabled />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row justify="space-between">
          <el-col :span="24">
            <el-form-item label="考核评分" prop="">
              <el-input v-model="addForm.assessScore" placeholder="请输入" clearable disabled />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row justify="space-between">
          <el-col :span="24">
            <el-form-item label="考核等级" prop="">
              <el-input v-model="addForm.assessGrade" placeholder="请输入" clearable disabled />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row class="diaCheck">
          <el-button type="primary" @click="exportOut">导 出</el-button>
          <el-button class="cancel" @click="close">取 消</el-button>
        </el-row>
      </el-form>
    </el-dialog>
  </div>
</template>

<script setup name="departmentalAssessment">
import { deptAssessReportPage, getDeptAssessReport } from '@/api/order';
import useOrderStore from '@/store/modules/order';

const orderStore = useOrderStore();
console.log('orderStore-------------', orderStore.systemDeptList);

const proxy = getCurrentInstance();

const total = ref(0);
const loading = ref(false);
const queryParams = ref({
  pageNum: 1,
  pageSize: 10,
  assessDimension: 'month',
  assessDate: '',
  assessDeptId: '',
});

const dataList = reactive({
  dialogConfig: {
    title: '',
    open: false,
  },
  addForm: {
    id: undefined,
  },
  rules: {
    title: [{ required: true, message: '请输入标题', trigger: 'blur' }],
    content: [{ required: true, message: '请输入内容', trigger: 'blur' }],
  },
});

const { dialogConfig, addForm, rules } = toRefs(dataList);

// const dimensionVal = ref('1');
const dimensionTime = ref('');
const dimension = ref([
  {
    lable: '月度',
    value: 'month',
  },
  {
    lable: '年度',
    value: 'year',
  },
  //   {
  //     lable: '季度',
  //     value: '3',
  //   },
]);

const tableData = ref([]);

// 重置
const resetQuery = () => {};
// 导出
const exportOut = () => {};

// 下载pdf
const downPdf = () => {};

// 详情
const showDeatil = row => {
  dialogConfig.value.title = '详情';
  getDeptAssessReport(row.id).then(res => {
    addForm.value = res.data;
    dialogConfig.value.open = true;
  });
};
// 导出报告
const outReport = () => {};

const close = () => {
  dialogConfig.value.open = false;
};

// 获取表单数据
const getList = () => {
  loading.value = true;
  deptAssessReportPage(queryParams.value).then(res => {
    tableData.value = res.data;
    total.value = res.total;
    loading.value = false;
  });
};

onMounted(() => {
  getList();
});
</script>

<style lang="scss" scoped>
.departmentalAssessment {
  .topBox {
    //   margin-top: 30px;
    .topLeft {
      display: flex;
      align-items: center;
      .topItem {
        margin-right: 30px;
        .topTitle {
          margin-right: 10px;
        }
      }
    }
    .topRight {
      display: flex;
      justify-content: flex-end;
    }
  }
  .tableBox {
    margin-top: 20px;
  }
}

.pagingPosition {
  position: absolute !important;
  right: 0px;
  bottom: 0px;
}
</style>