<template>
  <app-card class="register-box">
    <app-list v-bind="tableOptions" ref="list">
      <div class="line"></div>
      <div class="btn-box">
        <el-button type="primary" @click="$router.push({ path: '/project/update' })">新建项目</el-button>
      </div>
      <template v-slot:filter-time>
        <el-date-picker
          v-model="filterDate"
          @change="changeDate"
          type="datetimerange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        >
        </el-date-picker>
      </template>
      <template v-slot:picture="{ row }">
        <div :style="`background-image:url(${row.picture});background-size: cover;width:170px;height:80px;`"></div>
      </template>
      <template v-slot:release-status="{ row }">
        <el-switch v-model="row.status" @change="updateStatus(row)"> </el-switch>
      </template>
      <template v-slot:sort-select="{ row }">
        <el-select v-model="row.sort" placeholder="请选择" @change="updateStatus(row)">
          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option>
        </el-select>
      </template>
      <template v-slot:table-x="{ row }">
        <el-button type="text" @click="handlePublish(row)">{{ getCertText(row) }}</el-button>
        <el-button type="text" @click="handleEdit(row)">编辑</el-button>
        <el-button type="text" @click="handleDelete(row)">删除</el-button>
      </template>
    </app-list>
  </app-card>
</template>
<script>
// 接口
import { getAppList, deleteProject, getTemplateList, projectPublish } from '../api'

export default {
  data() {
    const count = []
    for (let i = 0; i < 100; i++) {
      count.push({ value: i, options: i })
    }
    return {
      value1: '',
      filterDate: '',
      options: count,
      createdStart: '',
      createdEnd: '',
      templateList: []
    }
  },
  computed: {
    // 列表配置
    tableOptions() {
      return {
        limit: 10,
        remote: {
          httpRequest: getAppList,
          params: {
            title: '',
            status: '',
            created_time_start: this.createdStart,
            created_time_end: this.createdEnd
          },
          callback: res => {
            res.map(item => {
              item.status = !!parseInt(item.status)
              return item
            })
            return res
          }
        },
        filters: [
          {
            type: 'input',
            prop: 'title',
            label: '项目名称:'
          },
          {
            type: 'select',
            prop: 'template_id',
            label: '证书模板:',
            labelKey: 'title',
            valueKey: 'id',
            options: this.templateList
          },
          {
            slots: 'filter-time',
            label: '创建时间:'
          }
        ],
        columns: [
          { label: '项目名称', prop: 'title', align: 'center' },
          { label: '关联证书模板', prop: 'template_id_name', align: 'center' },
          { label: '关联人数', prop: 'students_count', align: 'center' },
          { label: 'id', prop: 'id', align: 'center' },
          { label: '创建时间', prop: 'created_time', align: 'center' },
          { label: '操作', slots: 'table-x', align: 'center' }
        ]
      }
    }
  },
  methods: {
    getCertText(row) {
      return row.students.find(item => item.status === '1') ? '证书生成中' : '生成证书'
    },
    // 颁发证书
    handlePublish(row) {
      projectPublish({ id: row.id }).then(res => {
        if (res.code === 0) {
          this.$message({
            message: '生成成功',
            type: 'success'
          })
          this.$refs.list.refetch(true)
        }
      })
    },
    // 证书模板
    getTemplateList() {
      getTemplateList({ 'per-page': 100 }).then(res => {
        this.templateList = res.data.list
      })
    },
    // 时间搜索
    changeDate() {
      if (this.filterDate) {
        this.createdStart = this.filterDate[0]
        this.createdEnd = this.filterDate[1]
      } else {
        this.createdStart = ''
        this.createdEnd = ''
        // this.$refs.list.refetch(true)
      }
    },
    handleEdit(row) {
      this.$router.push({ path: '/project/update', query: { id: row.id } })
    },
    handleDelete(row) {
      this.$confirm('此操作将永久删除该项目, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          deleteProject({ id: row.id }).then(res => {
            if (res.code === 0) {
              this.$message({
                message: '删除成功',
                type: 'success'
              })
              this.$refs.list.refetch(true)
            }
          })
        })
        .catch(() => {})
    }
  },
  mounted() {
    this.getTemplateList()
  }
}
</script>

<style lang="scss">
.register-box {
  .el-form-item {
    margin-right: 20px !important;
  }
  .line {
    // border-top: 1px solid #D6D6D6;
    height: 1px;
    background: #d6d6d6;
    margin: 8px 0 23px;
    box-sizing: border-box;
  }
  .btn-box {
    margin-bottom: 16px;
  }
}
</style>
