<template>
  <div class="app-container">
    <!-- 搜索 -->
    <el-card>
      <el-form
        :model="queryParams"
        ref="queryForm"
        size="small"
        inline
        class="card"
      >
          <el-form-item :label="$t('自编号')">
            <el-input v-model="queryParams.selfNo" clearable></el-input>
          </el-form-item>
          <el-form-item :label="$t('始发仓')">
            <el-select v-model="queryParams.warehouseId" placeholder="请选择" clearable>
              <el-option
                v-for="item in warehouseList"
                :key="item.id"
                :label="$l(item, 'title')"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
          <el-form-item :label="$t('目的国')">
            <el-select v-model="queryParams.countryId" placeholder="请选择" clearable>
              <el-option
                v-for="item in countryList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
          <el-form-item :label="$t('目的仓')">
            <el-select v-model="queryParams.destinationWarehouseId" placeholder="请选择" clearable>
              <el-option
                v-for="item in warehouseList"
                :key="item.id"
                :label="$l(item, 'title')"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
          <el-form-item :label="$t('自编号状态')">
            <el-select v-model="queryParams.status" placeholder="请选择" clearable>
              <el-option
                v-for="item in DICT_TYPE.SELF_NO_STATUS"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item :label="$t('结算时间')" >
            <el-date-picker
              clearable
              v-model="queryParams.settlementTime"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              align="right"
              value-format="yyyy-MM-dd"
              :picker-options="pickerOptions"
            />
          </el-form-item>
          <el-form-item :label="$t('是否结算')">
            <el-select v-model="queryParams.isSettlement" placeholder="请选择" clearable>
              <el-option
                v-for="item in DICT_TYPE.YES_NO"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              icon="el-icon-search"
              @click="handleQuery"
            >{{$t('查询')}}</el-button>
            <el-button type="primary" icon="el-icon-plus" @click="handleExport">{{$t('导出搜索')}}</el-button>
          </el-form-item>
      </el-form>
    </el-card>
    <el-table v-loading="loadings" :data="list" border class="card">
      <el-table-column :label="$t('是否结算')" align="center" prop="" />
      <el-table-column :label="$t('No.柜号')" align="center" prop="">
        <template slot-scope="scope">
          <el-button v-if="permissions.indexOf('selfno:report:detail') > -1" type="text" @click="$router.push('./selfno_report_detail?id=' + scope.row.id)">{{scope.row.no}}</el-button>
          <span v-else>{{scope.row.no}}</span>
        </template>
      </el-table-column>
      <el-table-column :label="$t('应收款(Accounts receivable)')" align="center" prop=""></el-table-column>
      <el-table-column :label="$t('received in + 目的国国家(目的地实收)')" align="center" prop="">
        <el-table-column :label="$t('运费')"></el-table-column>
        <el-table-column :label="$t('清关费')"></el-table-column>
        <el-table-column :label="$t('额外费用')"></el-table-column>
      </el-table-column>
      <el-table-column :label="$t('received in China(中国实收)')" align="center" prop="" >
        <el-table-column :label="$t('运费')"></el-table-column>
        <el-table-column :label="$t('清关费')"></el-table-column>
        <el-table-column :label="$t('额外费用')"></el-table-column>
      </el-table-column>
      <el-table-column :label="$t('Discounts 折扣')" align="center" prop="">
        <el-table-column :label="$t('运费')"></el-table-column>
        <el-table-column :label="$t('清关费')"></el-table-column>
        <el-table-column :label="$t('额外费用')"></el-table-column>
      </el-table-column>
      <el-table-column :label="$t('操作')" v-if="permissions.indexOf('selfno:report:detail') > -1">
        <template slot-scope="scope">
          <el-button type="text" @click="$router.push('./selfno_report_detail?id=' + scope.row.id)">{{$t('查看')}}</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页组件 -->
    <pagination
      :total="total"
      :page.sync="queryParams.page"
      :limit.sync="queryParams.rows"
      @pagination="getList"
    />
  </div>
</template>

<script>
import { getTradeCityList } from "@/api/ecw/region";
import { getCurrencyPage } from "@/api/ecw/currency";
import {getWarehouseList} from '@/api/ecw/warehouse'
import Template from "@/views/cms/template/index.vue";
import store from "@/store";

export default {
  components: {Template},
  data() {
    return {
      list: [],
      total: 0,
      queryParams: {
        page: 1,
        rows: 20,
      },
      tradeCityList: [],
      currencyList:[],
      warehouseList:[],
      countryList: [],
    };
  },
  activated(){
    this.getList();
  },
  created() {
    getCurrencyPage(this.params).then(res => this.currencyList = res.data.list)
    getTradeCityList().then((res) => (this.tradeCityList = res.data));
    this.getList();
    getWarehouseList().then(res => this.warehouseList = res.data)
  },
  computed: {
    permissions(){
      return store.getters.permissions
    },
    exportCityList() {
      return this.tradeCityList.filter((item) => item.type === 2);
    },
    importCityList() {
      return this.tradeCityList.filter((item) => item.type === 1);
    },
    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: {
    getCurrencyLabel(id){
      const item = this.currencyList.find(item => item.id === id);
      if(!item)return ''
      return this.$l(item, 'title')
    },
    /** 查询列表 */
    getList() {
      this.loading = true;
      let params = {...this.queryParams}
      this.addBeginAndEndTime(params, this.dateType, "createTime");
      // 执行查询
      /* TODO getListApi(params).then((response) => {
        this.list = response.data.list;
        this.total = response.data.total;
        this.loading = false;
      });*/
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.$refs['queryForm'].resetFields()
      this.queryParams.page = 1;
      // TODO 重置结算时间
      this.getList();
    },
    // 导出搜索
    handleExport(){
      // TODO 导出搜索
    }
  },
};
</script>

<style scoped>
.card {
  margin-top: 20px;
}
.dialog-footer {
  padding: 40px;
}
.card-title {
  font-size: 18px;
  font-weight: bold;
  display: inline-block;
}
</style>