<template>
  <div class="app-container">
    <!-- 顶部操作区域 -->
    <el-tabs v-model="activeName" type="border-card" @tab-click="handleClick">
      <el-tab-pane label="今日数据" name="first" />
      <el-tab-pane label="过往数据" name="second" />
      <div class="filter-container">
        <div class="filter-control">
          <span>公司名称:</span>
          <el-input
            v-model="listQuery.corporateName"
            placeholder="公司名称"
            clearable
            @keyup.enter.native="getList"
            @clear="getList"
          />
        </div>
        <div class="filter-control">
          <span>IP:</span>
          <el-input v-model="listQuery.ip" placeholder="IP" clearable @keyup.enter.native="getList" @clear="getList" />
        </div>
        <div class="filter-control">
          <span>手机号:</span>
          <el-input
            v-model="listQuery.phoneNumber"
            placeholder="手机号"
            clearable
            style="width: 160px"
            @keyup.enter.native="getList"
            @clear="getList"
          />
        </div>
        <div class="filter-control">
          <span>联系人:</span>
          <el-input
            v-model="listQuery.contacts"
            placeholder="联系人"
            clearable
            style="width: 160px"
            @keyup.enter.native="getList"
            @clear="getList"
          />
        </div>
        <div class="filter-control">
          <span>协销:</span>
          <el-input
            v-model="listQuery.spName"
            placeholder="协销"
            clearable
            style="width: 120px"
            @keyup.enter.native="getList"
            @clear="getList"
          />
        </div>
        <div class="filter-control">
          <span>公司类型:</span>
          <el-select v-model="listQuery.companyType" style="width: 120px" clearable @change="getList">
            <el-option value="" label="请选择" />
            <el-option :value="1" label="游客" />
            <el-option :value="2" label="机构" />
            <el-option :value="3" label="供应商" />
          </el-select>
        </div>
        <div class="filter-control">
          <span>访问客户端:</span>
          <el-select v-model="listQuery.accessClient" style="width: 120px" clearable @change="getList">
            <el-option value="" label="请选择" />
            <el-option :value="0" label="网站" />
            <el-option :value="1" label="小程序" />
          </el-select>
        </div>
        <div class="filter-control">
          <span>关联供应商:</span>
          <el-select v-model="listQuery.relevanceShop" filterable @change="getList">
            <el-option value="" label="请选择" />
            <el-option v-for="item in supplierList" :key="item.shopId" :label="item.shopName" :value="item.shopName" />
          </el-select>
        </div>
        <div class="filter-control">
          <span>供应商标签:</span>
          <el-select v-model="tagsList" multiple filterable placeholder="请选择" @change="handleTagsOptions">
            <el-option v-for="item in tagsOptions" :key="item.id" :label="item.value" :value="item.value" />
          </el-select>
        </div>
        <div class="filter-control">
          <span>父标签:</span>
          <el-select v-model="listQuery.pageLabels" filterable @change="getList">
            <el-option value="" label="请选择" />
            <el-option v-for="item in labelsOptions" :key="item.id" :label="item.value" :value="item.value" />
          </el-select>
        </div>
        <div class="filter-control">
          <span>页面类型:</span>
          <el-select v-model="listQuery.pageTypes" filterable @change="getList">
            <el-option value="" label="请选择" />
            <el-option v-for="item in typesOptions" :key="item.id" :label="item.pageType" :value="item.pageType" />
          </el-select>
        </div>
        <div v-if="tabsCurrent === 1" class="filter-control">
          <span>访问日期:</span>
          <el-date-picker
            v-model="time"
            type="daterange"
            unlink-panels
            value-format="yyyy-MM-dd"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :picker-options="pickerOptions"
            @change="getList"
          />
        </div>
        <div class="filter-control">
          <el-button type="primary" @click="getList">查询</el-button>
          <el-button v-permission="'keyword:list:export'" type="primary" @click="handleExport"> 导出 </el-button>
        </div>
      </div>
      <!-- 关键词列表 -->
      <el-table v-loading="isLoading" :data="list" border style="width: 100%" :height="tableHeight">
        <el-table-column prop="ip" fixed label="IP" align="center" width="80" />
        <el-table-column prop="region" fixed label="地区" align="center" width="100" />
        <el-table-column prop="accessClient" fixed label="访问客户端" align="center" width="70">
          <template slot-scope="{ row }">
            {{ row.accessClient | accessClientFilters }}
          </template>
        </el-table-column>
        <el-table-column prop="companyType" fixed label="公司类型" align="center" width="70">
          <template slot-scope="{ row }">
            {{ row.companyType | companyTypeFilters }}
          </template>
        </el-table-column>
        <el-table-column prop="corporateName" label="公司名称" align="center">
          <template slot-scope="{ row }">
            <template v-if="row.companyType === '2'">
              <a style="color: #2fa4e7" target="_blank" :href="handleClubHrefLink(row)">
                {{ row.corporateName ? row.corporateName : '---' }}
              </a>
            </template>
            <template v-else>
              {{ row.corporateName ? row.corporateName : '---' }}
            </template>
          </template>
        </el-table-column>
        <el-table-column prop="contacts" label="联系人" align="center">
          <template slot-scope="{ row }">
            <template v-if="row.companyType === '2'">
              <a style="color: #2fa4e7" target="_blank" :href="handleClubHrefLink(row)">
                {{ row.contacts ? row.contacts : '---' }}
              </a>
            </template>
            <template v-else>
              {{ row.contacts ? row.contacts : '---' }}
            </template>
          </template>
        </el-table-column>
        <el-table-column prop="phoneNumber" label="手机号" align="center" width="110">
          <template slot-scope="{ row }">
            {{ row.phoneNumber ? row.phoneNumber : '---' }}
          </template>
        </el-table-column>
        <el-table-column prop="spName" label="所属协销" align="center" width="100">
          <template slot-scope="{ row }">
            {{ row.spName ? row.spName : '---' }}
          </template>
        </el-table-column>
        <el-table-column prop="relevanceShop" label="关联供应商" align="center" width="210">
          <template slot-scope="{ row }">
            <template v-if="row.relevanceShop">
              <p v-for="item in handleRelevanceShop(row.relevanceShop)" :key="item">
                {{ item ? item : '---' }}
              </p>
            </template>
            <p v-else>---</p>
          </template>
        </el-table-column>
        <el-table-column prop="spName" label="供应商标签" align="center" width="120">
          <template slot-scope="{ row }">
            <el-popover placement="top-start" width="400" trigger="hover">
              <span>{{ row.label ? row.label : '---' }}</span>
              <span slot="reference">{{ row.label ? row.label.substr(0, 9) + '...' : '--' }}</span>
            </el-popover>
            <!-- {{ row.label ? row.label : '---' }} -->
          </template>
        </el-table-column>
        <el-table-column prop="addTime" label="注册时间" align="center" width="100">
          <template slot-scope="{ row }">
            {{ row.addTime ? row.addTime : '---' }}
          </template>
        </el-table-column>
        <el-table-column prop="numbers" label="访问页面数量" align="center" width="50">
          <template slot-scope="{ row }">
            {{ row.numbers ? row.numbers : '0' }}
          </template>
        </el-table-column>
        <el-table-column prop="accessDuration" label="总时长" align="center" width="80" />
        <el-table-column prop="accessDate" label="访问日期" align="center" width="100" />
        <el-table-column prop="lastAccessTime" label="最后访问时间" align="center" width="100" />
        <el-table-column fixed="right" label="操作" align="center" width="120">
          <template slot-scope="{ row }">
            <el-button type="primary" size="mini" @click="handleRecordDetail(row)">查看详情</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 页码 -->
      <pagination
        :total="total"
        :page-sizes="[10, 20, 30, 100]"
        :page-size="100"
        :page.sync="listQuery.pageNum"
        :limit.sync="listQuery.pageSize"
        @pagination="fetchRecordList"
      />
    </el-tabs>
  </div>
</template>

<script>
import { downloadWithUrl } from '@/utils'
import { fetchRecordList, getKeyword, getPageType } from '@/api/user/record/record'
import { fetchShopRelevanceList, searchBehaviorList } from '@/api/user/supplier/supplier'
import { export_json_to_excel } from '@/vendor/Export2Excel'
import pickerOptions from '@/utils/time-picker.js'
const defaultListQuery = {
  todayType: 0, // 0 今日数据 1 以往数据
  ip: '', // 访问人ID
  clubId: '', // 机构Id
  corporateName: '', // 公司名称
  companyType: '', // 公司类型
  accessClient: '', // 访问客户端
  relevanceShop: '', // 供应商名称
  label: '', // 供应商标签
  contacts: '', //  联系人
  phoneNumber: '', // 手机号
  spName: '', // 协销
  pageTypes: '', // 页面类型
  pageLabels: '', // 父级标签
  startTime: '',
  endTime: '',
  pageNum: 1,
  pageSize: 100
}
export default {
  name: 'RecordList',
  filters: {
    companyTypeFilters(value) {
      // 公司类型
      const map = {
        1: '游客',
        2: '机构',
        3: '供应商'
      }
      return map[value]
    },
    accessClientFilters(value) {
      // 访问客户端
      const map = {
        0: '网站',
        1: '小程序'
      }
      return map[value]
    }
  },
  data() {
    return {
      activeName: 'first',
      isLoading: true,
      pickerOptions,
      time: [],
      listQuery: Object.assign({}, defaultListQuery),
      shopListQuery: {
        shopName: '',
        linkMan: '',
        contractMobile: '',
        pageNum: 1,
        pageSize: 100
      },
      list: [],
      total: 0,
      currentList: [],
      supplierList: [], // 关联供应商列表
      labelsOptions: [], // 父级标签
      typesOptions: [], // 页面类型
      tagsOptions: [],
      tagsList: [],
      tabsCurrent: 0,
      tableHeight: window.innerHeight - 120, // 表格动态高度
      screenHeight: window.innerHeight // 内容区域高度
    }
  },
  computed: {},
  watch: {
    // 监听screenHeight从而改变table的高度
    screenHeight(val) {
      this.screenHeight = val
      this.tableHeight = this.screenHeight - 260
    }
  },
  created() {
    if (this.$route.query.type === 'second') {
      this.activeName = 'second'
      this.tabsCurrent = this.listQuery.todayType = 1
    } else {
      this.activeName = 'first'
      this.tabsCurrent = this.listQuery.todayType = 0
    }
    this.getHeigth()
    this.handleInfo()
    this.getList()
    this.getKeyword()
    this.getPageType()
  },
  mounted() {
    // window.onresize:浏览器尺寸变化响应事件
    window.onresize = () => {
      return (() => {
        // window.innerHeight:浏览器的可用高度
        window.screenHeight = window.innerHeight
        this.screenHeight = window.screenHeight
      })()
    }
  },
  methods: {
    // 根据不同设备设置表格高度
    getHeigth() {
      const windowWidth = document.documentElement.clientWidth
      if (windowWidth > 1200) {
        this.tableheight = 900
      } else {
        this.tableheight = 500
      }
      console.log('tabheight', this.tableheight)
    },
    handleInfo() {
      // 初始化
      console.log('query', this.$route.query)
      if (this.$route.query.type === 'second') {
        this.listQuery.clubId = this.$route.query.clubId
        this.listQuery.corporateName = this.$route.query.corporateName
        this.time.push(this.$route.query.startTime)
        this.time.push(this.$route.query.endTime)
      } else {
        this.listQuery.clubId = this.$route.query.clubId
        this.listQuery.corporateName = this.$route.query.corporateName
      }
    },
    // tab切换
    handleClick(tab, event) {
      if (tab.name === 'first') {
        this.tabsCurrent = this.listQuery.todayType = 0
        if (this.$route.query.type) {
          this.handleInfo()
        } else {
          this.listQuery = Object.assign({}, defaultListQuery)
        }
        this.getList()
      } else if (tab.name === 'second') {
        this.tabsCurrent = this.listQuery.todayType = 1
        if (this.$route.query.type) {
          this.handleInfo()
        } else {
          this.listQuery = Object.assign({}, defaultListQuery)
        }
        this.getList()
      }
    },
    handleTagsOptions(arr) {
      this.listQuery.label = arr.join(',')
      this.getList()
    },
    // 获取行为记录列表
    getList() {
      this.listQuery.pageNum = 1
      this.list = []
      if (this.time && this.time.length > 0) {
        this.listQuery.startTime = this.time[0]
        this.listQuery.endTime = this.time[1]
      } else {
        this.listQuery.startTime = ''
        this.listQuery.endTime = ''
      }
      this.fetchRecordList()
      this.fetchShopRelevanceList()
      this.searchBehaviorList()
    },

    // 获取关键词列表
    async fetchRecordList() {
      try {
        this.isLoading = true
        const res = await fetchRecordList(this.listQuery)
        this.list = res.data.results
        this.total = res.data.totalRecord
        this.isLoading = false
      } catch (error) {
        console.log(error)
      }
    },
    // 获取父级标签列表
    async getKeyword() {
      try {
        const res = await getKeyword()
        this.labelsOptions = res.data
      } catch (error) {
        console.log(error)
      }
    },
    // 获取页面类型列表
    async getPageType() {
      try {
        const res = await getPageType()
        this.typesOptions = res.data
      } catch (error) {
        console.log(error)
      }
    },
    // 获取关联供应商列表选项
    async fetchShopRelevanceList() {
      try {
        const res = await fetchShopRelevanceList(this.shopListQuery)
        this.supplierList = res.data.results
      } catch (error) {
        console.log(error)
      }
    },

    // 获取供应商标签库列表选项
    async searchBehaviorList() {
      try {
        const res = await searchBehaviorList()
        this.tagsOptions = res.data
      } catch (error) {
        console.log(error)
      }
    },
    // 机构跳转
    handleClubHrefLink(row) {
      return (
        process.env.VUE_APP_ADMIN_URL +
        `/a/user/jumpLink/toOldAdmin?type=1&clubId=${row.clubId}&clubName=${row.corporateName}`
      )
    },
    // 查看详情
    handleRecordDetail(row) {
      this.$router.push({
        path: '/user/detail-list',
        query: { ip: row.ip, accessDate: row.accessDate, userId: row.userId }
      })
    },

    // 导出
    async handleExport() {
      if (this.tabsCurrent === 0) {
        // 导出今日数据
        const url = process.env.VUE_APP_BASE_API + '/user/behavior/exportToday?todayType=0'
        downloadWithUrl(url, '用户行为记录')
      } else {
        const url =
          process.env.VUE_APP_BASE_API +
          `/user/behavior/exportToday?todayType=1&ip=${this.listQuery.ip}&corporateName=${this.listQuery.corporateName}&companyType=${this.listQuery.companyType}&accessClient=${this.listQuery.accessClient}&relevanceShop=${this.listQuery.relevanceShop}&label=${this.listQuery.label}&contacts=${this.listQuery.contacts}&phoneNumber=${this.listQuery.phoneNumber}&spName=${this.listQuery.spName}&startTime=${this.listQuery.startTime}&endTime=${this.listQuery.endTime}`
        downloadWithUrl(url, '用户行为记录')
        // 导出以往当前数据
      }
    },
    async export_json_to_excel() {
      // 前端导出
      try {
        await this.$confirm('确定将用户行为记录导出为xlsx？', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
        // 导出数据格式化
        const filterVal = [
          'ip',
          'region',
          'accessClient',
          'companyType',
          'corporateName',
          'contacts',
          'phoneNumber',
          'spName',
          'relevanceShop',
          'label',
          'addTime',
          'numbers',
          'accessDuration',
          'accessDate'
        ]
        const data = this.formatJson(filterVal, this.list.slice(0))
        export_json_to_excel({
          header: [
            'IP',
            '地区',
            '访问客户端',
            '公司类型',
            '公司名称',
            '联系人',
            '手机号',
            '所属协销',
            '关联供应商',
            '供应商标签',
            '注册时间',
            '访问页面数量',
            '总时长',
            '访问日期'
          ],
          data,
          filename: '用户行为记录'
        })
      } catch (error) {
        console.log(error)
        this.$message.info('已取消导出操作')
      }
    },
    formatJson(filterVal, jsonData) {
      return jsonData.map((v, index) =>
        filterVal.map((key) => {
          if (key === 'accessClient') {
            const t = ['网站', '小程序']
            return t[v[key]]
          }
          if (key === 'companyType') {
            const t = ['游客', '机构', '供应商']
            return t[v[key]]
          }
          return v[key]
        })
      )
    },
    handleRelevanceShop(value) {
      const array = []
      if (!value) {
        return array
      }
      return value.split(',')
    }
  }
}
</script>

<style></style>
