<template>
  <div class="app-container">
    <div class="filter-container">
      <div class="container_item">
        <span class="item_text">{{$t('levy.custName')}}:</span>
        <el-input v-model="query.custName" style="width: 120px;" 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: 100px;" 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="请选择" @change="forceInput" style="width: 100px;" 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>
      <div class="container_item">
        <span class="item_text">{{$t('levy.status')}}:</span>
        <el-select v-model="query.status" class="filter-item " style="width: 100px;" placeholder="请选择">
          <el-option
            v-for="item in fList"
            :key="item.code"
            :label="item.desc"
            :value="item.code">
          </el-option>
        </el-select>
      </div>
      <el-button v-waves class="filter-item" type="primary" style="margin-right:10px;" icon="el-icon-my-search" @click="handleSearch">
        {{ $t('table.search') }}
      </el-button>
      <el-button v-waves class="filter-item" type="primary" style="margin-right:10px;" icon="el-icon-my-reset" @click="query={};smallList=[];handleSearch()">
        {{ $t('table.reset') }}
      </el-button>
      <el-button v-waves v-if="currentType==1 && permission.includes('levylist_add')" class="filter-item add_plus" type="primary" icon="el-icon-my-add" @click="handleCreate(0)">
        {{ $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"
        @row-click="handleTab"
      >
        <el-table-column prop="custCode" :label="$t('levy.custCode')" show-overflow-tooltip align="left" ></el-table-column>
        <el-table-column prop="custName" show-overflow-tooltip :label="$t('levy.custName')" align="left"></el-table-column>
        <el-table-column prop="colCode" :label="$t('levy.colCode')" show-overflow-tooltip align="left"></el-table-column>
        <el-table-column prop="colCodeLargeName" :label="$t('levy.colCodeLarge')" show-overflow-tooltip align="left"></el-table-column>
        <el-table-column prop="colCodeSmallName" :label="$t('levy.colCodeSmall')" show-overflow-tooltip align="left"></el-table-column>
        <el-table-column prop="status" :label="$t('levy.status')" align="left" width="80">
          <template slot-scope="scope">
            <div>
              {{getStatus(scope.row.status)}}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="unitPrice" :label="$t('levy.unitPriceNew')" min-width="110" show-overflow-tooltip align="rigth">
            <template slot-scope="scope">
              <div style="text-align: end;">
                {{scope.row.latestPrice|numberToCurrency}}
              </div>
            </template>
        </el-table-column>
        <el-table-column prop="availableBalance" :label="$t('levy.availableBalance1')" show-overflow-tooltip align="left" >
           <template slot-scope="scope">
              <div style="text-align: end;">
                {{scope.row.toplimitPrice-scope.row.loanAmount|numberToCurrency}}
              </div>
            </template>
        </el-table-column>

        <el-table-column prop="" :label="$t('table.actions')" width="100" align="left" v-if="currentType==1" >
          <template slot-scope="scope">
            <div class="but_list">
                <el-button v-if="permission.includes('levylist_detail')" v-waves class="" type="text" icon="el-icon-my-xiangqing" @click="details(scope.row.id,1, 1)">
                  {{$t('table.details')}}
                </el-button>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="" :label="$t('table.actions')" align="left" width="350"  v-if="currentType!=1" >
          <template slot-scope="scope">
            <div class="but_list">
              <!-- 详情：
                  任何状态都能看
                  变更：
                  status=1有效 isLock=0(是否锁住1是0否) 才能变更
                  连接批复书：
                  status=1有效，isLock=0(是否锁住1是0否) ，并且 available_balance(担保品可用余额) 大于0 才能连接批复书
                  出库：
                  status=1，并且 available_balance(担保品可用余额) 等于 toplimit_price(担保品提征上限金额) 才能出库
                  回笼：
                  只有临时出库状态才能回笼 -->
                <el-button v-if="permission.includes('evy_change_detail')" v-waves class="" type="text" icon="el-icon-my-xiangqing" @click="details(scope.row.id,1, 1)">
                  {{$t('table.details')}}
                </el-button>
                  <el-button  v-if="permission.includes('evy_change_alter')" v-waves class="" type="text" 
                  :icon="scope.row.status==1&&scope.row.isLock==0?'el-icon-my-biangeng':'el-icon-my-biangeng2'" @click="scope.row.status==1&&scope.row.isLock==0?details(scope.row.id,2,2):''">
                  <span :style="{color:scope.row.status==1&&scope.row.isLock==0?'#118B5F':'#8E8E8E'}">{{$t('table.change')}}</span>
                  <!-- <el-button v-waves class="" type="text" :icon="scope.row.status==1&&scope.row.isLock==0?'el-icon-my-biangeng':'el-icon-my-biangeng2'" @click="scope.row.status==1&&scope.row.isLock==0?details(scope.row.id,2):''">
                  <span :style="{color:scope.row.status==1&&scope.row.isLock==0?'#3D5596':'#8E8E8E'}">{{$t('table.change')}}</span> -->
                </el-button>
                <el-button v-if="permission.includes('evy_change_link_reply')" v-waves class="" type="text" :icon="scope.row.status==1&&scope.row.isLock==0?'el-icon-my-connect':'el-icon-my-connectGray'" @click="scope.row.status==1&&scope.row.isLock==0?details(scope.row.id,6,3):''">
                  <span :style="{color:scope.row.status==1&&scope.row.isLock==0?'#525FDB':'#8E8E8E'}">{{$t('table.replyLink')}}</span>
                </el-button>
                <el-button v-if="permission.includes('evy_change_warehouse')" v-waves class="" type="text" 
                :icon="scope.row.status==1&&scope.row.availableBalance==scope.row.toplimitPrice&&scope.row.isLock==0?'el-icon-my-chuku':'el-icon-my-chuku2'"  @click="scope.row.status==1&&scope.row.availableBalance==scope.row.toplimitPrice&&scope.row.isLock==0?details(scope.row.id,3,4):''">
                  <span :style="{color:scope.row.status==1&&scope.row.availableBalance==scope.row.toplimitPrice&&scope.row.isLock==0?'#8169DB':'#8E8E8E'}">{{$t('table.Exwarehouse')}}</span>
                </el-button>
                <el-button v-if="permission.includes('evy_change_return')" v-waves class="" type="text" 
                :icon="scope.row.status==3&&scope.row.isLock==0?'el-icon-my-huilong':'el-icon-my-huilong2'"  @click="scope.row.status==3&&scope.row.isLock==0?details(scope.row.id,4,5):''">
                  <span :style="{color:scope.row.status==3&&scope.row.isLock==0?'#D46E01':'#8E8E8E'}">{{$t('table.Return')}}</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="dialogStatus | tltleFilter"
      :visible.sync="dialogFormVisible"
      v-el-drag-dialog
      :close-on-click-modal="false"
      width='1130px'>
        <add :data="formLabelAlign" :key="formLabelAlign.enterpriseId" v-if="DestroyIncomeStatistics== true" @cancelButAdd="cancelButAdd" :draft='0'></add>
    </el-dialog>

<!-- 详情 变更 回笼 -->
    <el-dialog
      :title="dialogStatus | tltleFilter"
      @close="deldrData"
      :visible.sync="dataFormVisible"
      :close-on-click-modal="false"
      width='1230px' >
      <det
        :draft='0'
        :type="operationType"
        :data="formLabelAlign"
        :key="formLabelAlign.id"
        @cancelButDet="cancelButDet"
        v-if="DestroyIncomeStatistics == true"
      ></det>
    </el-dialog>
<!--  连接批复书 -->
    <el-dialog
    :title="dialogStatus | tltleFilter"
    :visible.sync="warehouseFormVisible"
    :close-on-click-modal="false"
    width='1260px'>
      <war
        :type="operationType"
        :data="formLabelAlign"
        @cancelButWar="cancelButWar"
        v-if="DestroyIncomeStatistics == true"
        ></war>
    </el-dialog>
  </div>
</template>

<script>
import elDragDialog from '@/directive/el-drag-dialog'
import { mapGetters } from 'vuex'
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 add from './addCollateral.vue'
import det from './detailsColl.vue'
import war from './warehouse.vue'

export default {
  name: '',
  components: { Pagination,add,det,war },
  directives: { waves, elDragDialog },
  computed: {
    ...mapGetters([
      'permission',
    ])
  },
  data() {
    return {
      dialogStatus: undefined,
      total: 0,
      query: {},
      dialogFormVisible: false,
      tableHeight: 0,
      formLabelAlign:{},
      tableData:[],
      pageNum:1,
      pageSize:20,
      options:[],
      categoryList:[],
      subclassData:[],
      currencyData:[],
      currentType:'1',
      currencyList:[],
      dataFormVisible:false,
      // getByColData:[],
      warehouseFormVisible:false,
      operationType:'',
      radio:'',
      coustHand:true,
      smallList:[],
      fList:[{desc:'有效',code:'1'},{desc:'临时出库',code:'3'},{desc:'出库',code:'9'}],
      statusList:[{desc:'有效',code:'1'},{desc:'临时出库',code:'3'},{desc:'冻结',code:'4'},{desc:'终止',code:'6'},{desc:'无效',code:'8'},{desc:'出库',code:'9'}],
      writtenList:[],
      DestroyIncomeStatistics:false,
      oldcust:false,
      isdel:true
    }
  },
  filters: {
    tltleFilter(status) {
      const titleMap = {
        0: '抵(质)押品新增',
        1: '抵(质)押品详情',
        2: '抵(质)押品变更',
        3: '抵(质)押品连接批复书',
        4: '抵(质)押品出库',
        5: '抵(质)押品回笼',
      }
      return titleMap[status]
    }
  },
  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 '/levylist': this.currentType = '1'; break;
          case '/levychange':this.currentType = '2';break;
          default: break;
      }
      this.getData();
    },
    getData(paging){
      if(paging){
        this.pageSize = paging.pageSize
        this.pageNum = paging.pageNum
      }
      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=>{});
    },
    queryChange(code){
      this.smallList = []
      http.post(`/collateral/list`,{code}).then((res)=>{
          this.smallList = res.data;
          this.query.colCodeSmall = ''

      }).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()
    },
    custCodeChange(data){
      for(let item of this.options){
        if(item.id==data){
          this.formLabelAlign.orgCode = item.orgCode
          this.formLabelAlign.orgId = item.orgId
          // this.formLabelAlign.enterPname = item.enterPname
          this.formLabelAlign.custName = item.custName
          this.formLabelAlign.enterpriseId = item.id
          this.formLabelAlign.custCode = item.custCode
          this.$forceUpdate()
        }
      }
    },
    handleCreate(status) {
      this.dialogStatus = status
      this.DestroyIncomeStatistics = false
      setTimeout(()=>{
        if(!this.oldcust){
          this.formLabelAlign = {}
          this.formLabelAlign = {
            auditStatus:'1',
            loanAmount : '0.00',
            processStatus : 1
          }
          this.$forceUpdate()
        }
        this.oldcust = false
        // console.log(this.formLabelAlign);
        this.$forceUpdate()
        this.DestroyIncomeStatistics = true;
        this.dialogFormVisible = true
      },100)

    },
    details(id,type,status){
      this.dialogStatus = status
      this.formLabelAlign = {}
      this.DestroyIncomeStatistics = false;
      if(this.currentType==1&&type==1||this.currentType>1){
        this.operationType = type
        let url = '',par;
        if(type==1||type==3||type==4){
            url = `/colLevy/getId`
            par = { id }
        }else{
           url = `/colLevy/getDraftId`
           par = {
              id,
              number:type==2?2:0
            }
        }
        http.post(url,par).then((res)=>{

          this.formLabelAlign = res.data;
          this.formLabelAlign.levyToplimitNum = (res.data.levyToplimit*100)
          this.formLabelAlign.custCodeId = res.data.enterpriseId
          if(type==1||type==2||type==6){
            this.isdel = true
            setTimeout(()=>{this.dataFormVisible = true},100)
          }else{
            setTimeout(()=>{this.warehouseFormVisible = true},100)
          }
          this.DestroyIncomeStatistics = true;
        }).catch(err=>{});

      }
    },

    headerStyle({ row, column, rowIndex, columnIndex }) {
        if (columnIndex === 6||columnIndex === 7) {
          return 'tableStyle right-align'
        }
      return 'tableStyle'
    },

    handleTab(row,column,cell,event) {
      this.formLabelAlign = {}
      this.oldcust = false
      try {
        if(column.property!=undefined&&this.currentType==1){
          this.oldcust = true
          this.formLabelAlign = {
            custCodeId:row.enterpriseId,
            loanAmount : '0.00',
            processStatus:1,
            orgCode:row.orgCode,
            orgId : row.orgId,
            custName : row.custName,
            enterpriseId : row.enterpriseId,
            custCode : row.custCode,
            coustHand:true,
            auditStatus:'1',
          }
        }
      } catch (error) {

      }
      // console.log(this.formLabelAlign);
      this.$forceUpdate()

    },
    cancelButAdd(t){
      if(t==1){ this.getData()}
      this.dialogFormVisible=false
    },
    cancelButDet(t){
       console.log(22);
      if(t==1){ this.isdel=false; this.getData()}
      this.dataFormVisible=false
    },
    cancelButWar(t){

      if(t==1){ this.getData()}
      this.warehouseFormVisible=false
    },
    getStatus(a){
      for(let item of this.statusList){
        if(item.code==a){
          return item.desc
        }
      }
    },
    forceInput(){
      this.$forceUpdate()
    },
    deldrData(){
      if(this.operationType==2&&this.isdel||this.operationType==6&&this.isdel){
        http.post(`/colLevyDraft/delDraft`,{id:this.formLabelAlign.id}).then((res)=>{

        }).catch(err=>{});
      }
    }
  }
}
</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);
}

</style>
<style lang="css" scope>
  .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>
