<template>
  <div>
    <div class="app-container" v-if="isList">
      <div class="filter-container">
        <div class="container_item">
          <span class="item_text">{{$t('quota.custCode')}}：</span>
          <el-input v-model="query.custCode"  class="filter-item input_item"  />
        </div>
        <div class="container_item">
          <span class="item_text">{{$t('quota.custName')}}：</span>
          <el-input v-model="query.custName"  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="custCode" :label="$t('quota.custCode')" show-overflow-tooltip align="left" width="160"></el-table-column>
          <el-table-column prop="custName" :label="$t('quota.custName')" show-overflow-tooltip width="150" align="left">
          </el-table-column>
          <el-table-column prop="enterPname"  show-overflow-tooltip :label="$t('quota.superiorenterprise')" width="150" align="left">

          </el-table-column>
          <el-table-column prop="custType" show-overflow-tooltip :label="$t('quota.companytype')"  align="left">
            <template slot-scope="scope">
              <div>
                <span v-if="scope.row.custType==1">单一公司</span>
                <span v-if="scope.row.custType==2">母公司</span>
                <span v-if="scope.row.custType==3">子公司</span>
                <span v-if="scope.row.custType==4">分公司</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="custIndustryName" show-overflow-tooltip :label="$t('quota.industry')" align="left"> </el-table-column>
          <el-table-column prop="creditLevel" show-overflow-tooltip :label="$t('quota.creditrating')" align="left" ></el-table-column>
          <el-table-column prop="legalPerson" show-overflow-tooltip :label="$t('quota.representative')"  align="left"> </el-table-column>
          <el-table-column :label="$t('table.actions')" align="left" width="350" >
            <template  slot-scope="scope">
              <div class="but_list">
                <template v-if="routePath === '/grouplimit'">
                  <el-button v-if="permission.includes('group_limit_detail')" v-waves class="" type="text" icon="el-icon-my-xiangqing" @click="details(scope.row,5)">
                    {{$t('table.details')}}
                  </el-button>
                  <!-- <el-button v-if="permission.includes('group_limit_add')" v-waves class="" type="text" icon="el-icon-my-edadd" @click="details(scope.row,1)">
                    新增
                  </el-button> -->
                  <el-button v-if="permission.includes('group_limit_alter')" v-waves class="" type="text" icon="el-icon-my-edbg" @click="details(scope.row,1)">
                    额度设置
                  </el-button>
                  <el-button v-if="permission.includes('group_limit_frozen')" v-waves class="" type="text" icon="el-icon-my-eddj" @click="details(scope.row,2)">
                  冻结
                  </el-button>
                  <el-button v-if="permission.includes('group_limit_thaw')" v-waves class="" type="text" icon="el-icon-my-edjd"  @click="details(scope.row,3)">
                    解冻
                  </el-button>
                  <el-button v-if="permission.includes('group_limit_termination')" v-waves class="" type="text" icon="el-icon-my-edzz"  @click="details(scope.row,4)">
                    终止
                  </el-button>
                </template>
                <template v-if="routePath === '/nongrouplimit'">
                  <el-button v-if="permission.includes('nongroup_limit_detail')" v-waves class="" type="text" icon="el-icon-my-xiangqing" @click="details(scope.row,5)">
                    {{$t('table.details')}}
                  </el-button>
                  <!-- <el-button v-if="permission.includes('nongroup_limit_add')" v-waves class="" type="text" icon="el-icon-my-edadd" @click="details(scope.row,1)">
                    新增
                  </el-button> -->
                  <el-button v-if="permission.includes('nongroup_limit_alter')" v-waves class="" type="text" icon="el-icon-my-edbg" @click="details(scope.row,1)">
                    额度设置
                  </el-button>
                  <el-button v-if="permission.includes('nongroup_limit_frozen')" v-waves class="" type="text" icon="el-icon-my-eddj" @click="details(scope.row,2)">
                  冻结
                  </el-button>
                  <el-button v-if="permission.includes('nongroup_limit_thaw')" v-waves class="" type="text" icon="el-icon-my-edjd"  @click="details(scope.row,3)">
                    解冻
                  </el-button>
                  <el-button v-if="permission.includes('nongroup_limit_termination')" v-waves class="" type="text" icon="el-icon-my-edzz"  @click="details(scope.row,4)">
                    终止
                  </el-button>
                </template>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <pagination v-show="total>0" :total="total" :page.sync="pageNum" :limit.sync="pageSize" @pagination="getData" />
    </div>
    <div v-else>
      <qtree :sudata="row" :isDraf="isDraf" :operType="operType" v-if="DestroyIncomeStatistics" :sourceType="1" @cancelButExa="cancelButExa"></qtree>
    </div>
  </div>
</template>

<script>
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 qtree from './quotauntree.vue'
export default {
  name: '',
  components: { Pagination ,qtree},
  directives: { waves },
  computed: {
    ...mapGetters([
      'permission',
    ])
  },
  data() {
    return {
      total: 0,
      query: {},
      tableHeight: 0,
      tableData:[],
      pageNum:1,
      pageSize:20,
      currentType:'1',
      row:{},
      isList:true,
      operType:1,
      DestroyIncomeStatistics:false,
      routePath: undefined,
      isDraf:0
    }
  },
  watch: {
      $route(newValue, oldValue){
        this.getClassify()
      },
  },
  created() {
    this.routePath = this.$route.path; // 用于按钮权限判断 需放created 初始化data后赋值
    this.getClassify()
  },

  mounted() {
    this.$nextTick(() => {
      this.tableHeight = window.innerHeight - 240
    })
  },
  methods: {
    getClassify(){
      this.tableData = []
      this.total = 0;
      this.pageNum = 1;
      switch (this.$route.path) {
          case '/grouplimit': this.currentType = '1'; break;
          case '/nongrouplimit':this.currentType = '2';break;
          default: break;
      }
      this.getData();
    },
    getData(paging){
      if(paging){
        this.pageSize = paging.pageSize
        this.pageNum = paging.pageNum
      }
      let url = ''
      if(this.currentType==1){
        url = '/cust/queryGroupLists'
      }else{
        url = '/cust/queryLists'
      }
      http.post(url,{cpage:this.pageNum,pageSize:this.pageSize,...this.query}).then((res)=>{
        this.tableData = res.data.list;
        this.total = res.data.total || 0;
      }).catch(err=>{});
    },

    handleSearch(){
      this.pageNum = 1
      this.getData()
    },
    details(row,type){
      this.DestroyIncomeStatistics = false
      row['isGroup'] = this.currentType
      this.row = row
      if(type==1){
        this.isDraf = 1
      }else{
        this.isDraf = 0
      }
      this.operType = type
      this.isList = false
      this.DestroyIncomeStatistics = true
      // this.$router.push({
      //     name: 'quotauntree',
      //     query: {id:row.id,type:this.currentType,operation:type}
      // })
    },
    headerStyle() {
      return 'tableStyle'
    },
    cancelButExa(t){
      this.isList=true
    },
  }
}
</script>
<style scoped lang='scss'>
::v-deep .has-gutter{
  tr{
    th{
      &:nth-child(8){
        .cell{
          padding-left: 17px;
        }
      }
    }
  }
}
.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;
    }
  }
}
// .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>
