<template>
  <div class="create-box">
    <app-card :title="!$route.query.id ? '新建项目' : '编辑项目'">
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="110px"
        class="demo-ruleForm"
        style="width: 550px"
      >
        <el-form-item label="项目名称" prop="title">
          <el-input placeholder="请填写项目名称" v-model="ruleForm.title"></el-input>
        </el-form-item>
        <el-form-item label="关联证书模板" prop="template">
          <el-select filterable v-model="ruleForm.template_id" placeholder="请选择证书模板" style="width: 440px">
            <el-option v-for="item in templateList" :key="item.id" :label="item.title" :value="item.id"> </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="关联学员">
          <div class="select-btn" @click="drawer = true" style="margin-bottom: 10px">
            <i class="el-icon-plus"></i>
            <div class="text">选择学员</div>
          </div>
          <app-list v-bind="tableOptions" ref="list">
            <template v-slot:table-x="{ row }">
              <el-button type="text" @click="handleDelete(row)">删除</el-button>
            </template>
          </app-list>
        </el-form-item>
        <el-form-item>
          <div>
            <el-button type="primary" @click="submitForm">确认</el-button>
            <el-button @click="drawer = true" style="margin-left: 20px">取消</el-button>
          </div>
        </el-form-item>
      </el-form>
    </app-card>
    <el-drawer size="60%" :visible.sync="drawer" :direction="direction" :destroy-on-close="true">
      <app-list @selection-change="selectionChangeList" v-if="drawer" v-bind="selectTableOptions" ref="list" style="padding: 0 30px 0; height: auto">
      </app-list>
      <div style="padding-left: 30px"><el-button type="primary" @click="selectionChange">确认</el-button></div>
    </el-drawer>
  </div>
</template>

<script>
import { getDetails, updateProject, getTemplateList, getStudentList, createProject } from '../api'
export default {
  components: {},
  data() {
    return {
      selections: false,
      drawer: false,
      direction: 'rtl',
      ruleForm: {
        title: '',
        template_id: ''
      },
      rules: {
        title: [{ required: true, message: '请填写菜单名称', trigger: 'blur' }],
        template: [{ required: true, message: '请选择证书模板', trigger: 'blur' }]
      },
      templateList: [],
      studentTableOptions: []
    }
  },
  computed: {
    id() {
      return this.$route.query.id
    },
    // 列表配置
    selectTableOptions() {
      return {
        limit: 10,
        remote: {
          httpRequest: getStudentList,
          params: this.form,
          callback: res => {
            // 选中后不在列表展示
            const filterData = []
            res.forEach(element => {
              if (!this.studentTableOptions.find(item => item.id === element.id)) {
                filterData.push(element)
              }
            })
            return filterData
          }
        },
        filters: [
          {
            type: 'input',
            label: '姓名:',
            prop: 'name'
          },
          {
            type: 'input',
            label: '手机号:',
            prop: 'mobile'
          }
        ],
        columns: [
          { type: 'selection', prop: 'selection', align: 'center' },
          { label: 'id', prop: 'id', align: 'center' },
          { label: '姓名', prop: 'name', align: 'center' },
          { label: '手机号', prop: 'mobile', align: 'center' },
          { label: '邮箱', prop: 'email', align: 'center' },
          { label: '编号', prop: 'number', align: 'center' },
          { label: '创建时间', prop: 'created_time', align: 'center' }
        ]
      }
    },
    tableOptions() {
      return {
        columns: [
          { label: '姓名', prop: 'name', align: 'center' },
          { label: '手机号', prop: 'mobile', align: 'center' },
          { label: '邮箱', prop: 'email', align: 'center' },
          { label: '编号', prop: 'number', align: 'center' },
          { label: '操作', slots: 'table-x', align: 'center' }
        ],
        data: this.studentTableOptions
      }
    }
  },
  methods: {
    selectionChangeList(row) {
      this.selections = row
    },
    // 删除绑定的学员
    handleDelete(row) {
      const findIndex = this.studentTableOptions.findIndex(item => row.id === item.id)
      if (findIndex !== -1) {
        this.studentTableOptions.splice(findIndex, 1)
      }
    },
    // 选择学员
    selectionChange() {
      this.drawer = false
      this.selections.forEach(item => {
        this.studentTableOptions.push(item)
      })
    },
    // 证书模板
    getTemplateList() {
      getTemplateList({ 'per-page': 100 }).then(res => {
        this.templateList = res.data.list
      })
    },
    // 提交
    submitForm() {
      const params = this.ruleForm
      params.students_id = this.studentTableOptions
        .reduce((a, b) => {
          a.push(b.id)
          return a
        }, [])
        .toString(',')
      if (this.id) {
        updateProject(this.ruleForm).then(res => {
          if (res.code === 0) {
            this.$message({
              message: '编辑成功',
              type: 'success'
            })
            this.$router.go(-1)
          }
        })
      } else {
        createProject(params).then(res => {
          if (res.code === 0) {
            this.$message({
              message: '提交成功',
              type: 'success'
            })
            this.$router.go(-1)
          }
        })
      }
    },
    // 获取详情
    getDetails() {
      getDetails({ id: this.id }).then(res => {
        this.ruleForm = res.data
        this.studentTableOptions = res.data.students.reduce((a, b) => {
          a.push(b.student)
          return a
        }, [])
      })
    }
  },
  mounted() {
    if (this.id) {
      this.getDetails()
    }
    this.getTemplateList()
  }
}
</script>

<style lang="scss" scoped>
.select-btn {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 32px;
  border: 1px solid rgba(0, 0, 0, 0.15);
  padding: 0 17px;
  width: fit-content;
  cursor: pointer;
  i {
    color: #363636;
  }
  .text {
    font-size: 14px;
    color: #161616;
    margin-left: 5px;
  }
}
</style>
