<template>
  <div class="app-container">
    <el-form
      ref="printForm"
      :model="form"
      :rules="rules"
      label-position="right"
      label-width="100px"
    >
      <el-form-item
        label="受理人："
        class="col-sm-5"
        prop="residentInformation"
      >
        <el-input
          placeholder="请输入手机或身份证号"
          v-model="form.residentInformation"
          style="width:200px"
          :disabled="readOnly"
        ></el-input>
      </el-form-item>

      <el-form-item label="代办人：">
        <el-input
          :disabled="true"
          v-model="name"
          style="width:200px"
        ></el-input>
      </el-form-item>

      <el-form-item label="代办内容：" prop="content">
        <Editor
          v-if="true"
          v-model="form.content"
          style="width: 100%"
          :disabled="readOnly"
        />
      </el-form-item>

      <el-form-item>
        <el-button
          type="warning"
          @click="handlePreview"
          v-if="!readOnly"
          style="border-radius: 21px;padding: 10px 20px;font-size: 18px;"
          >预览</el-button
        >
        <el-button type="primary" @click="handleAdd" v-if="!readOnly"
          >保存并打印</el-button
        >
        <el-button
          type="info"
          @click="handleCancel"
          style="border-radius: 21px;padding: 10px 20px;font-size: 18px;"
          >{{ readOnly ? "返回" : "取消" }}</el-button
        >
      </el-form-item>

      <!-- <el-form-item v-if="!readOnly">
        <el-button type="primary" @click="handleAdd">保存并打印</el-button>
      </el-form-item> -->
    </el-form>
  </div>
</template>

<script>
import { add } from "@/api/helpPrint";
import { info } from "@/api/staff";
import { mapGetters } from "vuex";
import Editor from "@/components/UEditor/index.vue";
export default {
  components: { Editor },
  computed: {
    ...mapGetters(["name"])
  },
  props: ["readOnly", "data"],
  created() {
    if (this.readOnly) {
      this.form = JSON.parse(localStorage.getItem("dxdbOjb"));
      this.searchInput = this.form.applicant.idCard;
    }
  },
  data() {
    var checkInfo = (rule, value, callback) => {
      if (!value) {
        callback(new Error("受理人不能为空"));
      } else {
        info({ param: this.form.residentInformation || undefined }).then(
          res => {
            if (!res.d) {
              return callback(new Error("查无此人"));
            } else {
              this.form.applicant = res.d;
              callback();
            }
          }
        );
      }
    };
    return {
      form: {
        applicant: undefined,
        handler: {
          name: undefined
        },
        type: "代写代办",
        content: ""
      },
      searchInput: "",
      rules: {
        residentInformation: [{ validator: checkInfo, trigger: "blur" }],
        content: [
          { required: true, message: "代办内容不能为空", trigger: "blur" }
        ],
        searchInput: [
          { required: true, message: "受理人不能为空", trigger: "blur" }
        ]
      }
    };
  },
  methods: {
    handleAdd() {
      this.$refs.printForm.validate(valid => {
        if (valid) {
          let payload = Object.assign({}, this.form);
          add(payload).then(res => {
            if (res.c === 200) {
              let print = Object.assign({}, this.form);
              print.handler.name = this.name;
              localStorage.setItem("print", JSON.stringify(print));
              window.open("../print.html");
              this.$notify.success("添加成功");
              this.$router.push("/helpPrint/list");
            }else{
              this.$notify.error(res.m)
            }
          });
        }
      });
    },
    handlePreview() {
      let payload = Object.assign({}, this.form);
      payload.handler.name = this.name;
      localStorage.setItem("print", JSON.stringify(payload));
      window.open("../print.html");
    },
    handleCancel() {
      this.$router.push("/helpPrint/list");
    }
  }
};
</script>

<style></style>
