<template>
  <div class="eleStyle">
    <div style="height:100%;width:94%; background:#ffffff; margin: 4%; border-radius: 8px; overflow: hidden;">
      <!--提测报告-->
      <div style="margin: 2%; min-height: 73vh; font-size: 14px;">
        <div style="margin: 30px 0;">搜索
          <el-input v-model="state" size="medium" filterable placeholder="搜索" style="width:20%; margin: 0 10px;" @change="getList(state)" />
          <el-button type="primary" plain size="medium" @click="getQueryData(), centerDialogVisible = true">新建提测报告</el-button>
        </div>
        <template>
          <el-table :data="tableData" size="mini" :header-cell-style="{ background: '#F2F3F6' }" fit border style="width: 100%">
            <el-table-column label="报告名称" min-width="230" align="center">
              <template slot-scope="scope">
                <a href="javascript:void(0)" style="color:#20a0ff" @click="toReportView(tableData, scope.row.id)">{{ scope.row.name }}</a>
              </template>
            </el-table-column>
            <el-table-column label="报告人" min-width="150" align="center">
              <template slot-scope="scope">{{ scope.row.submitter }}</template>
            </el-table-column>
            <el-table-column label="日期" min-width="280" align="center">
              <template slot-scope="scope">{{ scope.row.gmtCreate }}</template>
            </el-table-column>
            <el-table-column label="状态" min-width="150" align="center">
              <template slot-scope="scope">{{ scope.row.statusString }}</template>
            </el-table-column>
            <el-table-column label="操作" align="center" fixed="right" min-width="230">
              <template slot-scope="scope">
                <el-button size="mini" type="primary" plain @click="queryPresentation(scope.row)">更新</el-button>
                <el-button size="mini" type="danger" plain @click="delePresentation(scope.row.id)">删除</el-button>
                <el-tooltip content="功能正在实现中···" placement="top"><el-button type="info" plain size="mini">权限</el-button></el-tooltip>
              </template>
            </el-table-column>
          </el-table>
        </template>
        <el-pagination style="margin-top:30px;" align="center" :current-page="curIndex" :page-sizes="[5, 10, 20]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
        <el-dialog title="提示" :visible.sync="centerDialogVisible" width="30%" center>
          选择任务 :
          <el-select v-model="queryData.state" filterable placeholder="搜索" style="width:80%;" @change="handleSelect($event)">
            <el-option v-for="item in restaurants" :key="item.id" :label="item.value" :value="item.id" />
          </el-select>
          <div style="text-align: center; margin-top: 5%;">
            <template>
              <el-radio v-if="DuanKopu" v-model="queryData.radio" label="1">服务端</el-radio>
              <el-radio v-if="DuanKopu" v-model="queryData.radio" label="2">客户端</el-radio>
            </template>
          </div>
          <span slot="footer" class="dialog-footer">
            <el-button type="primary" @click="selectionReport(queryData)">创建</el-button>
          </span>
        </el-dialog>
      </div>
    </div>
  </div>
</template>

<script>
import { launchTestList, launchTestDelete, taskListCreate } from '@/api/InterfaceReport'
export default {
  name: 'Assumptions',
  data() {
    return {
      userInformation: localStorage.getItem('username'),
      userNames: localStorage.getItem('realname'),
      bizJson: localStorage.getItem('key'),
      z_name: '',
      pageSize: 5,
      curIndex: 1,
      total: 0,
      state: '',
      restaurants: [],
      arrCode: {
        id: '',
        name: ''
      },
      centerDialogVisible: false,
      DuanKopu: false,
      queryData: {},
      indexPage: {
        pageSize: 5,
        curIndex: 1
      },
      tableData: [],
      typeNumber: '',
      haha: '',
      data_type: {}
    }
  },
  created() {
    this.getList()
  },
  mounted() {
    this.getQueryData()
  },
  methods: {
    getList(ele) {
      this.z_name = ele
      this.indexPage = {
        name: ele,
        bizId: localStorage.getItem('key'),
        pageSize: this.pageSize,
        curIndex: this.curIndex
      }
      launchTestList(this.indexPage).then(res => {
        if (res.code === 200) {
          this.tableData = res.data
          this.total = res.total
        } else {
          this.$message({ message: res.msg, type: 'error', duration: 1000, offset: 150 })
        }
        // this.tableData = res.data
        // this.total = res.total
      })
    },
    // 删除报告
    delePresentation(e) {
      this.$confirm('是否确认删除', '确认信息', {
        distinguishCancelAndClose: true,
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      })
        .then(() => {
          this.userData = { id: '', ename: this.userInformation, name: this.userNames }
          launchTestDelete(this.userData, e).then(res => {
            this.getList()
          })
          this.$message({ type: 'success', message: '已删除' })
        })
        .catch(action => {
          this.$message({ type: 'success', message: '已取消' })
        })
    },
    queryPresentation(data) {
      console.log(data)
      switch (data.type) {
        case 1:// 客户端
          this.$router.push({ path: '/Platform/presentation/PresentReport', query: { data: data, taskId: data.taskId, projectId: data.projectId, id: data.id }})
          break
        case 2:// 服务端
          this.$router.push({ path: '/Platform/presentation/presentationReport', query: { data: data, taskId: data.taskId, projectId: data.projectId, id: data.id }})
          break
      }
    },

    // 创建B端，服务端，客户端跳转
    selectionReport(e) {
      if (this.queryData.state !== '') {
        for (var ele of this.restaurants) {
          if (ele.id === e.state) {
            this.data_type = ele
          }
        }
        console.log(e.radio)
        if (e.radio !== undefined) {
          if (e.radio) { // B端可以选择创建服务端或客户端
            if (e.radio === '1') {
              this.$router.push({ path: '/Platform/presentation/presentationReport', query: { task: this.data_type }})
            } else {
              this.$router.push({ path: '/Platform/presentation/PresentReport', query: { task: this.data_type }})
            }
          } else {
            if (this.data_type.type === 5) {
              this.$router.push({ path: '/Platform/presentation/presentationReport', query: { task: this.data_type }}) // 服务端
            } else {
              this.$router.push({ path: '/Platform/presentation/PresentReport', query: { task: this.data_type }}) // 客户端
            }
          }
        } else {
          this.$message({ message: '请选择想要创建服务端还是客户端', type: 'success', duration: 1000, offset: 150 })
        }
      } else {
        this.centerDialogVisible = true
        this.$message({ message: '提示，请选择要添加的任务ID', type: 'warning' })
      }
    },
    getQueryData() {
      this.DuanKopu = false
      this.$set(this.queryData, 'state', '')
      this.$set(this.queryData, 'radio', undefined)
      taskListCreate({ status: 5 }).then(res => {
        const arr = []
        for (var ele of res.data.taskInfoList) {
          arr.push({ value: ele.name, id: ele.id, type: ele.type, bizId: ele.bizId, projectId: ele.projectId })
        }
        this.restaurants = arr
        console.log(arr)
      })
    },
    createFilter(queryString) {
      return (restaurant) => {
        return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0)
      }
    },
    handleSelect(event) {
      this.typeNumber = ''
      this.restaurants.map(item => {
        item.id === event ? this.typeNumber = item.type : ''
      })
      this.typeNumber === 35 ? this.DuanKopu = true : this.DuanKopu = false
    },
    handleSizeChange(size) {
      this.pageSize = size
      this.getList(this.z_name)
    },
    handleCurrentChange(curIndex) {
      this.curIndex = curIndex
      this.getList(this.z_name)
    },
    toReportView(ele, e) {
      for (var vel of ele) {
        if (vel.id === e) {
          this.haha = { haha: vel }
        }
      }
      this.$router.push({ path: '/Platform/presentation/acceptTheReport', query: { id: e }})
    },
    errorFun() {
      this.$notify({ title: 'Failed', message: 'Created Failed', type: 'error', duration: 2000 })
    }
  }
}
</script>

<style scoped>
.eleStyle {
    width: 100%;
    height:100%;
    background:#F2F3F6;
    display: inline-block;
  }
</style>
