<template>
<div style="padding: 20px">
  <el-card  class="box-card">
    <div slot="header" class="clearfix" style="font-size: 20px;">
      {{$t('应付款佣金')}}
    </div>
    <el-form label-width="80px" inline>
      <el-row :gutter="20">
        <el-col :span="6">
          <el-form-item :label="$t('订单号')">
            <el-input :placeholder="$t('请输入订单号')" v-model="queryParams.orderNo"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item :label="$t('客户')">
            <el-input :placeholder="$t('请输入客户')" v-model="queryParams.customerName"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item :label="$t('始发仓')">
            <el-select
              v-model="queryParams.startWarehouseId"
              :placeholder="$t('请选择始发仓')"
              clearable
            >
              <el-option
                v-for="item in exportWarehouseList"
                :label="$l(item, 'title')"
                :value="item.id"
                :key="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item :label="$t('目的仓')">
            <el-select
              v-model="queryParams.destWarehouseId"
              :placeholder="$t('请选择目的仓')"
              clearable
            >
              <el-option
                v-for="item in importWarehouseList"
                :label="$l(item, 'title')"
                :value="item.id"
                :key="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="6">
          <el-form-item :label="$t('运输方式')">
            <dict-selector
              :type="DICT_TYPE.ECW_TRANSPORT_TYPE"
              v-model="queryParams.transportId"
              formatter="number"
              clearable
            />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item :label="$t('佣金类型')">
            <dict-selector
              :type="DICT_TYPE.COMMISSION_TYPE"
                  v-model="queryParams.feeType"
              formatter="number"
              clearable
            />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item :label="$t('状态')">
           <el-select clearable v-model="queryParams.state">
             <el-option v-for="(item)  in STATE" :label="$t(item.title)" :value="item.value" :key="item.value"></el-option>
           </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item>
            <el-button size="mini" type="primary" @click="queryParams.page = 1;getList()">{{$t('查找')}}</el-button>
            <el-button size="mini" v-has-permi="['ecw:commission-payable:add']" type="success" @click="$router.push({path:'/financial/commission-requestFunds',query:{payableId:0}})" >{{$t('新增请款单')}}</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </el-card>
  <el-table border :data="list" style="margin-top: 30px">
    <el-table-column align="center" :label="$t('订单编号')" prop="orderNo" ></el-table-column>
    <el-table-column align="center" :label="$t('品名')">
      <template v-slot="{row}">
         {{row.titleZh}}/{{row.titleEn}}
      </template>
    </el-table-column>
    <el-table-column align="center" :label="$t('客户名称')" prop="customerName" ></el-table-column>
    <el-table-column align="center" :label="$t('佣金类型')">
      <template v-slot="{row}">
        <dict-tag
        :type="DICT_TYPE.COMMISSION_TYPE"
        :value="row.feeType"
      ></dict-tag>
      </template>
    </el-table-column>
    <el-table-column align="center" :label="$t('金额')" prop="totalAmount">
      <template slot-scope="scope">
        <span>{{ scope.row.totalAmount }}</span>
        <span>{{getCurrencyLabel(scope.row.currencyId)}}</span>
      </template>
    </el-table-column>
    <el-table-column align="center" :label="$t('应付生成时间')">
      <template v-slot="{row}">
        {{parseTime(row.createTime)}}
      </template>
    </el-table-column>
    <el-table-column align="center" :label="$t('状态')">
      <template v-slot="{row}">
        {{$t(STATE.find(r => r.value === row.state).title)}}
      </template>
    </el-table-column>
      <el-table-column align="center" :label="$t('付款单号')" prop="paymentNo"></el-table-column>
    <el-table-column :label="$t('备注')" prop="remark" ></el-table-column>
    <el-table-column align="center" :label="$t('操作')">
      <template v-slot="{row}">
         <el-button size="mini" v-has-permi="['ecw:commission-payable:funds']" v-if="!row.state" type="text" @click="$router.push({path:'/financial/commission-requestFunds',query:{payableId:row.id}})" >{{$t('请款')}}</el-button>
      </template>
    </el-table-column>
  </el-table>
  <pagination
    v-show="total > 0"
    :total="total"
    :page.sync="queryParams.page"
    :limit.sync="queryParams.rows"
    @pagination="getList"
  />
</div>
</template>

<script>
import {getWarehouseList} from "@/api/ecw/warehouse";
import item from "@/layout/components/Sidebar/Item.vue";
import {payablePage} from "@/api/ecw/financial";
import Template from "@/views/cms/template/index.vue";
import {getCurrencyPage} from "@/api/ecw/currency";
import {parseTime} from "../../../utils/ruoyi";

export default {
  // 应付款佣金
  name: "EcwFinancialCommission-payable",
  components: {Template},
  activated(){
    this.getList()
  },
  created() {
    getWarehouseList().then(res => this.warehouseList = res.data)
    this.getList()
    getCurrencyPage().then(res => this.currencyList = res.data.list)
  },
  data(){
    return {
      STATE:[
        {
          value:0,
          title:this.$t('未付款'),
        },
        {
          value:1,
          title:this.$t('付款中'),
        },
        {
          value:2,
          title:this.$t('已付款'),
        }
      ],
      warehouseList:[],
      queryParams:{
        rows:10,
        page:1,
        orderNo:'',
        customerName:'',
        startWarehouseId:'',
        destWarehouseId:'',
        feeType:'',
        state:''
      },
      list:[],
      total:0,
      currencyList:[],
    }
  },
  computed:{
    exportWarehouseList(){
      /* tradeType 1 进口，2出口，3进出口 */
      return this.warehouseList.filter(item => item.tradeType == 2 || item.tradeType == 3)
    },
    importWarehouseList(){
      return this.warehouseList.filter(item => item.tradeType == 1 || item.tradeType == 3)
    },
  },
  methods:{
    parseTime,
    getList(){
      payablePage(this.queryParams).then(r =>{
         this.list = r.data.list
         this.total = r.data.total
      })
    },
    getCurrencyLabel(id){
      var label = this.currencyList.filter(item=>item.id == id)
      if(label.length>0) return this.$i18n.locale=='zh_CN'?label[0].titleZh:label[0].titleEn
      return ''
    },
  },
}
</script>

<style scoped>

</style>