@extends('layouts.base')

@section('content')
@section('title', trans('配置开票商品'))
@include('Yunshop\Invoice::admin.mixins')
<style scoped>
  .set .vue-title-yz-modular,.search-box{
    display: flex;
    flex-wrap: wrap;
  }
  .set .vue-title-yz-box{
    width: calc(100% - 100px);
  }
  .search-item{
    width: 240px;
    margin: 10px;
  }
  .el-table td,.el-table th.is-leaf{
    text-align: center;
  }
  .el-icon-edit{
    margin-right: 10px;
  }
  .el-icon-edit,.el-icon-delete-solid{
    font-size: 18px;
    color: #848484;
  }
</style>
<div class="all">
  <div id="app">
    <div class="set">
      <div class="vue-title-yz-modular">
        <div class="vue-title-yz-box">
          <div class="vue-title-yz-green"></div>
          <div class="vue-title-yz-text">配置开票商品</div>
        </div>
        <div style="width: 100px;">
          <el-button type="primary" @click="edit">配置商品</el-button>
        </div>
        <div class="search-box">
          <el-input v-model="search.code" placeholder="税收分类编码" class="search-item" @keyup.enter.native="searchVal"></el-input>
          <el-input v-model="search.name" placeholder="发票内容" class="search-item" @keyup.enter.native="searchVal"></el-input>
          <el-button type="primary" style="margin: 10px;" icon="el-icon-search" @click="searchVal">搜索</el-button>
        </div>
      </div>
    </div>
    <box-item text="开票商品列表">
      <el-table :data="tableData"  style="width: 100%" v-loading="tableLoading">
        <el-table-column prop="code" label="税收分类编码"></el-table-column>
        <el-table-column prop="name" label="发票内容"></el-table-column>
        <el-table-column prop="goods_count" label="关联商品数量"></el-table-column>
        <el-table-column prop="tax_rate" label="税率">
        <template slot-scope="scope">[[scope.row.tax_rate + "%"]]</template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <i class="el-icon-edit" @click="edit(scope.row)"></i>
            <i class="el-icon-delete-solid" @click="del(scope.row.id)"></i>
          </template>
        </el-table-column>
      </el-table>
    </box-item>
    <div class="fixed" v-if="tableTotal>0">
      <div class="fixed_box">
      <!-- :page-sizes="tablePageSizes"  layout="total, sizes, prev, pager, next, jumper" -->
        <el-pagination @size-change="handleSizeChange"  @current-change="handleCurrentChange" :current-page="tablePage" :page-size="tablePageSize"
          layout="total,  prev, pager, next, jumper" :total="tableTotal" >
        </el-pagination>
      </div>
    </div>
  </div>
</div>
<script>
  const vm = new Vue({
    mixins:[tableMixins],
    data(){
      return {
        tableUrl:"{!!yzWebFullUrl('plugin.invoice.admin.invoicing-goods.get-list')!!}",
        search:{
          code:"",
          name:""
        },
        tableData:[]
      }
    },
    methods:{
      // tableUrl(){
      //   return "{!!yzWebFullUrl('plugin.invoice.admin.invoicing-log.get-data')!!}"
      // },
      del(id){
        this.$confirm('确定要删除此条数据吗', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            this.deleteData(id)
          }).catch(()=>{})

      },
      deleteData(id){
        this.$http.post("{!!yzWebFullUrl('plugin.invoice.admin.invoicing-goods.destory')!!}",{id}).then(({data:{result,msg="",data}})=>{
          if(result==1){
            this.$message.success(msg)
            this.last_page = "";
            this.tablePage = 1;
            this.getTableData();
          }
          else this.$message.error(msg)
        })
      },
      edit(row){
        let json = row.id?`&id=${row.id}`:"";
        window.location.href = `{!! yzWebFullUrl('plugin.invoice.admin.invoicing-goods.edit') !!}` + json;
      }
    }
  })
</script>
@endsection('content')