<template>
  <div class="index">
    <div class="index-sales2">
      <div class="goodsindex">
        <div  class="xinxi">
          <div style="flex: 1;text-align: right;">
            <el-button type="primary" @click="dialogVisible = !dialogVisible">新增</el-button>
          </div>
        </div>
        <!-- 表格数据 -->
        <el-row :gutter="20" class="goodsindex-list">
            <el-col :span="24">
                <el-table
                    :data="tableData"
                    border
                    size='small'
                    :header-cell-style="{'text-align':'center'}"
                    :cell-style="{'text-align':'center'}"
                    style="width: 100%;"
                    height="calc(100vh - 250px)">
                    <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="renew"
                    label="距续费天数"
                    width="100">
                    </el-table-column>
                    <el-table-column
                    prop="examine"
                    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" @click="deleteclick(scope.row.id)">删除</el-button>
                    </template>
                    </el-table-column>
                </el-table>

                <div style="text-align: right;margin-top: 20px;">
                  <el-pagination
                      @size-change="handleSizeChange"
                      @current-change="handleCurrentChange"
                      :current-page="queryInfo.page"
                      :page-sizes="[1,5,10, 20, 50, 100]"
                      :page-size="queryInfo.pageSize"
                      layout="total, sizes, prev, pager, next, jumper"
                      :total="total">
                  </el-pagination>
                </div>
            </el-col>
        </el-row>
        <!-- 分页 -->
      </div>
    </div>
    <!-- 弹窗 -->
    <div>
      <!-- 新增 -->
      <el-dialog
        title="新增客户"
        :visible.sync="dialogVisible"
        width="70%"
        >
        <div style="height: 400px;overflow: overlay;">
          <Newadd @params="formobj" ref="newadd"></Newadd>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="addcreated">确 定</el-button>
        </span>
      </el-dialog>

      <!-- 删除 -->
      <el-dialog
        title="提示"
        :visible.sync="dele_dialogVisible"
        width="30%">
        <span>确认删除该数据</span>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dele_dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="deleteuse">确 定</el-button>
        </span>
      </el-dialog>
    </div>
    <!-- -->
  </div>
</template>

<script> 
import Newadd from './components/Index'
import { uParseTime } from "@/utils/tools";
import {getkehulist,getkehucreate,getcustomget,getcustomdelete} from '../../api/index'
export default {
  components:{
    Newadd
  },
  data(){
      return {
          queryInfo:{
              name: '',
              type: '',
              page: 1 ,
              pageSize: 10
          },
          total:0,
          tableData: [],
          dialogVisible:false,
          dele_dialogVisible:false,
          dele_id:'',
          clientobj:{},
          custom_options:[{value:1,label:'标准版'},{value:2,label:'尊享版'},{value:3,label:'专业版'}],
          examine_name:'',
      }
  },
  created(){
    this.getkehulist()
    // this.examine_name=window.sessionStorage.getItem('use_name')
  },
  methods:{
      // 选则一页多少条
      handleSizeChange(val){
        this.queryInfo.pageSize = val
        this.getkehulist()
      },
      // 上一页下一页
      handleCurrentChange(val){
        this.queryInfo.page = val
        this.getkehulist()
      },
      // 详情
      details_click(row){
        this.$router.push({path:'onindex',query: {row_id: row.id}})
        // const params={
        //   id:1
        // }
        // getcustomget(row.id).then(res =>{
        //   // console.log('res1111',res);
        //   this.$router.push({path:'onindex',query: {uname: res.data.custom}})
        // })
      },
      // 表格数据源
      getkehulist(){
        getkehulist().then(res =>{
            console.log('res',res.data);
          const list =res.data.list
          const table = []
          
          list.forEach((item,index) => {
            const day_num = this.getDaysBetween(this.getTime(new Date()),item.sign_end_time)
            if(item.is_check ==1){
              const arr ={
                index:index+1,
                id:item.id,
                name:item.name,
                type:this.getcustom(item.custom_type),
                time:item.sign_time,
                sell:item.salesperson,
                renew:day_num||'',
                examine:item.check_person,
              }
              table.unshift(arr)
            }
          });
          this.total = table.length
          this.tableData = table.slice((this.queryInfo.page-1)*this.queryInfo.pageSize,this.queryInfo.page*this.queryInfo.pageSize)
        })
      },
      // 添加
      addcreated(){
        const add = this.$refs.newadd.getclient()
        const data = this.clientobj
        // console.log('data',data);
        getkehucreate(data).then(res =>{
          console.log('getkehucreate',res);
          this.getkehulist()
        })
        this.dialogVisible = false
      },
      // 删除弹窗
      deleteclick(row){
        this.dele_id = row
        this.dele_dialogVisible = true
        console.log('bbbbb',row); 
      },
      // 确认删除
      deleteuse(){
        getcustomdelete(this.dele_id).then(response =>{
          this.$message({message:response.data.msg,type:'success'})
          this.dele_dialogVisible = false
          this.getkehulist()
        })
      },
      // 子传父数据
      formobj(eve){
        this.clientobj =eve
        console.log('this.clientobj',this.clientobj);
      },
      // 客户类型
      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}')
        }
      },
      // 两个日期之间的天数
      getDaysBetween(date1,date2){
          var  startDate = Date.parse(date1);
          var  endDate = Date.parse(date2);
          if (startDate>endDate){
              return 0;
          }
          if (startDate==endDate){
              return 1;
          }
          var days=(endDate - startDate)/(1*24*60*60*1000);
          console.log('bbbbbb续费日期',days);
          return  days;
      },

  },
  mounted(){
    
  }
}
</script>

<style scoped lang="scss">
.goodsindex{
    width: 100%;
    min-height: 100%;
    padding: 15px;
    box-sizing: border-box;
    .xinxi{
      display: flex;
      margin-bottom: 15px;
    }
}
.index{
    background: #F5F7F9;
    padding: 15px;
    box-sizing: border-box;
    width: 100%;
    min-height: 100%;
}
.index-sales2{
    width: 100%;
    height: auto;
    padding: 20px 15px;
    box-sizing: border-box;
    border-radius: 5px;
    background: #ffffff;
    margin-bottom: 20px;
}

/* 列表 */
.goodsindex-list{
    width: 100%;
    height: auto;
    margin-bottom: 20px;
}
/* 分页 */
.goodsindex-page-box{
    width: 100%;
    height: auto;
    display: flex;
    justify-content: flex-end;
}
</style>