<template>
  <div id="UN-data-container">
    <div class="search-zone">
      <el-select v-model="searchParams.IndexCode" placeholder="请选择Commodity Code" filterable clearable
      remote :remote-method="IndexCodeResearch"
      style="width: 286px;margin: 0 0 10px 30px;" @change="searchList">
        <el-option :label="item.IndexCode" :value="item.IndexCode" 
        v-for="item in indexCodeArray" :key="item.IndexCode"></el-option>  
      </el-select>
      <el-select v-model="searchParams.Flow" placeholder="请选择贸易流向" @change="searchList"
      style="margin: 0 0 10px 30px;" clearable>
        <el-option :label="item.label" :value="item.id" v-for="item in flowToData" :key="item.id" ></el-option>
      </el-select>
      <!-- <el-select v-model="searchParams.exportCountry" placeholder="请选择报告国" filterable clearable
      style="width: 286px;margin: 0 0 10px 30px;" multiple collapse-tags @change="(value)=>changeCountry(value,'exportCountry')">
        <el-option :label="item.ThirdId==0?item.Name:item.NameCn" :value="item.ThirdId" v-for="item in countryData" :key="item.code"></el-option>  
      </el-select> -->
      <el-select v-model="searchParams.ReporterCode" placeholder="请选择报告国" filterable clearable
      style="width: 286px;margin: 0 0 10px 30px;" @change="searchList">
        <el-option :label="item.ThirdId==0?item.Name:item.NameCn" :value="item.ThirdId" 
        v-for="item in [...this.countryData.slice(0,1),...this.countryData.slice(2)]" :key="item.code"></el-option>  
      </el-select>
      <!-- <el-select v-model="searchParams.importCountry" placeholder="请选择对手国" filterable clearable
      style="width: 286px;margin: 0 0 10px 30px;" multiple collapse-tags @change="(value)=>changeCountry(value,'importCountry')">
        <el-option :label="item.NameCn" :value="item.ThirdId" 
        v-for="item in [...this.countryData.slice(0,1),...this.countryData.slice(2)]" :key="item.code"></el-option>  
      </el-select> -->
      <el-select v-model="searchParams.PartnerCode" placeholder="请选择对手国" filterable clearable
      style="width: 286px;margin: 0 0 10px 30px;" @change="searchList">
        <el-option :label="item.NameCn" :value="item.ThirdId" 
        v-for="item in countryData" :key="item.code"></el-option>  
      </el-select>
      <el-select v-model="searchParams.Partner2Code" placeholder="请选择第二对手国" filterable clearable
      style="width: 286px;margin: 0 0 10px 30px;" @change="searchList">
        <el-option :label="item.NameCn" :value="item.ThirdId" 
        v-for="item in countryData" :key="item.code"></el-option>  
      </el-select>
      <div style="margin: 0 0 10px 30px;height:40px;display:flex;">
      <el-dropdown split-button type="primary"  @command="handleCommand">
          {{searchParams.DateType===1?'年度':'月度'}}
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item :command="1">年度</el-dropdown-item>
            <el-dropdown-item :command="2">月度</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      <el-date-picker v-model="searchParams.Date" :placeholder="datePlaceholder" style="margin: 0 0 10px 10px;"
      :type="dateType" clearable @change="searchList" :value-format="dateFormat"></el-date-picker>
      </div>
      
    </div>
    <p style="padding-left: 20px;font-size: 16px;color: #999;">更新时间：{{updateTime}}</p>
    <div class="table-zone">
      <el-table :data="tableData" border @sort-change="sortChange" v-loading="tableLoading">
        <el-table-column label="Commodity Code(HS代码)" align="center" show-overflow-tooltip 
        prop="IndexCode">
          <template slot-scope="{row}">
            {{row.IndexCode}}
          </template>
        </el-table-column>
        <el-table-column label="日期" align="center" prop="Date" width="80" sortable="custom">
          <template slot-scope="{row}">
            {{row.Date}}
          </template>
        </el-table-column>
        <el-table-column label="贸易流向" align="center" prop="Flow" width="80">
          <template slot-scope="{row}">
            {{row.Flow}}
          </template>
        </el-table-column>
        <el-table-column label="报告国" align="center" prop="ReporterName"
        show-overflow-tooltip >
          <template slot-scope="{row}">
            {{row.ReporterName}}
          </template>
        </el-table-column>
        <el-table-column label="对手国" align="center" prop="PartnerName"
        show-overflow-tooltip >
          <template slot-scope="{row}">
            {{row.PartnerName}}
          </template>
        </el-table-column>
        <el-table-column label="第二对手国" align="center" prop="Partner2Name"
        show-overflow-tooltip >
          <template slot-scope="{row}">
            {{row.Partner2Name}}
          </template>
        </el-table-column>
        <el-table-column label="ValueCode" min-width="100" align="center" prop="IndexTradeCode">
          <template slot-scope="{row}">
            {{row.IndexTradeCode}}
          </template>
        </el-table-column>
        <el-table-column label="贸易金额(美元)" align="center" width="120" 
        show-overflow-tooltip prop="TradeValue">
          <template slot-scope="{row}">
            {{row.TradeValue}}
          </template>
        </el-table-column>
        <el-table-column label="WeightCode" min-width="110" align="center" prop="IndexNetWeightCode" >
          <template slot-scope="{row}">
            {{row.IndexNetWeightCode}}
          </template>
        </el-table-column>
        <el-table-column label="贸易重量(千克)" align="center" prop="NetWeightValue" width="120" 
        show-overflow-tooltip >
          <template slot-scope="{row}">
            {{row.NetWeightValue}}
          </template>
        </el-table-column>
      </el-table>
    </div>
    <m-page class="table-page" v-if="total"
    :total="total" :pageSize="searchParams.PageSize"
    :page_no="searchParams.CurrentIndex"
    @handleCurrentChange="pageNumberChange"/>
  </div>
</template>

<script>
import mPage from '@/components/mPage.vue'
import { dataInterence } from "@/api/api.js";

  export default {
    name:'UNdata',
    components:{mPage},
    data() {
      this.flowToData=[{id:'M',label:'Import'},{id:'X',label:'Export'}]
      return {
        searchParams:{
          IndexCode:'',
          Year:'',//年份
          Flow:'',
          // exportCountry:[],
          // importCountry:[],
          ReporterCode:'',
          PartnerCode:'',
          Partner2Code:'',
          CurrentIndex:1,
          PageSize:20,
          DateType:1,//日期筛选类型
          Date:'',//日期
          SortParam:'',
          SortType:'',//日期排序
        },
        // 国家数据
        countryData:[],
        // HS代码数据
        indexCodeArray:[],
        updateTime:'',
        tableData:[],
        total:0,
        tableLoading:false
      }
    },
    computed:{
      datePlaceholder(){
        const {DateType} = this.searchParams
        return `请选择${DateType===1?'年份':'月份'}`
      },
      dateType(){
        const {DateType} = this.searchParams
        return `${DateType===1?'year':'month'}`
      },
      dateFormat(){
        const {DateType} = this.searchParams
        return `${DateType===1?'yyyy':'yyyy-MM'}`
      }
    },
    methods: {
      // changeCountry(value,props){
      //   console.log(value,props);
      //   // 全部 是单选 其他是多选
      //   if(value[value.length-1]==-1){
      //     // 最后一个是全部 有其他选项是点击全部
      //     this.searchParams[props]=[-1]
      //   }else if(value[0]==-1){
      //     // 第一个是全部 点击全部之后再点击其他选项
      //     this.searchParams[props]=value.slice(1)
      //   }
      //   this.searchList()
      // },
      //获取UN数据列表
      getList(){
        this.tableLoading = true
        dataInterence.getUNCodeData(this.searchParams).then(res=>{
          if(res.Ret == 200){
            // console.log(res);
            this.tableData=res.Data.List || []
            this.total=res.Data.Paging.Totals || 0
            this.updateTime=res.Data.LastUpdateTime
            this.tableLoading = false
          }
        })
      },
      // 获取国家列表
      getCountryList(){
        dataInterence.getUNCountryData().then(res=>{
          if(res.Ret==200){
            this.countryData=res.Data||[]
          }
        })
      },
      // IndexCode搜索方法
      IndexCodeResearch(value){
        // console.log(value);
        dataInterence.getIndexCodeData({Keyword:value}).then(res=>{
          // console.log(res.Data);
          if(res.Ret == 200){
            this.indexCodeArray=res.Data || []
          }
        })
      }, 
      searchList(){
        this.searchParams.CurrentIndex=1
        // console.log(this.searchParams);
        this.getList()
      },
      pageNumberChange(page_no){
        this.searchParams.CurrentIndex=page_no
        this.getList()
      },
      //切换年月日期
      handleCommand(command){
        this.searchParams.DateType = command
        this.searchParams.Date=''
        this.searchParams.CurrentIndex=1
        this.getList()
      },
      sortChange({prop,order}){
        this.searchParams.SortType = order==='ascending'?'asc':'desc'
        this.searchParams.SortParam = order?'data_time':''
        
        this.getList()
      }
    },
    created() {
      this.getList()
      this.getCountryList()
    },
  }
</script>

<style lang="scss" scoped>
  #UN-data-container{
    background-color: white;
    min-height: calc(100vh - 110px);
    position: relative;
    padding-bottom: 50px;
    box-sizing: border-box;
    .search-zone{
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      padding: 20px 20px 10px;
      margin-left: -30px;
    }
    .table-zone{
      padding: 20px;
    }
    .table-page{
      position: absolute;
      bottom: 20px;
      right: 20px;
    }
  }
</style>