<template>
  <div v-loading="loading">
    <div class="heior_box">
      <el-button size="small" type="primary" icon="el-icon-edit" @click="batchSelectUser">批量修改归属</el-button>      

      <div class="search-box">
        <el-select
          v-model="searchModel.ProductIds"
          multiple
          collapse-tags
          style="width:200px;"
          size=small
          placeholder="请选择产品">
          <el-option
            v-for="item in products"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
        <el-select v-model="searchModel.ExpirdDay" placeholder="选择过期时间" style="width:100px" clearable size="small">
          <el-option
            v-for="item in expirdtypes"
            :key="item.text"
            :label="item.text"
            :value="item.value"
          ></el-option>
        </el-select>
        <el-input v-model="searchModel.keyWord" placeholder="会员/账号" clearable size="small">
          <el-button slot="append" icon="el-icon-search" @click="search"></el-button>
        </el-input>
      </div>
    </div>
    <el-table
      ref="multipleTable"
      row-key="Id"
      border
      size="medium"
      :data="retData.Data"
      :height="$getHeight(100)"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column prop="UserCode" label="会员">
        <template slot-scope="scope"> 
          <phoneHide :text="scope.row.UserCode"></phoneHide>
        </template>
      </el-table-column>
      <el-table-column prop="ProductName" label="产品"></el-table-column>
      <el-table-column prop="PackageName" label="套餐"></el-table-column>
      <el-table-column prop="AccountType" label="类型" :filters="types" :formatter="typeFormat"></el-table-column>
      <el-table-column prop="Account" label="账号"></el-table-column>
      <el-table-column prop="Pwd" label="密码"></el-table-column>
      <el-table-column prop="ConnectCount" label="连接数"></el-table-column>
      <el-table-column prop="StartTime" label="开通时间" width="160px"></el-table-column>
      <el-table-column prop="EndTime" label="到期时间" width="160px"></el-table-column>
      <el-table-column prop="RestTime" label="剩余时间" width="150px">
        <template slot-scope="scope">
          <span
            v-if="scope.row.Status==1"
            :class="{red:scope.row.RestTime=='已过期'}"
          >{{scope.row.RestTime}}</span>
          <span v-else class="red">已退款</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="140px">
        <template slot-scope="scope">
          <span class="handel cursor edit" @click="selectUser(scope.row)">归属</span>
          <span class="handel cursor edit" @click="del(scope.row)">删除</span>       
          <span class="handel cursor edit" @click="online(scope.row)">查看在线</span> 
          <span v-if="scope.row.ProductId == 27" class="handel cursor edit" @click="openLimit(scope.row)">解除限制</span>
        </template>
      </el-table-column>
    </el-table>
    <div class="block">
      <el-pagination
        v-if="retData.Data.length>0"
        @current-change="get"
        :page-size="50"
        :current-page.sync="searchModel.PageIndex"
        layout="total,prev, pager, next"
        :total="retData.TotalCount"
      ></el-pagination>
    </div>
    <userDrawer ref="userDrawer" @select="onSelect"></userDrawer>
     <el-dialog title="查看在线" :visible.sync="showOnlineDialog" width="900px" v-loading="loadingOnline">
       <el-table  
      row-key="Id"
      border
      size="medium"
      :data="onlineClient"
      :height="$getHeight(300)"     
    >
      <el-table-column prop="Account" label="账号"></el-table-column>
      <el-table-column prop="LoginTime" label="登录时间"></el-table-column>
      <el-table-column prop="OnlineTime" label="在线时间"></el-table-column>     
      <el-table-column prop="ServerIP" label="服务器Ip"></el-table-column>
      <el-table-column prop="LoginIP" label="登录ip"></el-table-column>
      <el-table-column prop="UpStream" label="上行" ></el-table-column>
      <el-table-column prop="DownStream" label="下行"></el-table-column>
      <el-table-column label="操作" width="140px">
        <template slot-scope="scope">
          <span class="handel cursor edit" @click="killout(scope.row)">强制离线</span>         
        </template>
      </el-table-column>
    </el-table>
     </el-dialog>
  </div>
</template>
<script>
export default {
  name: "treeTable",
  components: {
    userDrawer: () => import("@/components/common/userDrawer"),
     phoneHide: () => import("@/components/common/phonehide")
  },
  data() {
    return {
      showOnlineDialog:false,
      loading: false,    
      loadingOnline:false,
      retData: { TotalCount: 0, Data: [] },
      products: [],
      searchModel: {
        ExpirdDay: -100,
        UserId: 0,
        PageIndex: 1,
        keyWord: '',
        ProductIds: [],
        PackageNames: [],
        accountTypes: null,
        pModel: [],
        Btime: '',
        Etime: '',
        Bktime: '',
        Ektime: ''
      },
      onlineClient:[],      
      currentAccount: {},
      account: [],
      types: [
        { text: "新开", value: 1 },
        { text: "批量新开", value: 2 },
        { text: "续费", value: 3 },
        { text: "批量续费", value: 4 },
        { text: "老账号认证", value: 100 },
        { text: "测试", value: 200 }
      ],
      expirdtypes: [
        { text: '全部', value: -100 },
        { text: '已过期', value: 0 },
        { text: '未过期', value: -2 },
        { text: '1天过期', value: 1 },
        { text: '3天过期', value: 3 },
        { text: '1周过期', value: 7 },
        { text: '已经到期1天内', value: -1 },
        { text: '已经到期3天内', value: -3 },
        { text: '已经到期3天以上', value: -4 }
      ],
      typeFormat(row, column, cellValue, index) {
        switch (cellValue) {
          case 1:
            return "新开";
          case 2:
            return "批量新开";
          case 3:
            return "续费";
          case 4:
            return "批量续费";
          case 100:
            return "老账号认证";
          case 200:
            return "测试";
        }
        return "";
      }
    };
  },
  created() {
    this.$store.commit("setCurrentNav", "会员管理>>账号查询");  
    this.getProduct()
  },
  methods: {
    search(){
      this.searchModel.PageIndex=1;
      this.get();
    },
    get() {
      this.$api
        .get("course/v1/productaccount/Search", this.searchModel)
        .then(res => {
          this.retData = res;
        });
    },
    getProduct () {
      this.loading = true
      this.$api.get('course/v1/product/page', this.searchModel).then(res => {
        res.Data.forEach(m => {
          var product = {
            label: m.Name,
            value: m.Id
          }
          this.products.push(product)
        })
        this.loading = false
      })
      this.loading = false
    },
    del(item) {
      var that = this;
      this.$confirm("确定删除？", "", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(_ => {
        this.$api
          .post("course/v1/productaccount/Delete?id=" + item.Id)
          .then(res => {
            that.get();
          });
      });
    },
    goAdd() {
      this.$router.push({ name: "addPackage", query: { optype: 1 } });
    },
    goEdit(item) {
      this.$router.push({
        name: "addPackage",
        query: { id: item.Id, optype: 2 }
      });
    },
    batchSelectUser() {
      if (this.account.length == 0) {
        this.$warn("请选择账号");
        return;
      }
      this.$refs["userDrawer"].show();
    },
    selectUser(row) {
      this.$refs.multipleTable.clearSelection();
      this.$refs.multipleTable.toggleRowSelection(row);
      this.$refs["userDrawer"].show();
    },
    handleSelectionChange(val) {
      this.account = val;
    },
    onSelect(item) {
      var data = {
        AccountIds: this.account.map(m => m.Id),
        UserId: item.Id
      };
      this.$confirm("确定要迁移吗？").then(_ => {
        this.$api.post("course/v1/productaccount/BindUser", data).then(res => {
          this.get();
        });
      });
    },
    online(item){
      this.showOnlineDialog=true;
      this.loadingOnline=true;
      var params={
        productId:item.ProductId,
        account:item.Account,
      }
      this.onlineClient=[];
      this.$api
        .get("course/v1/productaccount/OnLine", params)
        .then(res => {
          this.loadingOnline=false,
          this.onlineClient = res.Data;
          this.onlineClient.forEach(m=>m.info=item)
        })
    },
    openLimit(item) {
      this.$api.post(this.$api.phpURL + 'jinyou/jinyoudt/openTxLimit', {
        account: item.Account,
      }).then(res => {
        this.$message.success('设置成功')
      })
    },
    killout(item){
       var params={
        productId:item.info.ProductId,
        id:item.Id,
      }
       this.$api
          .get("course/v1/productaccount/KillOut",params)
          .then(res => {
            this.online(item.info)
          })     
    }
  }
};
</script>
<style scoped>
.red {
  color: red;
}
</style>
