<template>
  <div class="app-container">
    <div class="filter-container"></div>
    <el-form
      ref="convenienceForm"
      style="width:680px"
      :model="convenience"
      :rules="rules"
      label-width="80px"
      class="el-form"
    >
      <el-form-item label="申办人" prop="residentInformation">
        <el-input
          v-model="convenience.residentInformation"
          placeholder="群众身份证号"
        />
      </el-form-item>

      <el-form-item label="办事项目" prop="eventTypeId">
        <!-- <el-cascader
          v-model="convenience.eventTypeId"
          :options="typeOptions"
          :show-all-levels="false"
          :props="{ emitPath: false }"
          placeholder="选择大项目"
          style="width:100%"
          clearable
        /> -->
        <el-select v-model="convenience.eventTypeId" placeholder="请选择">
          <el-option
            v-for="item in typeOptions"
            :key="item.id"
            :label="item.eventName"
            :value="item.id"
          >
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="文字说明" prop="remark">
        <el-input
          v-model="convenience.remark"
          type="textarea"
          placeholder="请输入"
          :autosize="{ minRows: 6, maxRows: 8 }"
        />
      </el-form-item>

      <el-form-item label="附件" prop="attachment">
        <AliOss v-model="convenience.attachment" multiple />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handleAdd">创建工单</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { add, typeList } from "@/api/convenience";
import { info } from "@/api/staff";
import AliOss from "@/components/AliOSS/index.vue";

export default {
  components: {
    AliOss
  },
  data() {
    var checkInfo = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("受理人不能为空"));
      } else {
        info({ param: this.convenience.residentInformation || undefined }).then(
          res => {
            if (!res.d) {
              return callback(new Error("查无此人"));
            } else {
              this.searchInput = res.d.id;
              callback();
            }
          }
        );
      }
    };
    return {
      convenience: {
        residentInformation: undefined,
        eventTypeId: undefined,
        remark: undefined,
        sponsor: "STAFF",
        attachment:undefined
      },
      typeOptions: [],
      rules: {
        residentInformation: [{ validator: checkInfo, trigger: "blur" }],
        eventTypeId: [
          { required: true, message: "办事项目不能为空", trigger: "change" }
        ]
        // remark: [{ validator: checkRemark, trigger: "blur" }],
        // attachment: [{ validator: checkAttachment, trigger: "change" }]
      },
      fileList: undefined,
      searchInput: undefined
    };
  },
  mounted() {
    this.getTypeList();
  },
  methods: {
    getTypeList() {
      typeList().then(res => {
        this.typeOptions = res.d;
      });
    },
    handleAdd() {
      this.$refs.convenienceForm.validate(valid => {
        if (valid) {
          if (!this.convenience.remark) {
            if (!(this.convenience.attachment&&this.convenience.attachment.length > 0)) {
              this.$notify.error("文字说明与附件必须含有一项");
              return;
            }
          }
          let payload = Object.assign({}, this.convenience);
          payload.residentInformation = this.searchInput;

          add(payload).then(res => {
            if (res.c === 200) {
              this.$notify.success("创建成功");
              this.$router.push("/convenience/list");
            }else{
              this.$notify.error(res.m)
            }
          });
        }
      });
    },
    handlePreview() {},
    handleRemove() {},
    beforeRemove() {},
    handleExceed() {}
  }
};
</script>

<style scope></style>
