<template>
    <div>
          <div class="dia_body">
        <div class="dialog_top" style="width:100%">
          <div class="dia_title">基础信息</div>
          <div style="margin-top: 10px;padding-left: 40px;">
            <el-form label-position="right" label-width="120px" :model="formLabelAlign">
              <el-form-item :label="$t('levy.orgCode')+'：'" class="unabled is-disabled" >
                <el-input v-model="formLabelAlign.orgCode" :disabled="true"></el-input>
              </el-form-item>
              <el-form-item :label="$t('levy.custCode')+'：'" class="unabled is-disabled">
                <el-select v-model="formLabelAlign.custCodeId" disabled @change="custCodeChange" placeholder="请选择">
                  <el-option
                    v-for="(item) in options"
                    :key="item.id"
                    :label="item.custCode"
                    :value="item.id">
                  </el-option>
                </el-select>
                <!-- <el-input v-model="formLabelAlign.region"></el-input> -->
              </el-form-item>
              <el-form-item :label="$t('levy.custName')+'：'" class="unabled is-disabled">
                <el-input v-model="formLabelAlign.custName" :disabled="true"></el-input>
              </el-form-item>
              <el-form-item :label="$t('levy.colSpec')+'：'" class="unabled is-disabled">
                <el-input type="textarea" :rows="3" v-model="formLabelAlign.colSpec" :disabled="true"></el-input>
              </el-form-item>
            </el-form>
          </div>
          <div style="margin-top: 10px;">
            <el-form label-position="right" label-width="190px" :model="formLabelAlign">
            <el-form-item :label="$t('levy.colCodeLarge')+'：'" class="unabled is-disabled">
             <el-select v-model="formLabelAlign.colCodeLarge" disabled @change="categoryChange" placeholder="请选择">
                <el-option
                  v-for="item in categoryList"
                  :key="item.colCode"

                  :label="item.colCode+'-'+item.chineseName"
                  :value="item.colCode">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item :label="$t('levy.colCodeSmall')+'：'" class="unabled is-disabled">
              <el-select v-model="formLabelAlign.colCodeSmall" disabled placeholder="请选择">
                <el-option
                  v-for="item in subclassData"
                  :key="item.colCode"
                  disabled
                  :label="item.colCode+'-'+item.chineseName"
                  :value="item.colCode">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item :label="$t('levy.colCode')+'：'"  class="unabled is-disabled">
              <el-input  v-model="formLabelAlign.colCode" disabled></el-input>
            </el-form-item>
            <el-form-item :label="$t('levy.colDetail')+'：'" class="unabled is-disabled">
                <el-input type="textarea" :rows="3" v-model="formLabelAlign.colDetail" :disabled="true"></el-input>
            </el-form-item>
          </el-form>
          </div>
          <div style="margin-top: 10px;">
            <el-form label-position="right" label-width="190px" :model="formLabelAlign">
            <el-form-item  :label="$t('levy.processStatus')+'：'" class="unabled is-disabled">
                <!-- <el-select v-model="formLabelAlign.status" :disabled="true"  @change="custCodeChange" placeholder="请选择">
                  <el-option
                    v-for="item in statusList"
                    :key="item.code"
                    :label="item.desc"
                    :value="item.code">
                </el-option>
                </el-select> -->
                <el-input :value="getStatus(formLabelAlign.status)" style="width:184px" :disabled="true"></el-input>
            </el-form-item>
            <el-form-item :label="$t('levy.startDate')+'：'" class="unabled is-disabled">
              <el-date-picker
                v-model="formLabelAlign.startDate"
                type="date"
                style="width:186px"
                disabled
                value-format="yyyy-MM-dd"
                placeholder="选择日期">
              </el-date-picker>
            </el-form-item>
            <el-form-item :label="$t('levy.endDate')+'：'" class="unabled is-disabled">
              <el-date-picker
                v-model="formLabelAlign.endDate"
                type="date"
                disabled
                value-format="yyyy-MM-dd"
                style="width:186px"
                placeholder="选择日期">
              </el-date-picker>
            </el-form-item>
          </el-form>
          </div>
        </div>
        <div class="dialog_top" style="margin-top: 10px;width:100%">
          <div class="dia_title" style="height:168px;">抵(质)押品金额</div>
          <div style="margin-top: 10px;padding-left: 40px;">
            <el-form label-position="right" label-width="120px" :model="formLabelAlign">
            <el-form-item :label="$t('levy.colQuantity')+'：'" class="unabled is-disabled">
              <el-input v-model="formLabelAlign.colQuantity" disabled  style="width:186px"></el-input>
            </el-form-item>
            <el-form-item :label="$t('levy.colUnit')+'：'" class="unabled is-disabled">
              <el-input v-model="formLabelAlign.colUnit" disabled style="width:186px"></el-input>
            </el-form-item>
            <el-form-item :label="$t('levy.currencyCode')+'：'" class="unabled is-disabled">
              <el-select v-model="formLabelAlign.currencyCode" disabled placeholder="请选择">
                <el-option
                  v-for="item in currencyList"
                  :key="item.id"
                  style="width:186px"
                  :label="item.currencyCode"
                  :value="item.currencyCode">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item :label="$t('levy.unitPrice')+'：'" class="unabled is-disabled">
              <cinput v-model="formLabelAlign.unitPrice" disabled style="width:186px"></cinput>
            </el-form-item>
          </el-form>
          </div>
          <div style="margin-top: 10px;">
            <el-form label-position="right" label-width="190px" :model="formLabelAlign">
              <el-form-item :label="$t('levy.latestPrice')+'：'" class="unabled is-disabled">
                <cinput v-model="formLabelAlign.initialPrice"  :disabled="true"></cinput>
              </el-form-item>
              <el-form-item :label="$t('levy.unitPriceNew')+'：'" class="unabled is-disabled">
                <cinput v-model="formLabelAlign.latestPrice" :disabled="true"></cinput>
              </el-form-item>
              <el-form-item :label="$t('levy.levyToplimitOriginal')+'(%)：'" class="unabled is-disabled">
                <el-input v-model="formLabelAlign.levyToplimitNum" disabled @blur="levyLimit"></el-input>
              </el-form-item>
              <el-form-item :label="$t('levy.toplimitPrice')+'：'" class="unabled is-disabled">
                <cinput v-model="formLabelAlign.toplimitPrice" :disabled="true"></cinput>
              </el-form-item>
            </el-form>
          </div>
          <div style="margin-top: 10px;">
            <el-form label-position="right" label-width="190px" :model="formLabelAlign">

              <el-form-item :label="$t('levy.guarantee')+'：'" class="unabled is-disabled">
                <el-input :value="(formLabelAlign.toplimitPrice-formLabelAlign.availableBalance)|numberToCurrency"  :disabled="true"></el-input>
              </el-form-item>
              <el-form-item :label="$t('levy.availableBalance')+'：'" class="unabled is-disabled">
                <cinput :value="(formLabelAlign.toplimitPrice-formLabelAlign.loanAmount)|numberToCurrency" :disabled="true"></cinput>
              </el-form-item>
            </el-form>
          </div>
        </div>
        <div style="width: 560px;margin-top: 20px;padding-left: 40px;" v-if="operationType==3">
          <el-form label-position="right" label-width="150px" :model="formLabelAlign">
            <el-form-item label="类型：" >
              <el-radio-group v-model="radio">
                <el-radio :label="1">临时出库</el-radio>
                <el-radio :label="2">正式出库</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item :label="$t('levy.descrip')+'：'"  class="require">
              <el-input type="textarea" :rows="2" v-model="formLabelAlign.descrip" ></el-input>
            </el-form-item>
          </el-form>
        </div>
        <div style="width: 560px;margin-top: 20px;" v-if="operationType==4">
          <el-form label-position="right" label-width="150px" :model="formLabelAlign">
            <el-form-item :label="$t('levy.status')+'：'" >
              回笼
            </el-form-item>
          </el-form>
        </div>
        <div class="dialog-footer but_icon">
            <el-button v-waves class="filter-item flex_align" type="primary" icon="el-icon-my-tijiao" @click="deliveryandreturn(operationType)">
                {{ $t('table.sbumit') }}
            </el-button>
            <el-button v-waves class="filter-item flex_align" type="primary" icon="el-icon-my-quxiao" @click="cancelButWar">
                {{ $t('table.cancel') }}
            </el-button>
        </div>
        <div class="wrapper_table" v-if="getByColData.length>0">
          <el-table
            :data="getByColData"
            fit
            stripe
            class="numtable"
            highlight-current-row
            style="width: 100%;"
            :header-cell-class-name="headerStyle"
            :header-cell-style="{fontSize:'12px'}"
            max-height="300"
          >
            <el-table-column prop="certificateCode" width="140"  :label="$t('levy.pfsid')" align="left" >
              <template slot-scope="scope">
                  <div style="display: flex;justify-content: space-between;align-items: center;">
                        <div>
                          <el-tooltip class="item" effect="dark" :content="scope.row.certificateCode" placement="top-start">
                            <span style="display: inline-block;width: 100px;padding-top: 3px;" class="nowrap">{{scope.row.certificateCode}}</span>
                          </el-tooltip>
                        </div>
                        <el-button style="margin-left: 4px;" @click="viewdetails(scope.row)" v-if="scope.row.certificateCode" type="text">详情</el-button>
                  </div>
              </template>
            </el-table-column>
            <el-table-column prop="" width="120" show-overflow-tooltip :label="$t('levy.colLevy')" align="left">
              <template>
                <div>
                  {{formLabelAlign.colCodeSmall}}
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="" width="120" show-overflow-tooltip :label="$t('levy.collateralType')"  align="left">
                {{formLabelAlign.colCodeLargeName}}-{{formLabelAlign.colCodeSmallName}}
            </el-table-column>
            <el-table-column prop="colCode" show-overflow-tooltip width="120" :label="$t('levy.pcolCode')"  align="left">
              <template>
                <div>
                  {{formLabelAlign.colCode}}
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="startDate"  show-overflow-tooltip width="120" :label="$t('levy.pstartDate')"  align="left">
              <template slot-scope="scope">

                <div v-if="scope.row.startDate">
                  {{formatTime(scope.row.startDate)}}
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="endDate" width="120" show-overflow-tooltip :label="$t('levy.pendDate')" align="left">
              <template slot-scope="scope">
                <div  v-if="scope.row.endDate">
                  {{formatTime(scope.row.endDate)}}
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="collateralType" width="110" show-overflow-tooltip :label="$t('levy.approvalcredit')" align="left" >
                <template slot-scope="scope">
                    <div>
                        <span v-if="scope.row.collateralType==1">全额担保</span>
                        <span v-if="scope.row.collateralType==2">纯信用</span>
                        <span v-if="scope.row.collateralType==3">担保信用混合模式</span>
                    </div>
                </template>
            </el-table-column>
            <el-table-column prop="overalLimit" width="170" show-overflow-tooltip :label="$t('levy.amountapproval')" align="left" >
              <template slot-scope="scope">
                <div v-if="scope.row.liabilityBalance">
                  {{scope.row.currencyCode }} {{(Number(scope.row.liabilityBalance) + Number(scope.row.setAmount)) |numberToCurrency}}
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="" width="170"  label="批复书设质后尚待担保余额" align="left" >
              <template slot-scope="scope">
                <div >
                   {{scope.row.currencyCode }} {{(scope.row.liabilityBalance) |numberToCurrency}}
                </div>
              </template>
            </el-table-column>
            <!-- <el-table-column prop="colPercent" :label="$t('levy.percentageGuarantee')" align="left" >
              <template slot-scope="scope">
                <div v-if="scope.row.colPercent>0">
                  {{(scope.row.colPercent *100)+'%'}}
                </div>
              </template>
            </el-table-column> -->
            <el-table-column prop="setAmount" width="120" show-overflow-tooltip :label="$t('levy.pledgeCollateral')" align="left" >
              <template slot-scope="scope">

                <div >
                    {{formLabelAlign.currencyCode}} <span v-if="scope.row.setAmount">{{scope.row.setAmount|numberToCurrency}}</span>
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="exchangeRate" show-overflow-tooltip :label="$t('levy.exchange')" align="left" >
                <template slot-scope="scope">

                    <div >
                    {{scope.row.exchangeRate}}
                    </div>
                </template>
            </el-table-column>
            <el-table-column prop="rateSetAmount" width="150" show-overflow-tooltip  :label="$t('levy.equivalent')" align="left" >
              <template slot-scope="scope">
                <div v-if="scope.row.rateSetAmount">
                  {{formLabelAlign.currencyCode }} {{scope.row.rateSetAmount|numberToCurrency}}
                </div>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="total_collateral" v-if="getByColData.length>0">
          <img style="width: 18px;height: 20px;margin-right: 6px;" src="../../assets/images/shenghe.png" alt="">
          <span style="font-size: 13px;font-weight: 500;color: #212121;">{{$t('levy.totalCollateral')}}({{formLabelAlign.currencyCode }}):{{totalNum|numberToCurrency}}</span>
        </div>
      </div>
        <el-dialog
          title="批复书"
          :append-to-body="true"
          :visible.sync="replydialogVisible"
          :close-on-click-modal="false"
          width="1380px">
        <!-- <p class="reply_p">雍和资本投资集团有限公司 >雍和资本投资集团有限公司 >雍和资本投资集团有限公司 >雍和资本投资集团有限公司 </p> -->
        <reply v-if="DestroyIncomeStatistics == true"  :operatype="3" :formData="lookData" :isDraf="0"   @cancelButRep="cancelButRep"></reply>
    </el-dialog>
    </div>

</template>

<script>
import elDragDialog from '@/directive/el-drag-dialog'
import waves from '@/directive/waves' // waves directive
import http from '@/api/http'
import reply from '../quota/replywritten.vue'
import cinput from './cinput.vue'
export default {
    name: '',
    components: { cinput ,reply},
    directives: { waves, elDragDialog },
    props: {
        data: Object,
        item:Object,
        type:Number,
        formData:Object
    },
     data() {
    return {
      formLabelAlign:this.data,
      options:[],
      categoryList:[],
      subclassData:[],
      currencyData:[],
      currentType:'1',
      currencyList:[],
      dataFormVisible:false,
      getByColData:[],
      warehouseFormVisible:false,
      operationType:this.type,
      radio:'',
      coustHand:true,
      smallList:[],
      statusList:[{desc:'有效',code:'1'},{desc:'临时出库',code:'3'},{desc:'冻结',code:'4'},{desc:'终止',code:'6'},{desc:'回笼',code:7},{desc:'无效',code:'8'},{desc:'正式出库',code:'9'}],
      writtenList:[],
      replydialogVisible:false,
      operatype:'3',
      lookData:{},
      totalNum:0,
      DestroyIncomeStatistics : false
    }
  },
  watch: {
    formLabelAlign: {
      handler(newVal){
        if(newVal.colQuantity&&newVal.unitPrice){
          this.formLabelAlign.latestPrice = newVal.colQuantity * newVal.unitPrice
          this.formLabelAlign.region = newVal.colQuantity * newVal.unitPrice
        }
        if(newVal.latestPrice&&newVal.levyToplimitOriginal){
          this.formLabelAlign.availableBalance = newVal.latestPrice * (newVal.levyToplimitOriginal/100)
        }
        // console.log(newVal);
      },
      deep: true
    },
  },
  created() {
    this.getByCol()
    this.getOptions()
    this.getCategory()
    this.getCurrency()
    if(this.formLabelAlign.colCodeSmall){
      this.categoryChange(this.formLabelAlign.colCodeLarge)
    }
  },

  mounted() {

  },
  methods: {
    getByCol(){
        http.post(`/liabilityCol/getByCol`,{id:this.data.id}).then((res)=>{
          for(let item of res.data){
            item.isAdd = false
          }
          this.getByColData = res.data
        }).catch(err=>{});
        this.getloanAmount()
    },
    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){
      http.post(`/collateral/list`,{code}).then((res)=>{
          this.smallList = 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()
    },
    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() {
      this.formLabelAlign = {}
      this.formLabelAlign.loanAmount = 0
      this.formLabelAlign.processStatus = 1
      this.coustHand = true
      this.dialogFormVisible = true
    },
    details(id,type){
      this.formLabelAlign = {}
      if(this.currentType==1&&type==1||this.currentType>1){
        this.operationType = type
        http.post(`/colLevy/getId`,{id}).then((res)=>{
          this.formLabelAlign = res.data;
          this.formLabelAlign.levyToplimitNum = (res.data.levyToplimit*100)
          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)=>{
          for(let item of res.data){
            item.isAdd = false
          }
          this.getByColData = res.data
        }).catch(err=>{});
      }
    },
    levyLimit(){
      let reg = new RegExp("%","");
      let limit = this.formLabelAlign.levyToplimitNum.replace(reg,"");
      this.formLabelAlign.levyToplimit = limit/100
      this.formLabelAlign.toplimitPrice = this.formLabelAlign.availableBalance =  this.formLabelAlign.latestPrice * Number(this.formLabelAlign.levyToplimit)
      this.$forceUpdate()
    },

    sbumitData(type){
      let url = ''
        if(type==1){
          url = `/colLevy/add`
        }else{
          url = `/colLevy/addToDraft`
        }
        http.post(url,this.formLabelAlign).then((res)=>{

        }).catch(err=>{});

    },
    deliveryandreturn(type){
        if(type==3){
          if(!this.radio){
            this.$message.error('请选择类型')
            return false
          }
          if(!this.formLabelAlign.descrip){
            this.$message.error('请输入出库原因')
            return false
          }
          if(this.radio==1){
            http.post(`/colLevy/delivery`,{id:this.formLabelAlign.id,descrip:this.formLabelAlign.descrip}).then((res)=>{
              this.warehouseFormVisible = false
              this.$emit('cancelButWar','1');
            }).catch(err=>{});
          }else{
            http.post(`/colLevy/delById`,{id:this.formLabelAlign.id,descrip:this.formLabelAlign.descrip}).then((res)=>{
              this.warehouseFormVisible = false
               this.$emit('cancelButWar','1');
            }).catch(err=>{});
          }
        }else {
          http.post(`/colLevy/back`,{id:this.formLabelAlign.id}).then((res)=>{
            this.warehouseFormVisible = false
             this.$emit('cancelButWar','1');
          }).catch(err=>{});
        }
    },
    updateData(type){
      let url,url2;
      if(type==1){
          url = `/colLevy/update`
          url2 = `/liabilityCol/updateLibility`
        }else{
          url = `/colLevy/updateToDraft`
          url2 = `/liabilityCol/updateColLevy`
        }
        http.post(url,this.formLabelAlign).then((res)=>{

        }).catch(err=>{});
        http.post(url2,this.getByColData).then((res)=>{

        }).catch(err=>{});

    },
    addWritten(){
      http.post(`/liability/getEnterpriseCertificate`,{id:this.formLabelAlign.orgId}).then((res)=>{
          this.getByColData.push({isAdd:true})
          this.writtenList = res.data

          this.$forceUpdate()
      }).catch(err=>{});
    },
    handleDelete(row, index) {

    },
    headerStyle() {
      return 'tableStyle'
    },
    formatTime(str){
      return str.split(' ')[0]
    },
    collType(data){
      // console.log(this.subclassData);
      // setTimeout(()=>{
        // for(let item of this.subclassData){
        //   // debugger
        //   if(item.colCode == data.colCodeSmall){
        //     return item.chineseName
        //   }
        // }
      // },300)
    },
    handleTab(row,column,cell,event) {
	    // console.log(row)
	    // console.log(column)
      if(column.id=="el-table_1_column_1"&&this.currentType==1){
        this.formLabelAlign = {
          custCodeId:row.id,
          loanAmount : 0,
          processStatus:1
        }
        this.custCodeChange(row.id)
        this.coustHand = false
        this.dialogFormVisible = true
      }
    },
    handleChange(){

    },
    handleCancellation(){

    },
    writtenChange(v,i){
      for(let item of this.writtenList){
        if(item.certificateCode == v){
          item.isAdd = true
          this.getByColData[i] = item
          this.$forceUpdate()
          return false;
        }
      }
    },
    handleCell(row,column,cell,event) {
      console.log(row);
    },
    cancelButWar(){
        this.$emit('cancelButWar');
    },
    cancelButRep(){
        this.replydialogVisible = false
    },
    viewdetails(data){
      this.DestroyIncomeStatistics = false
      http.post(`/liability/getInfor`,{id:data.liabilityInforId}).then((res)=>{
          this.lookData = res.data
          this.DestroyIncomeStatistics = true
          this.replydialogVisible = true
      }).catch(err=>{});
    },
    getStatus(a){
      for(let item of this.statusList){
        if(item.code==a){
          return item.desc
        }
      }
    },
    getloanAmount(){
      let num = 0
      for(let item of this.getByColData){
        num = num + item.rateSetAmount
      }
      this.totalNum = num
    }
  }
}
</script>
<style  lang='scss' scope>
  .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>

