<template>
  <div class="back-line-main">
    <div class="back-line-hearder">
      <h1>人员查询</h1>
      <fromRow :formState="formState" @getList="getBackLinePersonnel"></fromRow>
    </div>
    <div class="back-line-message">
      <div>
        <dl>
          <dt><img src="@/assets/img/money.png" alt="" /></dt>
          <dd>
            <p>工资总额</p>
            <p v-show="backLinePersonnel.salary">
              <a>￥</a>
              <span>{{ backLinePersonnel.salary }}</span>
            </p>
          </dd>
        </dl>
      </div>
      <div>
        <dl>
          <dt><img src="@/assets/img/user.png" alt="" /></dt>
          <dd>
            <p class="other-module">
              专业分布
              <span class="other">
                <span>
                  <i :style="{ background: '#3E70FF' }"></i>
                  <a>计算机</a>
                </span>
                <span>
                  <i :style="{ background: '#FFC43F' }"></i>
                  <a>其他</a>
                </span>
              </span>
            </p>
            <div>
              <!-- <div>{{ backLinePersonnel.computerSpecialityProportion*100+"%" }}</div>
                       <div>{{ backLinePersonnel.otherSpecialityPersion*100+"%" }}</div> -->
              <div
                :style="{
                  width:
                    (
                      backLinePersonnel.computerSpecialityProportion * 100
                    ).toFixed(0) + '%',
                  background: '#3E70FF',
                }"
                v-if="backLinePersonnel.computerSpecialityProportion > 0"
              >
                {{
                  (
                    backLinePersonnel.computerSpecialityProportion * 100
                  ).toFixed(0) + "%"
                }}
              </div>
              <div
                :style="{
                  width:
                    (backLinePersonnel.otherSpecialityProportion * 100).toFixed(
                      0
                    ) + '%',
                  background: '#FFC43F',
                }"
                v-if="backLinePersonnel.otherSpecialityPersion > 0"
              >
                {{
                  (backLinePersonnel.otherSpecialityProportion * 100).toFixed(
                    0
                  ) + "%"
                }}
              </div>
            </div>
            <h2 class="other-people">
              <span
                >计算机：{{
                  backLinePersonnel.computerSpecialityPersion
                }}人</span
              >
              <span
                >其他：{{ backLinePersonnel.otherSpecialityPersion }}人</span
              >
            </h2>
          </dd>
        </dl>
      </div>
      <div>
        <dl>
          <dt><img src="@/assets/img/users.png" alt="" /></dt>
          <dd>
            <p class="other-module">
              性别分布
              <span class="other">
                <span>
                  <i :style="{ background: '#3ECBC4' }"></i>
                  <a>男</a>
                </span>
                <span>
                  <i :style="{ background: '#F2657D' }"></i>
                  <a>女</a>
                </span>
              </span>
            </p>
            <div>
              <div
                v-if="backLinePersonnel.manProportion > 0"
                :style="{
                  width:
                    (backLinePersonnel.manProportion * 100).toFixed(0) + '%',
                  background: '#3ECBC4',
                }"
              >
                {{ (backLinePersonnel.manProportion * 100).toFixed(0) + "%" }}
              </div>
              <div
                v-if="backLinePersonnel.femaleProportion > 0"
                :style="{
                  width:
                    (backLinePersonnel.femaleProportion * 100).toFixed(0) + '%',
                  background: '#F2657D',
                }"
              >
                {{
                  (backLinePersonnel.femaleProportion * 100).toFixed(0) + "%"
                }}
              </div>
            </div>
            <h2 class="other-people">
              <span>男：{{ backLinePersonnel.manSex }}人</span>
              <span>女：{{ backLinePersonnel.femaleSex }}人</span>
            </h2>
          </dd>
        </dl>
      </div>
      <div>
        <dl>
          <dt><img src="@/assets/img/users.png" alt="" /></dt>
          <dd>
            <p class="other-module">
              在职分布
              <span class="other">
                <span>
                  <i :style="{ background: '#3ECBC4' }"></i>
                  <a>在职</a>
                </span>
                <span>
                  <i :style="{ background: '#F2657D' }"></i>
                  <a>离司</a>
                </span>
              </span>
            </p>
            <div>
              <div
                v-if="backLinePersonnel.onJobUserProportion > 0"
                :style="{
                  width:
                    (backLinePersonnel.onJobUserProportion * 100).toFixed(0) +
                    '%',
                  background: '#3ECBC4',
                }"
              >
                {{
                  (backLinePersonnel.onJobUserProportion * 100).toFixed(0) + "%"
                }}
              </div>
              <div
                v-if="backLinePersonnel.departUserProportion > 0"
                :style="{
                  width:
                    (backLinePersonnel.departUserProportion * 100).toFixed(0) +
                    '%',
                  background: '#F2657D',
                }"
              >
                {{
                  (backLinePersonnel.departUserProportion * 100).toFixed(0) +
                  "%"
                }}
              </div>
            </div>
            <h2 class="other-people">
              <span>在职：{{ backLinePersonnel.onJobUser }}人</span>
              <span>离司：{{ backLinePersonnel.departUser }}人</span>
            </h2>
          </dd>
        </dl>
      </div>
    </div>
  </div>
</template>
  
<script>
import fromRow from "@/components/form/FormRow";

export default {
  components: {
    fromRow,
  },
  data() {
    return {
      formState: {
        whole: undefined,
        cityId: undefined,
        countyId: undefined,
        houseId: undefined,
        provinceId: undefined,
      },
      backLinePersonnel: {},
    };
  },
  created() {
    this.getBackLinePersonnel();
  },
  methods: {
    handleFinish() {
      //
    },
    getBackLinePersonnel() {
      this.$API.personnel
        .getUserStatistics({
          ...this.formState,
        })
        .then((res) => {
          // console.log(res.data.data);
          if (res.data.code === 200) {
            this.backLinePersonnel = res.data.data;
          }
        });
    },
  },
};
</script>
<style lang='less' scoped>
.back-line-main {
  display: flex;
  flex-direction: column;
  .back-line-hearder {
    padding: 15px;
    box-sizing: border-box;
    h1 {
      margin: 0;
    }
  }
  > div {
    height: 152px;
    background: #fff;
    .ant-form {
      display: flex;
      > .ant-form-item {
        flex: 1;
        /deep/.ant-form-item-control-wrapper {
          width: 100%;
        }
      }
    }
    .form-item-search {
      // display: flex;
      // justify-content: flex-end;
      /deep/ .ant-form-item-control {
        display: flex;
        justify-content: flex-end;
      }
    }
  }
  > div:last-child {
    margin-top: 24px;
    display: flex;
    flex-wrap: wrap;
    background: none;
    justify-content: space-between;
    > div {
      // flex: ;
      width: 24%;
      height: 100%;
      background: #fff;
      border-radius: 8px;
      > dl {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        padding: 0 30px;
        box-sizing: border-box;
        height: 100%;
        > dt {
          img {
            width: 80px;
            height: 80px;
          }
        }
        > dd {
          flex: 1;
          display: flex;
          flex-direction: column;
          // justify-content: center;
          // align-items: center;
          padding-left: 15px;
          box-sizing: border-box;
          margin: 0;
          > p {
            // display: flex;
            // justify-content: space-between;
            margin: 0;
            font-size: 30px;
            color: #000;
            > a {
              color: #000;
              cursor: auto;
              font-size: 18px;
            }
          }
          > p:first-child {
            font-size: 20px;
            color: #333333;
          }
          > div {
            width: 100%;
            display: flex;
            align-items: center;
            border-radius: 8px;
            // padding: 0 15px;
            // box-sizing: border-box;
            > div {
              display: flex;
              align-items: center;
              flex: none;
              height: 35px;
              color: #fff;
              // border-radius: 8px;
            }
            > div.on {
              border-radius: 8px !important;
            }
            > div:first-child {
              // width: 35%;
              background: #3e70ff;
              border-radius: 8px 0 0 8px;
              text-indent: 15px;
            }
            > div:last-child {
              // width: 65%;
              background: #ffc43f;
              border-radius: 0 8px 8px 0;
              // text-align: right;
              justify-content: flex-end;
              padding-right: 15px;
              box-sizing: border-box;
            }
          }
        }
      }
    }
  }
  .back-line-message {
    display: flex;
    > div {
      flex: none;
      width: 20%;
    }
  }
}
.other-module {
  display: flex;
  justify-content: space-between;
}
.other {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: flex-end;
  > span {
    display: flex;
    align-items: center;
    margin-right: 10px;
    > i {
      display: block;
      width: 15px;
      height: 12px;
      background: #3e70ff;
      border-radius: 3px;
      margin-right: 5px;
    }
    > a {
      color: #aaa;
      font-size: 12px;
    }
  }
}
.other-people {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 5px;
  box-sizing: border-box;
  color: #aaa;
}
</style>