<template>
  <div class="demo-tabs-style right_con sale_con">
    <div v-if="adminSale_type==='list'">
      <p class="title_summny">说明：类似于商务角色，可发展多个公会下线，可统一查询旗下公会的数据。</p>
      <Tabs type="card" v-model="adminSale_type">
        <TabPane label="商务专员列表" name="list">
          <div class="search">
            <Input placeholder="商务专员账号" class="wid_120" v-model="search.name" @on-enter="getSalelist()"></Input>
            <Input placeholder="姓名" class="wid_120" v-model="search.realname" @on-enter="getSalelist()"></Input>
            <Button type="primary" @click="getSalelist()">搜索</Button>
            <Button class="clear_btn" @click="removeSearch">清空</Button>
          </div>
          <Table :columns="adminSaleData" :data="adminSaleList" class="clear before_sumtable" border></Table>
          <Table :columns="saleSumData" :data="saleSumList" :show-header="false" class="sumtable" border style="font-weight:bold;"></Table>
          <div class="page">
            <Page :total="count" :page-size="10" :current="pindex" size="small" show-total show-elevator @on-change="getSalelist"/>
          </div>
        </TabPane>
        <TabPane label="添加商务专员" name="add"></TabPane>
      </Tabs>
    </div>
    <div v-else>
     <editAdminSale :adminSale_type='adminSale_type' @return_last='return_last' :pindex='pindex' :saleId='saleId'></editAdminSale>
    </div>
    <guildWater :isGuildWater.sync="isGuildWater" :saleId='saleId'></guildWater>
  </div>
</template>
<script>
import guildWater from "@@/user/guild_water";
import editAdminSale from "@@/user/edit_adminSale";
import {removeSearch} from '@/assets/js/common'
export default {
  name: "admin_sale",
  components: { guildWater, editAdminSale },
  data() {
    return {
      pindex:1,
      count:0,
      saleId:null,
      is_bankInfo: false,
      is_editbankinfo: false,
      isGuildWater: false,
      adminSale_type: "list",
      search:{
        name:'',
        realname:''
      },
      addAdminSale: {
        user_status: "1"
      },
      addBank: {},
      changeAdminSale: {},
      saleSumData:[
        {
          title:'汇总',
          key:'title'
        },
        {
          title:'账号',
          render:(h,params)=>{
            return h('span','--')
          }
        },
        {
          title:'姓名',
          render:(h,params)=>{
            return h('span','--')
          }
        },
        {
          title:'联系电话',
          render:(h,params)=>{
            return h('span','--')
          }
        },
        {
          title:'qq号',
          render:(h,params)=>{
            return h('span','--')
          }
        },
        {
          title:'公会总流水',
          key:'recharge_amount'
        },
        // {
        //   title:'直充流水',
        //   key:'direct_amount',
        // },
        // {
        //   title:'绑币流水',
        //   key:'bind_amount'
        // },
        {
          title:'旗下公会数量',
          key:'studio_num'
        },
        {
          title:'创建时间',
          width:180,
          render:(h,params)=>{
            return h('span','--')
          }
        },
        {
          title:'状态',
          width:80,
          render:(h,params)=>{
            return h('span','--')
          }
        },
        {
          title:'操作',
          render:(h,params)=>{
            return h('span','--')
          }
        },
      ],
      saleSumList:[],
      adminSaleData: [
        {
          title: "ID",
          key: "id"
        },
        {
          title: "账号",
          key: "name"
        },
        {
          title: "姓名",
          key: "realname"
        },
        {
          title: "联系电话",
          key: "mobile"
        },
        {
          title: "QQ号",
          key: "qq"
        },
        {
          title: "公会总流水",
          render:(h,params)=>{
            return h('span',(Number(params.row.recharge_amount))/100)
          }
        },
        // {
        //   title: "直充流水",
        //   render:(h,params)=>{
        //     return h('span',Number(params.row.direct_amount)/100)
        //   }
        // },
        // {
        //   title: "绑币流水",
        //   render:(h,params)=>{
        //     return h('span',Number(params.row.bind_amount)/100)
        //   }
        // },
        {
          title: "旗下公会数量",
          render: (h, params) => {
            if (Number(params.row.studio_num) !== 0) {
              return h(
                "p",
                {
                  style: {
                    cursor: "pointer",
                    color: "rgba(0, 156, 255, 1)",
                    textDecoration: "underline"
                  },
                  on: {
                    click: () => {
                      this.saleId=params.row.id
                      this.isGuildWater = true;
                    }
                  }
                },params.row.studio_num);
            } else {
              return h("span", params.row.studio_num);
            }
          }
        },
        {
          title: "创建时间",
          width:180,
          key: "create_time"
        },
        {
          title: "状态",
          width:80,
          render: (h, params) => {
            if (params.row.status === 0) {
              return h("span",
                { 
                  style: { 
                    color: "rgba(255, 121, 0, 1)",
                    cursor:'pointer'
                  },
                  on:{
                    click:()=>{
                      this.enableSaleList(params.row.id,params.index)
                    }
                  }
                },"已锁定");
            } else {
              return h("span",
                { 
                  style: {
                    color: "rgba(0, 156, 255, 1)",
                    cursor:'pointer' 
                  },
                  on:{
                    click:()=>{
                      this.disableSaleList(params.row.id,params.index)
                    }
                  } 
                },"正常");
            }
          }
        },
        {
          title: "操作",
          render: (h, params) => {
            const change_btn = h("div",
              {
                class: "operate-btn",
                style: { color: "rgba(0, 156, 255, 1)" },
                on: {
                  click: () => {
                    this.adminSale_type = "edit";
                    this.saleId=params.row.id
                  }
                }
              },"编辑");
            const unlock_btn = h("div",
              {
                class: "operate-btn",
                style: { color: "rgba(0, 156, 255, 1)", },
                on: {
                  click: () => {
                    this.enableSaleList(params.row.id, params.index);
                  }
                }
              },"解锁");
            const lock_btn = h("div",
              {
                class: "operate-btn",
                style: { color: "rgba(0, 156, 255, 1)" },
                on: {
                  click: () => {
                    this.disableSaleList(params.row.id, params.index);
                  }
                }
              },"锁定");
            if (params.row.status===0) {
              return [change_btn, unlock_btn];
            } else {
              return [change_btn, lock_btn];
            }
          }
        }
      ],
      adminSaleList: []
    };
  },
  methods: {
    // 获取列表数据
    getSalelist(page=1) {
      this.$store.commit('changeloading',true)
      this.saleSumList=[]
      this.pindex=page
      this.$api.getSaleList({limit:10,page:this.pindex,...this.search}).then(data => {
        if (data.code === 200) {
          this.adminSaleList=data.data
          this.count=data.count
          let title='汇总'
          let recharge_amount =0
          let studio_num=0
          for(let i of this.adminSaleList){
            studio_num+=Number(i.studio_num)
            recharge_amount+=Number(i.recharge_amount)/100
          }
          this.saleSumList.push({title,recharge_amount,studio_num})
          this.$store.commit('changeloading',false)
        } else {
          this.$store.commit('changeloading',false)
          this.$Message.info(data.msg);
        }
      });
    },
    // 清空搜索框
    removeSearch(){
      this.search={...removeSearch({...this.search})}
    },
    // 返回列表
    return_last(pindex){
      this.adminSale_type='list'
      this.getSalelist(pindex)
    },
    enableSaleList(id,i){
      this.$api.enableSaleList({id}).then(data =>{
        if(data.code==200){
          this.$Message.info(data.msg)
          this.adminSaleList[i].status=1
        }else{
          this.$Message.info(data.msg)
        }
      })
    },
    disableSaleList(id,i){
      this.$api.disableSaleList({id}).then(data =>{
        if(data.code==200){
          this.$Message.info(data.msg)
          this.adminSaleList[i].status=0
        }else{
          this.$Message.info(data.msg)
        }
      })
    },
  },
  created() {
    this.getSalelist();
  }
};
</script>
<style>
.add-adminsale-form {
  margin-top: 20px;
}
.before_sumtable .ivu-table:before{
  display: none!important
}
.sumtable.ivu-table-wrapper{
  border-top: 0px!important
}
.sumtable .ivu-table td{
  background-color: rgba(245, 248, 253, 1);
}
</style>

