<template>
  <div class="back-line-main">
    <div class="back-line-header">
      <div class="back-line-header-title">
        <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>
          <a-radio-group
            default-value="1"
            button-style="solid"
            v-model="formState.days"
          >
            <a-radio-button
              :value="1"
              @click="
                (formState.time = []),
                  (formState.createtimeStart = ''),
                  (formState.createtimeEnd = '')
              "
            >
              当天
            </a-radio-button>
            <a-radio-button
              :value="2"
              @click="
                (formState.time = []),
                  (formState.createtimeStart = ''),
                  (formState.createtimeEnd = '')
              "
            >
              近7天
            </a-radio-button>
            <a-radio-button
              :value="3"
              @click="
                (formState.time = []),
                  (formState.createtimeStart = ''),
                  (formState.createtimeEnd = '')
              "
            >
              近30天
            </a-radio-button>
          </a-radio-group>
        </div>
      </div>
      <fromRow
        :formState="formState"
        :className="''"
        :search="false"
        @getList="getList"
      ></fromRow>
      <a-form layout="inline" :model="formState">
        <a-form-item label="姓名" :labelCol="{ span: 5 }" :colon="false">
          <a-input
            placeholder="请输入姓名"
            v-model="formState.name"
            allowClear
          ></a-input>
        </a-form-item>
        <a-form-item label="工号" :labelCol="{ span: 5 }" :colon="false">
          <a-input
            placeholder="请输入工号"
            v-model="formState.userCode"
            allowClear
          ></a-input>
        </a-form-item>
        <a-form-item label="手机号" :labelCol="{ span: 5 }" :colon="false">
          <a-input
            placeholder="请输入手机号"
            v-model="formState.phoneNumber"
            allowClear
          ></a-input>
        </a-form-item>
        <a-form-item label="管理人" :labelCol="{ span: 5 }" :colon="false">
          <a-select
            style="width: 300px"
            placeholder="请选择"
            v-model="formState.leaderId"
            allowClear
            show-search
            :filter-option="filterOption"
          >
            <a-select-option
              v-for="item in manageList"
              :key="item.id"
              :value="item.id"
            >
              {{ item.name }}
            </a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="是否出单" :labelCol="{ span: 7 }" :colon="false">
          <a-select
            placeholder="请选择"
            v-model="formState.outThere"
            allowClear
            show-search
            :filter-option="filterOption"
          >
            <a-select-option :value="1"> 出单 </a-select-option>
            <a-select-option :value="0"> 不出单 </a-select-option>
          </a-select>
        </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-button type="primary" style="margin-left: 10px" @click="exportList"
            >导出</a-button
          >
        </a-form-item>
      </a-form>
    </div>
    <div class="list">
      <a-spin :spinning="loading">
        <a-row class="personnel-message">
          <a-col v-for="(item, index) in list" :key="item.userId" :span="6">
            <div :class="Math.floor((index / 4) % 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.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="['12', '24', '36', '48']"
          />
        </div>
      </a-spin>
    </div>
  </div>
</template>
        
  <script>
import fromRow from "@/components/form/FormRow";
import moment from "moment";
export default {
  components: {
    fromRow,
  },
  //   mixins: [mixin],
  data() {
    return {
      formState: {
        whole: undefined,
        cityId: undefined,
        countyId: undefined,
        houseId: undefined,
        provinceId: undefined,
        days: undefined,
        time: [moment().format("YYYY-MM-DD"), moment().format("YYYY-MM-DD")],
        name: undefined,
        userCode: undefined,
        phoneNumber: undefined,
        createtimeStart: moment().format("YYYY-MM-DD"),
        createtimeEnd: moment().format("YYYY-MM-DD"),
        leaderId: undefined,
        outThere: undefined,
      },
      process: process.env.VUE_APP_API_BASE_URL,

      pageInfo: {
        pageNum: 1,
        pageSize: 12,
        total: 0,
      },
      loading: false,

      list: [],
      manageList: [],
    };
  },
  watch: {
    "formState.days"() {
      this.getList();
      // this.formState.time = [];
    },
  },
  mounted() {
    this.getList();
    this.getManageList();
    // setTimeout(() => {
    // }, 1000);
  },
  methods: {
    exportList() {
      this.$API.personnel
        .exportList({
          ...this.formState,
          managementSource: 1,
        })
        .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);
          }
        });
    },
    filterOption(input, option) {
      return (
        option.componentOptions.children[0].text
          .toLowerCase()
          .indexOf(input.toLowerCase()) >= 0
      );
    },
    getManageList() {
      //
      this.$API.personnel.getManageUser({}).then((res) => {
        // console.log(res);
        if (res.data.code === 200) {
          this.manageList = [...res.data.data];
        }
      });
    },
    timeChange(val) {
      this.formState.createtimeStart = val[0];
      this.formState.createtimeEnd = val[1];
      this.formState.days = undefined;

      this.getList();
    },
    getList() {
      this.loading = true;
      this.$API.personnel
        .getyQxFrontlineAgentList({
          pageNum: this.pageInfo.pageNum,
          pageSize: this.pageInfo.pageSize,
          ...this.formState,
          managementSource: 1,
        })
        .then((res) => {
          //   console.log(res);
          if (res.data.code === 200) {
            this.loading = false;

            this.list = [...res.data.data.content];
            this.pageInfo.total = res.data.data.totalSize;
          } else {
            this.loading = false;
            this.list = [];
            this.pageInfo.total = 0;
          }
        });
    },
    onClear() {
      this.$message.info("您清空了勾选的所有行");
    },

    //分页事件
    pageChange(page, pageSize) {
      //   console.log(page, pageSize);
      this.pageInfo.pageNum = page;
      this.pageInfo.pageSize = pageSize;
      this.getList();
    },
    teamMessage(item) {
      // item
      console.log(this.$router);
      this.$router.push({
        path: "/personnelManage/channel/message",
        query: {
          userId: item.userId,
          totalManpower: item.totalManpower,
          totalPremium: item.totalPremium,
          orderManpower: item.orderManpower,
          time: this.formState.time,
        },
      });
    },
  },
};
</script>
        <style lang='less' scoped>
.back-line-main {
  display: flex;
  flex-direction: column;
  .back-line-header {
    padding: 15px;
    box-sizing: border-box;
    .back-line-header-title {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding-bottom: 15px;
      border-bottom: 1px solid #f0f0f0;
      box-sizing: border-box;
      h2 {
        margin: 0;
      }
      > div {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: flex-end;
      }
      span {
        display: block;
        margin-right: 15px;
      }
      /deep/.ant-calendar-picker {
        width: 300px;
      }
    }
  }
  > div {
    // height: 152px;
    background: #fff;
    .ant-form {
      display: flex;
      > .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;
      }
    }
  }
}
.list {
  flex: 1;
  padding: 15px;
  box-sizing: border-box;
}
.personnel-message {
  display: flex;
  flex-wrap: wrap;
  //   justify-content: space-between;
  .ant-col {
    width: 25%;
    padding: 0 15px;
    box-sizing: border-box;
    > div {
      width: 100%;
      height: auto;
      // background: #f9faff;
      border-radius: 8px;
      border: 1px solid rgba(42, 85, 229, 0.5);
      background: #f9faff;
      box-shadow: 0px 2px 8px 0px rgba(42, 85, 229, 0.15);
      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.user-icon {
        width: 56px;
        height: 56px;
        position: absolute;
        top: 12px;
        right: 15px;
        border-radius: 50%;
        overflow: hidden;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .progress {
        width: 100%;
        height: 5px;
        background: #eee;
        border-radius: 8px;
        margin-bottom: 8px;
        > p {
          width: 67%;
          height: 100%;
          background: #2a55e5;
          border-radius: 8px;
        }
      }
      // 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-main .personnel-message .mechanism > p {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  text-overflow: ellipsis;
  overflow: hidden;
}
</style>