<template>
  <div class="create-box">
    <app-card :title="!$route.query.id ? '添加学员' : '编辑信息'">
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
        style="display: flex; flex-wrap: wrap"
      >
        <el-form-item label="姓名" prop="name">
          <el-input v-model="ruleForm.name"></el-input>
        </el-form-item>
        <el-form-item label="电话号" prop="mobile">
          <el-input v-model="ruleForm.mobile"></el-input>
        </el-form-item>
        <el-form-item label="身份证号">
          <el-input v-model="ruleForm.id_number"></el-input>
        </el-form-item>
        <el-form-item label="邮箱">
          <el-input v-model="ruleForm.email"></el-input>
        </el-form-item>
        <el-form-item label="地址">
          <el-input v-model="ruleForm.address"></el-input>
        </el-form-item>
        <el-form-item label="单位">
          <el-input v-model="ruleForm.company"></el-input>
        </el-form-item>
        <el-form-item label="职位">
          <el-input v-model="ruleForm.position"></el-input>
        </el-form-item>
        <el-form-item label="编号">
          <el-input v-model="ruleForm.number"></el-input>
        </el-form-item>
        <el-form-item label="国籍">
          <el-input v-model="ruleForm.country"></el-input>
        </el-form-item>
        <el-form-item label="省份">
          <el-input v-model="ruleForm.province"></el-input>
        </el-form-item>
        <el-form-item label="城市">
          <el-input v-model="ruleForm.city"></el-input>
        </el-form-item>
        <el-form-item label="行业">
          <el-input v-model="ruleForm.industry"></el-input>
        </el-form-item>
        <el-form-item label="微信">
          <el-input v-model="ruleForm.wechat"></el-input>
        </el-form-item>
        <el-form-item label="关联项目">
          <el-select @change="$forceUpdate()" filterable multiple v-model="ruleForm.projects_id" placeholder="请选择">
            <el-option v-for="item in options" :key="item.id" :label="item.title" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <div style="padding-top: 20px">
            <el-button type="primary" @click="submitForm">确认</el-button>
            <el-button @click="$router.go(-1)">取消</el-button>
          </div>
        </el-form-item>
      </el-form>
    </app-card>
  </div>
</template>

<script>
import { createStudent, getDetails, updateStudent, getProjectList } from '../api'
export default {
  components: {
    // UploadImage
  },
  data() {
    return {
      options: [],
      ruleForm: {
        projects_id: [],
        name: '',
        mobile: '',
        id_number: '',
        email: '',
        address: '',
        company: '',
        position: '',
        number: '',
        country: '',
        province: '',
        city: '',
        industry: '',
        wechat: ''
      },
      rules: {
        name: [{ required: true, message: '请填写姓名', trigger: 'blur' }],
        mobile: [{ required: true, message: '请填写电话', trigger: 'blur' }]
      }
    }
  },
  computed: {
    id() {
      return this.$route.query.id
    }
  },
  methods: {
    // 提交
    submitForm() {
      this.ruleForm.projects_id = this.ruleForm.projects_id.toString(',')
      if (this.id) {
        updateStudent(this.ruleForm).then(res => {
          if (res.code === 0) {
            this.$message({
              message: '编辑成功',
              type: 'success'
            })
            this.$router.go(-1)
          }
        })
      } else {
        createStudent(this.ruleForm).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.ruleForm.projects_id = res.data.projects.reduce((a, b) => {
          if (b.status !== '2') {
            a.push(b.project_id)
          }
          return a
        }, [])
      })
    },
    // 获取项目列表
    getProjectList() {
      getProjectList({ 'per-page': '1000' }).then(res => {
        this.options = res.data.list.filter(item => item.status !== '2')
      })
    }
  },
  mounted() {
    if (this.id) {
      this.getDetails()
    }
    this.getProjectList()
  }
}
</script>

<style lang="scss" scoped></style>
