<template>
  <div class="back-line-main">
    <div class="back-line-header">
      <div class="back-line-header-title">
        <h2>驾意应收</h2>
        <div>
          <span>时间筛选</span>
          <a-date-picker
            mode="year"
            v-model="formState.year"
            value-format="YYYY"
            format="YYYY"
            :open="yearShowOne"
            @openChange="openChangeOne"
            @panelChange="panelChangeOne"
          >
            <a-icon slot="suffixIcon" type="calendar" />
          </a-date-picker>
        </div>
      </div>
      <div class="year">
        <h1>{{ receivablesObj.year }}年</h1>
        <div
          @click="typeChange(2)"
          :class="formState.dateType == 2 ? 'oner' : ''"
        >
          <span></span> <i>私有</i> {{ receivablesObj.sySumAmount }}
        </div>
        <!-- <div
          @click="typeChange(1)"
          :class="formState.dateType == 1 ? 'all' : ''"
        >
          <span class="platform"></span> <i>平台</i>
          {{ receivablesObj.ptSumAmount }}
        </div> -->
      </div>
    </div>
    <div class="table">
      <standard-table
        bordered
        :columns="columns"
        :dataSource="tableList"
        :pagination="false"
        @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="{ text, record }">
          <a-button type="link" @click="watchMessage({ text, record })"
            >详情</a-button
          >
        </div>
      </standard-table>
    </div>
    <!-- <router-view></router-view> -->
  </div>
</template>
      
<script>
import StandardTable from "@/components/table/StandardTable";
// import mixin from "../../minins/mixin";
const columns = [
  {
    title: "月份",
    dataIndex: "yearAndMonth",
    // scopedSlots: { customRender: "qutationCount" },
  },

  {
    title: "应收",
    dataIndex: "commissionFeevalue",
    // scopedSlots: { customRender: "qutationCount" },
  },
  {
    title: "已收",
    dataIndex: "noInvoicCommissionFeevalue",
    // scopedSlots: { customRender: "qutationCount" },
  },
  {
    title: "未收",
    dataIndex: "readyCommissionFeevalue",
    // scopedSlots: { customRender: "qutationCount" },

    // sorter: true,
    needTotal: true,
  },
  {
    title: "开票已结算",
    dataIndex: "settlementAmount",
    needTotal: true,
    // scopedSlots: { customRender: "qutationCount" },
  },
  {
    title: "开票未结算",
    dataIndex: "noSettlementAmount",
    needTotal: true,
    // scopedSlots: { customRender: "qutationCount" },
  },
  {
    title: "操作",
    dataIndex: "operation",
    needTotal: true,
    scopedSlots: { customRender: "operation" },
  },
];

export default {
  components: {
    StandardTable,
  },
  //   mixins: [mixin],
  data() {
    return {
      formState: {
        year: "",
        dateType: "2",
        time: "",
      },
      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
      },
      loading: false,
      wholeList: [],
      provinceList: [],
      cityList: [],
      areaList: [],
      storeList: [],
      time: "",
      receivablesObj: {},
      yearShowOne: false,
    };
  },
  mounted() {
    this.getVerification();
    // setTimeout(() => {
    // }, 1000);
  },
  methods: {
    handleFinish() {
      //
    },
    typeChange(type) {
      this.formState.dateType = type;
      this.getVerification();
    },
    watchMessage(item) {
      // console.log(item);
      this.$router.push({
        path: "/financial/receivablesMessage",
        query: {
          type: this.formState.dateType,
          yearMonth: item.record.yearAndMonth,
          isNoCar: 1,
        },
      });
    },
    // 弹出日历和关闭日历的回调
    openChangeOne(status) {
      if (status) {
        this.yearShowOne = true;
      }
    },
    // 得到年份选择器的值
    panelChangeOne(value) {
      this.time = value;
      this.formState.year = value;
      this.yearShowOne = false;
      this.getVerification();
    },
    wholeHandleChange() {
      this.getProvinceList(this.formState.whole);
    },
    provinceHandleChange() {
      this.getCityList(this.formState.provinceId);
    },
    cityHandleChange() {
      this.getAreaList(this.formState.cityId);
    },
    countyHandleChange() {
      this.getStoreList(this.formState.countyId);
    },

    getVerification() {
      this.loading = true;
      this.$API.financial
        .getCarList({
          // pageNum: this.pagination.current,
          // pageSize: this.pagination.defaultPageSize,
          year:
            this.time != ""
              ? this.time._d.getFullYear()
              : new Date().getFullYear(),
          isNotCar: 1,
          type: 2,
        })
        .then((res) => {
          if (res.data.code === 200) {
            this.receivablesObj = res.data.data;
            this.loading = false;
            this.tableList = res.data.data.list;
            // this.pagination = {
            //   current: res.data.data.current,
            //   defaultPageSize: res.data.data.size,
            //   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,
      };
      this.getVerification();
    },
  },
};
</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;
      }
    }
    .year {
      display: flex;
      align-items: center;
      padding-top: 15px;
      box-sizing: border-box;
      h1 {
        margin: 0;
      }
      > div {
        cursor: pointer;
        margin-left: 100px;
        border: 1px solid #000;
        padding: 10px 30px;
        box-sizing: border-box;
        // border-radius: 5px;
        color: #000;
        display: flex;
        align-items: center;

        border-radius: 4px 4px 4px 4px;
        > span:first-child {
          //   font-size: 200px;
          display: block;
          width: 8px;
          height: 8px;
          background: #d32029;
          border-radius: 50%;
          margin-right: 10px;
        }
        > i {
          display: block;
          margin-right: 10px;
        }
        > span.platform {
          background: #49aa19;
        }
      }
      > div.oner {
        border: 1px solid #d32029;
        background: rgba(211, 32, 41, 0.05);
      }
      > div.all {
        border: 1px solid #49aa19;
        background: rgba(73, 170, 25, 0.05);
      }
    }
  }
  > 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 {
    padding-bottom: 15px;
    box-sizing: border-box;
  }
}
</style>