<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="7"
              @click="
                (formState.time = []),
                  (formState.createtimeStart = ''),
                  (formState.createtimeEnd = '')
              "
            >
              近7天
            </a-radio-button>
            <a-radio-button
              :value="30"
              @click="
                (formState.time = []),
                  (formState.createtimeStart = ''),
                  (formState.createtimeEnd = '')
              "
            >
              近30天
            </a-radio-button>
          </a-radio-group>
        </div>
      </div>
      <fromRow
        :formState="formState"
        :search="true"
        @getList="getList"
        :showTab="3"
      ></fromRow>
      <div class="table">
        <standard-table
          bordered
          :columns="columns"
          :dataSource="tableList"
          :pagination="pagination"
          @clear="onClear"
          @change="onChange"
          :loading="loading"
          @selectedRowChange="selectedRowChange"
          @onClickRow="onClickRow"
        >
          <div slot="type" slot-scope="{ record }">
            {{ record.agreementType == "1" ? "平台" : "私有" }}
          </div>
        </standard-table>
      </div>
    </div>
    <div class="list-details">
      <a-spin :spinning="listLoading">
        <div class="list-details-title">
          <h2>保险分布</h2>
          <p>{{ chooseTable.insuranceCompanyName }}保险承保状态数据展示</p>
          <a-select
            style="width: 100%"
            v-model="formState.riskCode"
            placeholder="请选择投保险种"
            allowClear
          >
            <a-select-option value="all">全部</a-select-option>
            <a-select-option value="单交">单交</a-select-option>
            <a-select-option value="单商">单商</a-select-option>
            <a-select-option value="单三">单三</a-select-option>
            <a-select-option value="交三">交三</a-select-option>
            <a-select-option value="交商">交商</a-select-option>
          </a-select>
          <!-- <a-radio-group
            default-value="0"
            button-style="solid"
            v-model="formState.riskCode"
          >
            <a-radio-button value="all"> 全部 </a-radio-button>
            <a-radio-button value="单交"> 单交 </a-radio-button>
            <a-radio-button value="单商"> 单商 </a-radio-button>
            <a-radio-button value="单三"> 单三 </a-radio-button>
            <a-radio-button value="交三"> 交三 </a-radio-button>
            <a-radio-button value="交商"> 交商 </a-radio-button>
          </a-radio-group> -->
        </div>
        <div style="padding: 0 15px; box-sizing: border-box">
          <div
            v-for="(item, index) in list"
            :key="index"
            :class="'list-details-item-' + index"
            class="list-details-item"
          >
            <h2>{{ quotationStatus[item.quotationStatus] }}</h2>
            <p>
              <span>总保费：{{ item.totalPremium }}</span>
              <span>人员数量：{{ item.userNumber }}</span>
            </p>
            <p>
              <span>单均保费：{{ item.averagePremium }}</span>
              <span>出单笔数：{{ item.qutationInsureCount }}</span>
            </p>
            <p>
              <span>人均产能：{{ item.perCapitaAmount }}</span>
            </p>
          </div>
        </div>
      </a-spin>
      <!-- </a-spin> -->
    </div>
  </div>
</template>
          
<script>
import StandardTable from "@/components/table/StandardTable";
import fromRow from "@/components/form/FormRow";
import moment from "moment";
const columns = [
  {
    title: "保险公司",
    dataIndex: "insuranceCompanyName",
  },
  {
    title: "协议类型",
    dataIndex: "agreementType",
    scopedSlots: { customRender: "type" },
  },

  {
    title: "合作公司",
    dataIndex: "partnerCompaniesName",
  },
  {
    title: "对接人",
    dataIndex: "dockingPerson",
  },
  {
    title: "对接人联系方式",
    dataIndex: "dockingPhone",
  },
  {
    title: "总保费",
    dataIndex: "totalPremium",
    sorter: true,
  },
  {
    title: "人员数量",
    dataIndex: "userNumber",
    sorter: true,
  },
  {
    title: "单均保费",
    dataIndex: "averagePremium",
  },
  {
    title: "出单笔数",
    dataIndex: "qutationInsureCount",
  },
  {
    title: "人均产能",
    dataIndex: "perCapitaAmount",
  },
];
export default {
  components: {
    fromRow,
    StandardTable,
  },
  //   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")],
        createtimeEnd: moment().format("YYYY-MM-DD"),
        createtimeStart: moment().format("YYYY-MM-DD"),
        riskCode: undefined,
      },
      columns,
      //   listLoading: false,
      tableList: [],
      pagination: {
        current: 1,
        defaultPageSize: 10,
        total: 0,
        pagesize0ptions: ["10", "20", "30", "50", "100"],
        hideOnSinglePage: false,
        showQuickJumper: true, //
        showSizeChanger: true, //是否可以改变pagesize
        selectedRows: [],
        showTotal: (total) => `共 ${total} 条数据`,
      },
      process: process.env.VUE_APP_API_BASE_URL,

      loading: false,

      list: [],
      chooseTable: {},
      quotationStatus: {
        0: "报价中",
        1: "待审核",
        2: "已核保待缴费",
        3: "已承保",
        4: "核保退回",
      },
      listLoading: false,
    };
  },
  watch: {
    "formState.days"() {
      this.pagination.current = 1;
      this.pagination.defaultPageSize = 10;
      this.getList();
    },
    "formState.riskCode"() {
      this.onClickRow(this.chooseTable);
    },
  },
  mounted() {
    this.getList();
    // setTimeout(() => {
    // }, 1000);
  },
  methods: {
    onClickRow(row) {
      //
      this.listLoading = true;
      this.chooseTable = { ...row };

      this.$API.business
        .getBusinessDetailList({
          companyId: row.companyId,
          parterCompanyId: row.parterCompanyId,
          createtimeEnd: this.formState.createtimeEnd,
          createtimeStart: this.formState.createtimeStart,
          riskCode: this.formState.riskCode,
        })
        .then((res) => {
          this.listLoading = false;
          if (res.data.code === 200) {
            this.list = [...res.data.data];
          }
        })
        .catch(() => {
          this.listLoading = false;
        });
    },
    timeChange(val) {
      this.pagination.current = 1;
      this.pagination.defaultPageSize = 10;
      this.formState.createtimeStart = val[0];
      this.formState.createtimeEnd = val[1];
      this.formState.days = 0;
      this.getList();
    },
    getList() {
      this.loading = true;
      this.tableList = [];
      this.$API.business
        .getBusinessList({
          pageNum: this.pagination.current,
          pageSize: this.pagination.defaultPageSize,
          ...this.formState,
        })
        .then((res) => {
          //   console.log(res);
          this.loading = false;
          if (res.data.code === 200) {
            this.tableList = [...res.data.data.records];
            this.pagination.total = res.data.data.total;
          }
        });
    },
    onClear() {
      this.$message.info("您清空了勾选的所有行");
    },

    //分页事件
    onChange(pagination, filters, sorter, { currentDataSource }) {
      // this.$message.info('表格状态改变了')
      console.log(pagination, filters, sorter, { currentDataSource });
      this.pagination = {
        current: pagination.current,
        defaultPageSize: pagination.pageSize,
        total: pagination.total,
      };
      if (sorter.field === "totalPremium") {
        this.formState.orderSort = sorter.order.split("end")[0];
        this.formState.userNumberSort = undefined;
      } else if (sorter.field === "userNumber") {
        // :undefined
        this.formState.orderSort = undefined;
        this.formState.userNumberSort = sorter.order.split("end")[0];
      }
      this.getList();
    },
    selectedRowChange(a, b) {
      console.log(a, b);
    },
  },
};
</script>
          <style lang='less' scoped>
.back-line-main {
  display: flex;
  //   flex-direction: column;
  .back-line-header {
    background: #fff;
    flex: 1;
    padding: 15px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    .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;
      }
    }
    .table {
      flex: 1;
    }
  }
  > .list-details {
    margin-left: 15px;
    width: 22%;
    height: 100%;
    min-height: 950px;
    // background: linear-gradient(to bottom, rgba(42, 85, 229, 0.15), #fff);
    background: #fff;
    // box-shadow: 0px 2px 8px 0px rgba(42, 85, 229, 0.15);
    border-radius: 8px 8px 8px 8px;
    // padding: 15px;
    box-sizing: border-box;

    div.list-details-item {
      //   border: 1px solid #f0f0f0;
      padding: 10px;
      box-sizing: border-box;
      border-radius: 4px;
      margin-bottom: 10px;
      p {
        display: flex;
        align-items: center;
        justify-content: space-between;
      }
    }
    div.list-details-item-0 {
      background: rgba(13, 215, 215, 0.05);
      border: 1px solid rgba(19, 168, 168, 0.1);
      h2 {
        color: #13a8a8;
        font-weight: bold;
      }
    }
    div.list-details-item-1 {
      background: rgba(23, 125, 220, 0.05);

      border: 1px solid rgba(23, 125, 220, 0.1);
      h2 {
        color: #177ddc;
        font-weight: bold;
      }
    }
    div.list-details-item-2 {
      background: rgba(216, 74, 27, 0.05);

      border: 1px solid rgba(216, 74, 27, 0.1);
      h2 {
        color: #d84a1b;
        font-weight: bold;
      }
    }
    div.list-details-item-3 {
      background: rgba(42, 85, 229, 0.05);

      border: 1px solid rgba(42, 85, 229, 0.1);
      h2 {
        color: #2a55e5;
        font-weight: bold;
      }
    }
    div.list-details-item-4 {
      background: rgba(211, 32, 41, 0.05);

      border: 1px solid rgba(211, 32, 41, 0.1);
      h2 {
        color: #d32029;
        font-weight: bold;
      }
    }
    // border: 2px solid rgba(255, 255, 255, 0.2);
  }
}
.list-details-title {
  padding: 15px;
  box-sizing: border-box;
  background: url("../../assets/img/bgColor.png") 100% 100%;
}
.personnel-message {
  display: flex;
  flex-wrap: wrap;
  //   justify-content: space-between;
  > 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: 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%;
  }
}
.page {
  display: flex;
  justify-content: flex-end;
}
</style>