<template>
  <a-card :bordered="false" title="终端培训列表">
    <div class="table-page-search-wrapper">
      <SearchCom
        :form="queryParam"
        :list="queryOptions"
        @search="handleRefresh"
        @reset="
          () => {
            ;(queryParam = {}), handleRefresh()
          }
        "
      ></SearchCom>
      <a-space class="table-operator" direction="horizontal">
        <a-button v-if="hasPerm('project:edit')" type="primary" icon="plus" @click="handledCreate">新增项目</a-button>
      </a-space>
    </div>
    <s-table ref="table" size="default" rowKey="id" :columns="columns" :data="loadData">
      <span slot="serial" slot-scope="text, record, index">
        {{ index + 1 }}
      </span>
      <template slot="action" slot-scope="text, record">
        <a-dropdown
          v-if="
            hasPerm('terminal:train:list') ||
            hasPerm('terminal:train:edit') ||
            hasPerm('terminal:train:del') ||
            hasPerm('terminal:train:release')
          "
        >
          <a class="ant-dropdown-link"
            >操作
            <a-icon type="down" />
          </a>
          <a-menu slot="overlay">
            <a-menu-item v-if="hasPerm('terminal:train:release')">
              <a href="javascript:;" @click="executeRelease(record)">发布</a>
            </a-menu-item>
            <a-menu-item v-if="hasPerm('terminal:train:list')">
              <a href="javascript:;" @click="getDetail(record)">详情</a>
            </a-menu-item>
            <a-menu-item v-if="hasPerm('terminal:train:edit')">
              <a href="javascript:;" @click="executeEdit(record)">编辑</a>
            </a-menu-item>
            <a-menu-item>
              <a-popconfirm
                v-if="hasPerm('terminal:train:del')"
                title="是否删除?"
                @confirm="() => delTerminalTrain(record)"
              >
                <a href="javascript:;">删除</a>
              </a-popconfirm>
            </a-menu-item>
          </a-menu>
        </a-dropdown>
      </template>
    </s-table>
  </a-card>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》'
import { SearchCom, STable } from '@/components'
import { terminalTrainList, terminalTrainDel } from '@/api/project/terminalTrain'

export default {
  //import引入的组件需要注入到对象中才能使用
  components: { SearchCom, STable, terminalTrainList, terminalTrainDel },
  props: {},
  data() {
    //这里存放数据
    return {
      queryParam: {
        status: this.$route.query.terminalTrainStatus || null,
        name: this.$route.query.terminalTrainName || null,
        startDate: this.$route.query.terminalTrainStartDate || null,
        endDate: this.$route.query.terminalTrainEndDate || null,
      },
      columns: [
        { title: '序号', width: 'auto', align: 'center', dataIndex: 'id', key: 'id', scopedSlots: { customRender: 'serial' }, },
        { title: '项目名称', width: 'auto', align: 'center', dataIndex: 'projectName', key: 'projectName' },
        { title: '时间', dataIndex: 'date', key: 'date',
          customRender: (text, record, index) => {
            return record.startDate + ' - ' + record.endDate
          },
        },
        { title: '人数', width: 'auto', align: 'center', dataIndex: 'num', key: 'num',
          customRender: (text, record, index) => {
            return record.signNum + ' / ' + record.personNum
          },
        },
        { title: '培训类型', width: 'auto', align: 'center', dataIndex: 'projectType', key: 'projectType' },
        { title: '项目状态', width: 'auto', align: 'center', dataIndex: 'status', key: 'status',
          customRender: (text, record, index) => {
            if (text == '1') return '未发布'
            else if (text == '2') return '未开始'
            else if (text == '3') return '进行中'
            else if (text == '4') return '已结束'
            else if (text == '5') return '已终止'
          },
        },
        { title: '创建人员', width: 'auto', align: 'center', dataIndex: 'createBy', key: 'createBy' },
        { title: '创建日期', width: 'auto', align: 'center', dataIndex: 'createDate', key: 'createDate' },
        { title: '操作', width: '90px', key: 'operation', align: 'center', scopedSlots: { customRender: 'action' } },
      ],
      loadData: (parameter) => {
        return terminalTrainList(Object.assign(parameter, this.queryParam)).then((res) => {
          return res
        })
      },
    }
  },
  //计算属性 类似于data概念
  computed: {
    queryOptions: function () {
      return [
        { type: 'input', placeholder: '项目名称', key: 'projectName' },
        /** 培训状态：1-未发布  2-未开始 3-进行中  4-已结束  5-已中止 */
        {
          type: 'select',
          placeholder: '项目状态',
          key: 'status',
          options: [
            { id: '', name: '全部' },
            { id: '1', name: '未发布' },
            { id: '2', name: '未开始' },
            { id: '3', name: '进行中' },
            { id: '4', name: '已结束' },
            { id: '5', name: '已终止' },
          ],
        },
        { type: 'date', placeholder: '开始时间', key: 'startDate', format:'YYYY-MM-DD' },
        { type: 'date', placeholder: '结束时间', key: 'endDate', format:'YYYY-MM-DD' },
      ]
    },
  },
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    //刷新列表
    handleRefresh(bool) {
      console.log('handleRefresh', this.queryParam)
      this.$refs.table.refresh(bool)
    },
    //删除
    delTerminalTrain(record) {
      console.log('delete Id:', record.id)
      terminalTrainDel({ ids: record.id }).then((res) => {
        console.log(res)
        if (res.code == 200) {
          this.$message.info('删除成功');
          this.$refs.table.refresh();
        }
      })
    },
    //发布项目
    executeRelease(record) {
      console.log('发布项目 id:', record.id)
    },
    //跳转详情页面
    getDetail(record) {
      this.$router.push({
        path: '/project/terminalTrain/detail',
        query: {
          terminalTrainId: record.id,
          terminalTrainName: this.queryParam.name,
          terminalTrainStatus: this.queryParam.status,
          terminalTrainStartDate: this.queryParam.startDate,
          terminalTrainEndDate: this.queryParam.endDate,
          terminalTrainPageNum: this.$refs.table.localPagination.current,
        },
      })
      console.log('跳转详情页面 id:', record.id)
    },
    //编辑新增页面
    executeEdit(record) {
      this.$router.push({
        path: '/project/terminalTrain/form',
        query: {
          id: record.id,  //编辑
          terminalTrainName: this.queryParam.name || null,
          terminalTrainStatus: this.queryParam.status || null,
          terminalTrainStartDate: this.queryParam.startDate || null,
          terminalTrainEndDate: this.queryParam.endDate || null,
          terminalTrainPageNum: this.$refs.table.localPagination.current || null,
        },
      })
      console.log('编辑 id:', record)
    },
    handledCreate() {  //新增
      this.$router.push({
        path: '/project/terminalTrain/form',
        query: {
          terminalTrainName: this.$route.query.terminalTrainName,
          terminalTrainStatus: this.$route.query.terminalTrainStatus,
          terminalTrainStartDate: this.$route.query.terminalTrainStartDate,
          terminalTrainEndDate: this.$route.query.terminalTrainEndDate,
          terminalTrainPageNum: this.$route.query.terminalTrainPageNum,
        },
      })
      console.log('新增')
    },
  },
  created() {}, //生命周期 - 创建完成（可以访问当前this实例）
  mounted() {}, //生命周期 - 挂载完成（可以访问DOM元素）
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style scoped>
</style>