
<template>
  <div>
    <normal-layout>
      <div slot="content">
        <div class="container">
          <el-row :gutter="20">
            <el-col v-for="(item,index) in acountlist" :key="index" :span="6" class="mt-10" @click.native="handleClick(index)">
              <div class="acccounet__panel" :style="activeName == index?{border:'1px solid #d8dde8'}:''">
                <p class="normal-margin">{{item.accountname}}</p>
                <p class="normal-title" style="font-size:1.825rem" :style="activeName == index?{color:'#3874f6'}:''"><small>¥</small>&nbsp;{{tool.formatAmount(item.balance,2)}}</p>
                <div class="score">
                  <p style="margin-top:16px">信用额度:{{item.creditquota}}</p>
                </div>
              </div>
            </el-col>
          </el-row>
          <template>
            <div  class="mt-10" style="float: left">
              <label class="search__label">审核时间:</label>
              <el-date-picker
                  style="margin-right: 24px !important;"
                  size="small"
                  @change="selectChange"
                  value-format="yyyy-MM-dd"
                  v-model="dateSelect"
                  type="daterange"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  clearable>
              </el-date-picker>
            </div>
            <div  class="mt-10 inline-16">
              <el-input  style="width:200px;" placeholder="搜索" :suffix-icon="param.content.where.condition?param.content.where.condition.length > 0?'':'':'el-icon-search'" v-model="param.content.where.condition" @keyup.native.enter="accountMx(param.content.pageNumber = 1)" @clear="accountMx(param.content.pageNumber = 1)" size="small" class="input-with-select inline-16 layout_search__panel" clearable>
              </el-input>
            </div>
          </template>
          <tableLayout :layout="tablecols" :data="list" :opwidth="200" :custom="true" :fixedName="'operation'" height="calc(100vh - 390px)">
            <template v-slot:customcol="scope">
              <div v-if="scope.column.columnname == 'type'">
                {{ scope.column.data.type ? '收入凭证' : '支出凭证' }}
              </div>
              <div v-else>
                {{scope.column.data[[scope.column.columnname]]?scope.column.data[[scope.column.columnname]]:'--'}}
              </div>
            </template>
            <template v-slot:opreation="scope">
              <editPrice v-if="tool.checkAuth($route.name,'update')" class="inline-16" :data="scope.data"/>
              <delete-btn 
                @deleteCreate="deleteCreate" 
                v-if="tool.checkAuth($route.name,'delete')" 
                :id="scope.data.sa_itempriceadjust_itemsid" 
                @deleteSuccess="$refs.basicLayout.listData()" 
                nameId="20221025095404" 
                nameKey="sa_itempriceadjust_itemsids"
              />
            </template>
          </tableLayout>
          <div style="margin-top:16px;text-align:right">
            <el-pagination
              background
              small
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="param.content.pageNumber"
              :page-size="param.content.pageSize"
              layout="total, prev, pager, next, jumper"
              :total="total">
            </el-pagination>
          </div>
        </div>
      </div>
    </normal-layout>
  </div>
</template>

<script>
export default {
  data () {
    return {
      activeName:0,
      acountlist:[],
      tablecols:[],
      list:[],
      param: {
        "id":20230111103403,
        "content": {
          "pageNumber":1,
          "pageSize":20,
          "sa_accountclassid":"",
          "where":{
            "condition":"",
            "begindate":"",
            "enddate":""
          }
        }
      },
      total:0,
      dateSelect:[]
    }
  },
  methods:{
    async listData () {
      const res = await this.$api.requested({
        id:"20221008145903",
        content:{
          type:1
          // "sys_enterpriseid":JSON.parse(window.sessionStorage.getItem('accountinfo')).enterprise.sys_enterpriseid
        }
      })
      this.acountlist = res.data
      console.log(this.acountlist);
      
      this.accountMx()
    },
    async accountMx () {
      this.param.content.sa_accountclassid = this.acountlist[this.activeName].sa_accountclassid
      const res = await this.$api.requested(this.param)
      this.list = res.data.rows
      console.log(res,"res的数据")
    },
    handleClick (index) {
      this.activeName = index
      this.accountMx()
    },
     handleSizeChange(val) {
      // console.log(`每页 ${val} 条`);
      this.param.content.pageSize = val
      this.accountMx()
    },
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`);
      this.param.content.pageNumber = val
      this.accountMx()
    },
    selectChange(){

      if (this.dateSelect !== '' && this.dateSelect !== null){
        this.param.content.where.begindate = this.dateSelect[0]
        this.param.content.where.enddate = this.dateSelect[1]
      }else {
        this.param.content.where.begindate = ''
        this.param.content.where.enddate = ''
      }
      this.accountMx()
    }
  },
  mounted () {
    this.listData()
  },
  created () {
    this.tablecols = this.tool.tabelCol(this.$route.name)['accountMoneyDetailTable'].tablecols
  },
}

</script>
<style>
</style>
<style scoped>
.acccounet__panel{
  padding: 10px;
  line-height: 30px;
  border:1px solid #f1f2f3;
  color:#666;
  border-radius: 5px;
  cursor: pointer;
}
</style>