<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>
          <span>时间筛选</span>
          <a-range-picker
            style="margin-left: 10px"
            v-model="formState.time"
            @change="timeChange"
            valueFormat="YYYY-MM-DD"
          >
            <a-icon slot="suffixIcon" type="calendar" />
          </a-range-picker>
          <a-radio-group
            style="margin-left: 10px"
            default-value="1"
            button-style="solid"
            v-model="formState.days"
          >
            <a-radio-button :value="1" @click="formState.time = []">
              当天
            </a-radio-button>
            <a-radio-button :value="2" @click="formState.time = []">
              近7天
            </a-radio-button>
            <a-radio-button :value="3" @click="formState.time = []">
              近30天
            </a-radio-button>
          </a-radio-group>
        </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"
          class="form-item-search"
        >
          <a-button type="primary" @click="getList()">查询</a-button>
        </a-form-item>
      </a-form> -->
      <div class="personnel-message">
        <div
          v-for="(item, index) in userList"
          :key="item.deptId"
          :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>
      </div>
      <!-- <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> -->
    </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>{{ userData.totalPremium }}</span>
        </li>
        <li>
          <span>出单人力</span> <span>{{ userData.orderManpower }}</span>
        </li>
      </ul>
    </a-drawer>
  </div>
</template>
    
    <script>
export default {
  data() {
    return {
      formState: {
        // phoneNumber: "",
        // name: "",
        // userCode: "",
        time: [],
        days: undefined,
        createtimeEnd: undefined,
        createtimeStart: undefined,
      },
      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: [],
    };
  },
  watch: {
    "formState.days"() {
      this.getList();
    },
  },
  created() {
    this.$nextTick(() => {
      this.formState.time = this.$route.query.time;
      this.formState.createtimeStart = this.$route.query.time[0];
      this.formState.createtimeEnd = this.$route.query.time[1];
      this.getList();
    });
  },
  methods: {
    handleFinish() {
      //
    },
    taskMessage(item) {
      this.$router.push({
        path: "/personnelManage/sales/task",
        query: {
          userId: item.userId,
          time: this.formState.time,
        },
      });
    },
    orderMessage(item) {
      this.$router.push({
        path: "/personnelManage/sales/order",
        query: {
          userId: item.userId,
          time: this.formState.time,
        },
      });
    },

    openDrawer(item) {
      // item
      this.visible = true;

      this.$API.personnel
        .getTeamUserDetails({
          userId: item.userId,
          ...this.formState,
        })
        .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();
    },
    timeChange(val) {
      this.formState.createtimeStart = val[0];
      this.formState.createtimeEnd = val[1];
      this.formState.days = undefined;
      this.getList();
    },
    getList() {
      this.$API.personnel
        .getChannelDetails({
          userId: this.$route.query.userId,
          ...this.formState,
        })
        .then((res) => {
          if (res.data.code === 200) {
            this.userList = [...res.data.data];
            // this.teamList.unshift({
            //   totalManpower: this.$route.query.totalManpower,
            //   totalPremium: this.$route.query.totalPremium,
            //   orderManpower: this.$route.query.orderManpower,
            //   teamLevel: "汇总",
            // });
          }
        });
      //   this.$API.personnel
      //     .getTeamUserList({
      //       userId: this.$route.query.userId,
      //       pageNum: this.pageInfo.pageNum,
      //       pageSize: this.pageInfo.pageSize,
      //       ...this.formState,
      //     })
      //     .then((res) => {
      //       if (res.data.code === 200) {
      //         // this.userList = [...res.data.data.records];
      //         this.pageInfo.total = res.data.data.total;
      //       }
      //     });
    },
  },
};
</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);
        }
        > 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;
      > div {
        width: 23%;
        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: ;
        //   // 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);
    }
  }
}
</style>