<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 ? parseInt(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 ? parseInt(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) {
      console.log(val, '9999')
      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'
          console.log('000')

          this.$router.push({ path: '/user-study', query: { id: val.id, type } })
          break
        case '3':
          const _type = val.is_complete === 1 ? '1' : '0'
          console.log('111')
          if (val.type === 1) {
            this.$router.push({ path: '/market-tools/douYin', query: { id: val.id, type: _type } })
          } else if (val.type === 2) {
            this.$router.push({ path: '/market-tools/mail', query: { id: val.id, type: _type } })
          } else if (val.type === 3) {
            this.$router.push({ path: '/market-tools/app', query: { id: val.id, type: _type } })
          } else if (val.type === 4) {
            this.$router.push({ path: '/market-tools/sms', query: { id: val.id, type: _type } })
          } else if (val.type === 5) {
            this.$router.push({ path: '/market-tools/weChat', 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>
