<template>
  <div class="dle">
    <div v-for="(item, index) in list" :key="index" class="dle-ve">
      <rate3D :data="item.val" :text="item.text" :title="item.title"></rate3D>
    </div>
  </div>
</template>

<script>
import rate3D from "../../../components/rate3D.vue";
import { getGlnrWcl } from "@/api/management.js";
export default {
  components: { rate3D },
  data() {
    return {
      list: [],
      params: {
        pageSize: 100,
        pageNum: 1,
      },
    };
  },
  props: {
    qx: String,
  },
  watch: {
    qx() {
      this.getWclList();
    },
  },
  methods: {
    getWclList() {
      getGlnrWcl({
        ...this.params,
        qy: this.qx === "重庆市" ? "" : this.qx,
      }).then((res) => {
        const item = res.data.rows[0];
        this.list = [
          {
            title: "每日交接班",
            text: item.mrjjb,
            val: parseInt(item.mrjjb.replace("%", "")),
          },
          {
            title: "每日巡检",
            text: item.mrxj,
            val: parseInt(item.mrxj.replace("%", "")),
          },
          {
            title: "每月维保",
            text: item.mywb,
            val: parseInt(item.mywb.replace("%", "")),
          },
          {
            title: "年度安全培训",
            text: item.ndaqpx,
            val: parseInt(item.ndaqpx.replace("%", "")),
          },
          {
            title: "年度消防演练",
            text: item.ndxfyl,
            val: parseInt(item.ndxfyl.replace("%", "")),
          },
          {
            title: "年度消防评估",
            text: item.ndxfpg,
            val: parseInt(item.ndxfpg.replace("%", "")),
          },
          {
            title: "消防预案",
            text: item.xfya,
            val: parseInt(item.xfya.replace("%", "")),
          },
          {
            title: "安全制度",
            text: item.aqzd,
            val: parseInt(item.aqzd.replace("%", "")),
          },
        ];
      });
    },
  },
  created() {
    this.getWclList();
  },
};
</script>

<style lang="less" scoped>
.dle {
  display: flex;
  flex-wrap: wrap;
  //   justify-content: space-between;
  // margin: 20px 0px 20px 20px;
  margin: 0px 40px;
  row-gap: 5px;
  column-gap: 35px;

  .dle-ve {
    // margin-right: 30px;
  }
}
.dle::after {
  content: "";
  flex: auto;
}
</style>
