<template>
  <!-- 安全教育培训 -->
  <view>
    <view class="searcher">
      <view>
        <u-search
          v-model="searchForm.keyword"
          placeholder="请输入关键字"
          shape="round"
          bg-color="#f7f7f8"
          action-text="搜索"
          @search="fnResetPaging"
          @custom="fnResetPaging"
        />
      </view>
      <view class="mainer">
        <view class="area" @click="fnDepartmentShow">
          <view class="name u-line-1">
            {{ searchForm.departmentName || "请选择部门" }}
          </view>
          <view class="more">
            <u-icon name="arrow-down"></u-icon>
          </view>
        </view>
        <view class="area" @click="fnDateShowChange">
          <view class="name u-line-1">
            {{ searchForm.stage || "请选择月份" }}
          </view>
          <view class="more">
            <u-icon name="arrow-down"></u-icon>
          </view>
        </view>
      </view>
      <!--      <view class="mt-10">
        <u-radio-group
          v-model="searchForm.reportingstatus"
          style="width: 100%; display: flex; justify-content: space-between"
          @change="fnResetPaging"
        >
          <u-radio
            v-for="(item, index) in radioList"
            :key="index"
            :name="item.value"
            :label="item.name"
          />
        </u-radio-group>
      </view>-->
    </view>

    <view class="info_mainer">
      <view v-if="list.length > 0">
        <u-list @scrolltolower="scrolltolower">
          <u-list-item
            v-for="item in list"
            :key="item.CORPINFO_ID"
            class="wrap"
          >
            <view class="tit">
              <view class="u-line-2">{{ item.CORP_NAME }}</view>
            </view>

            <view class="text">
              <text>管理单位:</text>
              {{ item.ALL_REGULATORY_DEPARTMENT_NAME }}
            </view>
            <view class="text">
              <text>已上报数:</text>
              {{ item.already_num }}
            </view>
            <!--            <view class="text">
              <text>应上报数:</text>
              {{ item.all_num }}
            </view>-->
          </u-list-item>
        </u-list>
      </view>
      <empty v-else />
    </view>
    <tki-tree
      ref="departmentTreeRef"
      :range="department"
      id-key="id"
      range-key="name"
      children-name="nodes"
      select-parent
      @confirm="fnDepartmentTreeConfirm"
    />
    <u-datetime-picker
      v-model="datevalue"
      :show="dateConfirmShow"
      mode="year-month"
      @confirm="fnDateConfirm"
      @cancel="fnDateShowChange"
    />
  </view>
</template>

<script>
import dayjs from "dayjs";
import { getAppMonthlyReportMainDataList } from "@/api";
import TkiTree from "@/components/tki-tree/tki-tree.vue";

export default {
  components: {
    TkiTree,
  },
  props: {
    department: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      list: [],
      pageSize: 10,
      currentPage: 1,
      totalPage: 0,
      dateConfirmShow: false,
      datevalue: Number(new Date()),
      radioList: [
        { name: "全部", value: "" },
        { name: "未上报", value: "0" },
        { name: "待上报", value: "1" },
        { name: "已上报", value: "2" },
      ],
      searchForm: {
        keyword: "",
        reportingstatus: "",
        departmentName: "",
        departmentId: "",
        stage: dayjs().format("YYYY-MM"),
      },
    };
  },
  created() {
    this.fnGetData();
  },
  methods: {
    async fnGetData() {
      const resData = await getAppMonthlyReportMainDataList({
        showCount: this.pageSize,
        currentPage: this.currentPage,
        KEYWORDS: this.searchForm.keyword,
        REGULATORY_DEPARTMENT_ID: this.searchForm.departmentId,
        STATISTICS_TIME: this.searchForm.stage,
        REPORTINGSTATUS: this.searchForm.reportingstatus,
      });
      this.list = [...this.list, ...resData.varList];
      this.totalPage = resData.page.totalPage;
    },
    scrolltolower() {
      this.currentPage++;
      if (this.totalPage >= this.currentPage) this.fnGetData();
    },
    fnResetPaging() {
      this.list = [];
      this.currentPage = 1;
      this.fnGetData();
    },
    fnDepartmentShow() {
      this.$refs.departmentTreeRef._show();
    },
    fnDepartmentTreeConfirm(event) {
      this.searchForm.departmentName = event[0].name;
      this.searchForm.departmentId = event[0].id;
      this.fnResetPaging();
    },
    fnDateShowChange() {
      this.dateConfirmShow = !this.dateConfirmShow;
    },
    fnDateConfirm(event) {
      this.searchForm.stage = uni.$u.timeFormat(event.value, "yyyy-mm");
      this.fnDateShowChange();
      this.fnResetPaging();
    },
  },
};
</script>

<style scoped lang="scss">
.fcg {
  color: #489b27;
  font-weight: normal;
}

.fcr {
  color: #ff0000;
  font-weight: normal;
}

.searcher {
  width: 100%;
  background: #ffffff;
  padding: 20upx;
  box-sizing: border-box;
  margin-top: 20upx;
  border-top: 1px solid #eeeeee;

  .mainer {
    width: 100%;
    display: flex;
    justify-content: space-between;
    margin-top: 20upx;
    align-items: center;
    font-size: 28upx;

    .area {
      width: 45%;
      background: #f7f7f8;
      border-radius: 4upx;
      height: 72upx;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 10upx;

      .name {
        width: 90%;
      }
    }
  }
}

.info_mainer {
  width: 100%;
  margin-top: 20upx;

  .list_wrap {
    width: 100%;
    display: flex;
    flex-wrap: wrap;

    .text {
      width: 50%;
    }
  }

  .wrap {
    width: 100%;
    background: #ffffff;
    margin-bottom: 20upx;
    padding: 20upx;
    line-height: 2;
    box-sizing: border-box;

    .info_main {
      width: 100%;
      display: flex;
      flex-wrap: wrap;

      .list {
        width: 50%;
        display: flex;

        .lable {
          color: #999999;
          margin-right: 10upx;
        }
      }
    }

    .tit {
      font-weight: bold;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .text text {
      color: #999999;
      margin-right: 10upx;
    }
  }
}
</style>
