<template>
  <div class="app-container">
    <!-- 查询和其他操作 -->
    <div>
      <span style="font-size:14px">货物：</span>
      <el-input
        v-model="customerName"
        clearable
        placeholder="请输入货物"
        style="width: 200px;margin-bottom:20px"
        size="small"
        class="filter-item"
      />



      <el-button style=" width:90px;  " size="small" type="primary" icon="el-icon-search" @click="handleFind">查询
      </el-button>
    </div>
    <table border="1px" cellpadding="10" cellspacing="0" class="ckTable">
        <tr>
            <td colspan="4" style="font-weight: 600;fontSize:20px">物 流 报 价 单</td>
        </tr>
        <tr>
            <td style="width:15%;color: #909399;fontWeight: 600;">发起单位：</td>
            <td style="width:30%">上海国林源诚物流发展有限公司</td>
            <td style="width:15%;color: #909399;fontWeight: 600;">招标方式：</td>
            <td style="width:30%">邀请招标</td>
        </tr>
    </table>
    <el-table  ref="multipleTable" v-loading="loading" :data="tableData" style="width: 100%" border :row-key="(row)=>{return row.customerId}" @row-click="handleOneChange" @selection-change="handleSelectionChange">

      <!-- <el-table-column label="公司编号"  align="center" fixed="left"  :show-overflow-tooltip="true">
        <template slot-scope="scope">
          <span>{{ scope.row.customerId }}</span>
        </template>
      </el-table-column> -->
      <el-table-column
      :reserve-selection="true"
      type="selection"
      width="55">
    </el-table-column>
      <el-table-column label="货物" width="210" fixed="left" align="center" :show-overflow-tooltip="true">
        <template slot-scope="scope">
          <span>散稻</span>
        </template>
      </el-table-column>

      <el-table-column label="数量（吨）" width="150" align="center" :show-overflow-tooltip="true">
        <template slot-scope="scope">
          <span> 10</span>
        </template>
      </el-table-column>

      <el-table-column label="始发地" width="190" align="center" :show-overflow-tooltip="true">
        <template slot-scope="scope">
          <span>河南</span>
        </template>
      </el-table-column>

      <el-table-column label="始发车站" align="center" width="190" :show-overflow-tooltip="true">
        <template slot-scope="scope">
          <span>河南东站</span>
        </template>
      </el-table-column>
      <el-table-column label="目的地" width="150" align="center" :show-overflow-tooltip="true">
        <template slot-scope="scope">
          <span>{{ scope.row.legalPerson }}</span>
        </template>
      </el-table-column>
      <el-table-column label="目的车站" width="150" align="center" :show-overflow-tooltip="true">
        <template slot-scope="scope">
          <span>{{ scope.row.businessScope }}</span>
        </template>
      </el-table-column>
      <el-table-column label="包装方式" width="150" align="center" :show-overflow-tooltip="true">
        <template slot-scope="scope">
          <!-- <span>{{ scope.row.registeredCapital }}</span> -->
          <span>散粮</span>
        </template>
      </el-table-column>
      <el-table-column label="运输方式" width="200" align="center" :show-overflow-tooltip="true">
        <template slot-scope="scope">
          <span>汽运/火车运输/船运</span>
        </template>
      </el-table-column>
      <el-table-column label="预估运输距离（公里/海里）" width="120" align="center" :show-overflow-tooltip="true">
        <template slot-scope="scope">
          <span>{{ scope.row.businessDate }}</span>
        </template>
      </el-table-column>
      <el-table-column label="运输单价含税价（元/吨）" width="120" align="center" :show-overflow-tooltip="true">
        <template slot-scope="scope">
          <span>{{ scope.row.residence }}</span>
        </template>
      </el-table-column>
      <el-table-column label="合计运输金额（元）" width="120" align="center" :show-overflow-tooltip="true">
        <template slot-scope="scope">
          <span>{{ scope.row.createDate }}</span>
        </template>
      </el-table-column>
      <el-table-column label="备注" width="250" align="center" :show-overflow-tooltip="true">
        <template slot-scope="scope">
          <span>保证金500 运输完成之后返还</span>
        </template>
      </el-table-column>
        <el-table-column label="操作" width="250" fixed="right" align="center">
        <template slot-scope="scope">
          <el-button type="text" icon="el-icon-edit" @click="handleAdd(scope.row)">投标</el-button>
          <el-button v-if="scope.row.tenderStatus == 1 && scope.row.status == null" slot="reference" type="text" icon="el-icon-edit" @click="handleAdd(scope.row)">投标</el-button>
          <el-button v-if="scope.row.tenderStatus == 1 && scope.row.status == 0" slot="reference" type="text" icon="el-icon-edit" @click="handleEdit(scope.row)">改标</el-button>
          <el-button v-if="scope.row.tenderStatus == 2 || scope.row.tenderStatus == 3" slot="reference" icon="el-icon-view" type="text" @click="handleView(scope.row)">投标详情</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!--分页-->
    <div class="pagination">
      <el-pagination
        :popper-class="currentPage"
        :page-sizes="[1,10, 20, 30, 50]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        background
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
      <!-- <el-pagination
        :current-page.sync="currentPage"
        :page-sizes="[10, 20, 30, 50]"
        :page-size="pageSize"
        layout="total, prev, pager, next, jumper"
        :total="total"
        background
        @current-change="handleCurrentChange"
      /> -->
    </div>


   




  </div>
</template>

<script>
import { Listarea } from '@/api/dataForm'
import { customerList, addCustomer, editCustomer, deleteCustomer,userRoles } from '@/api/record'
import { parseTime } from '@/utils/index'
import { getUserInfo,vailUserName } from '@/api/user'

export default {
  data() {
    return {
      size: 'small',
      tableData: [],
      priceData: [],
      SelectionList:[],
      customerName: '',
      typeId: '',
      customerType: [
        { id: 1, name: '有限责任公司（自然人独资）' },
        { id: 2, name: '有限责任公司(自然人投资或控股)' },
        { id: 3, name: '股份有限公司' },
        { id: 4, name: '有限合伙企业' },
        { id: 5, name: '外商独资公司' },
        { id: 6, name: '个人独资企业' },
        { id: 7, name: '国有独资公司' },
        { id: 8, name: '其他' }

      ],
      areaList: [],
      query: {
        name: ''
      },
      formLabelWidth: '90px',
      isEditForm: false,
      currentPage: '1',
      pageSize: 10,
      total: 0, // 总数量
      dataForm: {
      },

      loading: false,
      dialogVisible: false,
      batchVisible:false,
       BASE_API: process.env.BASE_API,
       fileList: [],
      roles:[]

    }
  },
  created() {
    this.getTenantList()
    console.log('res')
  },
  methods: {
    parseTime,
    getTenantList: function() {
      this.loading = true
      const params = new URLSearchParams()
      params.append('type', this.typeId)
      params.append('customerName', this.customerName)
      params.append('current', this.currentPage)
      params.append('size', this.pageSize)
      customerList(params).then(response => {
        console.log(response)
        this.loading = false
        this.tableData = response.data.data.records
        console.log('1' + response.data.data.records)
        this.total = response.data.data.total
      })
    },
  

    handleFind: function() {
      this.currentPage = '1'
      this.getTenantList()
    },
    handleSizeChange: function(val) {
      this.pageSize = val
      this.getTenantList()
    },
    // 换页
    handleCurrentChange: function(val) {
      const page = val.toString()
      this.currentPage = page
      this.getTenantList()
    },
    // 查看
    // lookRecord:function(row){
    //     this.lookCord=row
    //     this.dialogVisible = true
    //     console.log(row)
    // },
   handleOneChange(row,i){
       console.log(row,i)
       this.$refs.multipleTable.toggleRowSelection(row);
   },
    handleSelectionChange(row){
        console.log(row)
        this.SelectionList = row
    }
  }
}
</script>

<style scoped lang="scss" >
    .ckTable{
        width: 100%;
        border: #eee;
        text-align: center;
        tr,td{
        border: 0.5px solid#dfe6ec;
        line-height: 23px;
        }
    }
   .el-dropdown-link {
    cursor: pointer;
    color: #1282f3;
  }
  .el-icon-arrow-down {
    font-size: 12px;
  }
  .el-scrollbar__wrap {
   overflow-y: hidden;
}

.el-card {
  border: 0px solid #fff;
  .topClass{
    font-weight: 600;
    font-size: 17px;
  }
}
.el-icon-document{
  font-size: 70px;
  color:#409EFF;
  line-height: 130px;
}
/deep/.el-card__body {
  padding: 20px 10px 0 10px !important;
}
</style>

