<template>
  <el-skeleton :rows="30" :loading="pageBasicsData.loading" />
  <!-- 用户上报任务 -->
  <div class="task-box" v-if="!pageBasicsData.loading">
    <qu-search-area ref="topSearchRef" :model="pageBasicsData.screenForm" @search="restSearch" @reset="clearScreen">
          <el-form-item prop="dateType">
            <el-select
              style="width: 110px"
              filterable
              placeholder="请选择查询日期"
              v-model="pageBasicsData.screenForm.dateType"
            >
              <el-option
                v-for="item in pageBasicsData.taskDateTypeList"
                :key="item.key"
                :label="item.value"
                :value="item.key"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item prop="date" style="margin-left: -20px">
            <qu-time-select v-model.date="pageBasicsData.screenForm.date" />
          </el-form-item>
          <el-form-item label="所属站点" prop="districtId">
            <div class="screen-item">
              <el-select
                filterable
                placeholder="请选择"
                v-model="pageBasicsData.screenForm.districtId"
              >
                <el-option
                  v-for="item in pageBasicsData.districtList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select>
            </div>
          </el-form-item>
          <el-form-item label="任务派单号" prop="no">
            <div class="screen-item">
              <el-input
                placeholder="请输入任务派单号"
                clearable
                v-model="pageBasicsData.screenForm.no"
              ></el-input>
            </div>
          </el-form-item>
          <el-form-item label="上报区域" prop="taskScene">
            <div class="screen-item">
              <el-cascader
                ref="taskSceneRef"
                collapse-tags
                :show-all-levels="false"
                clearable
                v-model="pageBasicsData.screenForm.taskScene"
                :options="pageBasicsData.taskSceneList"
                :props="pageBasicsData.areaGridSelectProps"
                @change="taskSceneHandleChange"
                @focus="
                  () => {
                    if (pageBasicsData.taskSceneList.length <= 0) {
                      $message.warning(
                        '当前选择的所属站点暂无任务场景,请重新选择!'
                      );
                    }
                  }
                "
              >
                <template #default="{ data }">
                  <span>{{ data.name }}</span>
                </template>
              </el-cascader>
            </div>
          </el-form-item>
          <el-form-item label="上报描述" prop="content">
            <div class="screen-item">
              <el-input
                placeholder="请输入上报描述"
                clearable
                v-model="pageBasicsData.screenForm.content"
              ></el-input>
            </div>
          </el-form-item>
          <el-form-item label="上报事项" prop="matterNames">
            <div class="screen-item">
              <el-select
                filterable
                clearable
                multiple
                placeholder="请选择上报事项"
                v-model="pageBasicsData.screenForm.matterNames"
              >
                <el-option
                  v-for="item in pageBasicsData.selectMatterList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.name"
                ></el-option>
              </el-select>
            </div>
          </el-form-item>
          <el-form-item label="任务类型" prop="taskType">
            <div class="screen-item">
              <el-select
                filterable
                clearable
                placeholder="请选择任务类型"
                v-model="pageBasicsData.screenForm.taskType"
              >
                <el-option
                  v-for="item in selectItems['taskType']"
                  :key="item.key"
                  :label="item.value"
                  :value="item.key"
                ></el-option>
              </el-select>
            </div>
          </el-form-item>
          <el-form-item label="任务状态" prop="status">
            <el-select
              filterable
              clearable
              multiple
              collapse-tags
              placeholder="请选择任务类型"
              v-model="pageBasicsData.screenForm.status"
            >
              <el-option
                v-for="item in selectItems['status']"
                :key="item.key"
                :label="item.value"
                :value="item.key"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="上报人员" prop="createName">
            <div class="screen-item">
              <el-input
                placeholder="请输入上报人员"
                clearable
                v-model="pageBasicsData.screenForm.createName"
              ></el-input>
            </div>
          </el-form-item>
          <el-form-item label="任务派单人员" prop="taskDistributiUser">
            <div class="screen-item">
              <el-select
                filterable
                clearable
                placeholder="请选择任务派单人员"
                v-model="pageBasicsData.screenForm.taskDistributiUser"
                @focus="
                  () => {
                    if (pageBasicsData.personSelectList?.length <= 0) {
                      $message.warning('当前选择的所属站点暂无任务派单人员!');
                    }
                  }
                "
              >
                <el-option
                  v-for="item in pageBasicsData.personSelectList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.name"
                ></el-option>
              </el-select>
            </div>
          </el-form-item>
          <el-form-item label="任务接单人员" prop="taskAcceptUser">
            <div class="screen-item">
              <el-select
                filterable
                clearable
                placeholder="请选择任务接单人员"
                v-model="pageBasicsData.screenForm.taskAcceptUser"
                @focus="
                  () => {
                    if (pageBasicsData.personSelectList?.length <= 0) {
                      $message.warning('当前选择的所属站点暂无任务接单人员!');
                    }
                  }
                "
              >
                <el-option
                  v-for="item in pageBasicsData.personSelectList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.name"
                ></el-option>
              </el-select>
            </div>
          </el-form-item>
    </qu-search-area>

    <!-- 表格 -->
    <div class="main-table">
      <qu-table
        :custom="true"
        :showPage="true"
        :showIndex="true"
        :height="pageBasicsData.tableHeight"
        :tableData="tableData"
        :tableHeader="tableHeader"
        :pageProps="pageProps"
        @pageChange="pageChange"
        :rowButtons="rowButtons"
        @rowButtonClick="rowButtonClick"
        @fetchTableAttr="fetchTableAttr"
        showOverflowTooltip
        @sortChange="sortChange"
        :tableButtons="[
          { cnName: '导出', enName: 'export', theme: 'primary', icon: 'top' },
        ]"
        @buttonClick="buttonClick"
      ></qu-table>
    </div>
  </div>
  <!-- 查看任务弹窗 -->
  <div v-if="showLookDialog">
    <el-dialog v-model="showLookDialog" title="任务详情" fullscreen>
      <purifierTaskDetailCom
        v-model:showLookDialog="showLookDialog"
        :taskDetailData="taskDetailData"
        :taskType="currentRow.taskType"
      />
    </el-dialog>
  </div>

  <!-- 取消任务弹窗 -->
  <el-dialog
    v-model="cancelRelevant.showCancelDialog"
    title="取消任务"
    width="600px"
    @close="closeCancelDialog"
  >
    <el-form
      class="dialog-form"
      label-width="130px"
      ref="cancelRef"
      :model="cancelRelevant.cancelForm"
    >
      <el-form-item
        style="padding-top: 40px"
        label="取消原因"
        prop="cancelReason"
        :rules="{
          required: true,
          message: '请选择取消原因',
          trigger: 'change',
        }"
      >
        <el-select
          style="width: 350px"
          filterable
          placeholder="请选择取消任务的原因"
          v-model="cancelRelevant.cancelForm.cancelReason"
        >
          <el-option
            v-for="item in cancelRelevant.cancelCauseSelectList"
            :key="item.key"
            :label="item.value"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item
        v-if="cancelRelevant.cancelForm.cancelReason == '其他原因'"
        label="详细原因"
        prop="detailReason"
        :rules="{
          required: true,
          message: '请输入详细原因',
          trigger: 'change',
        }"
      >
        <el-input
          style="width: 350px"
          type="textarea"
          autosize
          maxlength="500"
          placeholder="请输入详细原因(限500字以内)"
          v-model="cancelRelevant.cancelForm.detailReason"
        >
        </el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button
          style="width: 90px"
          @click="cancelRelevant.showCancelDialog = false"
          >取消</el-button
        >
        <el-button style="width: 90px" type="primary" @click="cancelSubmit"
          >提交</el-button
        >
      </span>
    </template>
  </el-dialog>

  <!-- 工时设置弹窗 -->
  <div v-if="showSetWageHourDialog">
    <el-dialog
      v-model="showSetWageHourDialog"
      title="工时设置"
      width="600px"
      @close="closeWageHourDialog"
    >
      <el-form label-width="130px" ref="wageHourRef" :model="wageHourForm">
        <el-form-item
          label="时薪类型"
          prop="wageId"
          :rules="{
            required: true,
            message: '请选择时薪类型',
            trigger: 'change',
          }"
        >
          <el-select
            style="width: 350px"
            filterable
            clearable
            placeholder="请选择"
            v-model="wageHourForm.wageId"
          >
            <el-option
              v-for="item in wageHourList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="设定工时"
          prop="wageHour"
          :rules="[
            {
              required: true,
              message: '请输入设定工时',
              trigger: 'change',
            },
            {
              validator: verifyWageHour,
            },
          ]"
        >
          <el-input
            v-model="wageHourForm.wageHour"
            style="width: 350px"
            placeholder=""
            show-word-limit
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button style="width: 90px" @click="showSetWageHourDialog = false"
            >取消</el-button
          >
          <el-button style="width: 90px" type="primary" @click="wageHourSubmit"
            >提交</el-button
          >
        </span>
      </template>
    </el-dialog>
  </div>

  <!-- 优先级设置弹窗 start-->
  <div v-if="showPrioritySet">
    <el-dialog title="优先级设置" width="500px" v-model="showPrioritySet">
      <prioritySetCom
        v-model:updateShowPrioritySet="showPrioritySet"
        :currentRow="currentRow"
        @confirmSubmit="handlerPrioritySet"
      />
    </el-dialog>
  </div>
  <!-- 优先级设置弹窗 end-->
</template>
<script setup>
import { ref, reactive, onMounted, watch, nextTick } from "vue";
import templateHooks from "@/Hooks/templateHooks.js";
import { userReportTaskService } from "@/ApiService/taskCenterService";
import { dropdownService } from "@/ApiService/dropdownService";
import purifierTaskDetailCom from "@/Components/taskCenter/purifierTaskDetailCom.vue";
import prioritySetCom from "@/Components/taskCenter/taskSet/prioritySetCom.vue";
//页面基础数据
const pageBasicsData = reactive({
  loading: true, // 页面加载状态
  tableHeight: 200, //表格高度
  screenForm: {
    // 顶部搜索字段
    dateType: 0,
    date: [],
    districtId: "",
    no: "",
    taskScene: [],
    content: "",
    matterNames: [],
    taskType: "",
    status: "",
    createName: "",
    gridAndScenes: [],
    taskDistributiUser: "",
    taskAcceptUser: "",
  },
  districtList: [], // 所属站点下拉列表
  selectMatterList: [], // 服务事项下拉
  taskSceneList: [], // 任务场景下拉列表
  personSelectList: [], // 派单and接单人员列表
  taskDateTypeList: [
    // 时间类型下拉列表
    {
      key: 0,
      value: "上报日期",
    },
    {
      key: 1,
      value: "派发日期",
    },
    {
      key: 2,
      value: "响应日期",
    },
    {
      key: 3,
      value: "作业日期",
    },
    {
      key: 4,
      value: "完成日期",
    },
  ],
  areaGridSelectProps: {
    value: "gridId",
    label: "name",
    children: "childNode",
    checkStrictly: true,
    multiple: true,
  },
});
// 任务详情
const taskDetailData = ref({});
// 当前行数据
const currentRow = reactive({});
// 取消任务操作相关
const cancelRelevant = reactive({
  showCancelDialog: false,
  cancelForm: {
    cancelReason: "",
    detailReason: "",
  },
  cancelCauseSelectList: [
    {
      key: 0,
      value: "任务信息填错",
    },
    {
      key: 1,
      value: "任务重复",
    },
    {
      key: 2,
      value: "已通过其它方式解决",
    },
    {
      key: 3,
      value: "其他原因",
    },
  ],
});

// 工时设置start
const wageHourForm = reactive({
  wageId: "",
  wageHour: "",
});
const showSetWageHourDialog = ref(false);
const wageHourList = ref([]);
// 工时设置end

// 查看任务
const showLookDialog = ref(false);
// 元素ref
const topSearchRef = ref(); //顶部搜索区域ref
const screenFormRef = ref(); //搜索区ref
const taskSceneRef = ref(); // 任务场景ref
const cancelRef = ref(); // 取消任务ref
const wageHourRef = ref(); // 工时设置Ref
const showPrioritySet = ref(false); // 优先级设置弹窗
onMounted(() => {
  setDefaultCancelDialog();
  //获取站点数据
  fetchDistricts();
  buttonsClickFun.data = {
    // 查看
    taskDetail: () => {
      lookTask();
    },
    // 取消
    cancel: () => {
      cancelRelevant.showCancelDialog = true;
    },
    // 删除
    delete: () => {
      deleteTaskSubmit();
    },
    // 设置工时
    manHourSet: () => {
      showSetWageHourDialog.value = true;
    },
    // 优先级设置
    prioritySet: () => {
      showPrioritySet.value = true;
    },
  };
});

//#region watch定义start
// 设置表格高度
watch(
  () => topSearchRef.value,
  (val) => {
    let wHeight =
      document.documentElement.clientHeight || document.body.clientHeight;
    nextTick(() => {
      pageBasicsData.tableHeight = wHeight - val.clientHeight - 200;
    });
  }
);
// 站点变化清空其它查询条件
watch(
  () => pageBasicsData.screenForm.districtId,
  (val) => {
    if (val) {
      for (const key in pageBasicsData.screenForm) {
        if (key !== "districtId") {
          pageBasicsData.screenForm[key] = "";
        }
      }
    }
    pageBasicsData.screenForm.dateType = 0;
    setDefaultCancelDialog();
    pageBasicsData.screenForm.taskCreateType = 3;
    fetchTaskScene(val);
    fetchTaskPerson(val);
    fetchSelectMatter(val);
    fetchWageType(val);
  }
);
watch(
  () => pageBasicsData.screenForm.date,
  (val) => {}
);
//#endregion watch定义end

//#region 函数定义start
// 顶部按钮事件
const buttonClick = ({ enName }) => {
  if (enName == "export") {
    setDateFormat();
    const { page, rows } = pageProps;
    userReportTaskService.userReportTaskExport({
      page,
      rows,
      ...pageBasicsData.screenForm,
    });
  }
};
// 优先级设置
const handlerPrioritySet = (data) => {
  console.log(data);
  data.taskId = data.planId;
  delete data.planId;
  userReportTaskService
    .setTaskOrder({
      ...data
    })
    .then((res) => {
      console.log(res);
      if (res.code == 0) {
        fetchData();
        $message.success(res.data);
        showPrioritySet.value = false;
      } else {
        $message.error(res.err);
      }
    });
};
// 任务场景级联事件
const taskSceneHandleChange = () => {
  let checkArr = taskSceneRef.value.getCheckedNodes();
  let gridAndScenes = [];
  checkArr.forEach((item) => {
    gridAndScenes.push({
      gridId: item.data.gridId,
      id: item.data.id,
      isscene: item.data.isscene,
      level: item.data.level,
      sceneId: item.data.sceneId,
    });
  });
  pageBasicsData.screenForm.gridAndScenes = gridAndScenes;
};
// 工时设置提交
const wageHourSubmit = () => {
  wageHourRef.value.validate((valid) => {
    if (valid) {
      $messageBox
        .confirm("您确定要进行提交吗？", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
          center: true,
        })
        .then(() => {
          return new Promise(() => {
            userReportTaskService
              .wageSet({
                id: currentRow.id,
                ...wageHourForm,
              })
              .then(async (res) => {
                if (res.code == 0) {
                  showSetWageHourDialog.value = false;
                  fetchData();
                  $message.success(res.data);
                } else {
                  $message.error(res.err);
                }
              });
          });
        })
        .catch(() => {});
    }
  });
};
// 取消任务提交
const cancelSubmit = () => {
  cancelRef.value.validate((valid) => {
    if (valid) {
      $messageBox
        .confirm("您确定要进行提交吗？", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
          center: true,
        })
        .then(() => {
          return new Promise(() => {
            userReportTaskService
              .cancel({
                id: currentRow.id,
                ...cancelRelevant.cancelForm,
              })
              .then(async (res) => {
                if (res.code == 0) {
                  cancelRelevant.showCancelDialog = false;
                  fetchData();
                  $message.success(res.data);
                } else {
                  $message.error(res.err);
                }
              });
          });
        })
        .catch(() => {});
    }
  });
};
const deleteTaskSubmit = () => {
  $messageBox
    .confirm("此操作将永久删除该数据，是否继续？", "提示", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning",
      center: true,
    })
    .then(() => {
      return new Promise(() => {
        userReportTaskService
          .delete({
            id: currentRow.id,
          })
          .then(async (res) => {
            if (res.code == 0) {
              fetchData();
              $message.success("删除成功!");
            } else {
              $message.error(res.err);
            }
          });
      });
    })
    .catch(() => {});
};
// 自定义工时校验规则
const verifyWageHour = (rule, value, callback) => {
  if (value) {
    value = value.toString();
    if (isNaN(Number(value))) {
      callback(new Error("工时必须为数字值!"));
    } else if (Number(value) <= 0) {
      callback(new Error("工时不能小于0!"));
    } else if (value.indexOf(".") > 0) {
      let index = value.indexOf(".");
      let str = value.slice(index + 1);
      if (str && str.length > 2) {
        callback(new Error("小数点后只能输入两位!"));
      } else {
        callback();
      }
    } else {
      callback();
    }
  } else {
    callback(new Error("请输入设定工时!"));
  }
};
// 关闭取消任务弹窗
const closeCancelDialog = () => {
  cancelRef.value.resetFields();
};
// 关闭工时设置弹窗
const closeWageHourDialog = () => {
  wageHourRef.value.resetFields();
};
// 默认时间设置
const setDefaultCancelDialog = () => {
  const start = new Date(new Date().toLocaleDateString());
  const end = new Date();
  start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
  pageBasicsData.screenForm.date = [
    $common.fomatDateTime(start),
    $common.fomatDateTime(end),
  ];
};
// 设置查询日期格式
const setDateFormat = () => {
  for (const key in pageBasicsData.screenForm) {
    if (key.indexOf("Time") > -1) {
      delete pageBasicsData.screenForm[key];
    }
  }
  let dateArr = pageBasicsData.screenForm.date;
  if (pageBasicsData.screenForm.dateType == 0) {
    // 上报日期
    pageBasicsData.screenForm.createTimeStart = dateArr[0];
    pageBasicsData.screenForm.createTimeEnd = dateArr[1];
  } else if (pageBasicsData.screenForm.dateType == 1) {
    // 派发日期
    pageBasicsData.screenForm.sendTimeStart = dateArr[0];
    pageBasicsData.screenForm.sendTimeEnd = dateArr[1];
  } else if (pageBasicsData.screenForm.dateType == 2) {
    // 响应日期
    pageBasicsData.screenForm.confirmTimeStart = dateArr[0];
    pageBasicsData.screenForm.confirmTimeEnd = dateArr[1];
  } else if (pageBasicsData.screenForm.dateType == 3) {
    // 作业日期
    pageBasicsData.screenForm.actionTimeStart = dateArr[0];
    pageBasicsData.screenForm.actionTimeEnd = dateArr[1];
  } else if (pageBasicsData.screenForm.dateType == 4) {
    // 完成日期
    pageBasicsData.screenForm.finishTimeStart = dateArr[0];
    pageBasicsData.screenForm.finishTimeEnd = dateArr[1];
  }
};
// 获取表格数据
const fetchData = () => {
  setDateFormat();
  const { page, rows, sord, sidx } = pageProps;
  return new Promise(() => {
    userReportTaskService
      .pageList({
        page,
        rows,
        sord,
        sidx,
        ...pageBasicsData.screenForm,
      })
      .then((res) => {
        if (res.code == 0) {
          pageBasicsData.loading = false;
          tableData.value = res.data.rows;
          pageProps.records = res.data.records;
        }
      });
  });
};
//查询
const restSearch = () => {
  pageProps.page = 1;
  fetchData();
};
// 清空搜索
const clearScreen = () => {
  screenFormRef.value.resetFields();
  pageBasicsData.screenForm.districtId = pageBasicsData.districtList[0].id;
  delete pageBasicsData.screenForm.gridAndScenes;
  fetchData();
};
// 获取所属站点
const fetchDistricts = () => {
  return new Promise(() => {
    dropdownService.getDistrict().then(async (res) => {
      if (res.code == 0) {
        pageBasicsData.districtList = res.data;
        if (pageBasicsData.districtList?.length) {
          pageBasicsData.screenForm.districtId =
            pageBasicsData.districtList[0].id;
          fetchData();
          fetchTaskScene(pageBasicsData.screenForm.districtId);
        } else {
          $message.error("暂无站点信息,请配置站点!");
        }
      }
    });
  });
};
// 查看任务
const lookTask = () => {
  return new Promise(() => {
    userReportTaskService.look({ id: currentRow.id }).then(async (res) => {
      if (res.code == 0) {
        taskDetailData.value = res.data;
        showLookDialog.value = true;
      }
    });
  });
};
// 获取服务事项
const fetchSelectMatter = (id) => {
  return new Promise(() => {
    dropdownService.selectMatter({ districtId: id }).then(async (res) => {
      if (res.code == 0) {
        pageBasicsData.selectMatterList = res.data;
      }
    });
  });
};
// 获取时薪类型下拉
const fetchWageType = (id) => {
  console.log(id);
  return new Promise(() => {
    dropdownService.getDistrictWage({ districtId: id }).then((res) => {
      console.log(res);
      if (res.code == 0) {
        wageHourList.value = res.data;
      }
    });
  });
};
// 获取任务场景
const fetchTaskScene = (id) => {
  return new Promise(() => {
    dropdownService.gridSceneTree({ districtId: id }).then(async (res) => {
      if (res.code == 0) {
        pageBasicsData.taskSceneList = res.data.childNode;
      }
    });
  });
};
// 获取任务人员
const fetchTaskPerson = (id) => {
  return new Promise(() => {
    dropdownService.principalList({ districtId: id }).then(async (res) => {
      pageBasicsData.personSelectList = res.data;
    });
  });
};
// 自定义表格头
const fetchTableAttr = (tableAttr) => {
  tableHeader.value = tableAttr;
};
// 表格按钮
const rowButtonClick = ({ row, $column }) => {
  for (let i in row) {
    currentRow[i] = row[i];
  }
  wageHourForm.wageHour = currentRow.wageHour || null;
  wageHourForm.wageId = currentRow.wageId || null;
  buttonsClickFun.data[$column.enName]();
};
const {
  tableData,
  rowButtons,
  pageProps,
  tableHeader,
  pageChange,
  buttonsClickFun,
  $message,
  $messageBox,
  $common,
  selectItems,
  sortChange,
} = templateHooks(fetchData);
//#endregion 函数定义 end
</script>
<script>
export default {
  name: "UserReportTask",
};
</script>
<style lang="scss" scoped>
.task-box {
  box-sizing: border-box;
  height: calc(100vh - var(--page-top-offset));
  flex: 1;
  padding: 10px;
  background-color: var(--color-bg-card);
  .search-area {
    padding: var(--spacing-md) var(--spacing-lg);
    display: flex;
    align-items: center;
  }
}
.dialog-footer button:first-child {
  margin-right: 10px;
}

.dialog-item {
  width: 100%;
  display: flex;
  align-items: center;
  margin-left: 30px;
  .dialog-item-left {
    margin-right: 30px;
    div {
      margin-bottom: 30px;
    }
  }
  .dialog-item-right {
    .el-button {
      margin-bottom: 26px;
    }
  }
}
:deep(.el-upload-list__item-status-label) {
  position: absolute;
  right: -25px;
  top: 0;
  line-height: inherit;
}
:deep(.el-upload-list__item .el-icon--close) {
  position: absolute;
  top: 5px;
  right: -10px;
  cursor: pointer;
  opacity: 0.75;
  color: #292d3e;
}

.content-test {
  width: 200px;
  font-size: 14px;
  .btn {
    width: 30px;
    height: 30px;
  }
}
.statistics {
  background-color: #fff;
  border: 1px solid rgba(150, 145, 145, 0);
  border-radius: 2px;
  box-sizing: border-box;
  .statistics-top {
    font-size: 16px;
    height: 30px;
    line-height: 30px;
    padding-left: 6px;
    border-bottom: 1px solid #f0f0f0;
    font-weight: bold;
    background: #f0f0f0;
  }
  .statistics-bottom {
    line-height: 25px;
    font-size: 15px;
    color: #606266;
    padding-left: 6px;
    background: #fff;
    margin-top: 10px;
    margin-bottom: 10px;
  }
}
.task-dictionaries {
  .task-dictionaries-item {
    :deep(.el-collapse-item__header) {
      background-color: #f0f0f0;
    }
    .task-dictionaries-icon {
      color: #409eff;
      margin: 0 4px;
      font-size: 18px;
      font-weight: bold;
      margin-top: -1px;
    }
    .task-dictionaries-content {
      font-size: 18px;
      font-weight: bold;
      margin-left: 10px;
    }
  }
}
</style>
