<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-option value="4">已结束</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.projectName=null,queryParam.status=null,queryParam.status=null,queryParam.startDate=null,queryParam.endDate= null,queryParam.trainWay= null)">重置</a-button>
      </a-space>
      <br />
      <a-space class="table-operator" direction="horizontal">
        <a-button v-if="hasPerm(power.add) && queryParam.type != 'model' " 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-popconfirm title="是否发布?" @confirm="() => handledRelease(record)">
              <a v-if="hasPerm(power.release) && record.status == '1' && record.projectType != 0" href="javascript:;">发布</a>
            </a-popconfirm>
            <!-- <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') && hasPerm(power.release) && record.status == '1' && record.projectType != 0 " />
            <a v-if="hasPerm('project:list') " href="javascript:;" @click="getDetail(record)">详情</a>
            <a-divider type="vertical" v-if="hasPerm(power.edit) && hasPerm('project:list') && ['1'].includes(record.status) && (record.projectType != 0 || queryParam.type != 'model')" />
            <a v-if="hasPerm(power.edit) && ['1'].includes(record.status)  && (record.projectType != 0 || queryParam.type != 'model') " href="javascript:;" @click="handledCreate(record)">修改</a>
            <a-divider type="vertical" v-if="hasPerm(power.del) && hasPerm('project:list') && ['1'].includes(record.status) && (record.projectType != 0 || queryParam.type != 'model') " />
            <a-popconfirm title="是否删除?" @confirm="() => handleDelete(record)">
              <a v-if="hasPerm(power.del) && ['1'].includes(record.status)  && (record.projectType != 0 || queryParam.type != 'model') " href="javascript:;">删除</a>
            </a-popconfirm>
            <a-divider type="vertical" v-if="queryParam.type == 'model'" />
            <a v-if="queryParam.type == 'model'" href="javascript:;" @click="handledCreate(record)">编辑后发布到自主项目</a>
          </template>
        </span>
      </s-table>
    </a-space>
  </a-card>
</template>

<script>
import { STable } from '@/components'
import { getProjectList, releaseProject, projectDel } 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: 'trainType', key: 'trainType', customRender: (text, record, index) => {
            //项目类型
            if (text == 1) {
              return '必修课'
            }
            if (text == 2) {
              return '选修课'
            }
          },
        },
        {
          title: '项目状态',
          key: 'status',
          dataIndex: 'status',
          customRender: (text, record, index) => {
            //项目状态 1-未发布 2-未开始 3-进行中  4-已完成
            if (text == 1) {
              return '未发布'
            }
            if (text == 2) {
              return '未开始'
            }
            if (text == 3) {
              return '进行中'
            }
            if (text == 4) {
              return '已结束'
            }
          },
        },
        { title: '创建人员', key: 'createBy', dataIndex: 'createBy' },
        { title: '创建时间', key: 'createDate', dataIndex: 'createDate' },
        {
          title: '操作',
          width: 200,
          key: 'action',
          align: 'center',
          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) {
      releaseProject({ id: record.id }).then((res) => {
        if (res.code == 200) {
          this.$message.success('项目:' + record.projectName + ' 发布成功!');
          this.$refs.table.refresh(false);
        }
      })
    },
    //编辑时获取详情
    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, //当前页
        },
      })
    },
    handleDelete(record) {
      projectDel({ id: record.id }).then((res) => {
        if (res.code == 200) {
          this.$message.success('删除成功')
          this.$refs.table.refresh(false);
        } else {
          this.$message.success('删除失败')
        }
      })
    },
    //变更类型
    changeType(path) {
      console.log('变更路由:',path)
      var arr = []
      if (path) {
        arr = path.split('/')
      } else {
        arr = this.$route.path.split('/')
      }
      let str = arr[arr.length - 1]
      this.queryParam.type = str

      /** 控制表格列的显示 */
      if (str === 'sys' || str === 'model') {
        let c = this.columns;
        // console.log('columns-------c', c)
        // let d = c.filter(item => {return item.key != 'startDate'})
        // let e = d.filter(item => {return item.key != 'personNum'})
        // let f = e.filter(item => {return item.key != 'status'})

        c = c.filter(item => {return item.key != 'startDate'})
        // c = c.filter(item => {return item.key != 'personNum'})
        c = c.filter(item => {return item.key != 'status'})

        this.columns = c
        console.log('columns-------', this.columns)
      }

      //系统推荐权限
      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>




