<template>
  <form-option>
    <el-form :inline="true" :model="formData" ref="form" label-width="90px">
      <el-form-item label="时间选择:" prop="select_time">
        <el-date-picker
          v-model="formData.select_time"
          unlink-panels
          type="monthrange"
          range-separator="至"
          start-placeholder="开始月份"
          end-placeholder="结束月份"
          :picker-options="pickerOptions"
        ></el-date-picker>
      </el-form-item>
      <el-form-item label="消防机构:" prop="orgs">
        <el-cascader
          class="custom-cascader"
          v-model="formData.orgs"
          :props="orgProps"
          :options="orgOptions"
          @change="handleOrgChanged"
        ></el-cascader>
      </el-form-item>
      <el-button class="ml" icon="el-icon-refresh-right" @click="resetForm"
        >重置</el-button
      >
      <el-button
        type="primary"
        icon="el-icon-search"
        @click="handleQuery"
        :loading="loading"
        >查询</el-button
      >
    </el-form>

    <div class="wrap">
      <div class="info">
        <div class="item" v-for="(item, index) in list" :key="index">
          <el-image class="item-icon" :src="item.icon"></el-image>
          <div class="column">
            <div class="row">
              <span class="row-name">{{ item.name }}</span>
            </div>
            <div class="row" :class="item.color">
              <span class="row-title">{{ statisticsInfo[item.mark] }}</span>
              <span class="row-num">个</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="cards">
      <div class="card">
        <div class="card-title">日常抽查</div>
        <div class="card-wrap">
          <img src="../../../../assets/home/Frame (1).png" alt="" />
          <div class="card-column">
            <span class="row-num">
              {{ normal.total }}
              <span class="row-desc">个</span>
            </span>
            <span class="row-title">日常抽查总数</span>
          </div>
          <img src="../../../../assets/home/Frame (2).png" alt="" />
          <div class="card-column">
            <span class="row-num2">
              {{ normal.done }}
              <span class="row-desc">个</span>
            </span>
            <span class="row-title">已完成</span>
          </div>
        </div>
      </div>
      <div class="card">
        <div class="card-title">模板反馈</div>
        <div class="card-wrap">
          <img src="../../../../assets/home/Frame.png" alt="" />
          <!-- 数据不对 -->
          <div class="card-column">
            <span class="row-num">
              <!-- {{ special.total }} -->
              {{ feedbak.tempalte_num }}
              <span class="row-desc">个</span>
            </span>
            <span class="row-title">模版总数量</span>
          </div>
          <img src="../../../../assets/home/Frame (3).png" alt="" />
          <div class="card-column">
            <span class="row-num2">
              {{ feedbak.tempalte_use_num }}
              <span class="row-desc">个</span>
            </span>
            <span class="row-title">模板已使用次数</span>
          </div>
          <!-- <div class="card-column">
            <span class="row-num3">{{
              special.done
                ? Math.round(
                    (Number(special.done) / Number(special.total)) * 10000
                  ) /
                    100.0 +
                  "%"
                : "0%"
            }}</span>
            <span class="row-title">完成率</span>
          </div> -->
        </div>
      </div>
      <!-- 数据不对 -->
      <div class="card">
        <div class="card-title">系统反馈</div>
        <div class="card-wrap">
          <img
            class="card-img"
            src="../../../../assets/home/Frame (4).png"
            alt=""
          />
          <div class="last-column">
            <span class="row-num">
              {{ feedbak.contribute_num }}
              <span class="row-desc">个</span>
            </span>
            <span class="row-title">总反馈数量</span>
          </div>
          <!-- <div class="card-column">
            <span class="row-num2">
              {{ feedbak.contribute_num }}
              <span class="row-desc">个</span>
            </span>
            <span class="row-title">检查规则总数量</span>
          </div> -->
        </div>
      </div>
    </div>
  </form-option>
</template>

<script>
import FormOption from "@/component/FormOption";
import { jobMixin } from "@/mixin/job";
import { resourceMixin } from "@/mixin/resource";
import { DateTime } from "luxon";
import { orgMixin } from "@/mixin/org";

export default {
  components: {
    FormOption,
  },
  mixins: [jobMixin, resourceMixin, orgMixin],
  props: {
    statisticsInfo: {
      type: Object,
    },
    loading: {
      type: Boolean,
    },
    normal: {
      type: Object,
    },
    special: {
      type: Object,
    },
    feedbak: {
      type: Object,
    },
  },
  data() {
    return {
      list: [
        {
          id: "10",
          name: "全部单位",
          mark: "enforce_obj_num",
          icon: require("@/assets/statisitcs/menu1.png"),
        },
        {
          id: "20",
          name: "执法人员",
          mark: "enforce_person_num",
          icon: require("@/assets/statisitcs/menu2.png"),
        },
        {
          id: "30",
          name: "单位不合格单位数",
          mark: "un_pass_enforce_obj_num",
          icon: require("@/assets/statisitcs/menu3.png"),
        },
        {
          id: "40",
          name: "单位合格数",
          mark: "pass_enforce_obj_num",
          icon: require("@/assets/statisitcs/menu4.png"),
        },
        {
          id: "40",
          name: "发现隐患数",
          mark: "find_item_num",
          icon: require("@/assets/statisitcs/menu5.png"),
        },
        {
          id: "40",
          name: "整改隐患数",
          mark: "rectify_item_num",
          icon: require("@/assets/statisitcs/menu6.png"),
        },
      ],
      pickerOptions: {
        shortcuts: [
          {
            text: "本月",
            onClick(picker) {
              picker.$emit("pick", [new Date(), new Date()]);
            },
          },
          {
            text: "今年至今",
            onClick(picker) {
              const end = new Date();
              const start = new Date(new Date().getFullYear(), 0);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近六个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setMonth(start.getMonth() - 6);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
      formData: {
        select_time: [
          new Date(new Date().setMonth(new Date().getMonth() - 3)),
          new Date(),
        ],
        orgs: "",
        org: "",
      },
    };
  },
  mounted() {
    this.loadOrgTree();
  },
  methods: {
    resetForm() {
      this.$refs.form.resetFields();
      this.$parent.resetForm();
    },
    handleOrgChanged(data) {
      this.formData.org = data.length > 0 ? data[data.length - 1] : null;
    },
    handleQuery() {
      const orgs = this.formData.orgs;
      let start_date = "";
      let end_date = "";
      let enforce_org_id = "";
      if (this.formData.select_time && this.formData.select_time.length === 2) {
        start_date = DateTime.fromJSDate(this.formData.select_time[0]).toFormat(
          "yyyy-LL-dd"
        );
        end_date = DateTime.fromJSDate(this.formData.select_time[1]).toFormat(
          "yyyy-LL-dd"
        );
      }
      if (
        orgs &&
        orgs[orgs.length - 1] != null &&
        orgs[orgs.length - 1] != ""
      ) {
        enforce_org_id = orgs[orgs.length - 1];
      }
      this.$emit("query", {
        start_date,
        end_date,
        enforce_org_id,
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.wrap {
  padding: 0 15px;
  .info {
    width: 100%;
    padding: 24px 0;
    display: flex;
    justify-content: space-between;
    border-top: 1px solid #f2f3f5;
    border-bottom: 1px solid #f2f3f5;
  }
  .item {
    display: flex;
  }
  .item-icon {
    width: 54px;
    height: 54px;
    margin-right: 12px;
  }
  .row-name {
    font-size: 12px;
    color: #1d2129;
  }
  .row-title {
    font-size: 24px;
    color: #1d2129;
  }

  .row-num {
    margin-left: 10px;
    font-size: 12px;
    color: #4e5969;
  }
}

.cards {
  display: flex;
  justify-content: space-between;
  margin-top: 24px;
  margin-bottom: 25px;
  padding: 0 30px;
  .card {
    display: flex;
    flex-direction: column;
    width: 311px;
    height: 144px;
    border: 1px solid #f2f3f5;
    border-radius: 7px;
    &:nth-child(2) {
      .card-title {
        background: #dccfff;
      }
    }
    &:nth-child(3) {
      .card-title {
        background: #cfdfff;
      }
    }
  }
  .card-title {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 39px;
    font-size: 18px;
    color: #2a2862;
    background: #cfdfff;
  }
  .card-wrap {
    flex: 1;
    display: flex;
    justify-content: space-around;
    align-items: center;
  }
  .card-column {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .row-num {
    font-size: 22px;
    color: #1d2129;
  }
  .row-title {
    margin-top: 5px;
    font-size: 12px;
    color: #1d2129;
  }
  .row-desc {
    margin-left: 10px;
    color: #4e5969;
    font-size: 12px;
  }
  .row-num2 {
    font-size: 22px;
    color: #32b757;
  }
  .card-img {
    padding-left: 40px;
  }
  .last-column {
    display: flex;
    flex-direction: column;
    padding-right: 70px;
    // margin-right: 40px;
  }
}
</style>
