<template>
  <div class="app-container">
    <div class="filter-container">
      <div class="container_item">
        <span class="item_text">客户名称：</span>
        <el-input v-model="query.title" style="width: 130px;" class="filter-item input_item"  />
      </div>
      <div class="container_item">
        <span class="item_text">抵(质)押品大类：</span>
        <el-select v-model="query.colCodeLarge" @change="queryChange" placeholder="请选择" style="width: 130px;" class="filter-item input_item" >
          <el-option
            v-for="item in categoryList"
            :key="item.colCode"
            :label="item.chineseName"
            :value="item.colCode">
          </el-option>
        </el-select>
      </div>
      <div class="container_item">
        <span class="item_text">抵(质)押品细类：</span>
        <el-select v-model="query.colCodeSmall"  placeholder="请选择" style="width: 130px;" class="filter-item input_item" >
          <el-option
            v-for="item in smallList"
            :key="item.colCode"
            :label="item.chineseName"
            :value="item.colCode">
          </el-option>
        </el-select>
      </div>
      <el-button v-waves class="filter-item" type="primary" icon="el-icon-my-search" @click="handleSearch">
        {{ $t('table.search') }}
      </el-button>
      <!-- <el-button v-waves class="filter-item add_plus" type="primary" icon="el-icon-plus" @click="handleCreate">
        {{ $t('table.add') }}
      </el-button> -->
    </div>
    <div class="wrapper_table">
      <el-table
        :data="tableData"
        fit
        stripe
        class="numtable"
        highlight-current-row
        style="width: 100%;"
        :header-cell-class-name="headerStyle"
        :max-height="tableHeight"
        :cell-style="{ textAlign: 'left' }"
        :header-cell-style="{textAlign: 'left'}"
      >
        <el-table-column prop="custCode" :label="$t('levy.custCode')" align="left" ></el-table-column>
        <el-table-column prop="custName" width="150" :label="$t('levy.custName')" align="left">
          <template slot-scope="scope">
            <div>
              <el-tooltip v-if="scope.row.custName.length>10" class="item" effect="dark" :content="scope.row.custName" placement="top">
                <span class="tab_span">{{scope.row.custName}}</span>
              </el-tooltip>
              <span v-else>{{scope.row.custName}}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="colCode" :label="$t('levy.colCode')"  align="left"></el-table-column>
        <el-table-column prop="colChineseName" :label="$t('levy.colName')"  align="left"></el-table-column>
        <el-table-column prop="unitPrice" :label="$t('levy.unitPriceNew')" align="left">
            <template slot-scope="scope">
              <div>
                {{scope.row.unitPrice|numberToCurrency}}
              </div>
            </template>
        </el-table-column>
        <el-table-column prop="availableBalance" :label="$t('levy.availableBalance1')" align="left" >
           <template slot-scope="scope">
              <div>
                {{scope.row.currencyCode }} {{scope.row.availableBalance|numberToCurrency}}
              </div>
            </template>
        </el-table-column>
        <el-table-column :label="$t('table.actions')" align="left"  width="280" class-name="small-padding ">
          <template slot-scope="scope">
            <div class="but_list">
                <el-button v-waves class="" type="text" icon="el-icon-my-xiangqing" @click="details(scope.row.id,1)">
                  详情
                </el-button>
                <el-button v-waves class="" type="text" icon="el-icon-my-biangeng" @click="details(scope.row.id,2)">
                  <span >连接批复书</span>
                </el-button>
                <el-button v-waves class="" type="text" icon="el-icon-my-modify" @click="details(scope.row.id,2)">
                  <span >修改</span>
                </el-button>
                <el-button v-waves class="" type="text" icon="el-icon-my-del-y"  @click="details(scope.row.id,5)">
                  <span >删除</span>
                </el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <pagination v-show="total>0" :total="total" :page.sync="pageNum" :limit.sync="pageSize" @pagination="getData" />


    <el-dialog
    title="抵(质)押品品质"
    :visible.sync="dataFormVisible"
    v-el-drag-dialog
    :close-on-click-modal="false"
    width='1260px'>
      <det
        :type="operationType"
        :data="formLabelAlign"
        @cancelButDet="cancelButDet"
        v-if="DestroyIncomeStatistics == true"
        ref="IncomeStatisticsChild"
      ></det>
    </el-dialog>
  </div>
</template>

<script>
import elDragDialog from '@/directive/el-drag-dialog'
import waves from '@/directive/waves' // waves directive
import { number_format } from '@/utils'
import Pagination from '@/components/Pagination' // secondary package based on el-pagination
import http from '@/api/http'
import det from './detailsColl.vue'
export default {
  name: '',
  components: { Pagination,det },
  directives: { waves, elDragDialog },
  data() {
    return {
      total: 0,
      query: {},
      tableHeight: 0,
      formLabelAlign:{},
      tableData:[],
      pageNum:1,
      pageSize:20,
      options:[],
      categoryList:[],
      subclassData:[],
      currencyData:[],
      currentType:'1',
      currencyList:[],
      dataFormVisible:false,
      getByColData:[],
      warehouseFormVisible:false,
      operationType:'',
      radio:'',
      smallList:[],
      DestroyIncomeStatistics:false
    }
  },
  watch: {
    $route(newValue, oldValue){
      this.getClassify()
    },
  },
  created() {
    this.getClassify()
    // this.getOptions()
    this.getCategory()
    // this.getCurrency()
  },

  mounted() {
    this.$nextTick(() => {
      this.tableHeight = window.innerHeight - 240
    })
  },
  methods: {
    getClassify(){
      this.tableData = []
      this.total = 0;
      this.pageNum = 1;
      switch (this.$route.path) {
          case '/collateralandreply': this.currentType = '1'; break;
          case '/changeofreply':this.currentType = '2';break;
          default: break;
      }
      this.getData();
    },
    getData(){
      console.log(this.currentType);
       http.post(`/colLevy/list`,{cpage:this.pageNum,pageSize:this.pageSize,...this.query}).then((res)=>{
          this.tableData = res.data.list;
          this.total = res.data.total || 0;
        }).catch(err=>{});
    },

    getOptions(){
      http.post(`/cust/queryLists`,{cpage:1,pageSize:999}).then((res)=>{
        this.options = res.data.list;
      }).catch(err=>{});
    },
    getCategory(){
      http.post(`/collateral/list`,{code:0}).then((res)=>{
          this.categoryList = res.data;
      }).catch(err=>{});
    },
    categoryChange(code){
      http.post(`/collateral/list`,{code}).then((res)=>{
          this.subclassData = res.data;
      }).catch(err=>{});
    },
    getCurrency(){
      http.post(`/share/currency/queryList`,{cpage:1,pageSize:99}).then((res)=>{
        this.currencyList = res.data.list;
      }).catch(err=>{});
    },
    handleSearch(){
      this.pageNum = 1
      this.getData()
    },
    details(id,type){
      this.formLabelAlign = {}
        this.operationType = type
        this.DestroyIncomeStatistics = false;
        http.post(`/colLevy/getId`,{id}).then((res)=>{
          this.DestroyIncomeStatistics = true;
          this.formLabelAlign = res.data;
          this.categoryChange(res.data.colCodeLarge)
          for(let item of this.options){
            if(item.custCode==res.data.custCode){
              this.formLabelAlign.custCodeId = item.id
            }
          }
          // if(type==1||type==2){
            this.dataFormVisible = true
          // }else{
          //   this.warehouseFormVisible = true
          // }
        }).catch(err=>{});
        // http.post(`/liabilityCol/getByCol`,{id}).then((res)=>{
        //   this.getByColData = res.data
        // }).catch(err=>{});
    },
    headerStyle() {
      return 'tableStyle'
    },
    formatNum(str){
     return number_format(str)
    },

    queryChange(code){
      http.post(`/collateral/list`,{code}).then((res)=>{
          this.smallList = res.data;
      }).catch(err=>{});
    },
    cancelButDet(t){
      if(t==1){ this.getData()}
      this.dataFormVisible=false
    },
  }
}
</script>
<style  lang='scss' scoped>
  .el-table__header-wrapper{
    border-radius: 10px 10px 0 0;
  }
.but_list{
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  .but-item{
    display: flex;
    align-items: center;
    margin-right: 6px;
    cursor: pointer;
    img{
      width: 12px;
      height: 14px;
    }
    span{
      font-size: 12px;
      font-family: PingFang SC;
      font-weight: bold;
      color: #3D5596;
      margin-left: 2px;
    }
  }
}
.total_collateral{
  width: 100%;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 200px;
  margin-top: 22px;
  background: linear-gradient(180deg, rgba(149,185,250,.2), rgba(86,131,212,.2));
  box-shadow: 0px 1px 4px 0px #9CA7C5, 0px 0px 0px 0px #C3D9FF, 0px 0px 0px 0px #C3D9FF, 0px 2px 6px 0px rgba(15, 22, 45, 0.18);
}
// .add_plus{
    // background: #8E8E8E;
    // // background-size: 100% 100% !important;
    // width: 76px !important;
    // height: 28px !important;
    // border: none !important;
    // box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.35);
    // span{
    //   font-size: 12px;
    //   font-family: "SourceHanSansCN";
    //   font-weight: 500;
    //   color: #FFFFFF;
    //   margin-left:0px !important;
    // }
    // .el-icon-plus{
    //   color:#8E8E8E!important;
    // };

// }
</style>
<style lang="css">
  .dialog_top  .el-input__inner{
    width: 184px !important;
    box-shadow:0px -1px 2px 0px rgb(0 0 0 / 40%) !important;
    border-radius:2px !important;
  }
</style>
