<template>
    <div>
    <div class="dia_body" style="padding:27px;">
        <div class="dialog_top">
          <div class="dia_title">基础信息</div>
          <div style="margin-top: 10px;margin-left: 50px;">
            <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  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"
                  :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 v-if="operationType==7" value="审核中" style="width:184px" :disabled="true"></el-input>
              <el-input v-else :value="getStatus(formLabelAlign.status)" style="width:184px" :disabled="true"></el-input>
            </el-form-item>
            <el-form-item :label="$t('levy.startDate')+'：'" :class="operationType==2?'require':operationType==7&&formLabelAlign.operateStatus==2&&formLabelAlign.startDate!=formLabelAlign.startDateOriginal?'modified':'unabled is-disabled'">
              <el-date-picker
                v-model="formLabelAlign.startDate"
                type="date"
                :clearable= "false"
                :disabled="operationType==2?false:true"
                @change="dataCheck($event,formLabelAlign.custCodeId,'startDate')"
                value-format="yyyy-MM-dd"
                placeholder="选择日期">
              </el-date-picker>
            </el-form-item>
            <el-form-item :label="$t('levy.endDate')+'：'" :class="operationType==2?'require':operationType==7&&formLabelAlign.operateStatus==2&&formLabelAlign.endDate!=formLabelAlign.endDateOriginal?'modified':'unabled is-disabled'">
              <el-date-picker
                v-model="formLabelAlign.endDate"
                type="date"
                :disabled="operationType==2?false:true"
                value-format="yyyy-MM-dd"
                :clearable= "false"
                @change="dataCheck($event,formLabelAlign.custCodeId,'endDate')"
                placeholder="选择日期">
              </el-date-picker>
            </el-form-item>
          </el-form>
          </div>
        </div>
        <div class="dialog_top" style="margin-top: 10px">
          <div class="dia_title">抵质押品金额</div>
          <div style="margin-top: 10px;margin-left: 50px;">
            <el-form label-position="right" label-width="120px" :model="formLabelAlign">
            <el-form-item :label="$t('levy.colQuantity')+'：'" :class="formLabelAlign.inventoryStatus===1?'unabled is-disabled':operationType==2?'require': operationType==7&&formLabelAlign.operateStatus==2&&formLabelAlign.colQuantity!=formLabelAlign.colQuantityOriginal?'modified':'unabled is-disabled'">
              <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>10)value=value.slice(0,10);"
                :disabled="formLabelAlign.inventoryStatus===1?true:operationType==2?false:true"
                ></el-input>
            </el-form-item>
            <el-form-item :label="$t('levy.colUnit')+'：'" class="unabled is-disabled">
              <el-input v-model="formLabelAlign.colUnit" disabled ></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"
                  :label="item.currencyCode"
                  :value="item.currencyCode">
                </el-option>
              </el-select>
            </el-form-item>
            <!-- <el-form-item :label="$t('levy.unitPrice')+'：'" :class="operationType==2?'require':operationType==7&&formLabelAlign.operateStatus==2&&formLabelAlign.unitPrice!=formLabelAlign.unitPriceOriginal?'modified':'unabled is-disabled'">
                <cinput v-model.number="formLabelAlign.unitPrice"  @blur="changCol" :disabled="operationType==2?false:true"  style="width:186px"></cinput>
            </el-form-item> -->
            <el-form-item :label="$t('levy.unitPrice')+'：'" :class="operationType==2?'require':operationType==7&&formLabelAlign.operateStatus==2&&formLabelAlign.unitPrice!=formLabelAlign.unitPriceOriginal?'modified':'unabled is-disabled'">
                  <cinput v-model="formLabelAlign.unitPrice"
                  oninput="try{if(value.length>12)value=value.slice(0,12);}catch (error) {}"  @blur="changCol" :disabled="operationType==2?false:true"  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 label-position="right" label-width="160px" :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="operationType==2?'require':operationType==7&&formLabelAlign.operateStatus==2&&formLabelAlign.levyToplimit!=formLabelAlign.levyToplimitOriginal?'modified':'unabled is-disabled'">
                  <!-- @keyup.native="loadNumber(formLabelAlign.levyToplimitNum);"
                  type="number"
                  maxlength="3"
                  min="1"
                  oninput ="value=value.replace(/[^\d]/g,'')"
                  @input="forceUp"
                  @blur="levyLimit"
                  if(value.length>3)value=value.slice(0,3);
                   onKeyUp="value=value.replace(/[^\d]/g, '').replace(/^0{1,}/g,'');"-->
                <el-input
                  type="text"
                  v-model="formLabelAlign.levyToplimitNum"
                  min="1"
                  @input="forceUp"
                  oninput="value=value.replace(/[^0-9]/g,'').replace(/^0{1,}/g,'');"
                  @blur="levyLimit($event, 'formLabelAlign', 'levyToplimitNum')"
                  :disabled="operationType==2?false:true"
                  ></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.summary|numberToCurrency"  :disabled="true"></el-input>
              </el-form-item>
              <el-form-item :label="$t('levy.availableBalance')+'：'" class="unabled is-disabled">
                <!-- <cinput :value="(formLabelAlign.initialPrice-(formLabelAlign.toplimitPrice-formLabelAlign.availableBalance))|numberToCurrency" :disabled="true"></cinput> -->

                <cinput v-if="operationType==7||operationType==1" :value="(formLabelAlign.toplimitPrice-formLabelAlign.loanAmount)|numberToCurrency" :disabled="true"></cinput>
                <cinput v-else  :value="(formLabelAlign.availableBalance)|numberToCurrency" :disabled="true"></cinput>
              </el-form-item>
            </el-form>
          </div>
        </div>
        <div style="width: 560px;margin-top: 20px;" v-if="formLabelAlign.operateStatus==6||formLabelAlign.operateStatus==9">
          <el-form label-position="right" label-width="150px" :model="formLabelAlign">
            <el-form-item label="类型：" class="unabled is-disabled">
              <el-input :value="op_sts(formLabelAlign.operateStatus)"  disabled></el-input>
              <!-- <el-radio-group v-model="formLabelAlign.operateStatus" :disabled="true">
                <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="unabled is-disabled">
              <el-input type="textarea" :rows="2" :disabled="true" v-model="formLabelAlign.applyDescrip" ></el-input>
            </el-form-item>
          </el-form>
        </div>
        <div style="width: 560px;margin-top: 20px;" v-if="formLabelAlign.operateStatus==7">
          <el-form label-position="right" label-width="150px" :model="formLabelAlign">
            <el-form-item :label="$t('levy.status')+'：'" class="unabled is-disabled" >
              回笼
            </el-form-item>
          </el-form>
        </div>
        <div class="dialog-footer but_icon" v-if="operationType<7">
            <el-button v-if="operationType==6" v-waves class="filter-item add_plus" type="primary" icon="el-icon-my-add" @click="addWritten">
              {{ $t('table.add') }}
            </el-button>
            <div v-else-if="operationType==1">
                <div v-if="type==5" class="dialog-footer but_icon" >
                    <el-button v-waves class="filter-item flex_align" type="primary" icon="el-icon-my-delete" @click="deleteData">
                        {{ $t('table.delete') }}
                    </el-button>
                    <el-button v-waves class="filter-item flex_align" type="primary" icon="el-icon-my-quxiao" @click="cancelBut">
                        {{ $t('table.cancel') }}
                    </el-button>
                </div>
                <!-- <p v-else-if="getByColData.length>0" class="huiadd"> <img src="../../assets/images/add_icon.png" alt="">  {{ $t('table.add') }}</p> -->
            </div>
            <div class="dialog-footer but_icon" v-else-if="operationType==2">
                <el-button v-waves class="filter-item flex_align" type="primary" :style="{width:draft==1?'110px !important':'auto'}" icon="el-icon-my-tijiao" @click="officialcollBut()">
                    {{draft==1? $t('table.sbumitSp'):$t('table.sbumit')}}
                </el-button>
                <el-button v-waves class="filter-item flex_align" 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="draftcollBut()">
                    {{draft==1? $t('table.save'):$t('table.draft')}}
                </el-button>
            </div>
            <!-- <p v-else-if="getByColData.length>0" class="huiadd"> <img src="../../assets/images/add_icon.png" alt="">  {{ $t('table.add') }}</p> -->
        </div>

        <div class="wrapper_table det_tab" v-if="getByColData.length>0"  :style="{'margin-top':operationType==7?'20px':'0px'}">
          <el-table
            :data="getByColData"
            fit
            stripe
            class="numtable"
            highlight-current-row
            style="width: 100%;"
            :header-cell-class-name="headerStyle"
            :header-cell-style="{fontSize:'12px'}"
            @cell-click="handleCell"
            max-height="300"
          >
            <el-table-column prop="certificateCode" width="150"  :label="$t('levy.pfsid')" align="left" >
              <template slot-scope="scope">
                  <div style="display: flex;justify-content: space-between;height:35px;margin-top:1px">
                      <div v-if="scope.row.isAdd" style="line-height:10px;padding-top:2px;">
                        <el-select ref="flexInput" class="flex-input" v-model="scope.row.certificateCode" @visible-change="visibleChange"  @change="writtenChange($event,scope.$index)"  placeholder="请选择">
                            <el-option
                            v-for="item in writtenList"
                            :key="item.id"
                            :label="item.certificateCode"
                            :value="item.certificateCode">
                            </el-option>
                        </el-select>
                        </div>
                        <div v-else class="show_id">
                          <el-tooltip class="item" effect="dark" :content="scope.row.certificateCode" placement="top-start">
                            <span style="display: inline-block;width: 100px;" 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="" :label="$t('levy.collateralType')" show-overflow-tooltip width="110"  align="left">
                <template >
                  <span class="tab_span" style="width:100px;">{{formLabelAlign.colCodeLargeName}}-{{formLabelAlign.colCodeSmallName}}</span>
                </template>
            </el-table-column>
            <el-table-column prop="colCode" width="130" show-overflow-tooltip :label="$t('levy.pcolCode')"  align="left" >
              <template>
                <div>
                  {{formLabelAlign.colCode}}
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="startDate" width="156" show-overflow-tooltip :label="$t('levy.pstartDate')"  align="left">
              <template slot-scope="scope">
                <div v-if="updateWri" style="line-height:10px;">
                   <div v-if="scope.row.operateStatus==9">
                        {{formatTime(scope.row.startDate)}}
                      </div>
                  <el-date-picker
                    v-else-if="scope.row.certificateCode"
                    class="flex-input"
                    v-model="scope.row.startDate"
                    type="date"
                    @change="dataCheckList($event,scope.row,scope.$index,'startDate')"
                    @focus="dataFocus(scope.row,scope.$index)"
                    style="width:134px"
                    :clearable= "false"
                    :disabled="operationType==6?false:true"
                    value-format="yyyy-MM-dd"
                    placeholder="选择日期">
                  </el-date-picker>
                </div>
                <div v-else-if="scope.row.startDate" :class="operationType==7&&scope.row.startDateOriginal&&scope.row.startDate!=scope.row.startDateOriginal?'div_color':''">
                  {{formatTime(scope.row.startDate)}}
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="endDate" width="156" show-overflow-tooltip :label="$t('levy.pendDate')" align="left">
              <template slot-scope="scope">
                <div v-if="updateWri" style="line-height:10px;">
                      <div v-if="scope.row.operateStatus==9">
                        {{formatTime(scope.row.endDate)}}
                      </div>
                      <el-date-picker
                        v-else-if="scope.row.certificateCode"
                        class="flex-input"
                        v-model="scope.row.endDate"
                        type="date"
                        :clearable= "false"
                        @change="dataCheckList($event,scope.row,scope.$index,'endDate')"
                        @focus="dataFocus(scope.row,scope.$index)"
                        style="width:134px"
                        :disabled="operationType==6?false:true"
                        value-format="yyyy-MM-dd"
                        placeholder="选择日期">
                      </el-date-picker>
                </div>
                <div  v-else-if="scope.row.endDate" :class="operationType==7&&scope.row.endDateOriginal&&scope.row.endDate!=scope.row.endDateOriginal?'div_color':''">
                  {{formatTime(scope.row.endDate)}}
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="collateralType"  show-overflow-tooltip width="160" :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"  :label="$t('levy.amountapproval')" align="left" >
              <template slot-scope="scope">
                <div v-if="type==6">
                  {{scope.row.currencyCode }} {{(scope.row.overalLimit * scope.row.colPercent - Number(scope.row.colTotal)+ (Number(scope.row.setAmountOriginal||0)))|numberToCurrency}}
                </div>
                <!-- <div v-if="type==2||type==3">
                  {{scope.row.currencyCode }} {{(scope.row.overalLimit * scope.row.colPercent - Number(scope.row.colTotal)+ (Number(scope.row.setAmountOriginal||0)))|numberToCurrency}}
                </div> -->
                <div v-else>
                  {{scope.row.currencyCode }} {{(Number(scope.row.liabilityBalance) + Number(scope.row.setAmount)) |numberToCurrency}}
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="liabilityBalance" width="170"  label="批复书设质后尚待担保余额" align="left" >
              <template slot-scope="scope">
                <div v-if="type==6">
                 {{scope.row.currencyCode }} {{(scope.row.overalLimit * scope.row.colPercent - Number(scope.row.colTotal) + (Number(scope.row.setAmountOriginal||0)) - scope.row.setAmount ) |numberToCurrency}}
                </div>
                <div v-else>
                  {{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="190" :label="$t('levy.pledgeCollateral')" align="left" >
              <template slot-scope="scope">
                <div v-if="updateWri" style="display: flex;align-items: center;">
                  <div v-if="scope.row.operateStatus==9">
                    {{scope.row.currencyCode}} <span v-if="scope.row.setAmount">{{scope.row.setAmount|numberToCurrency}}</span>
                  </div>
                  <template  v-else-if="scope.row.certificateCode">
                     <div style="width: 50px;">{{scope.row.currencyCode}}</div>  <cinput
                    class="flex-input"
                    @change="rateSetAmountNum($event,scope.$index,scope.row)"
                    v-model="scope.row.setAmount"></cinput>
                  </template>
                </div>

                <div v-else :class="operationType==7&&scope.row.setAmountOriginal&&scope.row.setAmount!=scope.row.setAmountOriginal?'div_color':''">
                    {{scope.row.currencyCode}} <span v-if="scope.row.setAmount">{{scope.row.setAmount|numberToCurrency}}</span>
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="exchangeRate" :label="$t('levy.exchange')" width="130" align="left" >
                <template slot-scope="scope">
                    <div v-if="scope.row.isAdd&&scope.row.certificateCode" style="line-height:10px;">
                      <el-input
                        class="flex-input"
                        v-model="scope.row.exchangeRate"
                        @change="rateSetAmountNum($event,scope.$index,scope.row, 'exchangeRate')"></el-input>
                    </div>
                    <div v-else>
                    {{scope.row.exchangeRate}}
                    </div>
                </template>
            </el-table-column>
            <el-table-column prop="rateSetAmount" width="170"  :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-column :label="$t('table.actions')" align="center"  v-if="operationType==6">
              <template slot-scope="scope">
                <div class="but_list" >
                    <el-button v-waves class=""  v-if="scope.row.isAdd||scope.row.operateStatus==1" type="text" icon="el-icon-my-del-y" @click="handleDelete(scope.row,scope.$index)">
                      {{ $t('table.delete') }}
                    </el-button>
                    <el-button v-waves class="" v-else-if="scope.row.operateStatus==0||scope.row.operateStatus==2"  type="text" icon="el-icon-my-del-y" @click="handleDelete(scope.row,scope.$index)">
                      {{ $t('table.unbound') }}
                    </el-button>
                    <el-button v-waves class="" v-else-if="scope.row.operateStatus==9" type="text" icon="el-icon-my-huilong" @click="reduction(scope.row,scope.$index)">
                      {{$t('table.reduction')}}
                    </el-button>

                </div>
              </template>
            </el-table-column>
             <el-table-column label="操作状态" align="center"  v-if="operationType==7">
              <template slot-scope="scope">
                <div class="but_list" >
                   <span >{{scope.row.operateStatus==1?'新增':
                     scope.row.operateStatus==2?'变更':
                     scope.row.operateStatus==9?'解绑':
                     scope.row.operateStatus==0?'未修改':''}}</span>
                </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 class="dialog-footer but_icon" v-if="operationType==6">
            <el-button v-waves class="filter-item flex_align" type="primary" :style="{width:draft==1?'110px !important':'auto'}" icon="el-icon-my-tijiao" @click="officialreplyBut()">
                {{draft==1? $t('table.sbumitSp'):$t('table.sbumit')}}
            </el-button>
            <el-button v-waves class="filter-item flex_align" 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="draftreplyBut()">
                {{draft==1? $t('table.save'):$t('table.draft')}}
            </el-button>
        </div>
        <div style="width: 560px;margin-top: 20px;" v-if="operationType==7&&formLabelAlign.operateStatus==1||operationType==7&&formLabelAlign.operateStatus==2||operationType==7&&formLabelAlign.operateStatus==0">
              <el-form label-position="right" label-width="150px" :model="formLabelAlign">
                <el-form-item :label="$t('levy.status')+'：'" class="unabled is-disabled" >
                 {{formLabelAlign.operateStatus==1?'抵(质)押品新增':formLabelAlign.operateStatus==2?'抵(质)押品修改':'连接批复书'}}
                </el-form-item>
              </el-form>
            </div>
         <div style="width: 530px;margin-top: 12px;margin-left: 30px;" v-if="operationType==7">
          <el-form label-position="right" label-width="120px" :model="findings">
            <!-- <el-form-item label="操作状态：" class="unabled is-disabled" v-if="formLabelAlign.operateStatus">
              <el-input :value="op_sts(formLabelAlign.operateStatus)"  disabled></el-input>
            </el-form-item> -->
            <!-- <el-form-item label="出库原因：" v-if="formLabelAlign.operateStatus==6||formLabelAlign.operateStatus==9" class="unabled is-disabled">
              <el-input type="textarea" :rows="2" v-model="formLabelAlign.applyDescrip"   disabled></el-input>
            </el-form-item> -->
            <el-form-item :label="$t('levy.findingsAudit')+'：'" class="require">
              <el-radio-group v-model="findings.status">
                <el-radio :label="9">通过</el-radio>
                <el-radio :label="3">不通过</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item :label="$t('levy.findingsdesc')+'：'" class="require">
              <el-input type="textarea" oninput="if(value.length>100)value=value.slice(0,100)" :rows="2" v-model="findings.idea" ></el-input>
            </el-form-item>
          </el-form>
        </div>
        <div class="dialog-footer but_icon" style="margin:0" v-if="operationType==7" >
            <div class="dialog-footer but_icon" >
                <el-button v-waves class="filter-item flex_align" type="primary" icon="el-icon-my-tijiao" @click="examineBut">
                    {{$t('table.sbumit')}}
                </el-button>
                <el-button v-waves class="filter-item flex_align" type="primary" icon="el-icon-my-quxiao" @click="cancelBut">
                    {{ $t('table.cancel') }}
                </el-button>
            </div>
        </div>
      </div>

      <el-dialog
        :title="form.operateStatus==1?'删除':'解绑'"
        :append-to-body="true"
        :visible.sync="deldialogVisible"
        v-el-drag-dialog
        :close-on-click-modal="false"
        width="499px">
        <div class="add_info">
            <div class="add_l">
                <span>批复书编号：</span>
                <span>抵(质)押品证号：</span>
            </div>
            <div class="add_r">
                <el-input :disabled="true" v-model="form.certificateCode"  class="filter-item input_item"    />
                <el-input :disabled="true" v-model="form.colCode" class="filter-item input_item"    />
            </div>
        </div>
        <span slot="footer" class="dialog-footer">
            <el-button v-waves class="filter-item flex_align" type="primary" icon="el-icon-my-delete" @click="deletetab">
                {{ form.operateStatus==1?'删除':$t('table.unbound') }}
            </el-button>
            <el-button v-waves class="filter-item flex_align" type="primary" icon="el-icon-my-quxiao" @click="deldialogVisible=false">
                {{ $t('table.cancel') }}
            </el-button>
        </span>
    </el-dialog>
    <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'
import { returnNumFloat } from '@/utils'
export default {
    name: '',
    components: { reply,cinput},
    directives: { waves, elDragDialog },
    props: {
        data: Object,
        item:Object,
        type:Number,
        formData:Object,
        draft:Number,
        taskId:String
    },
    data() {
        return {
        formLabelAlign:this.data,
        options:[],
        categoryList:[],
        subclassData:[],
        currencyData:[],
        currentType:'1',
        currencyList:[],
        dataFormVisible:false,
        getByColData:[],
        warehouseFormVisible:false,
        operationType:this.type==5?1: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'}],
        deldialogVisible:false,
        form:{
            colCode:this.data.colCode,
            certificateCode:''
        },
        replydialogVisible:false,
        operatype:'3',
        lookData:{},
        updateWri:false,
        findings:{},
        totalNum:0,
        certList:[],
        DestroyIncomeStatistics:false,

        operateStatusList:[{desc:'新增',code:'1'},{desc:'修改',code:'2'},{desc:'冻结',code:'3'},{desc:'取消冻结',code:'4'},{desc:'终止',code:'5'},{desc:'临时出库',code:'6'},{desc:'回笼',code:'7'},{desc:'无效',code:'8'},{desc:'出库',code:'9'}],
        digits: 4, // 汇率 小数点保留位数
    }
  },
  created() {
    this.getByCol()
    this.getOptions()
    this.getCategory()
    this.getCurrency()
    if(this.formLabelAlign.colCodeSmall){
      this.categoryChange(this.formLabelAlign.colCodeLarge)
    }
    if(this.type == 6){
      this.updateWri = true
    }
  },

  mounted() {
    if(this.operationType==1){
      this.$set(this.formLabelAlign,'summary',this.formLabelAlign.loanAmount)
    }else{
      this.$set(this.formLabelAlign,'summary',this.data.toplimitPrice-this.data.availableBalance)
    }
    this.$set(this.formLabelAlign,'toplimitPriceOriginal',this.data.toplimitPrice)
    this.$set(this.formLabelAlign,'availableBalanceOriginal',this.data.availableBalance)

    // console.log(this.type);
  },
  methods: {


    getCurrentDate() {

      // formLabelAlign.endDate
      let d = new Date();
      let y = d.getFullYear(); //获取当前日期的年份
      let m = parseInt(d.getMonth())+1; //获取当前日期的月份
      let day = d.getDate(); //获取当前日期的日
      // console.log(y, m, day);
      if (m<10) {
        m = "0" + m
      }
      if (day<10) {
        day = "0" + day
      }
      return y+"-"+m+"-"+day
    },
    changCol(){
      if(this.formLabelAlign.colQuantity&&this.formLabelAlign.unitPrice){
        this.formLabelAlign.latestPrice = this.formLabelAlign.colQuantity * this.formLabelAlign.unitPrice;
        // console.log(this.formLabelAlign.initialPrice,this.formLabelAlign.toplimitPrice,this.formLabelAlign.availableBalance)
        // this.formLabelAlign.initialPrice = this.formLabelAlign.colQuantity * this.formLabelAlign.unitPrice;
        if(this.formLabelAlign.levyToplimitNum){
          this.levyLimit()
        }
        this.$forceUpdate()
      }
      // if(this.formLabelAlign.toplimitPrice){
        // this.formLabelAlign.availableBalance = this.formLabelAlign.toplimitPrice - (this.formLabelAlign.toplimitPrice-this.formLabelAlign.availableBalance)
      //   this.$forceUpdate()
      // }
    },
    getByCol(){
        let url =`/liabilityCol/getByCol` ;
        if(this.type==2||this.type==6){
          url = '/liabilityCol/getByColDraft';
        }
        let id = this.data.id
        if(this.type==7){
          url = '/liabilityCol/getByColLog';
          id = this.data.id
        }
        http.post(url,{id}).then((res)=>{
          if(this.type==2||this.type==6){
            for(let item of res.data){
              item.isAdd = false
            }
          }
          this.getByColData = res.data
          this.getloanAmount()
        }).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){
      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()
        }
      }
    },
    levyLimit(){
      if(this.formLabelAlign.levyToplimitNum){
        if(parseFloat(this.formLabelAlign.levyToplimitNum) > 100){
          this.$message.error('抵(质)押品征提成数上限(%)不能大于100')
          this.formLabelAlign.levyToplimitNum = ''
          this.$forceUpdate()
          return false
        }
        let reg = new RegExp("%","");
        let limit = (this.formLabelAlign.levyToplimitNum+'').replace(reg,"");
        this.formLabelAlign.levyToplimit = limit/100
        this.formLabelAlign.toplimitPrice =  this.formLabelAlign.latestPrice * Number(this.formLabelAlign.levyToplimit)

        this.formLabelAlign.availableBalance = this.formLabelAlign.toplimitPrice-(this.formLabelAlign.toplimitPriceOriginal-this.formLabelAlign.availableBalanceOriginal)
        this.formLabelAlign.summary = this.formLabelAlign.toplimitPrice - this.formLabelAlign.availableBalance
        // console.log(this.formLabelAlign.summary);
        this.$forceUpdate()
      }
    },
    deliveryandreturn(type){
        if(type==3){
          if(this.radio==1){
            http.post(`/colLevy/delivery`,{id:this.formLabelAlign.id}).then((res)=>{
              this.warehouseFormVisible = false
            }).catch(err=>{});
          }else{
            http.post(`/colLevy/delById`,{id:this.formLabelAlign.id}).then((res)=>{
              this.warehouseFormVisible = false
            }).catch(err=>{});
          }
        }else {
          http.post(`/colLevy/back`,{id:this.formLabelAlign.id}).then((res)=>{
            this.warehouseFormVisible = false
          }).catch(err=>{});
        }
    },
    officialreplyBut(){
        let url;
        if(this.draft==1){
            url = `/liabilityCol/saveLibilityList`
        }else{
            url = `/liabilityCol/saveLibilityList`
        }
        let ls = [],list = [];
        for(let index in this.getByColData){
          let item = this.getByColData[index]
          if(!item.certificateCode){
            this.$message.error('请先选择批复书')
            return false
          }
          if(!item.setAmount){
            this.$message.error(`批复书${item.certificateCode}的抵(质)押品设质不能为空`)
            return false
          }
          if( new Date(item.startDate)> new Date(item.endDate)){
              this.$message.error(`批复书${item.certificateCode}的担保起日不能大于担保迄日`)
              return false
          }
          if(item.certificateCode){
            item.colLevyDraftId = this.formLabelAlign.id
            if(item.isAdd){
              delete item.id
            }
            ls.push(item)
            list.push(item.certificateCode)
          }
        }
        if((new Set(list)).size != list.length){
          this.$message.error('请删除重复的批复书')
          return false
        }
        http.post(url,{list:ls,type:1}).then((res)=>{
          this.$message.success('提交成功！');
          this.$emit('cancelButDet','1');
        }).catch(err=>{});
    },
    draftreplyBut(){
      let url;
      if(this.draft==1){
          url = `/liabilityCol/saveLibilityList`
      }else{
          url = `/liabilityCol/saveLibilityList`
      }
      let ls = []
      for(let index in this.getByColData){
        let item = this.getByColData[index]
        if(!item.certificateCode){
            this.$message.error('请先选择批复书')
            return false
          }
          if(!item.setAmount){
            this.$message.error(`批复书${item.certificateCode}的抵(质)押品设质不能为空`)
            return false
          }
        if( new Date(item.startDate)> new Date(item.endDate)){
            this.$message.error(`批复书${item.certificateCode}的担保起日不能大于担保迄日`)
            return false
        }
        if(item.certificateCode){
          item.colLevyDraftId = this.formLabelAlign.id
          ls.push(item)
        }
      }
      http.post(url,{list:ls,type:0}).then((res)=>{
        this.$message.success('提交成功！');
        this.$emit('cancelButDet','1');
      }).catch(err=>{});
    },
    officialcollBut(){
      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.latestPrice){
          this.$message.error('请输入抵(质)押品数量')
          return false
      }
      if(!this.formLabelAlign.unitPrice){
          this.$message.error('请输入抵(质)押品单价')
          return false
      }
      if(!this.formLabelAlign.levyToplimitNum){
          this.$message.error('请输入抵(质)押品征提成数上限')
          return false
      }
      if(this.formLabelAlign.availableBalance<0){
        this.$message.error('抵(质)押品可用余额不能小于0')
          return false
      }
      if(this.formLabelAlign.summary<0){
        this.$message.error('抵(质)押品汇总金额不能小于0')
          return false
      }
      http.post(`/colLevyDraft/sub`,this.formLabelAlign).then((res)=>{
        this.$message.success('提交成功！');
        this.$emit('cancelButDet','1');
      }).catch(err=>{});
    },
    draftcollBut(){
      let url;
      if(this.draft==1){
          url = `/colLevyDraft/update`
      }else {
          url = `/colLevyDraft/update`
      }
      // this.formLabelAlign.levyToplimit =  this.formLabelAlign.levyToplimitNum==''?null:this.formLabelAlign.levyToplimitNum;
      // console.log(this.formLabelAlign);
      http.post(url,this.formLabelAlign).then((res)=>{
        this.$message.success('提交成功！');
        this.$emit('cancelButDet','1');
      }).catch(err=>{});
    },

    addWritten(){
      const curtDate =  this.getCurrentDate()
      const endDate = this.formLabelAlign.endDate + ' 23:59:59'
      let timeStampVal = new Date(curtDate).getTime() - new Date(endDate).getTime()
      if (timeStampVal > 0) {
        this.$message.error('抵质押品已经过期禁止连接批复书')
        return
      }
      http.post(`/liability/getEnterpriseCertificate`,{id:this.formLabelAlign.enterpriseId}).then((res)=>{
        let ls = res.data

        this.getByColData.push({isAdd:true})
        this.writtenList = ls
        this.certList = JSON.parse(JSON.stringify(ls))
        this.updateWri = true
        this.$forceUpdate()
      }).catch(err=>{});
    },
    handleCell(row,column,cell,event) {
      // console.log(column);
    },
    codeFocus(row,index){
      console.log(row,index);
      // let list = JSON.parse(JSON.stringify(this.certList))
      // for(let i in list){
      //   for(let j in this.getByColData){
      //     debugger
      //     if(list[i].certificateCode == this.getByColData[j].certificateCode&&row.certificateCode==''){
      //       list.splice(i,1)
      //     }
      //   }
      // }
      // this.writtenList = list
      // console.log(list);
      // this.$forceUpdate()
    },
    handleDelete(row, index) {
        if(row.isAdd){
            this.getByColData.splice(index,1)
        }else{
            this.form.id = row.id
            this.form.index = index
            this.form.certificateCode = row.certificateCode
            this.form.operateStatus = row.operateStatus
            this.$forceUpdate()
            this.deldialogVisible = true
        }
        this.getloanAmount()
    },
    headerStyle() {
      return 'tableStyle'
    },
    formatTime(str){
      return str.split(' ')[0]
    },
    visibleChange(val) {
      console.log('val--------', val);
      // 监听滚动条拖动 关闭批复书编号选择下拉框
      if (val) {
        window.addEventListener('scroll',this.handleScroll,true)
      } else {
        window.removeEventListener('scroll',this.handleScroll,true)
      }
    },
    handleScroll(){
      // console.log('this.$refs.flexInput', this.$refs.flexInput);
      this.$refs.flexInput.blur()
    },
    writtenChange(v,i){
      let writtenList = JSON.parse(JSON.stringify(this.writtenList))
      for(let item of writtenList){
        if(item.certificateCode == v){
          item.isAdd = true
          item.liabilityInforId = item.id
          delete item.id
          // this.getByColData[i] = item
          this.$set(this.getByColData,i,item)
          this.getExchangeRate(item.currencyCode,i)
          this.$forceUpdate()
          return false;
        }
      }
    },
    getExchangeRate(sourceCode,index){
      if(sourceCode==this.formLabelAlign.currencyCode){
          this.$set(this.getByColData[index], 'exchangeRate', 1)
          this.$set(this.getByColData[index], 'rateType', 1)
          this.digits = 4 // 如果汇率是1(币种相同)控制最多4位
      }else{
        http.post(`/liabilityCol/getExchangeRate`,{sourceCode:sourceCode,targetCode:this.formLabelAlign.currencyCode,orgId:this.formLabelAlign.orgId}).then((res)=>{
          let { rate, rateType } = res.data
          this.$set(this.getByColData[index], 'exchangeRate', rate)
          this.$set(this.getByColData[index], 'rateType', rateType)
          this.digits = rate.toString().split('.')[1].length; // 后端返回是四位表示这是4个小数位
          this.$forceUpdate()
        }).catch(err=>{});
      }

    },

    cancelBut(){
        this.$emit('cancelButDet');
    },
    deleteData(){
      http.post(`/colLevy/delById`,{id:this.formLabelAlign.id}).then((res)=>{
          this.$message.success('提交成功！');
          this.$emit('cancelButDet','1');
      }).catch(err=>{});
    },
    deletetab(){
        http.post(`/liabilityCol/delLibilityDraft`,{id:this.form.id}).then((res)=>{
            if(this.form.operateStatus==1){
              this.getByColData.splice(this.form.index,1)
            }else{
              this.getByColData[this.form.index].operateStatus = 9
              this.getByColData[this.form.index].startDate = this.getByColData[this.form.index].startDateOriginal
              this.getByColData[this.form.index].endDate  = this.getByColData[this.form.index].endDateOriginal
              this.getByColData[this.form.index].setAmount = this.getByColData[this.form.index].setAmountOriginal
              let rate;
              if(this.getByColData[this.form.index].rateType==1){
                rate = this.getByColData[this.form.index].setAmount * this.getByColData[this.form.index].exchangeRate
              }else{
                rate = this.getByColData[this.form.index].setAmount / this.getByColData[this.form.index].exchangeRate
              }
              this.getByColData[this.form.index].rateSetAmount = rate
              this.$set(this.getByColData, this.form.index, this.getByColData[this.form.index])
              this.getloanAmount()
            }
            this.$message.success('操作成功');
            this.$forceUpdate()
            this.deldialogVisible = false

            // this.getByCol()
        }).catch(err=>{});
    },
    reduction(row,index){
        http.post(`/liabilityCol/delLibilityDraft`,{id:row.id}).then((res)=>{
            if(this.form.operateStatus==1){
              this.getByColData.splice(index,1)
            }else{
              this.getByColData[index].operateStatus = 0
              this.$set(this.getByColData, index, this.getByColData[index])
            }
            this.$message.success('操作成功');
            this.$forceUpdate()
            this.deldialogVisible = false
            // this.getByCol()
        }).catch(err=>{});
    },
    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
        }
      }
    },
    examineBut(){
      if(!this.findings.status){
        this.$message.error('请选择审核结果')
        return false
      }
      if(!this.findings.idea){
        this.$message.error('请输入审核原因')
        return false
      }
      this.findings['taskId'] = this.taskId
      http.post(`/act/completeTask`,this.findings).then((res)=>{
          this.$message.success('提交成功！');
          this.$emit('cancelButDet','1');
      }).catch(err=>{});
    },
    rateSetAmountNum(e,index,data, name){
      if (name === 'exchangeRate') {
        data[name] = returnNumFloat(data[name], this.digits)
      }
      if(data.exchangeRate&&data.setAmount){
        if(data.setAmount <= 0 ){
          this.$message.error('抵(质)押品设质要大于0')
          data.setAmount = ''
          return false
        }
        let rate;
        if(data.rateType==1){
           rate = data.setAmount * data.exchangeRate
        }else{
          rate = data.setAmount / data.exchangeRate
        }
        data.rateSetAmount = rate
        this.$set(this.getByColData, index, data)
        this.getloanAmount()
      }
    },
    dataCheck(date,id,name){
      if(!id){
        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(data,index){
      if(!data.certificateCode){
        this.$message.error(`请先选择${index+1}行批复书编号`)
        return false
      }
    },
    dataCheckList(date,data,index,name){
      if(!data.certificateCode){
        data[name] = ''
        this.$set(this.getByColData, index, data)
        return false
      }
      http.post(`/liabilityCol/isHoliday`,{date,id:this.formLabelAlign.orgId}).then((res)=>{
        if(res.data==1){
          data[name] = ''
          this.$set(this.getByColData, index, data)
          this.$message.error('当前日期为节假日')
        }
      }).catch(err=>{});
    },
    forceUp(){
      this.$forceUpdate()
    },
    op_sts(a){
      for(let item of this.operateStatusList){
        if(a==item.code){
          return item.desc
        }
      }
    },
    loadNumber(elValue){
      console.log(elValue);
      if (elValue>100 || elValue.toString().startWith('0')) {
        elValue = "";
      }
      this.formLabelAlign.levyToplimitNum=elValue
      this.$forceUpdate()
      // return elValue
    },
    channelInputLimit (e) {
      let key = e.key
      // 不允许输入'e'和'.'
      if (key === 'e' || key === '.') {
        e.returnValue = false
        return false
      }
      return true
    },
    getloanAmount(){
      let num = 0
      for(let item of this.getByColData){
        num = num + item.rateSetAmount
      }
      this.totalNum = num
    }
  }
}
</script>
<style  lang='scss' scoped>
::v-deep .tableStyle {
  line-height: 35px;
}
.dialog_top{
  width: 1176px;
}
  .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);
}
.huiadd{

    width: 100px;
    height: 36px;
    background: url('../../assets/images/add_hui.png') no-repeat;
    background-size: 100% 100%;
    text-align: center;
    line-height: 36px;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    img{
        width: 16px;
        margin-right: 6px;
    }
    font-size: 13px;
    font-family: "SourceHanSansCN";
    font-weight: 500;
    color: #FFFFFF;
    line-height: 26px;
}
.add_info{
      display: flex;
      align-items: center;
      justify-content: center;
      margin-top: 20px;
      .add_l{
          display: flex;
          align-items: flex-end;
          flex-direction: column;
          span{
              font-size: 13px;
                font-family: "SourceHanSansCN";
                font-weight: 500;
                color: #212121;
                display: inline-block;
                line-height: 40px;
          }
      }
      .add_r{
          display: flex;
          justify-content: flex-start;
          flex-direction: column;
          .input_item{
              width: 295px !important;
              margin-bottom: 4px;
              margin-top: 6px;
          }
      }
  }
  .div_color{
    border: 1px solid red;
    height: 30px !important;
}
.flex-input{
  height: 28px;
}
::v-deep .el-table {
  .el-table__body-wrapper{
    .el-table__row{
      .cell{
        line-height: 24px !important;
      }
    }
  }
  .cell{
    div{
      button{
        padding-top: 9px;
      }
     .show_id{
       height: 36px;
       span{
         margin:6px 0;
       }
     }
    }
  }
}
</style>
<style lang="css" scoped>
.det_tab /deep/.el-date-editor.el-input, .el-date-editor.el-input__inner{
    width: 110px !important;
}
.det_tab /deep/.el-input--prefix .el-input__inner{
    padding-right: 0 !important;
}
.el-date-editor .el-input__suffix ,.el-date-editor .el-input__inner{
  padding-right: 0 !important;
}
.el-table .cell div{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>
