<template>
  <div class="profit">
    <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>
            <a-radio-group
              default-value="0"
              button-style="solid"
              v-model="formState.dateType"
              @change="getVerification()"
            >
              <a-radio-button value="1"> 近1月 </a-radio-button>
              <a-radio-button value="2"> 近3月 </a-radio-button>
              <a-radio-button value="3"> 近半年 </a-radio-button>
            </a-radio-group>
          </div>
        </div>
      </div>
      <div class="table">
        <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";
const columns = [
  {
    title: "月份",
    dataIndex: "yearAndMonth",
  },

  {
    title: "保费",
    dataIndex: "sumpremium",
    // scopedSlots: { customRender: "parterCompanyName" },
  },
  {
    title: "应收",
    dataIndex: "sumcount",
    // scopedSlots: { customRender: "parterCompanyName" },
  },
  {
    title: "应付",

    // scopedSlots: { customRender: "qutationCount" },
    children: [
      {
        title: "实付",
        dataIndex: "paid",
        // scopedSlots: { customRender: "count" },
      },
      {
        title: "未付",
        dataIndex: "unpaid",
        // scopedSlots: { customRender: "count" },
      },
    ],
  },
  {
    title: "毛利润",
    dataIndex: "grossProfit",
    // scopedSlots: { customRender: "parterCompanyName" },
  },
  {
    title: "营业成本",

    // scopedSlots: { customRender: "qutationCount" },
    children: [
      {
        title: "人员成本",
        dataIndex: "laborCost",
        // scopedSlots: { customRender: "count" },
      },
      {
        title: "固定成本",
        dataIndex: "fixedCost",
        // scopedSlots: { customRender: "count" },
      },
      {
        title: "变动成本",
        dataIndex: "variableCost",
        // scopedSlots: { customRender: "count" },
      },
    ],
  },
  {
    title: "经营利润",
    dataIndex: "operatingProfit",
  },

  {
    title: "税费",
    dataIndex: "taxation",
    // scopedSlots: { customRender: "parterCompanyName" },
  },
  {
    title: "净利润",
    dataIndex: "netProfit",
    //
  },
];

export default {
  components: {
    StandardTable,
  },
  //   mixins: [mixin],
  data() {
    return {
      formState: {
        dateType: "",
        year: "",
      },
      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,

      treeData: [
        { title: "Expand to load", key: "0" },
        { title: "Expand to load", key: "1" },
        { title: "Tree Node", key: "2", isLeaf: true },
      ],
      yearShowOne: false,
      time: "",
    };
  },
  mounted() {
    this.getVerification();
    // setTimeout(() => {
    // }, 1000);
  },
  methods: {
    onLoadData(treeNode) {
      return new Promise((resolve) => {
        if (treeNode.dataRef.children) {
          resolve();
          return;
        }
        setTimeout(() => {
          treeNode.dataRef.children = [
            { title: "Child Node", key: `${treeNode.eventKey}-0` },
            { title: "Child Node", key: `${treeNode.eventKey}-1` },
          ];
          this.treeData = [...this.treeData];
          resolve();
        }, 1000);
      });
    },
    // 弹出日历和关闭日历的回调
    openChangeOne(status) {
      if (status) {
        this.yearShowOne = true;
      }
    },
    // 得到年份选择器的值
    panelChangeOne(value) {
      this.time = value;
      this.formState.year = value;
      this.yearShowOne = false;
      this.getVerification();
    },
    handleFinish() {
      //
    },

    getVerification() {
      this.loading = true;
      console.log(this.formState.year);
      this.$API.profit
        .getProfitList({
          dateType: this.formState.dateType,
          year:
            this.time != ""
              ? this.time._d.getFullYear()
              : new Date().getFullYear(),
        })
        .then((res) => {
          if (res.data.code === 200) {
            this.loading = false;
            this.tableList = 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>
.table {
  padding-bottom: 15px;
  box-sizing: border-box;
}
.profit {
  display: flex;
  > div:first-child {
    width: 20%;
    background: #fff;
    margin-right: 15px;
  }
  .profit-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 {
      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: 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>