<template>
  <div>
    <el-form :model="form">
      <el-form-item label="供应商:" style="margin-right: 0.6vw">
        <div class="supplier_container">
          <el-input v-model="form.supplier"></el-input>
          <i class="el-icon-search"></i>
        </div>
      </el-form-item>
      <el-form-item>
        <el-input
          v-model="form.supplierName"
          disabled
          style="width: 25vw"
        ></el-input>
      </el-form-item>
      <el-form-item label="事业公司:">
        <el-select
          v-model="form.company"
          style="width: 22vw"
          placeholder="请选择事业公司"
        ></el-select>
      </el-form-item>
      <el-form-item label="账表月:">
        <el-date-picker
          v-model="form.date"
          type="monthrange"
          range-separator="-"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          style="width: 25vw"
        ></el-date-picker>
      </el-form-item>
      <div class="btn_container">
        <el-button type="primary" style="background: #0187fb; border: none">
          查询
        </el-button>
        <el-button type="primary" style="background: #0187fb; border: none">
          下载
        </el-button>
      </div>
    </el-form>
    <div class="table_container">
      <el-table
        :data="table"
        border
        :header-cell-style="headerStyle"
        :cell-style="rowStyle"
      >
        <el-table-column type="index" label="序号" width="80"></el-table-column>
        <el-table-column prop="payment" label="供应商编号"></el-table-column>
        <el-table-column prop="buyer" label="供应商"></el-table-column>
        <el-table-column prop="user" label="账表月"></el-table-column>
        <el-table-column
          prop="content"
          label="票扣金额(未税)"
        ></el-table-column>
        <el-table-column prop="status" label="票扣税额"></el-table-column>
        <el-table-column prop="money" label="票扣金额(含税)"></el-table-column>
        <el-table-column
          prop="purchaseDate"
          label="账扣金额(未税)"
        ></el-table-column>
        <el-table-column prop="eTime" label="账扣税额"></el-table-column>
        <el-table-column prop="way" label="账扣金额(含税)"></el-table-column>
        <el-table-column prop="invoicing" label="合计(未税)"></el-table-column>
        <el-table-column prop="invoicing" label="合计税额"></el-table-column>
        <el-table-column prop="invoicing" label="合计(含税)"></el-table-column>
        <el-table-column
          prop="invoicing"
          label="应收款金额(含税)"
        ></el-table-column>
      </el-table>
      <el-pagination
        :current-page="currentPage"
        :page-sizes="[100, 200, 300, 400]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'ProfitQuery',
    data() {
      return {
        form: {
          supplier: '',
          supplierName: '',
          company: '',
          date: '',
        },
        table: [],
        currentPage: 1,
        total: 0,
        pageSize: 8,
      }
    },
    mounted() {
      this.getTest()
    },
    methods: {
      getTest() {
        let a = [2, 56, 5, 3, 15, 16, 29, 3, 15],
          b = [4, 0, 17, 35, 15],
          c = [9, 0, 5, 8, 3, 56, 100, 34]
        // let total = a.concat(b, c)
        console.log(total, '合并')

        let sort = total.sort((a, b) => {
          return a - b
        })
        console.log(sort, '排序')
        var setNew = new Set(sort)
        var newArr = [...setNew]
        console.log('最终', newArr)
      },
      headerStyle() {
        return 'background:#409eff;text-align:center;color:#fff;'
      },
      rowStyle() {
        return 'text-align:center;'
      },
      handleSizeChange(val) {
        this.pageSize = val
      },
      handleCurrentChange(val) {
        this.currentPage = val
      },
    },
  }
</script>

<style lang="scss" scoped>
  .el-form::v-deep {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    padding-top: 2vh;
    box-sizing: border-box;

    .btn_container {
      margin-left: 5vw;
      line-height: 4vh;
    }

    .el-form-item {
      display: flex;
      align-items: center;
      height: 4vh;

      .el-form-item__label {
        // font-size: calc(100vh * 28 / 1920);
        font-size: 0.9rem;
        font-weight: bold;
        width: 6vw;
      }

      .el-input__inner {
        // font-size: calc(100vh * 26 / 1920);
        font-size: 0.8rem;
        height: 3.5vh;
      }

      .supplier_container {
        display: flex;
        align-items: center;
        width: 22vw;
        height: 3.5vh;
        border: 1px solid #dcdfe6;
        border-radius: 4px;

        .el-input__inner {
          border: none;
          width: 100%;
        }

        i {
          border-left: 1px solid #dcdfe6;
          width: 15%;
          height: 100%;
          background: #f1f1f1;
          text-align: center;
          font-size: calc(100vh * 30 / 1920);
          line-height: 3.5vh;
        }
      }
    }
  }
  .table_container {
    border-top: 4px solid #f1f1f1;
    padding: 0.5vh 0;
    box-sizing: border-box;
    .el-pagination {
      text-align: left;
      margin-top: 1.5vh;
    }
  }
  ::v-deep .el-table th .cell {
    color: #fff;
    // font-size: calc(100vh * 28 / 1920);
    font-size: 0.9rem;
  }
  ::v-deep .el-table td .cell {
    // font-size: calc(100vh * 24 / 1920);
    font-size: 0.8rem;
  }
</style>