<template>
  <div class="back-line-main">
    <div class="back-line-hearder">
      <div>
        <h2>人员查询</h2>
        <div>
          <span>时间筛选</span>
          <a-range-picker
            v-model="formState.time"
            @change="timeChange"
            valueFormat="YYYY-MM-DD"
          >
            <a-icon slot="suffixIcon" type="calendar" />
          </a-range-picker>
        </div>
      </div>
      <fromRow
        :formState="formState"
        @getList="query"
        :search="true"
        :showManage="true"
        :className="'item-4'"
        :showStatus="true"
        :exportExcel="true"
        @exportList="exportList"
      >
      </fromRow>

      <!-- <div
        style="
          display: flex;
          align-items: center;
          justify-content: flex-end;
          padding: 10px 0;
          box-sizing: border-box;
        "
      >
        <a-button type="primary" @click="query">查询</a-button>
      </div> -->
      <a-spin :spinning="loading">
        <a-row class="personnel-message">
          <a-col v-for="(item, index) in list" :key="item.userId" :span="5">
            <div :class="Math.floor((index / 3) % 2) ? 'list-2' : 'list-1'">
              <p>姓名：{{ item.name }}</p>
              <p>员工工号：{{ item.userId }}</p>

              <p>联系方式：{{ item.mobile }}</p>
              <p class="mechanism">
                <a-tooltip>
                  <template slot="title">
                    <span>
                      {{ item.deptName }}
                    </span>
                  </template>
                  <p>
                    机构归属：
                    {{ item.deptName }}
                  </p>
                </a-tooltip>
              </p>
              <p>管理人名称：{{ item.leaderName }}</p>
              <p>
                <span>总人力：{{ item.totalManpower || 0 }}</span>
                <span>出单人力：{{ item.orderManpower || 0 }}</span>
              </p>
              <p>
                <span>总保费：{{ item.totalPremium || 0 }}</span>
                <span>单均保费：{{ item.averagePremium || 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=""
                />
              </div>
              <p>
                <a-button type="primary" @click="teamMessage(item)"
                  >详情</a-button
                >
              </p>
            </div>
          </a-col>
        </a-row>
        <div class="page">
          <a-pagination
            v-model="pageInfo.pageNum"
            :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="['9', '18', '27', '36']"
          />
        </div>
      </a-spin>
    </div>
    <div class="back-line-message">
      <div>
        <h2>团队排名</h2>
        <div class="choose">
          <div>
            <p>选择地域：</p>
            <a-radio-group v-model="area">
              <a-radio-button value="province"> 省 </a-radio-button>
              <a-radio-button value="city"> 市 </a-radio-button>
              <a-radio-button value="county"> 区 </a-radio-button>
            </a-radio-group>
          </div>
          <div>
            <p>排名顺序：</p>
            <a-radio-group v-model="orderSort">
              <a-radio-button value="1"> 人员 </a-radio-button>
              <a-radio-button value="2"> 保费 </a-radio-button>
            </a-radio-group>
          </div>
        </div>
        <div>
          <p>选择区域：</p>
          <div class="area-city">
            <div>
              省份：<a-select style="width: 90%" v-model="rankForm.provinceId">
                <a-select-option
                  v-for="item in areaList"
                  :key="item.areaCode"
                  :label="item.areaCname"
                  :value="item.areaCode"
                >
                  {{ item.areaCname }}
                </a-select-option>
              </a-select>
            </div>
            <div>
              <span v-show="area !== 'province'">城市：</span>
              <a-select
                style="width: 90%"
                v-model="rankForm.cityId"
                v-show="area !== 'province'"
                @change="cityChange"
              >
                <a-select-option
                  v-for="item in cityList"
                  :key="item.areaCode"
                  :label="item.areaCname"
                  :value="item.areaCode"
                >
                  {{ item.areaCname }}
                </a-select-option>
              </a-select>
            </div>
            <div>
              <span v-show="area == 'county'">区/县：</span>

              <a-select
                style="width: 90%"
                v-model="rankForm.countyId"
                v-show="area == 'county'"
                @change="countyChange"
              >
                <a-select-option
                  v-for="item in countyList"
                  :key="item.areaCode"
                  :label="item.areaCname"
                  :value="item.areaCode"
                >
                  {{ item.areaCname }}
                </a-select-option>
              </a-select>
            </div>
          </div>
        </div>
        <a-table
          :data-source="teamList"
          :pagination="false"
          :scroll="{ x: 0, y: 700 }"
          style="background: #d87a16"
        >
          <a-table-column data-index="index" title="排名">
            <template slot-scope="text, record, index">
              <div v-if="index < 3" class="paiming">
                <!-- {{ index + 1 }} -->
                <img
                  v-show="index == 0"
                  src="../../../assets/img/n1.png"
                  alt=""
                />
                <img
                  v-show="index == 1"
                  src="../../../assets/img/n2.png"
                  alt=""
                />
                <img
                  v-show="index == 2"
                  src="../../../assets/img/n3.png"
                  alt=""
                />
              </div>
              <div v-else>
                {{ "No." + (index + 1) }}
              </div>
            </template>
          </a-table-column>
          <a-table-column data-index="name" title="团队名称">
            <div slot-scope="text" v-html="text"></div>
          </a-table-column>
          <a-table-column data-index="totalManpower" title="人员数量">
            <div slot-scope="text" v-html="text"></div>
          </a-table-column>
          <a-table-column data-index="totalPremium" title="签单保费">
            <div slot-scope="text" v-html="text"></div>
          </a-table-column>
        </a-table>
      </div>
    </div>
  </div>
</template>
  
<script>
import fromRow from "@/components/form/FormRow";
import moment from "moment";
export default {
  components: {
    fromRow,
  },
  data() {
    return {
      formState: {
        whole: undefined,
        cityId: undefined,
        countyId: undefined,
        houseId: undefined,
        provinceId: undefined,
        name: undefined,
        userCode: undefined,
        phoneNumber: undefined,
        createtimeStart: moment().format("YYYY-MM-DD"),
        createtimeEnd: moment().format("YYYY-MM-DD"),
        time: [moment().format("YYYY-MM-DD"), moment().format("YYYY-MM-DD")],
        days: undefined,
        leaderId: undefined,
        outThere: undefined,
      },
      rankForm: {
        provinceId: "140000",
        cityId: "",
        countyId: "",
      },
      //   current: 1,
      process: process.env.VUE_APP_API_BASE_URL,
      list: [],
      pageInfo: {
        pageNum: 1,
        pageSize: 9,
        total: 0,
      },
      orderSort: "1",
      area: "province",
      areaList: [],
      cityList: [],
      countyList: [],
      teamList: [],
      loading: true,
    };
  },
  watch: {
    orderSort() {
      this.getRankingList();
    },
    area(val) {
      if (val == "province") {
        this.rankForm.cityId = "";
        this.rankForm.countyId = "";
        this.getRankingList();
      }
    },
  },
  created() {
    this.getList();
    this.getAreaList();
    this.getRankingList();
  },
  methods: {
    exportList() {
      this.$API.personnel
        .exportList({
          ...this.formState,
          managementSource: 2,
        })
        .then((res) => {
          if (res.data.code == 200) {
            let url = this.process + res.data.data; // 3.创建一个临时的url指向blob对象
            let a = document.createElement("a");
            a.href = url;
            a.download = "导出文件.xlsx";
            a.click();
            window.URL.revokeObjectURL(url);
          } else {
            this.$message.error(res.msg);
          }
        });
    },
    timeChange(val) {
      this.formState.createtimeStart = val[0];
      this.formState.createtimeEnd = val[1];
      this.formState.days = undefined;

      this.getList();
    },
    query() {
      this.pageInfo.pageNum = 1;
      this.pageInfo.pageSize = 9;
      this.getList();
      this.getRankingList();
    },
    //区/县选择事件
    countyChange() {
      this.getRankingList();
    },
    getRankingList() {
      this.$API.personnel
        .getRankingList({
          ...this.rankForm,
          orderSort: this.orderSort,
          managementSource: 2,
          ...this.formState,
        })
        .then((res) => {
          // console.log(res);
          if (res.data.code === 200) {
            this.teamList = [...res.data.data];
          }
        });
    },
    //市区选择事件
    cityChange(e) {
      let arr = [];
      this.areaList[0].child.map((item) => {
        if (item.areaCode === e) {
          arr = item.child;
        }
      });
      this.countyList = [...arr];
      this.rankForm.countyId = "";
      this.getRankingList();
    },
    //获取省市区列表
    getAreaList() {
      this.$API.personnel.getAreaList().then((res) => {
        // console.log(res);
        if (res.data.code === 200) {
          let arr = [];
          res.data.data.map((item) => {
            if (item.areaCname === "山西省") {
              arr.push(item);
            }
          });
          this.areaList = [...arr];
          this.cityList = [...arr[0].child];
        }
      });
    },
    //分页事件
    pageChange(page, pageSize) {
      this.pageInfo.pageNum = page;
      this.pageInfo.pageSize = pageSize;

      this.getList();
    },
    //获取成员列表
    getList() {
      this.loading = true;
      this.$API.personnel
        .getyQxFrontlineAgentList({
          pageNum: this.pageInfo.pageNum,
          pageSize: this.pageInfo.pageSize,
          ...this.formState,
          managementSource: 2,
        })
        .then((res) => {
          //   console.log(res);
          this.loading = false;

          if (res.data.code === 200) {
            this.list = res.data.data.content;
            this.pageInfo.total = res.data.data.totalSize;
          }
        });
    },
    handleFinish() {
      //
    },
    teamMessage(item) {
      // item
      // console.log(this.$route)
      this.$router.push({
        path: "/personnelManage/front/personnel/teammanage",
        query: {
          userId: item.userId,
          totalManpower: item.totalManpower,
          totalPremium: item.totalPremium,
          orderManpower: item.orderManpower,
          time: this.formState.time,
        },
      });
    },
  },
};
</script>
  <style lang='less' scoped>
.paiming {
  > img {
    width: 26px;
    height: 22px;
  }
}
/deep/ .ant-table-thead > tr > th {
  // color: #749dee !important;
  background: rgba(216, 122, 22, 0.05);
}
/deep/.ant-table-row {
  background: rgba(216, 122, 22, 0.05);
}

.back-line-main {
  display: flex;
  height: auto;
  //   flex-direction: column;
  .back-line-hearder {
    flex: 1;
    padding: 15px;
    box-sizing: border-box;
    > div:first-child {
      display: flex;
      align-items: center;
      > div {
        flex: 1;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        span {
          margin-right: 10px;
        }
      }
    }
    h1 {
      margin: 0;
    }
    height: auto;
    background: #fff;
    .ant-form {
      display: flex;
      flex-wrap: wrap;
      // justify-content: flex-end;
      > .ant-form-item {
        flex: none;
        width: 23%;
        /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;
      > .ant-col {
        flex: none;
        width: 33%;
        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: 3%;
          p {
            display: flex;
            justify-content: space-between;
          }
          p:nth-child(2) {
            width: 80%;
          }
          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;
    }
  }
  .back-line-message {
    width: 420px;
    padding: 0 0 0 15px;
    box-sizing: border-box;
    > div {
      width: 100%;
      height: 100%;
      // padding: 15px;
      // box-sizing: border-box;
      background: #fff;
      padding: 10px;
      box-sizing: border-box;
      > h2 {
        margin: 0;
      }
      > div {
        margin-top: 15px;
      }
      .choose {
        display: flex;
        align-items: center;
        justify-content: space-between;
      }
    }
    .area-city {
      display: flex;
      > div {
        flex: 1;
      }
    }
  }
}
.back-line-main .personnel-message .mechanism > p {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  text-overflow: ellipsis;
  overflow: hidden;
}
</style>