<template>
  <div id="rank-one">
    <el-row>
      <el-col :span="24" class="main">
        <el-col :span="24" class="one">
          <ul>
            <li class="list" v-for="(i, index) in list" :key="index" :style="{ width: width + '%' }">
              <h5>{{ i.name }}</h5>
              <p :title="i.num">
                <span>{{ i.num }}</span>
                {{ i.type }}
              </p>
            </li>
          </ul>
        </el-col>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { mapState, createNamespacedHelpers } from 'vuex';
const { mapActions: baoan_statis } = createNamespacedHelpers('baoan_statis');

export default {
  name: 'rank-one',
  props: {
    // 层级
    rank: { type: String, default: () => '1' },
    // 一级
    typeInfo: { type: Object },
    // 二级
    companyInfo: { type: Object },
    // 服务对象信息
    serviceInfo: { type: Object },
  },
  components: {},
  data: function () {
    return {
      list: [],
      width: '',
    };
  },
  created() {
    this.search();
  },
  methods: {
    ...baoan_statis(['newOnequery', 'newTwoquery', 'newThrquery', 'newFivequery', 'newSixquery']),
    async search() {
      if (this.rank && this.rank == '1') {
        if (this.serviceInfo && this.serviceInfo.id) {
          let res = await this.newTwoquery({ object_id: this.serviceInfo.id });
          if (this.$checkRes(res)) {
            let data = res.data.list;
            let arr = [
              { name: '服务对象', num: data[0].name, type: '' },
              { name: '企业名称', num: data[0].company_name, type: '' },
              { name: '保安员数', num: data[0].baoan, type: '个' },
              { name: '在岗人数', num: data[0].zaigang, type: '个' },
            ];
            this.$set(this, `list`, arr);
            this.countWidth(arr.length);
          }
        } else {
          let res = await this.newOnequery();
          if (this.$checkRes(res)) {
            let data = res.data.list;
            let arr = [
              { name: '企业总数', num: data[0].qiye, type: '家' },
              { name: '保安员数', num: data[0].baoan, type: '个' },
              { name: '在岗人数', num: data[0].zaigang, type: '个' },
              { name: '跨省服务公司', num: data[0].waisheng, type: '家' },
              { name: '武装押运', num: data[0].yayun, type: '家' },
              { name: '外省分公司', num: data[0].fengongsi, type: '家' },
            ];
            this.$set(this, `list`, arr);
            this.countWidth(arr.length);
          }
        }
      } else if (this.rank && this.rank == '2') {
        if (this.serviceInfo && this.serviceInfo.id) {
          let res = await this.newTwoquery({ object_id: this.serviceInfo.id });
          if (this.$checkRes(res)) {
            let data = res.data.list;
            let arr = [
              { name: '服务对象', num: data[0].name, type: '' },
              { name: '企业名称', num: data[0].company_name, type: '' },
              { name: '保安员数', num: data[0].baoan, type: '个' },
              { name: '在岗人数', num: data[0].zaigang, type: '个' },
            ];
            this.$set(this, `list`, arr);
            this.countWidth(arr.length);
          }
        } else {
          let res = await this.newThrquery({ purpose: this.typeInfo.purpose_id });
          if (this.$checkRes(res)) {
            let data = res.data.list;
            let arr = [
              { name: '企业总数', num: data[0].qiye, type: '家' },
              { name: '保安员数', num: data[0].baoan, type: '个' },
              { name: '在岗人数', num: data[0].zaigang, type: '个' },
              { name: '待考试数', num: data[0].kaoshi, type: '个' },
            ];
            this.$set(this, `list`, arr);
            this.countWidth(arr.length);
          }
        }
      } else if (this.rank && this.rank == '3') {
        if (this.serviceInfo && this.serviceInfo.id) {
          let res = await this.newSixquery({ object_id: this.serviceInfo.id });
          if (this.$checkRes(res)) {
            let data = res.data.list;
            let arr = [
              { name: '企业名称', num: data[0].company_name, type: '' },
              { name: '服务对象', num: data[0].name, type: '' },
              { name: '保安员数', num: data[0].baoan, type: '个' },
              { name: '在岗人数', num: data[0].zaigang, type: '个' },
              { name: '负责人', num: data[0].fuzeren, type: '' },
            ];
            this.$set(this, `list`, arr);
            this.countWidth(arr.length);
          }
        } else {
          let res = await this.newFivequery({ company_id: this.companyInfo.id });
          if (this.$checkRes(res)) {
            let data = res.data.list;
            let arr = [
              { name: '企业法人', num: data[0].legal_personal, type: '' },
              { name: '保安员数', num: data[0].baoan, type: '个' },
              { name: '在岗人数', num: data[0].zaigang, type: '个' },
              { name: '待考试数', num: data[0].kaoshi, type: '个' },
              { name: '服务对象', num: data[0].duixiang, type: '个' },
            ];
            this.$set(this, `list`, arr);
            this.countWidth(arr.length);
          }
        }
      }
    },
    // 计算宽度
    countWidth(length) {
      if (length == 4) this.$set(this, `width`, '23.1');
      else if (length == 5) this.$set(this, `width`, '19');
      else if (length == 6) this.$set(this, `width`, '15.4');
    },
  },
  computed: {
    ...mapState(['user']),
  },
  metaInfo() {
    return { title: this.$route.meta.title };
  },
  watch: {
    typeInfo: {
      deep: true,
      // immediate: true,
      handler(val) {
        if (val && val.purpose_id) this.search({ rank: '2' });
      },
    },
    companyInfo: {
      deep: true,
      // immediate: true,
      handler(val) {
        if (val && val.id) this.search({ rank: '3' });
      },
    },
    rank: {
      handler(val) {
        if (val === '1') this.search();
      },
    },
    serviceInfo: {
      deep: true,
      handler(val, oval) {
        const keys = Object.keys(val);
        const okeys = Object.keys(oval);
        if (keys.length === 0 && okeys.length > 0) {
          // 新值没有,旧值有值:返回,查询
          this.search();
        } else if (keys.length > 0 && okeys.length === 0) {
          // 新值有值,旧值没值:查询某个服务对象
          this.search();
        } else if (keys.length > 0 && okeys.length > 0) {
          // 都有值, 不是一个对象就重新查
          const id = val.id;
          const oid = oval.id;
          if (!_.isEqual(id, oid)) this.search();
        }
      },
    },
  },
};
</script>

<style lang="less" scoped>
.main {
  .one {
    ul {
      margin-top: 2.04vw;
      height: 6.51vw;
      text-align: center;
      display: -webkit-flex;
      display: flex;
      -webkit-flex-flow: row;
      flex-flow: row;
      flex-wrap: wrap;
      align-content: center;
      justify-content: space-between;
      li {
        float: left;
        height: 6.51vw;
        margin-right: 0.5vw;
        background: url('~@/assets/tg/all-statistics-bg.png');
        background-repeat: no-repeat;
        background-size: 100% 100%;
        text-align: center;
        list-style-type: none;
        h5 {
          font-size: 1vw;
          color: #2bfdff;
          font-style: italic;
          padding-top: 1vw;
          font-weight: 700;
          font-family: fzzuhjt;
          padding-bottom: 0.52vw;
        }
        p {
          margin-top: 0.4vw;
          color: #fff;
          padding: 0 15px;
          overflow: hidden;
          text-overflow: ellipsis;
          -webkit-line-clamp: 2;
          word-break: break-all;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          span {
            color: #f4fd50;
            font-size: 1vw;
            font-family: fantasy;
            margin-right: 0.364vw;
          }
        }
        p:hover {
          cursor: pointer;
        }
      }
      li:last-child {
        margin: 0;
      }
    }
  }
}
</style>
