<template>
  <div class="quote">
    <div class="quote-tree">
      <div style="overflow-y: auto">
        <!-- <a-tree  :tree-data="treeData" /> -->
        <!-- <tree @getList="treeChoose"></tree> -->
        <a-tree
          :tree-data="treeData"
          :replaceFields="replaceFields"
          :title="'1'"
          @select="treeChoose"
        />
      </div>
    </div>
    <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="onChangeTime"
              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.beginDate = ''),
                    (formState.endDate = '')
                "
              >
                当天
              </a-radio-button>
              <a-radio-button
                :value="2"
                @click="
                  (formState.time = []),
                    (formState.beginDate = ''),
                    (formState.endDate = '')
                "
              >
                近7天
              </a-radio-button>
              <a-radio-button
                :value="3"
                @click="
                  (formState.time = []),
                    (formState.beginDate = ''),
                    (formState.endDate = '')
                "
              >
                近30天
              </a-radio-button>
            </a-radio-group>
          </div>
        </div>
      </div>
      <div class="list">
        <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-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" type="flex" :gutter="16">
            <a-col v-for="item in list" :key="item.deptId" :span="6">
              <div>
                <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>代理人：</p> -->

                <p>归属：{{ item.deptName }}</p>

                <p>
                  <span>总收入：{{ item.totalIncome || 0 }}</span>
                </p>
                <p>
                  <span>已提现：{{ item.withdrawn || 0 }}</span>
                </p>
                <p>
                  <span>提现中：{{ item.withdrawingAmount || 0 }}</span>
                </p>
                <p>
                  <span>未提现：{{ item.notWithdrawn || 0 }}</span>
                </p>
              </div>
            </a-col>
          </a-row>
        </a-spin>
        <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>
      </div>
    </div>
  </div>
</template>
            
<script>
// import mixin from "../../minins/mixin";
// import tree from "@/components/tree/tree";
import moment from "moment";
export default {
  components: {
    // tree,
  },
  //   mixins: [mixin],
  data() {
    return {
      formState: {
        days: undefined,
        time: [moment().format("YYYY-MM-DD"), moment().format("YYYY-MM-DD")],
        name: undefined,
        userCode: undefined,
        phoneNumber: undefined,
        endDate: moment().format("YYYY-MM-DD"),
        beginDate: moment().format("YYYY-MM-DD"),
      },
      labelCol: { span: 4 },
      dataForm: {},
      visible: false,
      backLinePersonnel: {},
      //   columns: columns,
      companyList: [],
      tableList: [],
      pageInfo: {
        pageNum: 1,
        pageSize: 12,
        total: 0,
      },
      list: [],
      loading: false,
      process: process.env.VUE_APP_API_BASE_URL,
      treeData: [],
      onLoadData: false,
      replaceFields: {
        children: "children",
        title: "name",
        key: "id",
      },
    };
  },
  watch: {
    "formState.days"() {
      this.getList();
    },
  },
  mounted() {
    this.getAgencyList();
    // setTimeout(() => {
    // }, 1000);
    this.getRole();
  },
  methods: {
    getList(id) {
      this.pageInfo.pageNum = 1;
      this.pageInfo.pageSize = 12;
      this.getAgencyList(id);
    },
    numberToChinese(num) {
      const chineseNumbers = [
        "一",
        "二",
        "三",
        "四",
        "五",
        "六",
        "七",
        "八",
        "九",
      ];
      return chineseNumbers[num - 1]; // 假设num是1到9的数字
    },
    getRole() {
      this.$API.wallet
        .getSysDeptTree({
          sysType: 2,
        })
        .then((res) => {
          if (res.data.code === 200) {
            this.treeData = [...res.data.data];
          }
        });
    },

    treeChoose(id) {
      this.pageInfo.pageNum = 1;
      this.pageInfo.pageSize = 12;

      this.getList(id[0]);
    },

    onChangeTime(val) {
      // console.log(val);
      this.formState.beginDate = val[0];
      this.formState.endDate = val[1];
      this.formState.days = undefined;
      this.getList();
    },
    handleFinish() {
      //
    },
    wholeHandleChange() {
      this.getProvinceList(this.formState.whole);
    },
    provinceHandleChange() {
      this.getCityList(this.formState.provinceId);
    },
    cityHandleChange() {
      this.getAreaList(this.formState.cityId);
    },
    countyHandleChange() {
      this.getStoreList(this.formState.countyId);
    },

    getAgencyList(id) {
      this.loading = true;

      this.$API.wallet
        .getAalletAgent({
          pageNum: this.pageInfo.pageNum,
          pageSize: this.pageInfo.pageSize,
          managementSource: 1,
          deptId: id || "",
          ...this.formState,
        })
        .then((res) => {
          if (res.data.code === 200) {
            this.loading = false;
            this.list = [...res.data.data.records];
            this.pageInfo.total = res.data.data.total;
          }
        });
    },
    //分页事件
    pageChange(page, pageSize) {
      //   console.log(page, pageSize);
      this.pageInfo.pageNum = page;
      this.pageInfo.pageSize = pageSize;
      this.getAgencyList();
    },
  },
};
</script>
    <style lang='less' scoped>
.quote {
  display: flex;
  > div:first-child {
    width: 20%;
    background: #fff;
    margin-right: 15px;
  }
  .quote-tree {
    padding: 15px;
    box-sizing: border-box;
    //
  }
}
.back-line-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  .back-line-header {
    padding: 15px;
    box-sizing: border-box;
    background: #fff;
    .back-line-header-title {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding-bottom: 15px;
      border-bottom: 1px solid #eee;
      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-modal-body {
    /deep/.ant-form-inline {
      display: flex;
    }
    /deep/ .ant-form-inline .ant-form-item {
      flex: none;
      width: 50%;
    }
  }
}
.list {
  padding: 0px;
  box-sizing: border-box;
  flex: 1;
  > .ant-form {
    padding: 10px;
    box-sizing: border-box;
    background: #fff;
  }
  background: none;
  .ant-spin-nested-loading {
    padding: 10px 0;
    box-sizing: border-box;
  }
}
.personnel-message {
  // display: flex;
  // flex-wrap: wrap;
  // justify-content: space-between;
  > div {
    height: auto;

    border-radius: 8px;

    padding: 15px;

    box-sizing: border-box;
    margin-bottom: 15px;
    position: relative;

    padding: 0 10px;
    box-sizing: border-box;
    > div {
      background: #fff;
      // background: linear-gradient(360deg, #ffffff 70%, #ffd6d8 100%);
      box-shadow: 0px 2px 8px 0px rgba(141, 149, 176, 0.15);
      border-radius: 8px 8px 8px 8px;
      padding: 10px;
      box-sizing: border-box;
    }
    p {
      display: flex;
      justify-content: space-between;
    }
    p:first-child {
      justify-content: flex-start;
      > span {
        display: flex;
        margin-left: 15px;
        color: #fff;
        padding: 0 10px;
        box-sizing: border-box;
        border-radius: 4px;
        align-items: center;
        justify-content: center;
      }
    }
    // p:last-child {
    //   margin: 0;
    //   justify-content: flex-end;
    //   // text-align: right;
    // }
    div.user-icon {
      width: 100%;
      height: 100%;
      // position: absolute;
      top: 12px;
      right: 15px;
      // border-radius: 50%;
      padding-bottom: 10px;
      box-sizing: border-box;
      // overflow: hidden;
      img {
        width: 40px;
        height: 40px;
        border-radius: 50%;
      }
    }
    .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.agency1 {
    background: rgba(211, 32, 41, 0.05);
    box-shadow: 0px 2px 8px 0px rgba(211, 32, 41, 0.15);
    border-radius: 8px 8px 8px 8px;
    border: 1px solid rgba(211, 32, 41, 0.5);
    > p:first-child {
      color: #d32029;
      span {
        background: #d32029;
      }
    }
  }
  > div.agency2 {
    background: rgba(216, 74, 27, 0.05);
    box-shadow: 0px 2px 8px 0px rgba(216, 74, 27, 0.15);
    border-radius: 8px 8px 8px 8px;
    border: 1px solid rgba(216, 74, 27, 0.5);
    > p:first-child {
      color: #d84a1b;
      span {
        background: #d84a1b;
      }
    }
  }
  > div.agency3 {
    background: rgba(42, 85, 229, 0.05);
    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);
    > p:first-child {
      color: #2a55e5;
      span {
        background: #2a55e5;
      }
    }
  }
  > div.agency4 {
    background: rgba(19, 168, 168, 0.05);
    box-shadow: 0px 2px 8px 0px rgba(19, 168, 168, 0.15);
    border-radius: 8px 8px 8px 8px;
    border: 1px solid rgba(19, 168, 168, 0.5);
    > p:first-child {
      color: #13a8a8;
      span {
        background: #13a8a8;
      }
    }
  }
  > div.agency5 {
    background: rgba(23, 125, 220, 0.05);
    box-shadow: 0px 2px 8px 0px rgba(23, 125, 220, 0.15);
    border-radius: 8px 8px 8px 8px;
    border: 1px solid rgba(23, 125, 220, 0.5);

    > p:first-child {
      color: #177ddc;
      span {
        background: #177ddc;
      }
    }
  }
}
.page {
  display: flex;
  justify-content: flex-end;
}
</style>