<template>
  <div class="quote">
    <div class="quote-tree" style="border-radius: 8px">
      <div><h2>部门所属</h2></div>
      <div>
        <!-- <a-tree  :tree-data="treeData" /> -->
        <tree @getList="chooseTree"></tree>
      </div>
    </div>
    <div class="back-line-main">
      <div class="back-line-header">
        <div class="back-line-header-title">
          <h2>合计</h2>
          <div>
            <dl>
              <dt><img src="../../assets/img/car.png" alt="" /></dt>
              <dd>
                <span>车辆数</span>
                <span>{{ BigOrder.frameno }}</span>
              </dd>
            </dl>
            <dl>
              <dt><img src="../../assets/img/order.png" alt="" /></dt>
              <dd>
                <span>订单数</span>
                <span>{{ BigOrder.orderNumber || 0 }}</span>
              </dd>
            </dl>
            <dl>
              <dt><img src="../../assets/img/orderMoney.png" alt="" /></dt>
              <dd>
                <span>成交率</span>
                <span>
                  {{
                    BigOrder.closeRate
                      ? (BigOrder.closeRate * 100).toFixed(2) + "%"
                      : 0
                  }}
                </span>
              </dd>
            </dl>
          </div>
        </div>
      </div>
      <div style="background-color: #fff; margin-top: 15px">
        <div class="table-title">
          <h2>总报价</h2>
          <div>
            <span>时间筛选</span>
            <a-range-picker
              ref="rangePicker"
              v-model="formState.time"
              @calendarChange="onCalendarChange"
              allowClear
              :disabledDate="disabledDate"
              style="margin-left: 10px"
              valueFormat="YYYY-MM-DD"
            >
            </a-range-picker>
            <a-radio-group
              default-value="0"
              button-style="solid"
              v-model="formState.dateType"
              @change="getVerification()"
              style="margin-left: 10px"
            >
              <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>
        <a-form
          layout="inline"
          :model="formState"
          style="padding: 0 0 0 15px; box-sizing: border-box"
        >
          <a-form-item
            label="业务员工号"
            :labelCol="{ span: 8 }"
            :colon="false"
          >
            <a-input
              placeholder="请输入业务员工号"
              v-model="formState.userId"
              allowClear
            ></a-input>
          </a-form-item>
          <a-form-item
            label="业务员姓名"
            :labelCol="{ span: 8 }"
            :colon="false"
          >
            <a-input
              placeholder="请输入业务员姓名"
              v-model="formState.userName"
              allowClear
            ></a-input>
          </a-form-item>
          <a-form-item label="手机号" :labelCol="{ span: 5 }" :colon="false">
            <a-input
              placeholder="请输入手机号"
              v-model="formState.mobile"
              allowClear
            ></a-input>
          </a-form-item>
          <a-form-item label="车牌号" :labelCol="{ span: 5 }" :colon="false">
            <a-input
              placeholder="请输入车牌号"
              v-model="formState.licenseno"
              allowClear
            ></a-input>
          </a-form-item>
          <a-form-item label="车架号" :labelCol="{ span: 5 }" :colon="false">
            <a-input
              placeholder="请输入车架号"
              v-model="formState.frameno"
              allowClear
            ></a-input>
          </a-form-item>
        </a-form>
        <div
          style="
            display: flex;
            justify-content: flex-end;
            padding-right: 15px;
            box-sizing: border-box;
          "
        >
          <a-button
            type="primary"
            @click="exportExcel"
            style="margin-right: 15px"
            >导出</a-button
          >

          <a-button type="primary" @click="getList">查询</a-button>
        </div>
        <standard-table
          bordered
          :columns="columns"
          :dataSource="tableList"
          :pagination="pagination"
          @clear="onClear"
          @change="onChange"
          :loading="loading"
        >
          <div slot="count" slot-scope="{ text }">
            {{ text != "-" ? text + "次" : text }}
          </div>
          <div slot="rate" slot-scope="{ text }">
            {{ text != "-" ? (text * 100).toFixed(2) + "%" : text }}
          </div>
        </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: "insureinfoName" },
  // { title: "被保人电话", dataIndex: "insureinfoMobile" },
  {
    title: "车牌号",
    dataIndex: "licenseno",
  },
  { title: "车型", dataIndex: "modelcname" },

  { title: "发动机号", dataIndex: "modelCode" },

  {
    title: "车架号",
    dataIndex: "frameno",
    // scopedSlots: { customRender: "parterCompanyName" },
  },

  {
    title: "订单数量",
    dataIndex: "orderNumber",
  },
  {
    title: "成交率",
    dataIndex: "closeRate",
    scopedSlots: { customRender: "rate" },
  },
  {
    title: "承保公司",
    dataIndex: "namesimple",
  },
];

export default {
  components: {
    StandardTable,
    tree,
  },
  //   mixins: [mixin],
  data() {
    return {
      formState: {
        dateType: undefined,
        // time: [moment().format("YYYY-MM-DD"), moment().format("YYYY-MM-DD")],
        beginDate: moment().format("YYYY-MM-DD"),
        endDate: moment().format("YYYY-MM-DD"),
        licenseno: "",
        userName: "",
        mobile: "",
        frameno: "",
        userId: "",
        time: [moment().format("YYYY-MM-DD"), 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: [
        { title: "Expand to load", key: "0" },
        { title: "Expand to load", key: "1" },
        { title: "Tree Node", key: "2", isLeaf: true },
      ],
      BigOrder: {},
      deptId: undefined,
      yearOpen: false,
      process: process.env.VUE_APP_API_BASE_URL,
      startTime: "",
    };
  },
  mounted() {
    this.getVerification();
    // setTimeout(() => {
    // }, 1000);
  },
  methods: {
    onCalendarChange(values) {
      this.startTime = values[0];
      let startTime = moment(values[0]);
      let endTime = moment(values[1]);
      this.formState.beginDate = values[0] || "";
      this.formState.endDate = values[1] || "";
      if (endTime.diff(startTime, "years") > 1) {
        this.$message.error("选择范围不能超过一年！");
      }
      // this.getList();
    },
    disabledDate(current) {
      // console.log(current);
      // if (!this.startDate) {
      //   return false;
      // }

      if (this.formState.beginDate) {
        return !(
          moment(this.formState.beginDate).subtract(12, "month") < current &&
          current < moment(this.formState.beginDate).add(12, "month")
        );
      }
      if (this.startTime) {
        return !(
          moment(this.startTime).subtract(12, "month") < current &&
          current < moment(this.startTime).add(12, "month")
        );
      } else {
        return null;
      }
    },
    isMoreThanOneYear(date) {
      console.log(date);
      return (
        date.diff(moment()) > 365 ||
        date.isBefore(moment().subtract(1, "years"))
      );
    },

    chooseTree(val) {
      this.deptId = val;
      this.getVerification();
    },
    getList() {
      this.pagination.current = 1;
      this.pagination.defaultPageSize = 10;
      this.getVerification();
    },
    exportExcel() {
      // delete this.formState.year;
      this.$API.quote
        .exportList({
          // pageNum: this.pagination.current,
          // pageSize: this.pagination.defaultPageSize,
          ...this.formState,
          deptId: this.deptId,
        })
        .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);
          }
        });
    },

    onChangeTime() {
      // console.log(val);

      this.getVerification();
    },
    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);
    },

    async getVerification() {
      console.log(this.formState);
      this.loading = true;
      // delete this.formState.year;
      this.$API.quote
        .getBigOrderList({
          pageNum: this.pagination.current,
          pageSize: this.pagination.defaultPageSize,
          ...this.formState,
          beginDate: this.formState.time.length
            ? this.formState.time[0]
            : undefined,
          endDate: this.formState.time.length
            ? this.formState.time[1]
            : undefined,
          deptId: this.deptId,
        })
        .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,
            };
          }
        });
      this.$API.quote
        .getBigOrderMount({
          // pageNum: this.pagination.current,
          // pageSize: this.pagination.defaultPageSize,
          ...this.formState,
          beginDate: this.formState.time.length
            ? this.formState.time[0]
            : undefined,
          endDate: this.formState.time.length
            ? this.formState.time[1]
            : undefined,
          deptId: this.deptId,
        })
        .then((res) => {
          if (res.data.code === 200) {
            console.log(res);
            this.BigOrder = { ...res.data.data };
          }
        });
    },
    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,
      };
      this.getVerification();
    },
  },
};
</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;
    //
    > div:first-child {
      border-bottom: 1px solid #f0f0f0;
    }
  }
}
.back-line-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  .back-line-header {
    // padding: 15px;
    box-sizing: border-box;
    .back-line-header-title {
      padding: 15px;
      box-sizing: border-box;
      background: #ffffff;
      box-shadow: 0px 2px 8px 0px rgba(141, 149, 176, 0.15);
      border-radius: 8px 8px 8px 8px;
      border: 2px solid rgba(255, 255, 255, 0.2);
      h2 {
        margin: 0;
      }
      > div {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: space-between;
        > dl {
          flex: none;
          width: 271px;
          height: 61px;
          display: flex;
          align-items: center;
          background: linear-gradient(
            267deg,
            rgba(42, 85, 229, 0.1) 0%,
            rgba(42, 85, 229, 0) 100%
          );
          box-shadow: 0px 2px 8px 0px rgba(42, 85, 229, 0.1);
          border-radius: 4px 4px 4px 4px;
          border: 1px solid #ffffff;

          img {
            width: 44px;
            height: auto;
          }
          > dd {
            display: flex;
            align-items: center;
            margin: 0;
            font-family: PingFang SC, PingFang SC;
            font-weight: 500;
            font-size: 18px;
            color: rgba(0, 0, 0, 0.85);
            padding-left: 15px;
            box-sizing: border-box;
          }
        }
      }
      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;
        /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;
      }
    }
  }
  .table-title {
    padding: 15px 15px 0;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    h2 {
      margin: 0;
    }
    > div {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: flex-end;
    }
  }
}
</style>