<template>
    <div class="index">
        <!-- 销售数据 -->
        <div class="index-sales">
          <div>
            <el-table
                :data="tableData"
                border
                size='small'
                :header-cell-style="{'text-align':'center'}"
                :cell-style="{'text-align':'center'}"
                style="width: 100%;">
                <el-table-column
                type="index"
                label="序号"
                width="50">
                </el-table-column>
                <el-table-column
                prop="name"
                label="客户名称"
                width="">
                </el-table-column>
                <el-table-column
                prop="type"
                label="客户类型"
                width="120">
                </el-table-column>
                <el-table-column
                prop="time"
                label="签约时间"
                width="130">
                </el-table-column>
                <el-table-column
                prop="sell"
                label="销售"
                width="100">
                </el-table-column>
                <el-table-column
                prop="hetong"
                label="合同金额"
                width="100">
                </el-table-column>
                <el-table-column
                prop="nianfei"
                label="年费金额"
                width="100">
                </el-table-column>
                <el-table-column
                prop="address"
                label="操作"
                width="180">
                <template slot-scope="scope">
                  <el-button type="primary" @click="details_click(scope.row)">详情</el-button>
                  <!-- <el-button type="danger">删除</el-button> -->
                </template>
                </el-table-column>
            </el-table>
          </div>
          <div style="margin-top: 20px;text-align: right;">
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="queryInfo.page"
                :page-sizes="[10, 20, 50, 100]"
                :page-size="queryInfo.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
            </el-pagination>  
          </div>
           
        </div>
        
    </div>
</template>

<script>
import {getkehulist,getcustomget} from '../../api/index' 
import { uParseTime } from "@/utils/tools";
export default {
    components:{},
    data(){
      return{
        queryInfo:{
            name: '',
            type: '',
            page: 1 ,
            pageSize: 10
        },
        total:0,
        tableData: [],
        custom_options:[{value:1,label:'标准版'},{value:2,label:'尊享版'},{value:3,label:'专业版'}],
      }
    },
    created(){
      this.getlist()
    },
    methods:{
      details_click(row){
        getcustomget(row.id).then(res =>{
          this.$router.push({path:'analyzemonitor',query: {uname: res.data.custom}})
        })
      },
      getlist(){
        getkehulist().then(res =>{
          const list = res.data.list
          console.log('11111111',list);
          const table = []
          list.forEach((item,index) => {
            if(item.is_check==0){
              const arr={
                id:item.id,
                index:index+1,
                name:item.name,
                type:this.getcustom(item.custom_type),
                time:item.sign_time,
                sell:item.salesperson,
                hetong:item.contract_price,
                nianfei:item.year_cost_price
                // index:'1',name:'黑龙江省大庆创伤医院',type:'标准版',time:'2023-08-01',sell:'王哲',hetong:'30000',nianfei:'19800'
              }
              table.unshift(arr)
            }
          });
          this.total = table.length
          this.tableData = table.slice((this.queryInfo.page-1)*this.queryInfo.pageSize,this.queryInfo.page*this.queryInfo.pageSize)
        })
      },
      // 分页每页条数
      handleSizeChange(val){
        this.queryInfo.pageSize = val
      },
      // 分页页数
      handleCurrentChange(val){
        this.queryInfo.page = val
      },
       // 客户类型
      getcustom(val){
        for(let i in this.custom_options){
          if(val == this.custom_options[i].value){
            return this.custom_options[i].label
          }
        }
      },
      // 转换时间
      getTime(val) {
        if(val < 0){
          return ""
        }
        if(val == ""){
          return ""
        }else {
          return uParseTime(val, '{y}-{m}-{d}')
        }
      },
      
    }
}
</script>

<style scoped>
.index{
    background: #F5F7F9;
    padding: 15px;
    box-sizing: border-box;
    width: 100%;
    min-height: 100%;
}
.index-sales{
    width: 100%;
    height: auto;
    padding: 20px 15px;
    box-sizing: border-box;
    /* background: brown; */
    /* border:  1px solid #E6E6E6; */
    border-radius: 5px;
    background: #ffffff;
    margin-bottom: 20px;
}
.index-sales-box{
    border:  1px solid #E6E6E6;
    width: 100%;
    height: auto;
    position: relative;
    padding: 25px 15px 5px;
    box-sizing: border-box;
    
}
.index-sales-box-name{
    position: absolute;
    width: 130px;
    height: 30px;
    background: #ffffff;
    display: inline-block;
    text-align: center;
    line-height: 30px;
    font-size: 13px;
    color: #000000;
    left: 25px;
    top: -15px;
}


</style>