<template>
  <div class="quote">
    <div class="quote-tree">
      <div><h2>部门所属</h2></div>
      <div>
        <!-- <a-tree  :tree-data="treeData" /> -->
        <tree @getList="getVerification"></tree>
      </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
              @change="onChangeTime"
              v-model="formState.time"
              value-format="YYYY-MM-DD"
            >
              <a-icon slot="suffixIcon" type="calendar" />
            </a-range-picker>
            <a-radio-group
              default-value="0"
              button-style="solid"
              v-model="formState.dateType"
              @change="getVerification()"
            >
              <a-radio-button
                value="1"
                @click="
                  (formState.time = []),
                    (formState.beginDate = ''),
                    (formState.endDate = '')
                "
              >
                近1月
              </a-radio-button>
              <a-radio-button
                value="2"
                @click="
                  (formState.time = []),
                    (formState.beginDate = ''),
                    (formState.endDate = '')
                "
              >
                近3月
              </a-radio-button>
              <a-radio-button
                value="3"
                @click="
                  (formState.time = []),
                    (formState.beginDate = ''),
                    (formState.endDate = '')
                "
              >
                近半年
              </a-radio-button>
            </a-radio-group>
          </div>
        </div>
      </div>
      <div style="display: flex; flex: 1">
        <!-- <div style="width: 300px; height: 900px; overflow-y: auto">
          <a-tree :tree-data="treeData" :replaceFields="replaceFields"></a-tree>
        </div> -->
        <standard-table
          bordered
          :columns="columns"
          :dataSource="tableList"
          :pagination="pagination"
          @clear="onClear"
          @change="onChange"
          :loading="loading"
          :scroll="{ x: 0, y: 0 }"
        >
          <div slot="count" slot-scope="{ text }">
            {{ text ? text + "次" : 0 }}
          </div>
          <div slot="rate" slot-scope="{ text }">
            {{ text ? (text * 100).toFixed(2) + "%" : 0 }}
          </div>
          <span slot="title_slot">
            报价成功率
            <a-tooltip
              placement="topLeft"
              title="报价成功 / 总报价"
              arrow-point-at-center
            >
              <a-icon type="question-circle" />
            </a-tooltip>
          </span>
          <span slot="title_slot2">
            核保通过率
            <a-tooltip
              placement="topLeft"
              title="核保数 / 报价数"
              arrow-point-at-center
            >
              <a-icon type="question-circle" />
            </a-tooltip>
          </span>
          <span slot="title_slot3">
            成交率
            <a-tooltip
              placement="topLeft"
              title="承保数 / 核保数 + 承保数"
              arrow-point-at-center
            >
              <a-icon type="question-circle" />
            </a-tooltip>
          </span>
          <span slot="title_slot4">
            承保率
            <a-tooltip
              placement="topLeft"
              title="承保数 / 报价数"
              arrow-point-at-center
            >
              <a-icon type="question-circle" />
            </a-tooltip>
          </span>
        </standard-table>
      </div>
    </div>
  </div>
</template>
          
  <script>
import StandardTable from "@/components/table/StandardTable";
// import mixin from "../../minins/mixin";
import tree from "@/components/tree/tree";
import moment from "moment";

const columns = [
  {
    title: "保险公司",
    dataIndex: "companyName",
  },

  {
    title: "合作公司",
    dataIndex: "parterCompanyName",
    // scopedSlots: { customRender: "parterCompanyName" },
  },
  {
    title: "报价数",

    // scopedSlots: { customRender: "qutationCount" },
    children: [
      {
        title: "总报价",
        dataIndex: "allNumber",
        scopedSlots: { customRender: "count" },
      },
      {
        title: "报价成功",
        dataIndex: "orderSuccessNumber",
        scopedSlots: { customRender: "count" },
      },
      {
        title: "报价失败",
        dataIndex: "areaCompanyErrNumber",
        scopedSlots: { customRender: "count" },
      },
    ],
  },

  {
    title: "人工审核数",
    dataIndex: "numberManual",
    scopedSlots: { customRender: "count" },
  },
  {
    title: "核保数",
    dataIndex: "underwritingCount",
    scopedSlots: { customRender: "count" },
  },
  {
    title: "承保数",
    dataIndex: "qutationInsureCount",
    scopedSlots: { customRender: "count" },
  },
  {
    // title: "报价成功率",
    dataIndex: "orderSuccessNumberRate",

    scopedSlots: { title: "title_slot", customRender: "rate" },
  },
  {
    // title: "核保通过率",
    dataIndex: "passRate",

    scopedSlots: { title: "title_slot2", customRender: "rate" },
  },
  {
    // title: "成交率",
    dataIndex: "closeRate",

    scopedSlots: { title: "title_slot3", customRender: "rate" },
  },
  {
    // title: "承保率",
    dataIndex: "contributionRate",

    scopedSlots: { title: "title_slot4", customRender: "rate" },
  },
];

export default {
  components: {
    StandardTable,
    tree,
  },
  //   mixins: [mixin],
  data() {
    return {
      formState: {
        whole: "",
        cityId: "",
        countyId: "",
        houseId: "",
        provinceId: "",
        dateType: "",
        time: [moment().format("YYYY-MM-DD"), moment().format("YYYY-MM-DD")],
        beginDate: moment().format("YYYY-MM-DD"),
        endDate: moment().format("YYYY-MM-DD"),
      },
      backLinePersonnel: {},
      columns: columns,
      companyList: [],
      tableList: [],
      pagination: {
        current: 1,
        defaultPageSize: 10,
        total: 0,
        pagesize0ptions: ["10", "20", "30", "50", "100"],
        hideOnSinglePage: false,
        showQuickJumper: true, //
        showSizeChanger: true, //是否可以改变pagesize
        showTotal: (total) => `共 ${total} 条数据`,
      },
      loading: false,
      wholeList: [],
      provinceList: [],
      cityList: [],
      areaList: [],
      storeList: [],
      treeData: [],
      replaceFields: {
        children: "children",
        title: "userName",
        key: "id",
      },
    };
  },
  mounted() {
    this.getVerification();
    this.getAgentTree();
    // setTimeout(() => {
    // }, 1000);
  },
  methods: {
    getAgentTree() {
      this.$API.quote
        .getAgentTree({
          managementSource: 2,
          // provinceId: this.formState.provinceId,
          // cityId: this.formState.cityId,
          // countyId: this.formState.countyId,
          // houseId: this.formState.houseId,
        })
        .then((res) => {
          console.log(res);
          if (res.data.code === 200) {
            this.treeData = [...res.data.data];
          }
        });
    },
    onChangeTime(val) {
      // console.log(val);
      this.formState.beginDate = val[0];
      this.formState.endDate = val[1];
      this.formState.dateType = undefined;
      this.getVerification();
    },
    handleFinish() {
      //
    },

    getVerification(id) {
      this.loading = true;

      this.$API.quote
        .getQuoteList({
          pageNum: this.pagination.current,
          pageSize: this.pagination.defaultPageSize,
          dateType: this.formState.dateType,
          beginDate: this.formState.beginDate,
          endDate: this.formState.endDate,
          managementSource: 2,
          deptId: id ? id : "",
          // provinceId: this.formState.provinceId,
          // cityId: this.formState.cityId,
          // countyId: this.formState.countyId,
          // houseId: this.formState.houseId,
        })
        .then((res) => {
          if (res.data.code === 200) {
            this.loading = false;
            this.tableList = res.data.data.content;
            this.pagination = {
              current: res.data.data.pageNum,
              defaultPageSize: res.data.data.pageSize,
              total: res.data.data.totalSize,
            };
          }
        });
    },
    onClear() {
      this.$message.info("您清空了勾选的所有行");
    },

    onChange(pagination) {
      // this.$message.info('表格状态改变了')

      this.pagination = {
        current: pagination.current,
        defaultPageSize: pagination.pageSize,
        total: pagination.total,
      };
      this.getVerification();
    },
  },
};
</script>
  <style lang='less' scoped>
.quote {
  display: flex;
  > div:first-child {
    width: 17%;
    background: #fff;
    margin-right: 15px;
  }
  .quote-tree {
    padding: 15px;
    box-sizing: border-box;
    //
    > div:first-child {
      border-bottom: 1px solid #f0f0f0;
    }
    .tree {
      scrollbar-width: thin;
    }
  }
}
.back-line-main {
  flex: 1;
  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;
    .standard-table {
      width: 100%;
    }
    .ant-form {
      display: flex;
      > .ant-form-item {
        flex: 1;
        /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;
      }
    }
  }
}
</style>