<template>
  <div style="background-color:#f7f7f7;padding:10px 10px;">
    <div class="zhuti">
      <div style="height:58px;line-height:58px;">
        <div style="color:#0006"> <span>客服服务管理</span> <span style="padding:0 5px;">></span> <span
            style="color:#000000e6">销售上报</span></div>
      </div>
      <div>

        <!-- 搜索 -->
        <div class="formSearch">
          <el-form
            :inline="true"
            :model="pageIndex"

            label-position="left"
          >
		  <el-form-item label="品牌">
		   <el-input
		     placeholder="请输入"
		  
		     v-model="pageIndex.shopName">
		   </el-input>
		  </el-form-item>
            <el-form-item label="上报状态">
              <el-select
                v-model="pageIndex.isReconciliation"
                placeholder="请选择"

                style="width: 100px;"
              >
                <el-option label="未对账" value="0" />
                <el-option label="对账成功" value="1" />
                <el-option label="对账失败" value="2" />

              </el-select>
            </el-form-item>
            
            
            <el-form-item label="商品名称">
             <el-input
               placeholder="请输入"

               v-model="pageIndex.shopName">
             </el-input>
            </el-form-item>

          </el-form>
          <div>
            <el-button
              style="background-color: #3F9B6A;color: #fff;"
              @click="search"
              >查询
            </el-button>
            <el-button
             class="buttonHover"
               style="color: #606266;border: 1px solid #dddfe5;background-color: #fff;"
              @click="resetting"
              >重置
            </el-button>
          </div>
        </div>
        <!-- <div style="padding-bottom:20px;">
          <el-button
            style="background-color: #3F9B6A;color: #fff;"
            @click="daochu"
            >导出
          </el-button>

        </div> -->
        <!-- 表格 -->

        <div class="tableBox">
          <el-table
            ref="multipleTable"
            :data="tableData"
           :header-cell-style="{fontSize: '14px',color:'#0009',fontWeight: 'normal',backgroundColor:'#F2F3F5'}"
            tooltip-effect="dark"

          >
            <el-table-column label="序号" width="150">
              <template slot-scope="scope">{{ scope.$index +1 }}</template>
            </el-table-column>
            <el-table-column prop="number" label="商品名称" width="100" />
            <el-table-column prop="shopName" label="品牌" width="220" show-overflow-tooltip />
            <el-table-column prop="customerName" label="商品类型" show-overflow-tooltip />
            <el-table-column prop="receiveName" label="单价" show-overflow-tooltip />
            <el-table-column prop="receivePhone" label="销售时间" show-overflow-tooltip />
            <el-table-column label="上报状态" show-overflow-tooltip>
              <template slot-scope="scope">
                <span v-if="scope.row.isReconciliation == 0" >未发布</span>
                <span v-if="scope.row.isReconciliation == 2" >已上报</span>

              </template>
            </el-table-column>

            <el-table-column label="操作" fixed="right">
              <template slot-scope="scope">
                <div class="btnList">
                  <div class="tableBtn greens" @click="addbuss(scope.row)"  v-if="scope.row.isReconciliation == 0">上报</div>
				  <div class="tableBtn greens" @click="addbuss(scope.row)"  v-if="scope.row.isReconciliation == 0">删除</div>
                </div>
              </template>
            </el-table-column>
          </el-table>
          <div class="fenye">
            <el-pagination
              :current-page="pageIndex.page"
              :page-sizes="[10, 20, 50, 100]"
              :page-size="pageIndex.pageSize"
              layout="total, prev, pager, next"
			  background
              :total="total"
              @current-change="handleCurrentChange"
            />
          </div>
        </div>


      </div>
    </div>

  </div>
</template>

<script>

export default {
  data () {
    return {
      pageIndex: {
          searchType: '1',
          search: '', // 搜索字段
          state: '',
          page: 1,
          shopName: '',
          pageSize: 10

      },
      total: 0,
      flag: false,
	  tableData:[]
    }
  },
  computed: {},
  mounted(){

  },
  methods: {
	  search(){
		  
	  },
	  resetting(){
		  this.pageIndex={
          searchType: '1',
          search: '', // 搜索字段
          state: '',
          page: 1,
          shopName: '',
          pageSize: 10
      }
	  },
	  handleCurrentChange(val){
		  this.pageIndex.currentPage = val
	  }
  }
}
</script>

<style scoped >
.zhuti {
    padding: 0 20px 20px 20px;
    min-height: calc(100vh - 50px - 20px);
    background-color: #Fff;
    position: relative;
  }

/deep/ .el-form-item__content {
  line-height: 0;
}

.tableBtn {
  display: inline-block;
  margin-right: 10px;
}

::v-deep .formSearch {
  position: relative;
  margin: 20px 0;
  display: flex;
  width: 100%;
  font-size: 14px;
  justify-content: space-between;
  .el-form-item__label{
    font-size: 14px;
    color: #000;
  }
}

.greens {
  color: #3F9B6A;
}


.fenye {
  margin-top: 20px;
  display: flex;
  justify-content: flex-start;
  position: relative;
}

/deep/ .el-pagination.is-background .el-pager li:not(.disabled).active {
  background-color: #3F9B6A;
}

.el-row {
  margin-bottom: 20px;
}
:last-child {
  margin-bottom: 0;
}

.el-col {
  border-radius: 4px;
}

.bg-purple-dark {
  background: #99a9bf;
}

.bg-purple {
  background: #d3dce6;
}

.bg-purple-light {
  background: #e5e9f2;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}

.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}

/deep/ .bg-purple[data-v-0e3fe4ec] {
  background: #fff;
  height: 50px;
}

/deep/ .el-form--label-top .el-form-item__label {
  padding: 0;
}
.demo-input-suffix{
  display: flex;
  margin-right: 20px;
}
.pagination{
  text-align:right;
  line-height: 20px;
}

</style>
<style lang="scss" scoped>

  ::v-deep .buttonHover:hover {
    color: #3f9b6a !important;
    border-color: #c5e1d2 !important;
    background-color: #ecf5f0 !important;
    outline: none;
  }


</style>
