<template>
  <div class="back-line-main">
    <div class="team-manage">
      <h2>团队管理</h2>
      <a-row>
        <a-col :span="4" v-for="(item, index) in teamList" :key="index">
          <div :class="teamTab == index ? 'on' : ''" @click="teamTab = index">
            <p>团队级别：{{ item.teamlevel }}</p>
            <p>团队人数：{{ item.teamnum || 0 }}</p>
            <p>签单保费：{{ item.sumpremium || 0 }}</p>
            <p>出单人力：{{ item.usernum || 0 }}</p>
          </div>
        </a-col>
      </a-row>
    </div>
    <div class="back-line-hearder">
      <div class="title">
        <h2>成员详情</h2>
        <div>
          月份筛选
          <a-month-picker
            placeholder="请选择月份"
            @change="monthChange"
            v-model="formState.month"
            valueFormat="YYYY-MM"
          />
        </div>
      </div>
      <a-form layout="inline" :model="formState" @finish="handleFinish">
        <a-form-item label="姓名" :labelCol="{ span: 5 }" :colon="false">
          <a-input
            v-model="formState.name"
            placeholder="请输入姓名"
            allowClear
          ></a-input>
        </a-form-item>
        <a-form-item label="工号" :labelCol="{ span: 5 }" :colon="false">
          <a-input
            v-model="formState.userCode"
            placeholder="请输入工号"
            allowClear
          ></a-input>
        </a-form-item>
        <a-form-item label="手机号" :labelCol="{ span: 5 }" :colon="false">
          <a-input
            v-model="formState.phoneNumber"
            placeholder="请输入手机号"
            allowClear
          ></a-input>
        </a-form-item>
        <!-- <a-form-item label="筛选时间" :labelCol="{ span: 5 }" :colon="false">
          <a-input></a-input>
        </a-form-item> -->
        <a-form-item
          label="             "
          :labelCol="{ span: 5 }"
          :colon="false"
          class="form-item-search"
        >
          <a-button type="primary" @click="getList()">查询</a-button>
        </a-form-item>
      </a-form>
      <a-spin :spinning="loading">
        <a-row class="personnel-message">
          <a-col v-for="(item, index) in userList" :key="item.deptId" :span="6">
            <div :class="Math.floor((index / 4) % 2) ? 'list-2' : 'list-1'">
              <p>团队成员：{{ item.name }}</p>
              <p>报价笔数：{{ item.orderNumber || 0 }}</p>
              <p>
                <span>核保笔数：{{ item.underwritingCount || 0 }}</span>
              </p>
              <p>
                <span>出单数：{{ item.qutationInsureCount || 0 }}</span>
                <span>签单保费：{{ item.totalPremium || 0 }}</span>
              </p>
              <p>
                <span>已认证：{{ item.isFactorVerify || 0 }}</span>
                <span>未认证：{{ item.isNotFactorVerify || 0 }}</span>
              </p>
              <div class="user-icon">
                <img
                  v-show="item.filePath"
                  :src="process + item.filePath"
                  alt=""
                />
                <img
                  v-if="!item.filePath && item.sex == 'M'"
                  src="../../../assets/img/man.png"
                  alt=""
                />
                <img
                  v-if="!item.filePath && item.sex == 'F'"
                  src="../../../assets/img/woman.png"
                  alt=""
                />
                <img
                  v-if="!item.filePath && !item.sex"
                  src="../../../assets/img/man.png"
                  alt=""
                />
                {{ item.userName }}
              </div>
              <p>
                <a-button type="primary" @click="taskMessage(item)"
                  >任务数据</a-button
                >
                <a-button type="primary" @click="orderMessage(item)"
                  >订单数据</a-button
                >
                <a-button type="primary" @click="openDrawer(item)"
                  >考核数据</a-button
                >
              </p>
            </div>
          </a-col>
        </a-row>
        <div class="page">
          <a-pagination
            v-model="current"
            :total="pageInfo.total"
            show-less-items
            show-size-changer
            show-quick-jumper
            :show-total="(total) => `共 ${total} 条数据`"
            @change="pageChange"
            @showSizeChange="pageChange"
            :page-size.sync="pageInfo.pageSize"
            :pageSizeOptions="['12', '24', '36', '48']"
          />
        </div>
      </a-spin>
    </div>
    <a-drawer
      :width="500"
      :placement="placement"
      :visible="visible"
      :headerStyle="headerStyle"
      :closable="false"
    >
      <template slot="title">
        <div class="custom-title" :style="headerStyle">
          <div>
            <a-icon type="close" @click="onClose" />
            成员信息
          </div>
          <div>
            <a-button style="margin-right: 8px" @click="onClose">取消</a-button>
            <a-button type="primary" @click="onClose">确认</a-button>
          </div>
        </div>
      </template>
      <h3>个人信息</h3>
      <ul class="list">
        <li>
          <span>姓名</span>
          <span>{{ userData.name }}</span>
        </li>
        <li>
          <span>工号</span> <span>{{ userData.userId }}</span>
        </li>
        <li>
          <span>手机号</span> <span>{{ userData.userPhone }}</span>
        </li>
        <li>
          <span>注册时间</span> <span>{{ userData.userDate }}</span>
        </li>
        <li>
          <span>是否达标</span>
          <span>
            <img
              v-show="!userData.isCompliance"
              src="../../../assets/img/error.png"
              alt=""
            />
            <img
              v-show="userData.isCompliance"
              src="../../../assets/img/success.png"
              alt=""
            />
            <!-- <a-icon
              type="close"
              v-show="!userData.isCompliance"
              style="color: #f94950; font-weight: 700"
            />
            <a-icon
              v-show="!userData.isCompliance"
              type="check-circle"
              style="color: green; font-weight: 700"
            /> -->
            <!-- {{ userData.isCompliance }} -->
          </span>
        </li>
        <li>
          <span>签单保费</span> <span>{{ userData.totalPremium }}</span>
        </li>
        <li>
          <span>出单人力</span> <span>{{ userData.orderManpower }}</span>
        </li>
        <li>
          <span>签单保费达标差距</span>
          <span>{{ userData.premiumCompliance }}</span>
        </li>
        <li>
          <span>出单人力达标差距</span>
          <span>{{ userData.orderManpowerCompliance }}</span>
        </li>
      </ul>
    </a-drawer>
  </div>
</template>
  
  <script>
export default {
  data() {
    return {
      formState: {
        phoneNumber: "",
        name: "",
        userCode: "",
        month: "",
      },
      current: 1,
      teamTab: 0,
      visible: false,
      placement: "right",
      userData: {},
      headerStyle: {
        display: "flex",
        "align-items": "center",
        "justify-content": "space-between",
      },
      process: process.env.VUE_APP_API_BASE_URL,
      userList: [],
      pageInfo: {
        pageNum: 1,
        pageSize: 12,
        total: 0,
      },
      teamList: [],
      loading: true,
    };
  },
  watch: {
    teamTab() {
      // console.log(val);
      this.getList();
    },
  },
  created() {
    this.getTeamList();
    this.getList();
  },
  methods: {
    taskMessage(item) {
      this.$router.push({
        path: "/personnelManage/front/task",
        query: {
          userId: item.userId,
          time: this.$route.query.time,
        },
      });
    },
    orderMessage(item) {
      this.$router.push({
        path: "/personnelManage/front/order",
        query: {
          userId: item.userId,
          time: this.$route.query.time,
        },
      });
    },
    openDrawer(item) {
      // item
      this.visible = true;

      this.$API.personnel
        .getTeamUserDetails({
          userId: item.userId,
        })
        .then((res) => {
          if (res.data.code === 200) {
            this.userData = { ...res.data.data };
          }
        });
      // console.log(this.visible)
    },
    monthChange() {},
    onClose() {
      //
      this.visible = false;
    },
    pageChange(page, pageSize) {
      //   console.log(page, pageSize);
      this.pageInfo.pageNum = page;
      this.pageInfo.pageSize = pageSize;
      this.getList();
    },
    getList() {
      this.loading = true;
      this.$API.personnel
        .getTeamUserList({
          userId: this.$route.query.userId,
          pageNum: this.pageInfo.pageNum,
          pageSize: this.pageInfo.pageSize,
          ...this.formState,
          type: this.teamTab,
        })
        .then((res) => {
          this.loading = false;

          if (res.data.code === 200) {
            this.userList = [...res.data.data.records];
            this.pageInfo.total = res.data.data.total;
          }
        });
    },
    getTeamList() {
      this.$API.personnel
        .getTeamList({
          userId: this.$route.query.userId,
          ...this.formState,
        })
        .then((res) => {
          // console.log(res);
          if (res.data.code === 200) {
            this.teamList = [...res.data.data.hzList];
          }
        });
    },
  },
};
</script>
  <style lang='less' scoped>
.back-line-main {
  display: flex;
  height: 100%;
  flex-direction: column;
  .team-manage {
    width: 100%;
    height: 232px;
    margin-bottom: 24px;
    background: #fff;
    padding: 15px;
    box-sizing: border-box;
    > .ant-row {
      height: 162px;
      > div {
        height: 100%;
        padding: 0 15px;
        > div {
          height: 100%;
          border: 1px solid #d7dbe7;
          border-radius: 4px;
          padding: 10px;

          box-sizing: border-box;
          position: relative;
        }
        > div:hover {
          background: rgba(238, 121, 47, 0.05);
          // opacity: 0.1;
        }
        > div.on {
          background: rgba(238, 121, 47, 0.05);
          > p:first-child {
            font-size: 18px;
            color: #ee792f;
          }
        }
        > div.on::before {
          position: absolute;
          content: "";
          display: block;
          width: 100%;
          height: 6px;
          left: 0;
          top: -3px;
          // margin-top: -15px; /* 调整这个值来改变边框的粗细 */
          border-top: 6px solid #ee792f; /* 设置边框的粗细和颜色 */
          border-radius: 4px 4px 0 0;
        }
      }
    }
  }

  .back-line-hearder {
    flex: 1;
    padding: 15px;
    box-sizing: border-box;
    h1 {
      margin: 0;
    }
    .title {
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-bottom: 1px solid #f0f0f0;
      padding-bottom: 10px;
      box-sizing: border-box;
      h2 {
        margin: 0;
      }
    }
    height: auto;
    background: #fff;
    .ant-form {
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-start;
      > .ant-form-item {
        flex: 1;
        //   width: 20%;
        /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;
      }
    }
    .personnel-message {
      // display: flex;
      // flex-wrap: wrap;
      // // justify-content: space-evenly;
      // margin-top: 10px;
      > .ant-col {
        flex: none;
        width: 25%;
        margin-bottom: 15px;
        padding: 0 10px;
        box-sizing: border-box;
        > div {
          width: 100%;
          height: auto;
          background: #f9faff;
          border-radius: 8px;
          border: 1px solid #2a55e5;
          padding: 15px;
          box-sizing: border-box;
          margin-bottom: 15px;
          position: relative;
          margin-right: 2%;
          p {
            display: flex;
            justify-content: space-between;
          }
          // p:last-child {
          //   margin: 0;
          //   justify-content: flex-end;
          //   // text-align: right;
          // }
          div {
            width: 56px;
            height: 56px;
            position: absolute;
            top: 12px;
            right: 15px;
            border-radius: 50%;
            overflow: hidden;
            img {
              width: 100%;
              height: 100%;
            }
          }
          // margin-right: 2%;
        }
        > div.list-1 {
          background: #fff8f6;
          box-shadow: 0px 2px 8px 0px rgba(255, 173, 76, 0.15);
          border-radius: 8px 8px 8px 8px;
          border: 1px solid rgba(248, 127, 44, 0.5);
          button {
            background: #f87f2c;
            color: #fff;
            border: none;
          }
        }
        > div.list-2 {
          background: #f7fef4;
          box-shadow: 0px 2px 8px 0px rgba(135, 229, 42, 0.15);
          border-radius: 8px 8px 8px 8px;
          border: 1px solid rgba(128, 190, 56, 0.5);
          button {
            background: #80be38;
            color: #fff;
            border: none;
          }
        }
        > div.list-3 {
          background: #f9faff;
          box-shadow: 0px 2px 8px 0px rgba(42, 85, 229, 0.15);
          border-radius: 8px 8px 8px 8px;
          border: 1px solid rgba(42, 85, 229, 0.5);
        }
      }
    }
    .page {
      display: flex;
      justify-content: flex-end;
    }
  }
}
/deep/.ant-drawer-title {
  width: 100%;
}
/deep/.custom-title {
  display: flex;
  > i {
    cursor: pointer;
  }
}
/deep/.ant-drawer-body {
  h3 {
    width: 100%;
    height: 56px;
    background: #fafafa;
    font-weight: 500;
    font-size: 16px;
    color: rgba(0, 0, 0, 0.85);
    text-align: center;
    line-height: 56px;
  }
  /deep/ .ant-list-item {
    display: flex;
  }
  .ant-list-split .ant-list-items .ant-list-item:last-child {
    border-bottom: 1px solid #f0f0f0 !important;
  }
  .list-label {
    width: 160px;
  }
}
.list {
  width: 100%;
  > li {
    height: 56px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #f0f0f0;
    padding: 0 10px;
    box-sizing: border-box;
    > span:first-child {
      display: flex;
      width: 200px;
      font-weight: 500;
      font-size: 16px;
      color: rgba(0, 0, 0, 0.85);
    }
    span {
      font-weight: 500;
      font-size: 16px;
      color: rgba(0, 0, 0, 0.85);
    }
    img {
      width: 19px;
      height: auto;
    }
  }
}
</style>