<template>
  <div class="app-container">
    <div class="filter-container">
      <div class="container_item">
        <span class="item_text">{{$t('levy.draftCode')}}:</span>
        <el-input v-model="query.draftCode"  class="filter-item input_item"  />
      </div>
      <div class="container_item">
        <span class="item_text">{{$t('levy.functionName')}}:</span>
        <el-select  v-model="query.operateStatus"  placeholder="请选择">
              <el-option
              v-for="item in funcList"
              :key="item.code"
              :label="item.name"
              :value="item.code">
              </el-option>
          </el-select>
        <!-- <el-input v-model="query.functionName"  class="filter-item input_item"  /> -->
      </div>
      <!-- <div class="container_item">
        <span class="item_text">{{$t('levy.colName')}}：</span>
        <el-input v-model="query.colChineseName"  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>
    <div class="wrapper_table">
      <el-table
        :data="tableData"
        stripe
        highlight-current-row
        style="width: 100%;"
        :header-cell-class-name="headerStyle"
        :max-height="tableHeight"
      >
        <el-table-column prop="draftCode" :label="$t('levy.draftCode')" show-overflow-tooltip align="left"></el-table-column>
        <el-table-column prop="custName" width="90" :label="$t('levy.custName')" align="left" show-overflow-tooltip></el-table-column>
        <el-table-column :label="$t('levy.functionName')" align="left" show-overflow-tooltip>
          <template slot-scope="scope">
            <div>
              <span v-if="scope.row.operateStatus==0">连接批复书</span>
              <span v-if="scope.row.operateStatus==1">抵(质)押品新增</span>
              <span v-if="scope.row.operateStatus==2">抵(质)押品修改</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="colCode" :label="$t('levy.colCode')" width="115"  align="left" show-overflow-tooltip></el-table-column>
        <el-table-column prop="colCodeLargeName" :label="$t('levy.colCodeLarge')" show-overflow-tooltip width="115" align="left"></el-table-column>
        <el-table-column prop="colCodeSmallName" :label="$t('levy.colCodeSmall')" show-overflow-tooltip width="115" align="left"></el-table-column>
        <!-- <el-table-column prop="colChineseName" :label="$t('levy.colName')" :min-width="100" show-overflow-tooltip  align="left"></el-table-column> -->
        <el-table-column prop="colQuantity" :label="$t('levy.colQuantity')" :min-width="105" show-overflow-tooltip align="left"></el-table-column>
        <el-table-column prop="colUnit" :label="$t('levy.colUnit')" width="55" show-overflow-tooltip align="left"></el-table-column>
        <el-table-column prop="unitPrice" :label="$t('levy.unitPrice')" width="115"  show-overflow-tooltip header-align="right" align="right">
          <template slot-scope="scope">
            <div>
              {{scope.row.unitPrice|numberToCurrency}}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="initialPrice" :label="$t('levy.market')" width="115" show-overflow-tooltip header-align="right" align="right">
          <template slot-scope="scope">
            <!-- <div>
              {{scope.row.latestPrice|numberToCurrency}}
            </div> -->
            <div class="nowrap" >
                  <el-tooltip v-if="scope.row.latestPrice&&scope.row.latestPrice.length>10" class="item" effect="dark" :content="(scope.row.latestPrice)|numberToCurrency" placement="top-start">
                      <span>{{scope.row.latestPrice|numberToCurrency}}</span>
                  </el-tooltip>
                  <span v-else>{{scope.row.latestPrice|numberToCurrency}}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="updateTime" show-overflow-tooltip :label="$t('levy.saveTime')" align="left"> </el-table-column>
        <el-table-column :label="$t('table.actions')" align="left" width="120" >
          <template  slot-scope="scope">
            <div class="but_list">
                <el-button v-if="permission.includes('dbpdraft_area_update')" v-waves class="" type="text" icon="el-icon-my-modify" @click="details(scope.row,1)">
                  {{ $t('table.modify') }}
                </el-button>
                <el-button v-if="permission.includes('dbpdraft_area_del')" v-waves class=""  type="text" icon="el-icon-my-del-y" @click="handleDelete(scope.row.id)">
                    {{ $t('table.delete') }}
                </el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <pagination v-show="total>0" :total="total" :page.sync="pageNum" :limit.sync="pageSize" @pagination="getData" />
    <el-dialog
      title="抵(质)押品新增"
      :visible.sync="dialogFormVisible"
      :close-on-click-modal="false"
      width='1130px'>
        <add :data="formLabelAlign" v-if="DestroyIncomeStatistics == true" @cancelButAdd="cancelButAdd" :draft='1'></add>
    </el-dialog>

    <el-dialog
      :title="type==2?'抵(质)押品修改':'抵(质)押品连接批复书'"
      :visible.sync="dataFormVisible"
      v-el-drag-dialog
      :close-on-click-modal="false"
      width='1260px'>
      <det
        :type="type"
        :data="formLabelAlign"
        @cancelButDet="cancelButDet"
        v-if="DestroyIncomeStatistics == true"
        ref="IncomeStatisticsChild"
        :draft='1'
      ></det>
    </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 add from './addCollateral.vue'
import det from './detailsColl.vue'
export default {
  name: '',
  components: { Pagination,add,det },
  directives: { waves, elDragDialog },
  computed: {
    ...mapGetters([
      'permission',
    ])
  },
  data() {
    return {
      total: 0,
      query: {},
      tableHeight: 0,
      tableData:[],
      pageNum:1,
      pageSize:20,
      currentType:'1',
      dialogFormVisible:false,
      dataFormVisible:false,
      DestroyIncomeStatistics:false,
      formLabelAlign:{},
      options:[],
      type:'2',
      funcList:[{code:0,name:'连接批复书'},{code:1,name:'抵(质)押品新增'},{code:2,name:'抵(质)押品修改'}]
    }
  },
  created() {
    this.getData()
    this.getOptions()
  },

  mounted() {
    this.$nextTick(() => {
      this.tableHeight = window.innerHeight - 240
    })
  },
  methods: {
    getData(){
      http.post(`/colLevyDraft/list`,{cpage:this.pageNum,pageSize:this.pageSize,...this.query}).then((res)=>{
        this.tableData = res.data.list;
        this.total = res.data.total || 0;
      }).catch(err=>{});
    },
    getOptions(){
      http.post(`/cust/queryLists`,{cpage:1,pageSize:999}).then((res)=>{
        this.options = res.data.list;
      }).catch(err=>{});
    },

    handleSearch(){
      this.pageNum = 1
      this.getData()
    },
    details(row,type){
      this.formLabelAlign = {}
      this.DestroyIncomeStatistics = false;
      // if(this.currentType==1&&type==1||this.currentType>1){
      //   this.operationType = type
        http.post(`/colLevyDraft/getById`,{id:row.id}).then((res)=>{
          // this.DestroyIncomeStatistics = true;
          this.formLabelAlign = res.data;
          this.formLabelAlign.levyToplimitNum = res.data.levyToplimit ? (res.data.levyToplimit*100) : undefined
         // this.categoryChange(res.data.colCodeLarge)
          for(let item of this.options){
            if(item.custCode==res.data.custCode){
              this.formLabelAlign.custCodeId = item.id
            }
          }
          if(row.operateStatus==0){
            this.type = 6
            this.dataFormVisible = true
          }else if(row.operateStatus==1){
            this.formLabelAlign.loanAmount = '0'
            this.dialogFormVisible = true
          }else if(row.operateStatus==2){
            this.type = 2
            this.dataFormVisible = true
          }
          this.$nextTick(() => {
            this.DestroyIncomeStatistics = true;
          })
        }).catch(err=>{});
      // }
    },
    headerStyle() {
      return 'tableStyle'
    },
    cancelButAdd(t){
      if(t==1){ this.getData()}
      this.dialogFormVisible=false
    },
    cancelButDet(t){
      if(t==1){ this.getData()}
      this.dataFormVisible=false
    },
     // 删除操作
    handleDelete(id) {
        // 二次确认删除
        this.$confirm('确定要删除吗？', '提示', {
            type: 'warning'
        }).then(() => {
            http.post(`/colLevyDraft/delDraft`,{id}).then((res)=>{
                this.$message.success('删除成功');
                this.getData()
            }).catch(err=>{});
        }).catch(() => {});
    },
  }
}
</script>
<style scoped lang='scss'>
  .el-table__header-wrapper{
    border-radius: 10px 10px 0 0;
  }
.but_list{
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  .el-button{
    overflow: unset !important;//解决点击图标变小问题
  }
  .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;
    }
  }
}
// .add_plus{
    // background: #8E8E8E;
    // // background-size: 100% 100% !important;
    // width: 76px !important;
    // height: 28px !important;
    // border: none !important;
    // box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.35);
    // span{
    //   font-size: 12px;
    //   font-family: "SourceHanSansCN";
    //   font-weight: 500;
    //   color: #FFFFFF;
    //   margin-left:0px !important;
    // }
    // .el-icon-plus{
    //   color:#8E8E8E!important;
    // };

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