<template>
  <div >
    <div v-if="isList" class="app-container">
        <div class="filter-container">
          <div class="container_item">
            <span class="item_text">{{$t('quota.draftCode')}}：</span>
            <el-input v-model="query.draftCode"  class="filter-item input_item"  />
          </div>
          <!-- <div class="container_item">
            <span class="item_text">{{$t('quota.functionName')}}：</span>
            <el-input v-model="query.functionName"  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="draftCode"  :label="$t('quota.draftCode')" align="left" width="200" show-overflow-tooltip>
              <!-- <template slot-scope="scope">
                <div>
                  <el-tooltip v-if="scope.row.id&&scope.row.draftCode.length>10" class="item" effect="dark" :content="scope.row.draftCode" placement="top">
                    <span class="tab_span">{{scope.row.draftCode}}</span>
                  </el-tooltip>
                  <span v-else>{{scope.row.draftCode}}</span>
                </div>
              </template> -->
            </el-table-column>
            <el-table-column prop="" :label="$t('quota.functionName')"  align="left">
                <span>额度管理</span>
            </el-table-column>
            <el-table-column prop="" :label="$t('quota.isGroup')"   align="left">
                <template slot-scope="scope">
                    <div v-if="scope.row.isGroup==1">
                        集团
                    </div>
                    <div v-else>
                        非集团
                    </div>
                </template>
            </el-table-column>
            <el-table-column prop="custCode" :label="$t('quota.custCode')"   align="left"></el-table-column>
            <el-table-column prop="custName"  :label="$t('quota.custName')" align="left" width="200" show-overflow-tooltip>
              <!-- <template slot-scope="scope">
                <div>
                  <el-tooltip v-if="scope.row.custName&&scope.row.custName.length>10" class="item" effect="dark" :content="scope.row.custName" placement="top">
                    <span class="tab_span">{{scope.row.custName}}</span>
                  </el-tooltip>
                  <span v-else>{{scope.row.custName}}</span>
                </div>
              </template> -->
            </el-table-column>
            <el-table-column prop="updateTime" :label="$t('quota.updateTime')" align="left"> </el-table-column>
            <el-table-column :label="$t('table.actions')" align="left" width="150" >
              <template slot-scope="scope">
                <div class="but_list">
                    <el-button v-if="permission.includes('draft_area_limit_update')" v-waves class="" type="text" icon="el-icon-my-modify" @click="details(scope.row)">
                      {{ $t('table.modify') }}
                    </el-button>
                    <el-button v-if="permission.includes('draft_area_limit_del')" v-waves class=""  type="text" icon="el-icon-my-del-y" @click="handleDelete(scope.row)">
                        {{ $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" />
    </div>
    <div v-else>
      <qtree :sudata="row" :operType="1" :isDraf="1" :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',
      dialogFormVisible:false,
      dataFormVisible:false,
      DestroyIncomeStatistics:false,
      formLabelAlign:{},
      options:[],
      type:'2',
      row:{},
      isList:true
    }
  },
  created() {
    this.getData()
    this.getOptions()
  },

  mounted() {
    this.$nextTick(() => {
      this.tableHeight = window.innerHeight - 240
    })
  },
  methods: {
    getData(){
      http.post(`/liability/getDraftPage`,{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){
      this.row = row
      this.isList = false
      // this.$router.push({
      //     name: 'quotauntree',
      //     query: {id:row.enterpriseId,type:row.isGroup,operation:1,isDraf:1}
      // })
    },
    headerStyle() {
      return 'tableStyle'
    },
     // 删除操作
    handleDelete(row) {
        // 二次确认删除
        this.$confirm('确定要删除吗？', '提示', {
            type: 'warning'
        }).then(() => {
            http.post(`/liability/remAllDraft`,{code:row.draftCode}).then((res)=>{
                this.$message.success('删除成功');
                this.getData()
            }).catch(err=>{});
        }).catch(() => {});
    },
    cancelButExa(t){
      if(t==1){ this.getData()}
      this.isList=true
    },
  }
}
</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;
  .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;
    }
  }
}
.cell div{
  line-height: 15px;
}
// .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>
