<template>
  <div class="back-line-main">
    <div class="back-line-header">
      <div class="back-line-header-title">
        <h2>财务应收</h2>
        <div>
          月份筛选
          <a-month-picker
            placeholder="请选择月份"
            @change="monthChange"
            v-model="formState.month"
            valueFormat="YYYY-MM"
            style="margin-left: 15px"
          />
        </div>
      </div>
      <div class="year">
        <h1>{{ formState.month }}</h1>
        <div class="ys">
          <img src="@/assets/img/ys.png" alt="" />
          <i>应收</i> {{ titleMessage.ysSumAmount }}
        </div>
        <div class="yis">
          <img src="@/assets/img/yis.png" alt="" />
          <i>已收</i>
          {{ titleMessage.yisSumAmount }}
        </div>
        <div class="ws">
          <img src="@/assets/img/ws.png" alt="" />
          <i>未收</i>
          {{ titleMessage.wsSumAmount }}
        </div>
      </div>
    </div>
    <div class="table">
      <a-table
        :columns="columns"
        :dataSource="tableList"
        :pagination="false"
        @clear="onClear"
        @change="onChange"
        :loading="loading"
        bordered
      >
        <template slot="receivable" slot-scope="text">
          <!-- {{ text }} -->
          <div v-for="(item, index) in text" :key="item" class="table-item">
            <img
              src="@/assets/img/PropertySafety@2x.png"
              alt=""
              v-show="index == 0"
            />
            <img
              src="@/assets/img/MoneyCollect@2x.png"
              alt=""
              v-show="index == 1"
            />
            <img
              src="@/assets/img/Frame@2x(3).png"
              alt=""
              v-show="index == 2"
            />
            {{ item.isHand }}
            <span>{{ item.commissionFeevalue }}</span>
          </div>
        </template>
        <template slot="received" slot-scope="text">
          <div v-for="item in text" :key="item" class="table-item">
            {{ item }}
          </div>
        </template>
        <template slot="Notreceived" slot-scope="text">
          <div v-for="item in text" :key="item" class="table-item">
            {{ item }}
          </div>
        </template>
        <template slot="Notsettled" slot-scope="text">
          <div v-for="item in text" :key="item" class="table-item">
            {{ item }}
          </div>
        </template>
        <template slot="Notinvoiced" slot-scope="text">
          <div v-for="item in text" :key="item" class="table-item">
            {{ item }}
          </div>
        </template>
      </a-table>
    </div>

    <!-- <div slot="Receivable" slot-scope="{ list }">
      {{ list }}
    </div> -->
    <!-- <router-view></router-view> -->
  </div>
</template>
        
<script>
// import StandardTable from "@/components/table/StandardTable";
// import mixin from "../../minins/mixin";
const columns = [
  {
    title: "保险公司",
    dataIndex: "companyName",
    //
  },

  {
    title: "地区",
    dataIndex: "areaName",
  },
  {
    title: "应收",
    dataIndex: "receivable",
    className: "td-padding",
    scopedSlots: { customRender: "receivable" },
  },
  {
    title: "已收",
    dataIndex: "received",
    className: "td-padding",

    scopedSlots: { customRender: "received" },
  },
  {
    title: "未收",
    className: "td-padding",
    dataIndex: "Notreceived",
    scopedSlots: { customRender: "Notreceived" },
  },
  {
    title: "开票未结算",
    className: "td-padding",
    dataIndex: "Notsettled",
    needTotal: true,
    scopedSlots: { customRender: "Notsettled" },
  },
  {
    title: "未开票金额",
    dataIndex: "Notinvoiced",
    className: "td-padding",
    needTotal: true,
    scopedSlots: { customRender: "Notinvoiced" },
  },
];

export default {
  components: {
    // StandardTable,
  },
  //   mixins: [mixin],
  data() {
    return {
      formState: {
        year: "",
        dateType: "",
        time: "",
      },
      titleMessage: {},
      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: [],
      time: "",
    };
  },
  watch: {
    $route() {
      this.getVerification();
    },
  },
  mounted() {
    this.formState.month = this.$route.query.yearMonth;

    this.getVerification();
    // setTimeout(() => {
    // }, 1000);
  },
  methods: {
    handleFinish() {
      //
    },
    monthChange() {
      this.getVerification();
    },

    // 弹出日历和关闭日历的回调
    openChangeOne(status) {
      if (status) {
        this.yearShowOne = true;
      }
    },
    // 得到年份选择器的值
    panelChangeOne(value) {
      this.time = value;
      this.formState.year = value;
      this.yearShowOne = false;
      this.getVerification();
    },

    getVerification() {
      this.loading = true;

      this.$API.financial
        .getMonthReceivablesList({
          type: this.$route.query.type,
          yearAndMonth: this.formState.month,
          isNoCar: this.$route.query.isNoCar
            ? this.$route.query.isNoCar
            : undefined,
        })
        .then((res) => {
          if (res.data.code === 200) {
            if (res.data.data) {
              this.loading = false;
              this.tableList = [...res.data.data.list] || [];
              this.titleMessage = { ...res.data.data } || {};
              let receivable = [];
              let received = [];
              let Notreceived = [];
              let Notsettled = [];
              let Notinvoiced = [];
              res.data.data.list.forEach((item) => {
                this.tableList.forEach((item1) => {
                  receivable = [];
                  received = [];
                  Notreceived = [];
                  Notsettled = [];
                  Notinvoiced = [];
                  item.list.forEach((item2) => {
                    if (
                      item1.companyName + item1.areaName ==
                      item.companyName + item.areaName
                    ) {
                      receivable.push({
                        isHand: item2.isHand,
                        commissionFeevalue: item2.commissionFeevalue,
                      });
                      received.push(item2.readyCommissionFeevalue);
                      Notreceived.push(item2.noInvoicCommissionFeevalue);
                      Notsettled.push(item2.settlementAmount);
                      Notinvoiced.push(item2.noSettlementAmount);

                      item1.receivable = receivable;
                      item1.received = received;
                      item1.Notreceived = Notreceived;
                      item1.Notsettled = Notsettled;
                      item1.Notinvoiced = Notinvoiced;
                    }
                  });
                });
              });

              this.pagination = {
                current: res.data.data.current,
                defaultPageSize: res.data.data.size,
                total: res.data.data.total,
              };
            } else {
              this.loading = false;
              this.tableList = [];
              this.titleMessage = {};
            }
          } else {
            this.loading = false;
            this.tableList = [];
            this.titleMessage = {};
            this.$message.error(res.data.msg);
          }
        });
    },
    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 {
        margin-left: 100px;
        // border: 1px solid #d32029;
        padding: 10px 30px;
        box-sizing: border-box;
        // border-radius: 5px;
        color: #000;
        display: flex;
        align-items: center;
        // background: rgba(211, 32, 41, 0.05);
        border-radius: 4px 4px 4px 4px;
        > img {
          width: 44px;
          height: auto;
        }
        font-family: DIN, DIN;
        font-weight: 500;
        font-size: 24px;
        color: rgba(0, 0, 0, 0.85);
        > i {
          display: block;
          margin: 0 15px;
          font-family: PingFang SC, PingFang SC;
          font-weight: 500;
          font-size: 18px;
          color: rgba(0, 0, 0, 0.85);
        }
      }
      > div.ys {
        background: linear-gradient(
          267deg,
          rgba(42, 85, 229, 0.1) 0%,
          rgba(42, 85, 229, 0) 100%
        );
      }
      > div.yis {
        background: linear-gradient(
          267deg,
          rgba(19, 168, 168, 0.1) 0%,
          rgba(19, 168, 168, 0) 100%
        );
      }
      > div.ws {
        background: linear-gradient(
          267deg,
          rgba(100, 42, 181, 0.1) 0%,
          rgba(100, 42, 181, 0) 100%
        );
      }
    }
  }
  > 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;
      }
    }
  }
  /deep/.ant-table {
    padding: 15px;
    box-sizing: border-box;

    .ant-table-tbody .td-padding {
      padding: 0 !important;
      .table-item {
        border-bottom: 1px solid #f0f0f0;
        height: 40px;
        // line-height: 40px;
        display: flex;
        align-items: center;
        padding: 0 15px;
        box-sizing: border-box;
        background: rgba(23, 125, 220, 0.05);
        color: #177ddc;
        > span:last-child {
          padding-left: 25px;
          box-sizing: border-box;
        }
        img {
          width: 18px;
          height: 18px;
          margin-right: 8px;
        }
      }
      .table-item:first-child {
        border-bottom: 1px solid #f0f0f0;
        height: 40px;
        line-height: 40px;
        padding: 0 15px;
        box-sizing: border-box;
        background: rgba(216, 74, 27, 0.05);
        color: #d84a1b;
      }
      .table-item:last-child {
        border-bottom: none;
        background: none;
        color: #000;
        > span:last-child {
          padding-left: 40px;
          box-sizing: border-box;
        }
      }
    }
  }
}
</style>