<template>
  <div v-loading="loading">
    <div class="heior_box">
      <el-button size="small" type="primary" icon="el-icon-edit" @click="batchSelectUser">批量修改归属</el-button>
      <el-button size="small" type="primary" icon="el-icon-edit" @click="dels">批量删除</el-button>
       <el-button size="small" type="primary" icon="el-icon-sold-out" @click="dataExport" v-if="$local.isRoot()">导出</el-button>
      <!-- <el-button size="small" type="primary" icon="el-icon-edit">检测</el-button> -->
      <!-- <el-button size="small" type="primary" icon="el-icon-edit">老账号认证</el-button> -->

      <div class="search-box">
        <!-- <el-cascader
         placeholder="选择产品/套餐"
         size="small"
        v-model="searchModel.pModel"
          :options="options"
          :props="{ checkStrictly: true}"
          clearable
        ></el-cascader> -->
        <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.PackageNames"
          multiple
          collapse-tags
          style="width:200px;"
          size=small
          placeholder="请选择套餐">
          <el-option
            v-for="item in packages"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
        <!-- <el-select v-model="searchModel.ProductId" placeholder="选择产品" clearable size="small">
          <el-option v-for="item in products" :key="item.Name" :label="item.Name" :value="item.Id"></el-option>
        </el-select> -->
        <el-select
          v-model="searchModel.accountTypes"
          multiple
          style="width:150px;"
          collapse-tags
          clearable
          size="small"
          placeholder="选择类型"
        >
          <el-option v-for="item in types" :key="item.text" :label="item.text" :value="item.value"></el-option>
        </el-select>
        <el-date-picker
          size="small"
          style="width:200px"
          v-model="dateRange1"
          type="daterange"
          range-separator="至"
          start-placeholder="账号开通"
          end-placeholder="日期选择"
        ></el-date-picker>
        <el-date-picker
          size="small"
          style="width:200px"
          v-model="dateRange"
          type="daterange"
          range-separator="至"
          start-placeholder="账号到期"
          end-placeholder="日期选择"
        ></el-date-picker>
        <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="类型"  :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>
          <span v-if="scope.row.ProductId == 28" class="handel cursor edit" @click="openLimitjt(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>
      <span>共有连接数：{{countConnect}}</span>
    </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
      type="index" label="序号"
      width="50">
    </el-table-column>
      <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="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 {
      options: [],
      showOnlineDialog: false,
      loading: false,
      loadingOnline: false,
      retData: { TotalCount: 0, Data: [] },
      products: [],
      countConnect: 0,
      packages: [
        {
          label: '年卡',
          value: '年卡'
        }, {
          label: '季卡',
          value: '季卡'
        }, {
          label: '月卡',
          value: '月卡'
        }, {
          label: '周卡',
          value: '周卡'
        }, {
          label: '天卡',
          value: '天卡'
        }, {
          label: '测试卡',
          value: '测试卡'
        }, {
          label: '双月卡',
          value: '双月卡'
        }, {
          label: '双月卡(活动)',
          value: '双月卡(活动)'
        }, {
          label: '月卡(活动)',
          value: '月卡(活动)'
        }, {
          label: '季卡(活动)',
          value: '季卡(活动)'
        }
      ],
      dateRange: [],
      dateRange1: [],
      searchModel: {
        ExpirdDay: -100,
        UserId: 0,
        PageIndex: 1,
        keyWord: '',
        ProductIds: [],
        PackageNames: [],
        accountTypes: null,
        pModel: [],
        Btime: '',
        Etime: '',
        Bktime: '',
        Ektime: '',
        ProductId: '',
        PackageId: '',
        PackageName: '',
      },
      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', '会员管理>>账号管理')
    var userId = this.$route.query.userId
    if (userId) this.searchModel.UserId = userId
    this.get()
    this.getCount()
    // this.getProductWithPackage()
    this.getProduct()
    // eslint-disable-next-line camelcase
    let user_info = this.$local.getUserByCache().Manager.RealName
    // eslint-disable-next-line camelcase
    if (userId) {
      this.$api.post(this.$api.phpURL + 'logs/index/clickInfo', {
        user: user_info,
        operation: '点击客户信息产品账号',
        record: '查看该客户的产品信息',
        userid: userId
      }).then(res => {})
    }
  },
  methods: {
    search () {
      this.searchModel.PageIndex = 1
      this.get()
      this.getCount()
    },
    get () {
      if (this.dateRange && this.dateRange.length === 2) {
        this.searchModel.Btime = this.dateRange[0]
        this.searchModel.Etime = this.dateRange[1]
      }
      if (this.dateRange1 && this.dateRange1.length === 2) {
        this.searchModel.Bktime = this.dateRange1[0]
        this.searchModel.Ektime = this.dateRange1[1]
      }
      this.$api
        .get('course/v1/productaccount/page', this.searchModel)
        .then(res => {
          this.retData = res
        })
    },
    
    getCount () {
      if (this.dateRange && this.dateRange.length === 2) {
        this.searchModel.Btime = this.dateRange[0]
        this.searchModel.Etime = this.dateRange[1]
      }
      if (this.dateRange1 && this.dateRange1.length === 2) {
        this.searchModel.Bktime = this.dateRange1[0]
        this.searchModel.Ektime = this.dateRange1[1]
      }
      var that =this;
      
      this.$api.post(this.$api.phpURL + 'manager/account/getAccountCount',  this.searchModel).then(res => {
        that.countConnect = res.data.sum
      })
    },
    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
    },
    getProductWithPackage () {
      this.loading = true
      this.$api.get('course/v1/product/ProductWithPackage').then(res => {
        this.options = res.Data
        var options = []
        res.Data.forEach(m => {
          var product = {
            label: m.Product.Name,
            value: m.Product.Id,
            children: []
          }

          m.Packages.forEach(p => {
            var pkg = {
              label: p.Name,
              value: p.Id
            }
            product.children.push(pkg)
          })
          options.push(product)
        })
        this.options = options
        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()
          })
      })
    },
    dels () {
      var that = this
      if (this.account.length === 0) {
        // eslint-disable-next-line no-undef
        $this.$warn('请选账号')
        return
      }
      var ids = this.account.map(m => m.Id)
      this.$confirm('确定删除？', '', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(_ => {
        this.$api
          .post('course/v1/productaccount/Deletes',ids)
          .then(res => {
            that.searchModel.PageIndex = 1
            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 => {
          // eslint-disable-next-line no-unused-expressions
          this.loadingOnline = false,
          this.onlineClient = res.Data
          // eslint-disable-next-line no-return-assign
          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('设置成功')
      })
    },
    
    openLimitjt(item) {
      this.$api.post(this.$api.phpURL + 'jinyou/jinyoujt/openTxLimit', {
        account: item.Account,
        PackageName:item.PackageName
      }).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 => {
          if (res.Data) {
            this.$info('离线成功')
          }
          this.online(item.info)
        })
    },
    dataExport () {
      if (this.dateRange && this.dateRange.length === 2) {
        this.searchModel.Btime = this.dateRange[0]
        this.searchModel.Etime = this.dateRange[1]
      }
      if (this.dateRange1 && this.dateRange1.length === 2) {
        this.searchModel.Bktime = this.dateRange1[0]
        this.searchModel.Ektime = this.dateRange1[1]
      }
      if (this.searchModel.ProductIds.length>0){
        this.searchModel.ProductId=parseInt(this.searchModel.ProductIds[0]);
      }
      
      if (this.searchModel.PackageNames.length>0){
        this.searchModel.PackageName=this.searchModel.PackageNames[0];
      }
      this.$api.getDownloadFile('/course/v1/productaccount/Export', this.searchModel)
    }
  }
}
</script>
<style scoped>
.red {
  color: red;
}
</style>
