<template>
  <a-card :bordered="false" title="项目管理">
    <a-space direction="vertical" style="width: 100%">
      <a-space direction="horizontal">
        项目名:
        <a-input v-model="queryParam.projectName" style="width: 100%" />
        项目状态:
        <a-select v-model="queryParam.status" placeholder="请选择" default-value="null" style="width: 120px">
          <a-select-option value="null">全部</a-select-option>
          <a-select-option value="1">运行中</a-select-option>
          <a-select-option value="2">已结束</a-select-option>
          <a-select-option value="3">未发布</a-select-option>
        </a-select>
        开始时间:
        <a-date-picker v-model="queryParam.startDate" style="width: 100%" placeholder="请输入开始时间" valueFormat="YYYY-MM-DD HH:mm:ss" />
        结束时间:
        <a-date-picker v-model="queryParam.endDate" style="width: 100%" placeholder="请输入结束时间" valueFormat="YYYY-MM-DD HH:mm:ss" />
        培训方式:
        <a-select v-model="queryParam.trainWay" placeholder="请选择" default-value="null" style="width: 120px">
          <a-select-option value="null">全部</a-select-option>
          <a-select-option value="1">培训</a-select-option>
          <a-select-option value="2">考试</a-select-option>
          <a-select-option value="3">培训-练习</a-select-option>
          <a-select-option value="4">培训-练习-考试</a-select-option>
        </a-select>

        <a-button type="primary" icon="search" @click="$refs.table.refresh(true)">查询</a-button>
        <a-button icon="redo" @click="() => (queryParam = {})">重置</a-button>
      </a-space>

      <a-space class="table-operator" direction="horizontal">
        <a-button v-if="hasPerm(power.add)" type="primary" icon="plus" @click="handledCreate">新增项目</a-button>
      </a-space>

      <s-table ref="table" size="default" rowKey="id" :columns="columns" :data="loadData" :pageNum="Number(this.$route.query.projectPageNum) || 1">
        <span slot="serial" slot-scope="text, record, index">
          {{ index + 1 }}
        </span>
        <span slot="action" slot-scope="text, record">
          <template>
            <a v-if="hasPerm(power.release) && record.status == 1" href="javascript:;" @click="handledRelease(record)">发布</a>
            <a-divider type="vertical" v-if="hasPerm(power.edit) && hasPerm('project:list')" />
            <a v-if="hasPerm('project:list')" href="javascript:;" @click="getDetail(record)">详情</a>
            <a-divider type="vertical" v-if="hasPerm(power.edit) && hasPerm('project:list')" />
            <a v-if="hasPerm(power.edit)" href="javascript:;" @click="handledCreate(record)">修改</a>
            <a-divider type="vertical" v-if="hasPerm(power.del) && hasPerm('project:list')" />
            <a-popconfirm title="是否删除?" @confirm="() => handleDelete(record)">
              <a v-if="hasPerm(power.del)" href="javascript:;">删除</a>
            </a-popconfirm>
          </template>
        </span>
      </s-table>
    </a-space>
  </a-card>
</template>

<script>
import { STable } from '@/components'
import { getProjectList } from '@/api/project/project'

export default {
  components: {
    STable,
  },
  data() {
    return {
      power: {
        add: '',
        del: '',
        edit: '',
        release: '',
      },
      // 查询参数
      queryParam: {
        projectName: null,
        status: null,
        startDate: null,
        endDate: null,
        trainWay: null,
        type: '',
      },
      // 表头
      columns: [
        { title: '序号', key: 'id', dataIndex: 'id', width: 60, scopedSlots: { customRender: 'serial' } },
        { title: '项目名称', dataIndex: 'projectName', key: 'projectName' },
        {
          title: '时间',
          dataIndex: 'startDate',
          key: 'startDate',
          customRender: (text, record, index) => {
            return record.startDate + ' - ' + record.endDate
          },
        },
        { title: '人数', key: 'personNum', dataIndex: 'personNum', customRender: (text) => text + '人' },
        { title: '项目类型', dataIndex: 'projectType', key: 'projectType' },
        {
          title: '项目状态',
          dataIndex: 'status',
          customRender: (text, record, index) => {
            //项目状态 1-未发布 2-未开始 3-进行中  4-已完成  5-已中止
            if (text == 1) {
              return '未发布'
            }
            if (text == 2) {
              return '未开始'
            }
            if (text == 3) {
              return '进行中'
            }
            if (text == 4) {
              return '已完成'
            }
            if (text == 5) {
              return '已中止'
            }
          },
        },
        { title: '创建人员', key: 'createBy', dataIndex: 'createBy' },
        { title: '创建时间', key: 'createDate', dataIndex: 'createDate' },
        {
          title: '操作',
          width: 200,
          align: 'right',
          scopedSlots: { customRender: 'action' },
        },
      ],

      // 加载数据方法 必须为 Promise 对象
      loadData: (parameter) => {
        return getProjectList(Object.assign(parameter, this.queryParam)).then((res) => {
          return res
        })
      },
    }
  },
  //生命周期 - 创建完成
  created() {
    this.changeType()
  },
  //生命周期 - 销毁完成
  destroyed() { },
  // 监控data中的数据变化
  watch: {
    $route(to, from) {  //to是前往的路由  from是去往的路由 同一个组件只会渲染一次
      this.changeType(to.path)
      this.$refs.table.refresh(true)
    },
  },
  methods: {
    //发布项目
    handledRelease(record){

    },
    //编辑时获取详情
    getDetail(record) {
      this.$router.push({
        path: '/project/detail',
        query: {
          id: record.id, //自主项目还是系统项目，控制路由跳转
          t: this.queryParam.type,
          projectId: record.id, //项目id
          projectPageNum: this.$refs.table.localPagination.current, //当前页
        },
      })
    },
    // 增
    handledCreate(record) {
      this.$router.push({
        path: '/project/projectStepForm',
        query: {
          t: this.queryParam.type, //自主项目还是系统项目，控制路由跳转
          projectId: record.id, //项目id
          projectPageNum: this.$refs.table.localPagination.current, //当前页
        },
      })
    },
    //变更类型
    changeType(path) {
      var arr = []
      if (path) {
        arr = path.split('/')
      } else {
        arr = this.$route.path.split('/')
      }
      let str = arr[arr.length - 1]
      this.queryParam.type = str
      //权限
      str === 'sys' ? this.power.add = 'project:sys:add' : this.power.add = 'project:add'
      str === 'sys' ? this.power.del = 'project:sys:del' : this.power.del = 'project:del'
      str === 'sys' ? this.power.edit = 'project:sys:edit' : this.power.edit = 'project:edit'
      str === 'sys' ? this.power.release = 'project:sys:release' : this.power.release = 'project:release'
    },
  },
}
</script>




