<template>
  <div class="create-box">
    <app-card :title="!$route.query.id ? '新建页面' : '编辑页面'">
      <el-form
        :model="ruleForm"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
        style="width: 50%; margin: 0 auto"
      >
        <el-form-item label="变量名称：">
          <el-input v-model="ruleForm.key"></el-input>
        </el-form-item>
        <el-form-item label="变量字段：">
          <el-select v-model="ruleForm.value" placeholder="请选择">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </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 { createVariable, updateVariable } from '../api'
export default {
  data() {
    return {
      ruleForm: {
        key: '',
        value: ''
      },
      options: [
        { label: '姓名', value: 'name' },
        { label: '电话', value: 'mobile' },
        { label: '身份证号码', value: 'id_number' },
        { label: '邮箱', value: 'email' },
        { label: '地址', value: 'address' },
        { label: '单位', value: 'company' },
        { label: '职位', value: 'position' },
        { label: '编号', value: 'number' },
        { label: '国籍', value: 'country' },
        { label: '省份', value: 'province' },
        { label: '城市', value: 'city' },
        { label: '行业', value: 'industry' },
        { label: '微信', value: 'wechat' }
      ]
    }
  },
  computed: {
    id() {
      return this.$route.query.id
    }
  },
  methods: {
    // 提交
    submitForm() {
      if (this.id) {
        updateVariable(this.ruleForm).then(res => {
          if (res.code === 0) {
            this.$message({
              message: '编辑成功',
              type: 'success'
            })
            this.$router.go(-1)
          }
        })
      } else {
        createVariable(this.ruleForm).then(res => {
          if (res.code === 0) {
            this.$message({
              message: '提交成功',
              type: 'success'
            })
            this.$router.go(-1)
          }
        })
      }
    }
  },
  mounted() {
    if (this.id) {
      this.ruleForm = {
        id: this.id,
        key: this.$route.query.key,
        value: this.$route.query.value
      }
    }
  }
}
</script>

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