<template>
  <div class="dia_body">
        <div class="dialog_top" style="width:100%">
          <div class="dia_title">基础信息</div>
          <div style="margin-top: 10px;">
            <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="formLabelAlign.coustHand?'unabled is-disabled':'require'">
                <el-select v-model="formLabelAlign.custCodeId" :disabled="formLabelAlign.coustHand"  @change="custCodeChange" placeholder="请选择">
                  <el-option
                    v-for="(item) in options"
                    :key="item.id"
                    style="width:186px;"
                    :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" oninput="if(value.length>100)value=value.slice(0,100)" :rows="3" v-model="formLabelAlign.colSpec" ></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="require" >
             <el-select v-model="formLabelAlign.colCodeLarge" @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="require">
              <el-select v-model="formLabelAlign.colCodeSmall" placeholder="请选择">
                <el-option
                  v-for="item in subclassData"
                  :key="item.colCode"
                  :label="item.colCode+'-'+item.chineseName"
                  :value="item.colCode">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item :label="$t('levy.colCode')+'：'" class="require">
              <el-input  v-model="formLabelAlign.colCode"></el-input>
            </el-form-item>
            <el-form-item :label="$t('levy.colDetail')+'：'" class="unabled is-disabled">
                <el-input type="textarea" oninput="if(value.length>100)value=value.slice(0,100)" :rows="3" v-model="formLabelAlign.colDetail" ></el-input>
            </el-form-item>
          </el-form>
          </div>
          <div style="margin-top: 10px;">
            <el-form label-position="right" label-width="140px" :model="formLabelAlign">
            <el-form-item  :label="$t('levy.processStatus')+'：'" class="unabled is-disabled">
                <!-- <el-select v-model="formLabelAlign.status" :disabled="true"  placeholder="请选择">
                  <el-option
                    v-for="item in statusList"
                    :key="item.code"
                    :label="item.desc"
                    :value="item.code">
                </el-option>
                </el-select> -->
              <el-input value="新建" style="width:184px" :disabled="true"></el-input>
            </el-form-item>
            <el-form-item :label="$t('levy.startDate')+'：'" class="require">
              <el-date-picker
                v-model="formLabelAlign.startDate"
                @change="dataCheck($event,formLabelAlign.custCodeId,'startDate')"
                @focus="dataFocus"
                type="date"
                :clearable= "false"
                style="width:186px"
                value-format="yyyy-MM-dd"
                placeholder="选择日期">
              </el-date-picker>
            </el-form-item>
            <el-form-item :label="$t('levy.endDate')+'：'" class="require">
              <el-date-picker
                v-model="formLabelAlign.endDate"
                type="date"
                @change="dataCheck($event,formLabelAlign.custCodeId,'endDate')"
                @focus="dataFocus"
                :clearable= "false"
                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;">
            <el-form label-position="right" label-width="120px" :model="formLabelAlign">
            <el-form-item :label="$t('levy.colQuantity')+'：'" class="require">
              <el-input
                v-model="formLabelAlign.colQuantity"
                @blur="changCol($event, 'formLabelAlign', 'colQuantity')"
                @keydown.native="channelInputLimit"
                min="1"
                onKeyUp="value=value.replace(/[^\d]/g, '').replace(/^0{1,}/g,'');if(value.length>12)value=value.slice(0,12);"
                style="width:186px"></el-input>
            </el-form-item>
            <el-form-item :label="$t('levy.colUnit')+'：'" class="require">
              <el-input v-model="formLabelAlign.colUnit"  style="width:186px"></el-input>
            </el-form-item>
            <el-form-item :label="$t('levy.currencyCode')+'：'" class="require">
              <el-select v-model="formLabelAlign.currencyCode" 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="require">
                <cinput v-model="formLabelAlign.unitPrice" 
                oninput="try{if(value.length>12)value=value.slice(0,12);}catch (error) {}" 
                @blur="changCol"   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">
              <!-- <el-input v-model="formLabelAlign.latestPrice"  :disabled="true"></el-input> -->
              <cinput v-model.lazy="formLabelAlign.initialPrice"  :disabled="true" ></cinput>
            </el-form-item>
            <el-form-item :label="$t('levy.unitPriceNew')+'：'" class="unabled is-disabled">
              <cinput v-model.lazy="formLabelAlign.latestPrice"  :disabled="true" ></cinput>
            </el-form-item>
            <el-form-item :label="$t('levy.levyToplimitOriginal')+'(%)：'" class="require">
              <el-input
                v-model="formLabelAlign.levyToplimitNum"
                min="1"
                onKeyUp="value=value.replace(/[^\d]/g, '').replace(/^0{1,}/g,'');if(value.length>3)value=value.slice(0,3);"
                @input="forceUp"
                @blur="levyLimit($event, 'formLabelAlign', 'levyToplimitNum')"
                ></el-input>
            </el-form-item>
            <el-form-item :label="$t('levy.toplimitPrice')+'：'" class="unabled is-disabled">
              <!-- <el-input v-model="formLabelAlign.toplimitPrice" :disabled="true"></el-input> -->
              <cinput v-model.lazy="formLabelAlign.toplimitPrice"  :disabled="true" ></cinput>
            </el-form-item>
          </el-form>
          </div>
          <div style="margin-top: 10px;">
            <el-form label-position="right" label-width="140px" :model="formLabelAlign">
            <el-form-item :label="$t('levy.guarantee')+'：'" class="unabled is-disabled">
              <!-- <el-input v-model="formLabelAlign.loanAmount" :disabled="true"></el-input> -->
              <cinput v-model.lazy="formLabelAlign.loanAmount"  :disabled="true" ></cinput>
            </el-form-item>
            <el-form-item :label="$t('levy.availableBalance')+'：'" class="unabled is-disabled">
              <!-- <el-input v-model="formLabelAlign.availableBalance" :disabled="true"></el-input> -->
              <cinput v-model.lazy="formLabelAlign.availableBalance"  :disabled="true" ></cinput>
            </el-form-item>
          </el-form>
          </div>
        </div>
        <div class="dialog-footer but_icon">
            <el-button v-waves class="filter-item flex_align" type="primary" :style="{width:draft==1?'110px !important':'auto'}" icon="el-icon-my-tijiao" @click="sbumitData(1)">
                {{draft==1? $t('table.sbumitSp'):$t('table.sbumit')}}
            </el-button>
            <el-button v-waves class="filter-item flex_align" style="margin:0 10px 0 20px;" type="primary" icon="el-icon-my-quxiao" @click="cancelBut">
                {{ $t('table.cancel') }}
            </el-button>
            <el-button v-waves class="filter-item flex_align" type="primary" :style="{width:draft==1?'auto':'110px !important'}" icon="el-icon-my-baocun" @click="sbumitData(2)">
                {{draft==1? $t('table.save'):$t('table.draft')}}
            </el-button>
        </div>
      </div>
</template>

<script>


import waves from '@/directive/waves' // waves directive
import http from '@/api/http'
import cinput from './cinput.vue'
export default {
    name: '',
    components: { cinput },
    directives: { waves },
    props: {
        data: Object,
        item:Object,
        type:String,
        formData:Object,
        draft:Number
    },
     data() {
    return {
      formLabelAlign:this.data,
      options:[],
      categoryList:[],
      subclassData:[],
      currencyData:[],
      currentType:'1',
      currencyList:[],
      dataFormVisible:false,
      getByColData:[],
      warehouseFormVisible:false,
      operationType:'',
      radio:'',
      coustHand:true,
      smallList:[],
      statusList:[{desc:'有效',code:'1'},{desc:'临时出库',code:'3'},{desc:'冻结',code:'4'},{desc:'终止',code:'6'},{desc:'无效',code:'8'},{desc:'删除',code:'9'}],
      writtenList:[],

    }
  },
  created() {
    this.getOptions()
    this.getCategory()
    this.getCurrency()
    if(this.formLabelAlign.colCodeLarge){
      this.categoryChange(this.formLabelAlign.colCodeLarge,1)
    }
  },
  mounted() {
    // console.log(this.formLabelAlign);
  },
  methods: {
    changCol($event, form, name){
      if (name === 'colQuantity') {
        if(parseFloat($event.target.value) > 100000000 ){
          this.$message.error('抵(质)押品数量不能超过1亿')
          $event.target.value = ''
          return false
        }
        this[form][name] = $event.target.value
      }
      if(parseFloat($event.target.value) > 10000000000 ){
          this.$message.error('抵(质)押品单价不能超过100亿')
          this.formLabelAlign.unitPrice = ''
          return false
        }
      if(this.formLabelAlign.colQuantity&&this.formLabelAlign.unitPrice){
        this.formLabelAlign.initialPrice = this.formLabelAlign.colQuantity * this.formLabelAlign.unitPrice;
         this.formLabelAlign.latestPrice = this.formLabelAlign.colQuantity * this.formLabelAlign.unitPrice;
        this.$forceUpdate()
        if(this.formLabelAlign.levyToplimitNum){
          this.levyLimit()
        }
      }
      if(this.formLabelAlign.latestPrice&&this.formLabelAlign.levyToplimit){
        // console.log(this.formLabelAlign.latestPrice,this.formLabelAlign.levyToplimit);
        this.formLabelAlign.availableBalance = this.formLabelAlign.latestPrice * (this.formLabelAlign.levyToplimit)
        this.$forceUpdate()
      }
    },
    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,t){
      http.post(`/collateral/list`,{code}).then((res)=>{
          this.subclassData = res.data;
          if(t!=1){this.$set(this.formLabelAlign, 'colCodeSmall', '')}
          // this.$$forceUpdate()
      }).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=>{});
    },

    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
    },
    levyLimit($event, form, name){
      if (name === 'levyToplimitNum') {
        if ($event.target.value > 100) {
          $event.target.value = ""
        }
        this[form][name] = $event.target.value
      }
      if(this.formLabelAlign.levyToplimitNum){
        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){
        if(!this.formLabelAlign.custCodeId){
            this.$message.error('请选择客户编号')
            return false
        }
        if(!this.formLabelAlign.colCodeLarge){
            this.$message.error('请选择抵(质)押品大类')
            return false
        }
        if(!this.formLabelAlign.colCodeSmall){
            this.$message.error('请选择抵(质)押品细类')
            return false
        }
        if(!this.formLabelAlign.colCode){
            this.$message.error('请输入抵(质)押品证号')
            return false
        }
        if(!this.formLabelAlign.startDate){
            this.$message.error('请选择抵(质)押品担保起日')
            return false
        }
        if(!this.formLabelAlign.endDate){
            this.$message.error('请选择抵(质)押品担保迄日')
            return false
        }
        if( new Date(this.formLabelAlign.startDate)> new Date(this.formLabelAlign.endDate)){
            this.$message.error('抵(质)押品担保起日不能大于抵(质)押品担保迄日')
            return false
        }
        if(!this.formLabelAlign.colQuantity){
            this.$message.error('请输入抵(质)押品数量')
            return false
        }
        if(!this.formLabelAlign.colUnit){
            this.$message.error('请输入抵(质)押品单位')
            return false
        }
        if(!this.formLabelAlign.currencyCode){
            this.$message.error('请选择币种')
            return false
        }
        if(!this.formLabelAlign.unitPrice){
            this.$message.error('请输入抵(质)押品单价')
            return false
        }
        if(!this.formLabelAlign.levyToplimitNum){
            this.$message.error('请输入抵(质)押品征提成数上限')
            return false
        }
        if(parseFloat(this.formLabelAlign.latestPrice) > 10000000000){
           this.$message.error('抵(质)押品最新鉴价值过大')
           return false
         }
        if(this.draft==1){
          url = `/colLevyDraft/sub`
        }else{
          url = `/colLevy/add`
        }
      }else{
         if(parseFloat(this.formLabelAlign.latestPrice) > 10000000000){
           this.$message.error('抵(质)押品最新鉴价值过大')
           return false
         }
        if(this.draft==1){
          url = `/colLevyDraft/update`
        }else{
          url = `/colLevy/addToDraft`
        }
      }
      http.post(url,this.formLabelAlign).then((res)=>{
        this.$message.success('提交成功！');
        this.$emit('cancelButAdd','1');
      }).catch(err=>{});

    },
    cancelBut(){
        this.$emit('cancelButAdd');
    },
    getStatus(a){
      for(let item of this.statusList){
        if(item.code==a){
          return item.desc
        }
      }
    },
    dataCheck(date,id,name){
      if(!this.formLabelAlign.custCodeId){
        this.formLabelAlign[name] = ''
        return false
      }
      http.post(`/liabilityCol/isHoliday`,{date,id}).then((res)=>{
        if(res.data==1){
          this.formLabelAlign[name] = ''
          this.$message.error('当前日期为节假日')
        }
      }).catch(err=>{});
    },
    dataFocus(){
      if(!this.formLabelAlign.custCodeId){
        this.$message.error('请先选择客户编号')
        return false
      }
    },
    forceUp(){
      this.$forceUpdate()
    },
    loadNumber(elValue){

      if (elValue>100) {
        elValue = "";
      }
      return elValue
    },
    channelInputLimit (e) {
      let key = e.key
      // 不允许输入'e'和'.'
      if (key === 'e' || key === '.') {
        e.returnValue = false
        return false
      }
      return true
    }
  }
}
</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>

