<template>
  <div>
    <el-card>
      <el-form
        :model="searchForm"
        label-width="100px"
        @submit.prevent="fnGetDataTransfer"
      >
        <el-row>
          <el-col :span="5">
            <el-form-item label="隐患级别" prop="checkedCities">
              <el-checkbox-group
                v-model="searchForm.checkedCities"
                :disabled="searchForm.statecheckedCities.length > 0"
              >
                <el-checkbox
                  v-for="item in hazardLevelList"
                  :label="item"
                  :key="item.BIANMA"
                >
                  {{ item.NAME }}
                </el-checkbox>
              </el-checkbox-group>
            </el-form-item>
          </el-col>
          <el-col :span="7">
            <el-form-item label="隐患状态" prop="statecheckedCities">
              <el-checkbox-group
                v-model="searchForm.statecheckedCities"
                :disabled="searchForm.checkedCities.length > 0"
              >
                <el-checkbox
                  v-for="item in hazardStateList"
                  :label="item"
                  :key="item.id"
                >
                  {{ item.name }}
                </el-checkbox>
              </el-checkbox-group>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="5">
            <el-form-item label="部门" prop="checkedIds">
              <layout-department
                v-model="searchForm.checkedIds"
                show-checkbox
                multiple
                collapse-tags
                root-disabled="Y"
                @update:model-value="fnDepartmentChange"
              />
            </el-form-item>
          </el-col>
          <el-col :span="7">
            <el-form-item label="发现日期" prop="dates">
              <el-date-picker
                v-model="searchForm.dates"
                value-format="YYYY-MM-DD"
                format="YYYY-MM-DD"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label-width="10px">
              <el-button type="primary" native-type="submit">搜索</el-button>
              <el-button
                native-type="reset"
                @click="
                  list = [];
                  resultList = [];
                "
              >
                重置
              </el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>
    <layout-card v-if="list.length > 0">
      <layout-table
        :data="list"
        row-key="DEPARTMENT_ID"
        :show-pagination="false"
        default-expand-all
      >
        <el-table-column label="序号" type="index" />
        <template v-for="item in resultList" :key="item.dataItem">
          <el-table-column
            :show-overflow-tooltip="true"
            :prop="item.dataItem"
            :label="item.dataName"
          />
        </template>
      </layout-table>
    </layout-card>
  </div>
</template>

<script setup>
import useListData from "@/assets/js/useListData.js";
import { getHazardStatisticsList } from "@/request/statistical_analysis.js";
import { layoutFnGetHazardLevel } from "@/assets/js/data_dictionary.js";
import layoutDepartment from "@/components/department/index.vue";
import { ref } from "vue";
import { ElMessage } from "element-plus";
import { useUserStore } from "@/pinia/user.js";

const hazardStateList = [
  { id: "1", name: "未整改" },
  { id: "3", name: "待验收" },
  { id: "4", name: "已验收" },
  { id: "-1", name: "已过期" },
];
const userStore = useUserStore();
const resultList = ref([]);
const { list, searchForm, fnGetData } = useListData(getHazardStatisticsList, {
  otherParams: {
    DISPOSESTATE: "2",
  },
  usePagination: false,
  immediate: false,
  defaultSearchForm: {
    checkedCities: [],
    statecheckedCities: [],
    hiddentypecheckedCities: [],
    checkedIds: [],
    dates: [],
  },
  callbackFn: (list, resData) => {
    resultList.value = resData.retultlist;
  },
});
const hazardLevelList = await layoutFnGetHazardLevel();
const fnGetDataTransfer = () => {
  if (
    searchForm.value.checkedCities?.length > 0 ||
    searchForm.value.statecheckedCities?.length > 0
  ) {
    fnGetData({
      STARTTIME: searchForm.value.dates[0],
      ENDTIME: searchForm.value.dates[1],
      checkedCities: JSON.stringify(searchForm.value.checkedCities),
      statecheckedCities: JSON.stringify(searchForm.value.statecheckedCities),
      hiddentypecheckedCities: JSON.stringify(
        searchForm.value.hiddentypecheckedCities
      ),
      checkedIds: JSON.stringify(searchForm.value.checkedIds),
    });
  } else {
    ElMessage.warning("请选择统计项");
  }
};
const fnDepartmentChange = () => {
  const DEPARTMENT_ID = userStore.getUserInfo.DEPARTMENT_ID;
  if (
    searchForm.value.checkedIds.length === 1 &&
    searchForm.value.checkedIds[0] === DEPARTMENT_ID
  ) {
    searchForm.value.checkedIds = [];
    return;
  }
  if (searchForm.value.checkedIds.length > 0) {
    if (searchForm.value.checkedIds.includes(DEPARTMENT_ID)) return;
    searchForm.value.checkedIds.unshift(DEPARTMENT_ID);
  }
};
</script>

<style scoped lang="scss">
:deep {
  .el-table__row {
    .el-table__cell:nth-child(2) {
      text-align: left !important;
    }
  }
}
</style>
