<template>
  <div class="history">
    <el-tabs v-model="tabActive" type="card" @tab-click="handleTabClick">
      <el-tab-pane label="产品分析报告" name="1">
        <el-table :data="prod.data" style="width: 100%" :header-row-style="{background:'#ededed',color:'#4d4d4d'}" :header-cell-style="{background: 'transparent'}">
          <el-table-column type="index" :index="prod.tableIndex" label="序号" width="50" />
          <el-table-column prop="case_info.name" label="案例名称" min-width="160" />
          <el-table-column prop="score" label="分数" min-width="120" >
            <template slot-scope="scope">
              {{scope.row.is_complete ? scope.row.score : ''}}
            </template>
          </el-table-column>
          <el-table-column prop="updated_at" label="保存时间" min-width="160" />
          <el-table-column label="操作" width="100">
            <template slot-scope="scope">
              <el-button @click="handleClick(scope.row)" type="text" size="small">{{scope.row.is_complete ? '查看' : '继续完成'}}</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="pagination">
          <el-pagination :current-page.sync="prod.page" layout="prev, pager, next" :total="prod.total" @current-change="fetchProdRecords"></el-pagination>
        </div>
      </el-tab-pane>
      <el-tab-pane label="用户分析报告" name="2">
        <el-table :data="user.data" style="width: 100%" :header-row-style="{background:'#ededed',color:'#4d4d4d'}" :header-cell-style="{background: 'transparent'}">
          <el-table-column type="index" :index="user.tableIndex" label="序号" width="50" />
          <el-table-column prop="case_info.name" label="案例名称" min-width="160" />
          <el-table-column prop="score" label="分数" min-width="120" >
            <template slot-scope="scope">
              {{scope.row.is_complete ? scope.row.score : ''}}
            </template>
          </el-table-column>
          <el-table-column prop="updated_at" label="保存时间" min-width="160" />
          <el-table-column label="操作" width="100">
            <template slot-scope="scope">
              <el-button @click="handleClick(scope.row)" type="text" size="small">{{scope.row.is_complete ? '查看' : '继续完成'}}</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="pagination">
          <el-pagination :current-page.sync="user.page" layout="prev, pager, next" :total="user.total" @current-change="fetchUserRecords"></el-pagination>
        </div>
      </el-tab-pane>
      <el-tab-pane label="营销工具使用" name="3">
        <el-table :data="tool.data" style="width: 100%" :header-row-style="{background:'#ededed',color:'#4d4d4d'}" :header-cell-style="{background: 'transparent'}">
          <el-table-column type="index" :index="tool.tableIndex" label="序号" width="50" />
          <el-table-column prop="case_info.name" label="案例名称" min-width="160" />
          <el-table-column prop="type" label="类型" min-width="120" >
            <template slot-scope="scope">
              {{scope.row.type | toolTypeFilter}}
            </template>
          </el-table-column>
          <el-table-column prop="updated_at" label="保存时间" min-width="160" />
          <el-table-column label="操作" width="100">
            <template slot-scope="scope">
              <el-button @click="handleClick(scope.row)" type="text" size="small">{{scope.row.is_complete ? '查看' : '继续完成'}}</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="pagination">
          <el-pagination :current-page.sync="tool.page" layout="prev, pager, next" :total="tool.total" @current-change="fetchToolRecords"></el-pagination>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
import { getProdRecords, getUserRecords, getToolRecords } from '../api'
import { selectCase } from '@/api/base'
const toolTypeMap = { 1: '抖音' }
export default {
  data() {
    return {
      tabActive: '1',
      prod: {
        data: [],
        total: 0,
        page: 1,
        limit: 10,
        tableIndex: 1
      },
      user: {
        data: [],
        total: 0,
        page: 1,
        limit: 10,
        tableIndex: 1
      },
      tool: {
        data: [],
        total: 0,
        page: 1,
        limit: 10,
        tableIndex: 1
      }
    }
  },
  computed: {
    case() {
      return this.$store.state.case
    }
  },
  filters: {
    toolTypeFilter(val) {
      return toolTypeMap[val]
    }
  },
  created() {
    this.tabActive = this.$route.query.type
    this.fetchProdRecords()
    this.fetchUserRecords()
    this.fetchToolRecords()
  },
  methods: {
    handleTabClick() {
    },
    handleClick(val) {
      if (this.case.id === val.case_info.id) {
        this.handleNav(val)
        return
      }
      this.$confirm('此操作将会切换当前选定的案例，确认继续执行？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.fetchSelectCase(val)
      })
    },
    fetchProdRecords() {
      const params = {
        page: this.prod.page,
        limit: this.prod.limit
      }
      this.prod.tableIndex = (this.prod.page - 1) * 10 + 1
      getProdRecords(params).then(res => {
        if (res.code === 0) {
          this.prod.data = res.data.data
          this.prod.total = res.data.total
        }
      })
    },
    fetchUserRecords() {
      const params = {
        page: this.user.page,
        limit: this.user.limit
      }
      this.user.tableIndex = (this.user.page - 1) * 10 + 1
      getUserRecords(params).then(res => {
        if (res.code === 0) {
          this.user.data = res.data.data
          this.user.total = res.data.total
        }
      })
    },
    fetchToolRecords() {
      const params = {
        page: this.tool.page,
        limit: this.tool.limit
      }
      this.tool.tableIndex = (this.tool.page - 1) * 10 + 1
      getToolRecords(params).then(res => {
        if (res.code === 0) {
          this.tool.data = res.data.data
          this.tool.total = res.data.total
        }
      })
    },
    fetchSelectCase(val) {
      selectCase(val.case_info.id).then(res => {
        if (res.code === 0) {
          this.$store.commit('setCase', val.case_info)
          this.handleNav(val)
        }
      })
    },
    handleNav(val) {
      switch (this.tabActive) {
        case '1':
          let path = '/product-analysis/report'
          if (val.is_complete === 1) path = '/product-analysis/result'
          this.$router.push({ path, query: { id: val.id } })
          break
        case '2':
          const type = val.is_complete === 1 ? '3' : '1'
          this.$router.push({ path: '/user-study', query: { id: val.id, type } })
          break
        case '3':
          const _type = val.is_complete === 1 ? '1' : '0'
          this.$router.push({ path: '/market-tools/tool', query: { id: val.id, type: _type } })
          break
      }
    }
  }
}
</script>
<style scoped>
.history{
  width:1160px;
  padding-bottom:40px;
  /* height:calc(100vh - 86px); */
  margin:30px auto;
  background:#fff;
  padding:10px 30px;
}
.history ::v-deep.el-table .el-table__cell.gutter{
  background:#ededed;
}
.pagination{
  padding-top:7px;
  text-align:right;
}
</style>
