<template>
  <div>
    <el-button type="primary" style="background: #0187fb; border: none">
      下载
    </el-button>
    <el-form :model="form">
      <el-form-item label="供应商:">
        <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: 22.2vw"
        ></el-input>
      </el-form-item>
      <el-form-item label="税率:">
        <el-select v-model="form" placeholder="请选择税率"></el-select>
      </el-form-item>
      <el-form-item label="状态:">
        <el-select v-model="form" placeholder="请选择状态"></el-select>
      </el-form-item>
      <el-form-item label="支付预定日:">
        <el-date-picker
          v-model="form.orderDate"
          type="daterange"
          range-separator="-"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          style="width: 24vw"
        ></el-date-picker>
      </el-form-item>
      <el-form-item label="账表月(结算单):">
        <el-date-picker
          v-model="form.orderDate"
          type="monthrange"
          range-separator="-"
          start-placeholder="开始月"
          end-placeholder="结束月"
          style="width: 24vw"
        ></el-date-picker>
      </el-form-item>
      <el-form-item label="结算单号:">
        <el-input
          v-model="form.supplierName"
          style="width: 17vw"
          placeholder="请输入结算单号"
        ></el-input>
      </el-form-item>
      <el-button type="primary" style="background: #0187fb; border: none">
        查询
      </el-button>
    </el-form>
    <div class="table_container">
      <div class="money_container">
        <div class="money_item">
          <span class="money_title">发票金额(未税)合计:</span>
          <span>0.00</span>
        </div>
        <div class="money_item">
          <span class="money_title">税额合计:</span>
          <span>0.00</span>
        </div>
        <div class="money_item">
          <span class="money_title">发票金额(含税)合计:</span>
          <span>0.00</span>
        </div>
      </div>
      <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="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-column
          prop="invoicing"
          label="未比对发票张数"
        ></el-table-column>
        <el-table-column
          prop="invoicing"
          label="操作"
          fixed="right"
        ></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: 'SupplierInvoicingQuery',
    data() {
      return {
        form: {},
        table: [],
        currentPage: 1,
        total: 100,
        pageSize: 8,
      }
    },
    methods: {
      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-button {
    margin: 1vh 0.6vw;
  }
  .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: 6.8vw;
      }

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

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

        .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;
    }

    .money_container {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      width: 100%;

      .money_item {
        width: 33.3%;
        height: 4vh;
        line-height: 4vh;
        font-size: calc(100vh * 28 / 1920);

        .money_title {
          font-weight: bold;
          margin-right: 0.8vw;
        }
      }
    }
  }

  ::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>