<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="dimensionVal" 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="dimensionVal === '1'"
            placeholder="请选择"
            v-model="dimensionTime"
            type="month"
            format="YYYY-MM"
            value-format="YYYY-MM"
          />
          <el-date-picker
            v-if="dimensionVal === '2'"
            placeholder="请选择"
            v-model="dimensionTime"
            type="year"
            format="YYYY"
            value-format="YYYY"
          />
        </div>
        <div class="topItem">
          <span class="topTitle">部门</span>
          <el-select v-model="departmenName" placeholder="请选择" style="width: 270px">
            <el-option v-for="item in departmentList" :key="item.value" :label="item.label" :value="item.value"></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="time" label="考核时间"></el-table-column>
      <el-table-column prop="department" label="考核部门" min-width="120">
        <template #default="{ row }">
          <div>{{ departmentList.find(item => item.value == row.department)?.label || row.department }}</div>
        </template>
      </el-table-column>
      <el-table-column prop="p1" label="应处置数"></el-table-column>
      <el-table-column prop="p2" label="未处置数"></el-table-column>
      <el-table-column prop="p3" label="已处置数"></el-table-column>
      <el-table-column prop="p4" label="按期处置数"></el-table-column>
      <el-table-column prop="p5" label="超期处置数"></el-table-column>
      <el-table-column prop="p6" label="超期未处置数"></el-table-column>
      <el-table-column prop="p7" label="返工数"></el-table-column>
      <el-table-column prop="score" label="考核评分"></el-table-column>
      <el-table-column prop="rank" 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="300px">
      <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.p1" 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.name" placeholder="请输入" clearable />
            </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.p10" placeholder="请输入" clearable />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row justify="space-between">
          <el-col :span="11">
            <el-form-item label="制造单位" prop="">
              <el-input v-model="addForm.p7" placeholder="请输入" clearable />
            </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">
const total = ref(0);
const loading = ref(false);
const queryParams = ref({
  pageNum: 1,
  pageSize: 10,
});

const dataList = reactive({
  dialogConfig: {
    title: '',
    open: false,
  },
  addForm: {
    id: undefined,
    time: '',
    department: '',
    p1: '',
    p2: '',
    p3: '',
    p4: '',
    p5: '',
    p6: '',
    p7: '',
    score: '',
    rank: '',
  },
  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: '1',
  },
  {
    lable: '年度',
    value: '2',
  },
  //   {
  //     lable: '季度',
  //     value: '3',
  //   },
]);

const departmenName = ref('');
const departmentList = ref([
  {
    value: '1',
    label: '延安市天然气总公司',
  },
  {
    value: '2',
    label: '延安市内涝防治中心',
  },
  {
    value: '3',
    label: '延安圣地蓝热力（集团）有限公司',
  },
  {
    value: '4',
    label: '水务局河道管理处',
  },
  {
    value: '5',
    label: '延安市养护处',
  },
  {
    value: '6',
    label: '延安市水务环保集团水环境治理有限公司',
  },
  {
    value: '7',
    label: '延安市水务环保集团自来水公司',
  },
  {
    value: '8',
    label: '延安市公安局',
  },
]);

const tableData = ref([]);

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

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

// 详情
const showDeatil = () => {};
// 导出报告
const outReport = () => {};

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

// 获取表单数据
const getList = () => {
  loading.value = true;
  setTimeout(() => {
    tableData.value = [
      {
        time: '2024-12',
        department: '1',
        p1: '23',
        p2: '3',
        p3: '20',
        p4: '20',
        p5: '0',
        p6: '2',
        p7: '2',
        score: '92.40',
        rank: 'A',
      },
    ];
    total.value = tableData.value.length;
    loading.value = false;
  }, 500);
};

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>