<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
            @change="onChangeTime"
            v-model="formState.time"
            valueFormat="YYYY-MM-DD"
          >
            <a-icon slot="suffixIcon" type="calendar" />
          </a-range-picker>
          <a-radio-group
            default-value="0"
            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="7"
              @click="
                (formState.time = []),
                  (formState.beginDate = ''),
                  (formState.endDate = '')
              "
            >
              近7天
            </a-radio-button>
            <a-radio-button
              value="30"
              @click="
                (formState.time = []),
                  (formState.beginDate = ''),
                  (formState.endDate = '')
              "
            >
              近30天
            </a-radio-button>
          </a-radio-group>
        </div>
      </div>
      <div>选择投保险种：</div>

      <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>
      <a-form layout="inline" :model="formState" class="users">
        <a-form-item label="审核人员" :labelCol="{ span: 8 }" :colon="false">
          <a-input
            placeholder="请输入审核人员"
            v-model="formState.reviewer"
            allowClear
          ></a-input>
        </a-form-item>
        <a-form-item
          style="
            display: flex;
            justify-content: flex-end;
            padding-right: 15px;
            box-sizing: border-box;
            align-items: flex-end;
          "
        >
          <a-button @click="getList" type="primary">查询</a-button>
          <a-button @click="exportList" style="margin-left: 10px" type="primary"
            >导出</a-button
          >
        </a-form-item>
      </a-form>
    </div>
    <standard-table
      bordered
      :columns="columns"
      :dataSource="tableList"
      :pagination="pagination"
      @clear="onClear"
      @change="onChange"
      :loading="loading"
    >
      <div slot="qutationCount" slot-scope="{ text }">
        {{ text + "条" }}
      </div>
      <div slot="quotationRate" slot-scope="{ text }">
        {{ (text * 100).toFixed(2) + "%" }}
      </div>
      <div slot="operation" slot-scope="{ record }">
        <!-- <a-button type="link" @click="watch(record)">查看</a-button> -->
        <a-button type="link" @click="watchMessage(record)">查看</a-button>
      </div>
      <!-- <template slot="footer">
        <div>合计</div>
        <div>已审（条）:{{ totalObj.allAuditstatusOrders }}</div>
        <div>自动：{{ totalObj.allAutomaticAudit }}</div>
        <div>人工：{{ totalObj.allPersionAudit }}</div>
        <div>未审（条）：{{ totalObj.allAuditOrder }}</div>
      </template> -->
    </standard-table>
    <a-drawer
      :width="1000"
      :placement="placement"
      :visible="visible"
      :headerStyle="headerStyle"
      :closable="false"
    >
      <template slot="title">
        <div class="custom-title" :style="headerStyle">
          <div>
            <a-icon type="close" @click="onClose" />
          </div>
          <div>
            <a-button style="margin-right: 8px" @click="onClose">取消</a-button>
            <a-button type="primary" @click="onClose">确认</a-button>
          </div>
        </div>
        <div class="order">
          <dl>
            <dt><span>订单数量</span></dt>
            <dd>
              <span>{{ orderObj.orderNumber || 0 }}</span>
            </dd>
          </dl>
          <dl>
            <dt><span>总时间</span></dt>
            <dd>
              <span>{{ orderObj.sumSecond + "秒" || 0 }}</span>
            </dd>
          </dl>
          <dl>
            <dt><span>平均时间</span></dt>
            <dd>
              <span>{{ orderObj.averageSecond + "秒" || 0 }}</span>
            </dd>
          </dl>
        </div>
        <standard-table
          bordered
          :columns="columns1"
          :dataSource="messageTable"
          :pagination="messagePagination"
          @clear="onClear"
          @change="onMessageChange"
          :loading="loading1"
        >
          <div slot="second" slot-scope="{ text }">
            {{ text + "秒" }}
          </div>

          <div slot="operation" slot-scope="{ record }">
            <!-- <a-button type="link" @click="watch(record)">查看</a-button> -->
            <a-button type="link" @click="watchMessage(record)">查看</a-button>
          </div>
          <!-- <template slot="footer">
        <div>合计</div>
        <div>已审（条）:{{ totalObj.allAuditstatusOrders }}</div>
        <div>自动：{{ totalObj.allAutomaticAudit }}</div>
        <div>人工：{{ totalObj.allPersionAudit }}</div>
        <div>未审（条）：{{ totalObj.allAuditOrder }}</div>
      </template> -->
        </standard-table>
      </template>
    </a-drawer>
  </div>
</template>
      
      <script>
import StandardTable from "@/components/table/StandardTable";

// import mixin from "../../minins/mixin";
const columns = [
  {
    title: "保险公司",
    dataIndex: "insuranceCompanyName",
    // scopedSlots: { customRender: "qutationCount" },
  },
  {
    title: "审核人工号",
    dataIndex: "audituser",
    // scopedSlots: { customRender: "qutationCount" },
  },
  {
    title: "审核人名称",
    dataIndex: "audituserName",
    // scopedSlots: { customRender: "qutationCount" },
  },
  {
    title: "审核人电话",
    dataIndex: "audituserMobile",
    // scopedSlots: { customRender: "audituserMobile" },

    // sorter: true,
    needTotal: true,
  },
  {
    title: "已审（条）",
    dataIndex: "auditstatusOrders",
    scopedSlots: { customRender: "qutationCount" },
  },

  {
    title: "未审（条）",
    dataIndex: "auditOrder",
    needTotal: true,
    scopedSlots: { customRender: "qutationCount" },
  },
  {
    title: "操作",
    dataIndex: "operation",
    scopedSlots: { customRender: "operation" },
  },
];
const columns1 = [
  {
    title: "车牌号",
    dataIndex: "licenseno",
    // scopedSlots: { customRender: "qutationCount" },
  },
  {
    title: "创建时间",
    dataIndex: "createTime",
    // scopedSlots: { customRender: "qutationCount" },
  },
  {
    title: "审核时间",
    dataIndex: "audittime",
    // scopedSlots: { customRender: "qutationCount" },
  },
  {
    title: "时间差",
    dataIndex: "timeDifference",
    scopedSlots: { customRender: "second" },

    // sorter: true,
    needTotal: true,
  },
];
import moment from "moment";

export default {
  components: {
    StandardTable,
  },
  //   mixins: [mixin],
  data() {
    return {
      formState: {
        days: undefined,
        time: [moment().format("YYYY-MM-DD"), moment().format("YYYY-MM-DD")],
        riskCode: "",
        endDate: moment().format("YYYY-MM-DD"),
        beginDate: moment().format("YYYY-MM-DD"),
        reviewer: undefined,
        companyId: undefined,
      },
      backLinePersonnel: {},
      columns: columns,
      visible: false,
      placement: "right",
      userData: {},
      headerStyle: {
        display: "flex",
        "align-items": "center",
        "justify-content": "space-between",
      },
      loading1: false,
      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: [],
      totalObj: {},
      companyList: [],
      columns1,
      messageTable: [],
      messagePagination: {
        current: 1,
        defaultPageSize: 10,
        total: 0,
        pagesize0ptions: ["10", "20", "30", "50", "100"],
        hideOnSinglePage: false,
        showQuickJumper: true, //
        showSizeChanger: true, //是否可以改变pagesize
        showTotal: (total) => `共 ${total} 条数据`,
      },
      messageObj: {},
      orderObj: {},
      process: process.env.VUE_APP_API_BASE_URL,
    };
  },
  watch: {
    "formState.riskCode"() {
      this.getVerification();
    },
    "formState.days"() {
      this.getVerification();
    },
  },
  mounted() {
    this.formState = { ...this.$route.query };
    this.getList();
    // this.$API.financial.getCompany().then((res) => {

    //   if (res.data.code === 200) {
    //     this.companyList = [...res.data.data];
    //   }
    // });
    // setTimeout(() => {
    // }, 1000);
  },
  methods: {
    exportList() {
      this.$API.financial
        .exportList({
          ...this.formState,
          // audituser: text.audituser,
        })
        .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);
          }
        });
    },
    onClose() {
      this.visible = false;
    },
    getMessageList(text) {
      this.$API.financial
        .getVerificationLicense({
          audituser: text.audituser,
          ...this.formState,
          pageNum: this.messagePagination.current,
          pageSize: this.messagePagination.defaultPageSize,
        })
        .then((res) => {
          if (res.data.code === 200) {
            this.loading1 = false;
            this.orderObj = { ...res.data.data };
            this.messageTable = [...res.data.data.pageResult.records];
            this.messagePagination = {
              current: res.data.data.pageResult.current,
              defaultPageSize: res.data.data.pageResult.size,
              total: res.data.data.pageResult.total,
            };
          } else {
            this.loading1 = false;
            this.messageTable = [];
          }
        });
    },
    watchMessage(text) {
      this.visible = true;
      this.messageObj = { ...text };
      this.getMessageList(this.messageObj);
    },
    filterOption(input, option) {
      return (
        option.componentOptions.children[0].text
          .toLowerCase()
          .indexOf(input.toLowerCase()) >= 0
      );
    },
    getList() {
      //
      this.pagination.current = 1;
      this.pagination.defaultPageSize = 10;
      this.getVerification();
    },

    async getVerification() {
      this.loading = true;
      await this.$API.financial
        .getVerificationDetails({
          pageNum: this.pagination.current,
          pageSize: this.pagination.defaultPageSize,
          ...this.formState,
        })
        .then((res) => {
          if (res.data.code === 200) {
            this.loading = false;
            this.tableList = [...res.data.data.records];
            this.pagination = {
              current: res.data.data.current,
              defaultPageSize: res.data.data.size,
              total: res.data.data.total,
            };
          } else {
            this.loading = false;
            this.tableList = [];
          }
        });
      // await this.$API.financial
      //   .getCostCenterTotal({
      //     pageNum: this.pagination.current,
      //     pageSize: this.pagination.defaultPageSize,
      //     ...this.formState,
      //   })
      //   .then((res) => {
      //     if (res.data.code === 200) {
      //       this.totalObj = { ...res.data.data };
      //     } else {
      //       this.totalObj = {};
      //     }
      //   });
    },
    onClear() {
      this.$message.info("您清空了勾选的所有行");
    },
    onChangeTime(val) {
      // console.log(val);
      this.formState.beginDate = val[0];
      this.formState.endDate = val[1];
      this.formState.days = undefined;
      this.getVerification();
    },
    onChange(pagination) {
      // this.$message.info('表格状态改变了')

      this.pagination = {
        current: pagination.current,
        defaultPageSize: pagination.pageSize,
        total: pagination.total,
      };
      this.getVerification();
    },
    onMessageChange(pagination) {
      // this.$message.info('表格状态改变了')

      this.messagePagination = {
        current: pagination.current,
        defaultPageSize: pagination.pageSize,
        total: pagination.total,
      };
      // this.getVerification();
      this.getMessageList(this.messageObj);
    },
  },
};
</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: none;
        width: 300px;
        /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;
      }
    }
  }
}
/deep/.ant-table.ant-table-bordered .ant-table-footer {
  display: flex;
  > div {
    flex: 1;
  }
}
/deep/ .ant-drawer-wrapper-body .ant-drawer-header .ant-drawer-title {
  width: 100%;
  .standard-table {
    margin-top: 10px;
  }
}
.order {
  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);

  display: flex;
  align-items: center;
  justify-content: space-between;
  > dl {
    flex: none;
    width: 200px;
    height: 80px;
    display: flex;
    //   align-items: center;
    justify-content: space-between;
    flex-direction: column;
    padding: 10px;
    box-sizing: border-box;

    border-radius: 4px 4px 4px 4px;

    > dd {
      display: flex;
      // align-items: center;
      justify-content: flex-end;
      margin: 0;
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      font-size: 24px;
      // color: rgba(0, 0, 0, 0.85);
      // padding-left: 15px;
      box-sizing: border-box;
    }
  }
  > dl:first-child {
    background: url("../../../assets/img/business1.png");
    color: #11a6d3;
  }
  > dl:nth-child(2) {
    background: url("../../../assets/img/business2.png");
    color: #f87f2c;
  }
  > dl:nth-child(3) {
    background: url("../../../assets/img/business3.png");
    color: #fab600;
  }
  > dl:nth-child(4) {
    background: url("../../../assets/img/business4.png");
    color: #80be38;
  }
  > dl:nth-child(5) {
    background: url("../../../assets/img/business5.png");
    color: #906cef;
  }
  > dl:nth-child(6) {
    background: url("../../../assets/img/business6.png");
    color: #47a2eb;
  }
  > dl:nth-child(7) {
    background: url("../../../assets/img/business6.png");
    color: #f879cd;
  }
}
span {
  display: block;
  margin-right: 15px;
}
/deep/.ant-calendar-picker {
  width: 300px;
}
</style>