<template>
  <div id="pro-detail">
    <detail-layout>
      <template v-slot:title>
        <back-bar to="/jobs/profile/index" title="招聘简章"></back-bar>
      </template>
      <template #main>
        <el-row>
          <el-form :model="info" :rules="rules" ref="form">
            <form-item label="招聘简章标题" prop="title">
              <el-input v-model="info.title"></el-input>
            </form-item>
            <form-item label="内容" prop="content">
              <wang-editor v-if="loading" v-model="info.content" upload-img-server="/files/jobs/profile/upload"></wang-editor>
            </form-item>
          </el-form>
          <el-row type="flex" justify="center">
            <el-col :span="6">
              <el-button type="success" style="width:60%" @click="toSubmit()">保&nbsp;&nbsp;&nbsp;&nbsp;存</el-button>
            </el-col>
          </el-row>
        </el-row>
      </template>
    </detail-layout>
  </div>
</template>

<script>
import backBar from '@/components/back-bar.vue';
import formItem from '@/components/form-item.vue';
import detailLayout from '@/layout/detail-layout.vue';
import WangEditor from '@/components/wang-editor.vue';
import { mapActions, mapState } from 'vuex';
import _ from 'lodash';
export default {
  name: 'pro-detail',
  props: {
    original: { type: Object, default: () => {} },
  },
  components: {
    detailLayout,
    formItem,
    backBar,
    WangEditor,
  },
  data: () => ({
    info: {},
    loading: true,
    rules: {
      title: [{ required: true, message: '请输入招聘简章标题', trigger: 'blur' }],
      content: [{ required: true, message: '请输入内容', trigger: 'blur' }],
    },
  }),
  created() {
    if (this.$route.query.id) {
      this.$set(this, `loading`, false);
      this.search();
    }
  },
  mounted() {
    this.$nextTick(() => {
      // this.$set(this, `info`, this.original);
    });
  },
  computed: {
    ...mapState(['user']),
  },
  methods: {
    ...mapActions(['profilesOperation']),
    async search() {
      let result = await this.profilesOperation({ type: 'search', data: { id: this.$route.query.id } });
      this.$set(this, `info`, result.data);
      this.$set(this, `loading`, true);
    },
    async submit() {
      if (this.info.content === undefined) {
        this.$message.error('请填写内容');
        return;
      }
      let result;
      if (this.info.id) {
        result = await this.profilesOperation({ type: 'update', data: { info: this.info, id: this.$route.query.id } });
      } else {
        result = await this.profilesOperation({ type: 'add', data: { info: this.info, corpid: this.user.corpid, corpname: '福瑞test' } });
      }
      if (`${result.errcode}` === '0') {
        this.$message.success('操作成功');
        this.$router.push('/jobs/profile/index');
      } else {
        this.$message.error(result.errmsg);
      }
    },
    toSubmit() {
      this.$refs['form'].validate(valid => {
        if (valid) {
          this.submit();
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
  },
};
</script>

<style lang="less" scoped>
.tip {
  color: #999999;
}
.mb1 {
  margin-bottom: 1rem;
}
.btn_center {
  text-align: center;
}
</style>
