<template>
  <div class="app-container">
        <div>
            <div class="filter-container">
                <div class="container_item">
                    <span class="item_text">{{$t('workflow.functionName')}}：</span>
                    <el-select  v-model="query.typeName"  placeholder="请选择">
                          <el-option
                          v-for="item in nameList"
                          :key="item.code"
                          :label="item.name"
                          :value="item.code">
                          </el-option>
                      </el-select>
                    <!-- <el-input v-model="query.title"  class="filter-item input_item"  /> -->
                </div>
                <el-button v-waves class="filter-item" type="primary" icon="el-icon-my-search" @click="handleSearch">
                    {{ $t('table.search') }}
                </el-button>
                <el-button v-waves class="filter-item" type="primary" icon="el-icon-my-reset" @click="query={};handleSearch()">
                    {{ $t('table.reset') }}
                </el-button>
            </div>
            <p class="tab_title_span" v-if="tableData.length>0">
                <span>{{$t('workflow.busNumber')}}</span>
                <span>{{$t('workflow.functionName')}}</span>
                <span>{{$t('workflow. saveName')}}</span>
                <span>{{$t('workflow.saveTime')}}</span>
            </p>
            <div class="list_tab" :style="{'height':tableHeight+'px'}">
              <el-scrollbar style="height:100%">
                <div class="list_item" v-for="item in tableData" :key="item.id">
                    <p class="item_left"
                        :style="{'background': item.min<121?'#E1EDE5': item.min<600?'#FFEADC':'rgba(228,81,65, .1)','color': item.min<121?'#35A854': item.min<601?'#ED7E37':'#E45141'}"
                    >
                        <span>等待时间</span>
                        <span>{{item.muDate}}</span>
                    </p>
                    <div class="item_span">
                        <span>{{item.draftCode}}</span>
                        <span>{{item.typeName}}</span>
                        <span>{{item.startUserName}}</span>
                        <span>{{item.createTime}}</span>
                    </div>
                    <div class="item_but">
                        <span v-if="permission.includes('underreview_view')" class="span1" @click="seeBut(item)">{{$t('table.processView')}}</span>
                        <span
                          v-if="permission.includes('underreview_handle')"
                          class="span2"
                          :style="{'background': item.min<121?'#E1EDE5': item.min<600?'#FFEADC':'rgba(228,81,65, .1)','color': item.min<121?'#35A854': item.min<601?'#ED7E37':'#E45141'}"
                          @click="dealWith(item)">{{$t('table.dealwith')}}</span>
                    </div>
                </div>
              </el-scrollbar>
            </div>
        </div>
    <pagination v-show="total>0" :total="total" :page.sync="pageNum" :limit.sync="pageSize" @pagination="getData" />
    <el-dialog
      title="抵(质)押品审批"
      :visible.sync="dataFormVisible"
      v-el-drag-dialog
      width='1260px'>
      <det
        :type="7"
        :data="formLabelAlign"
        @cancelButDet="cancelButDet"
        v-if="DestroyIncomeStatistics == true"
        ref="IncomeStatisticsChild"
        :draft='0'
        :taskId='taskId'
      ></det>
    </el-dialog>
    <el-dialog
      :title="$t('workflow.lookflow')"
      :visible.sync="lookVisible"
      v-el-drag-dialog
      width="480px">
        <el-form ref="dataForm" :model="form" label-position="right" style="margin-top:20px" label-width="100px" >
          <el-form-item :label="$t('workflow.busNumber')+'：'" class="unabled">
            <el-input disabled v-model="form.draftCode"  style="width:294px"  />
          </el-form-item>
          <el-form-item :label="$t('workflow.functionName')+'：'" class="unabled">
             <el-input disabled v-model="form.typeName"   style="width:294px"  />
          </el-form-item>
          <el-form-item :label="$t('workflow.saveName')+'：'" class="unabled">
            <el-input disabled v-model="form.startUserName"    style="width:294px"  />
          </el-form-item>
          <el-form-item :label="$t('workflow.saveTime')+'：'" class="unabled">
            <el-input disabled v-model="form.createTime"   style="width:294px"  />
          </el-form-item>

        </el-form>
            <div class="fl_img">
                <!-- <img :src="imgsrc" alt=""> -->
                <iframe id="template-iframe" frameborder=0; width="100%" height="272px" ref="iframe" :src="imgsrc"  ></iframe>
            </div>
    </el-dialog>
    <el-dialog
      title="额度审批"
      :visible.sync="ExaVisible"
      v-el-drag-dialog
      width="1180px">
      <qtree :sudata="row" v-if="DestroyIncomeStatistics" :operType="8" :isDraf="2" :sourceType="2" :taskId="taskId" @cancelButExa="cancelButExa"></qtree>
    </el-dialog>
    <el-dialog
    title="盘点审批"
    :visible.sync="inventoryVisible"
    v-el-drag-dialog
    width="1300px">
      <inventoryList v-if="DestroyIncomeStatistics" :dataList="dataList" :taskId="taskId" @cancelButinv="cancelButinv"></inventoryList>
    </el-dialog>
    <el-dialog
    title="抵(质)押品基础库审批"
    :visible.sync="colVisible"
    v-el-drag-dialog
    width="580px">
      <el-form ref="dataForm" :model="formCol" label-position="right" style="padding: 30px;" label-width="140px" >
          <!-- <el-form-item label="抵(质)押品证号" class="unabled"> -->
            <el-form-item label="抵(质)押品类别编号：" class="unabled">
            <el-input disabled v-model="formCol.colCode"  style="width:294px"  />
          </el-form-item>
          <el-form-item label="中文名称：" class="unabled">
             <el-input disabled v-model="formCol.chineseName"   style="width:294px"  />
          </el-form-item>
          <el-form-item label="英文名称：" class="unabled">
            <el-input disabled v-model="formCol.englishName"    style="width:294px"  />
          </el-form-item>
           <el-form-item label="操作状态：" class="unabled">
            <el-input disabled :value="formCol.operateStatus==1?'添加':formCol.operateStatus==2?'修改':'删除'"   style="width:294px"  />
          </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>
            <div class="dialog-footer but_icon" style="margin:0"  >
            <div class="dialog-footer but_icon" >
                <el-button v-waves class="filter-item flex_align" type="primary" icon="el-icon-my-tijiao" @click="colBut">
                    {{$t('table.sbumit')}}
                </el-button>
                <el-button v-waves class="filter-item flex_align" type="primary" icon="el-icon-my-quxiao" @click="colVisible=false">
                    {{ $t('table.cancel') }}
                </el-button>
            </div>
        </div>
        </el-form>
    </el-dialog>
    <el-dialog
      title="额度占用审批"
      :visible.sync="quotaFormVisible"
      v-el-drag-dialog
      :close-on-click-modal="false"
      @close="cancelBut"
      width='1050px'>
        <quota
          :data="formData"
          @cancelBut="cancelBut"
          v-if="DestroyIncomeStatistics == true"
          ref="IncomeStatisticsChild"
          :type="4"
          :taskId="taskId"
          ></quota>
      </el-dialog>
  </div>
</template>

<script>
import elDragDialog from '@/directive/el-drag-dialog'
import { mapGetters } from 'vuex'
import waves from '@/directive/waves' // waves directive
import Pagination from '@/components/Pagination' // secondary package based on el-pagination
import http from '@/api/http'
import det from '../collateral/detailsColl.vue'
import qtree from '../quota/quotauntree.vue'
import inventoryList from '../collateral/inventoryreview.vue'
import quota from '../limitmovementandrecovery/quota.vue'
export default {
  name: '',
  components: { Pagination ,det,qtree,inventoryList,quota},
  directives: { waves, elDragDialog },
  computed: {
    ...mapGetters([
      'permission',
    ])
  },
  data() {
    return {
      total: 0,
      query: {},
      tableHeight: 0,
      tableData:[],
      pageNum:1,
      pageSize:20,
      currentType:'1',
      status:'1',
      dataFormVisible:false,
      formLabelAlign:{},
      DestroyIncomeStatistics:false,
      options:[],
      taskId:'',
      lookVisible:false,
      form:{},
      imgsrc:'',
      ExaVisible:false,
      row:{},
      inventoryVisible:false,
      dataList:[],
      findings:{},
      formCol:{},
      colVisible:false,
      nameList:[
        {code:'COLLATERAL',name:'抵(质)押品基础库'},
        {code:'COLLECY',name:'抵(质)押品管理'},
        {code:'INVENTORY',name:'抵(质)押品盘点'},
        {code:'LIABILITY',name:'额度设置管理'},
        {code:'LIABILITYOPERATE',name:'额度使用管理'},
        {code:'LIMITOCCUPY',name:'额度虚占'}],
      quotaFormVisible:false,
      formData:{}
    }
  },
  watch: {

  },
  created() {
    this.getData()
    this.getOptions()
  },

  mounted() {
    this.$nextTick(() => {
      this.tableHeight = window.innerHeight - 270
    })
  },
  methods: {
    getData(paging){
      if(paging){
        this.pageSize = paging.pageSize
        this.pageNum = paging.pageNum
      }
      http.post(`/act/getTasks`,{cpage:this.pageNum,pageSize:this.pageSize,...this.query}).then((res)=>{
        this.tableData = res.data.list;
        // console.log('res.data.list', res.data.list);
        this.total = res.data.total || 0;
      }).catch(err=>{});
    },
    getOptions(){
      http.post(`/cust/queryLists`,{cpage:1,pageSize:999}).then((res)=>{
        this.options = res.data.list;
      }).catch(err=>{});
    },
    handleSearch(){
      this.pageNum = 1
      this.getData()
    },
    details(id,operation){
      this.$router.push({
          name: 'quotauntree',
          query: {id,type:this.currentType,operation}
      })
    },
    headerStyle() {
      return 'tableStyle'
    },
    handleDelete(){

    },
    statusClick(a){
        this.status = a
    },
    seeBut(row){
      let host = window.location.host
      let uUrl = host.includes('8091') ? host + `/lmee-web` : '10.20.20.249:8100/lmee-dev'
      this.form = row
      this.imgsrc = window.location.protocol + '//' + `${uUrl}/act/trace/photo/${row.processDefinitionId}/${row.processId}`
      // this.imgsrc = `http://main.ngrok.jxzzkj.cn:8081/act/trace/photo/${row.processDefinitionId}/${row.processId}`
      this.lookVisible = true
    },
    dealWith(row){
      // console.log(row);
      this.DestroyIncomeStatistics = false;
        if(row.type=="LIABILITY"||row.type=="LIABILITYOPERATE"){//额度
          http.post(`/liability/getDraftTree`,{code: row.businessId}).then((res)=>{
            this.DestroyIncomeStatistics = true;
              this.row = res.data
              this.taskId = row.id
              this.ExaVisible = true
          }).catch(err=>{});

        }else if(row.type=='COLLECY'){//抵(质)押品
            this.formLabelAlign = {}
            http.post(`/colLevy/logInfo`,{id: Number(row.businessId)}).then((res)=>{
                this.DestroyIncomeStatistics = true;
                this.formLabelAlign = res.data;
                this.formLabelAlign.levyToplimitNum = (res.data.levyToplimit*100)
                // for(let item of this.options){
                //     if(item.custCode==res.data.custCode){
                    this.formLabelAlign.custCodeId = res.data.enterpriseId
                //     }
                // }
                this.taskId = row.id
                this.dataFormVisible = true
            }).catch(err=>{});
        }else if(row.type=="INVENTORY"){//担保品盘点
            http.post(`/colInventory/list`,{batchNo: row.businessId}).then((res)=>{
              this.DestroyIncomeStatistics = true;
              for(let item of res.data.list){
                item.auditReason = ''
              }
              this.dataList = res.data.list
              this.taskId = row.id
              this.inventoryVisible = true
            }).catch(err=>{});
          console.log(row);
        }else if(row.type=="COLLATERAL"){
          http.post(`/collateral/logInfo`,{id: Number(row.businessId)}).then((res)=>{
              // this.DestroyIncomeStatistics = true;
              this.formCol = res.data
              this.taskId = row.id
              this.colVisible = true
          }).catch(err=>{});
        }else if(row.type=="LIMITOCCUPY"){
          http.post(`/limit/info`,{id:row.businessId}).then((res)=>{
            this.formData = res.data
            this.taskId = row.id
            this.quotaFormVisible = true
            this.DestroyIncomeStatistics = true
          })
        }
    },
    cancelButDet(t){
      if(t==1){ this.getData()}
      this.dataFormVisible=false
    },
    cancelButExa(t){
      if(t==1){ this.getData()}
      this.ExaVisible=false
    },
    cancelButinv(t){
      if(t==1){ this.getData()}
      this.inventoryVisible=false
    },
    cancelBut(t){
      if(t==1){ this.getData()}
      this.quotaFormVisible=false
    },
    colBut(){
      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.colVisible = false
        this.$message.success('提交成功！');
        this.getData()
      }).catch(err=>{});
    }
  }
}
</script>
<style scoped lang='scss'>
.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;
    }
  }
}
.status_span{
    span{
        display: inline-block;
        width: 64px;
        height: 24px;
        text-align: center;
        line-height: 24px;
        // background: #227CC8;
        // border-radius: 2px;
        font-size: 13px;
        font-family: "SourceHanSansCN";
        font-weight: bold;
        color: #0B4D8F;

    }
    span.cur{
        background: #227CC8;
        border-radius: 2px;
        color: #FFFFFF;
    }
}
.tab_title_span{
    width: 100%;
    padding-left: 150px;
    padding-right: 250px;
    margin: 0;

    span{
        display: inline-block;
        width: 25%;
        font-size: 14px;
        font-family: 'SourceHanSansCN';
        font-weight: 500;
        color: #212121;
    }
}
.list_tab{
    overflow: auto;
    margin-top: 10px;
    .list_item{
        margin-bottom: 10px;
        display: flex;
        height: 70px;
        background: #FFFFFF;
        border-radius: 4px;
        font-size: 13px;
        font-family: 'SourceHanSansCN';
        .item_left{
            padding: 0;
            margin: 0;
            width: 80px;
            margin-right: 70px;
            height: 70px;
            // line-height: 70px;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            // background: rgba(228,81,65, .1);
            span{
                display: inline-block;
                width: 100%;
                text-align: center;
                // color: #E45141;
            }
        }
        .item_span{
            flex: 1;
            span{
                width: 25%;
                display: inline-block;
                line-height: 70px;
                overflow: hidden;
                white-space: nowrap;
                text-overflow:ellipsis;
            }
        }
        .item_but{
            width: 250px;
            display: flex;
            align-items: center;
            justify-content: center;
            .span1{
                width: 68px;
                height: 24px;
                background: rgba(86,131,211, .16);
                border-radius: 4px;
                display: inline-block;
                text-align: center;
                line-height: 24px;
                font-size: 12px;
                font-family: "SourceHanSansCN";
                font-weight: bold;
                color: #5683D3;
                cursor: pointer;
            }
            .span2{
                width: 68px;
                height: 24px;
                background: rgba(228,81,65, .2);
                border-radius: 4px;
                display: inline-block;
                text-align: center;
                line-height: 24px;
                color: #E45141;
                font-size: 12px;
                font-family: "SourceHanSansCN";
                font-weight: bold;
                margin-left: 20px;
                cursor: pointer;
            }
        }
    }
}
.fl_img{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px 0 30px 0;
    img{
        width: 410px;
        height: 91px;
        background: rgba(85, 129, 209, 0.03);
        border: 1px solid #90b4f7;
        border-radius: 2px;
    }
}
</style>
<style lang="scss" scoped>
.dialog_top  .el-input__inner{
  width: 184px !important;
  box-shadow:0px -1px 2px 0px rgb(0 0 0 / 40%) !important;
  border-radius:2px !important;
}
.list_tab .el-scrollbar ::v-deep .el-scrollbar__wrap {
  overflow-x: hidden;
}
</style>
