<template>
  <div class="app-container">
    <div class="filter-container">
      <!-- abc -->
    </div>
    <!-- bbc -->
    <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="办事项目">
        <!-- <el-input v-model="convenience.eventTypeId"></el-input> -->
        <el-cascader
          v-model="convenience.eventTypeId"
          :options="typeOptions"
          :show-all-levels="false"
          :props="{ emitPath: false }"
          placeholder="选择大项目"
          style="width:100%"
          clearable
        />
      </el-form-item>

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

      <el-form-item label="附件">
        <AliOss v-model="convenience.attachment" multiple />
        <!-- <el-upload
          class="upload-demo"
          action="https://jsonplaceholder.typicode.com/posts/"
          :on-preview="handlePreview"
          :on-remove="handleRemove"
          :before-remove="beforeRemove"
          multiple
          :limit="3"
          :on-exceed="handleExceed"
          :file-list="fileList"
        >
          <el-button size="small" type="primary" plain>点击上传</el-button>
          <div slot="tip" class="el-upload__tip">
            只能上传jpg/png文件，且不超过500kb
          </div>
        </el-upload> -->
      </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";

// import Pagination from "@/components/Pagination";
// import { list, typeList } from "@/api/convenience";
// import { parseTime } from "@/utils";

export default {
  components: {
    AliOss
  },
  data() {
    var checkInfo = (rule, value, callback) => {
      // console.log(value);
      // if (value === undefined) {
      //   console.log('if');
      //   return callback(new Error("受理人不能为空"));
      // } else {
      //   console.log('else');
      //   info({ param: this.searchInput || undefined }).then(res => {
      //     if (!res.d) {
      //       return callback(new Error("查无此人"));
      //     } else {
      //       this.convenience.residentInformation = res.d.id;
      //     }
      //   });
      // }
      if (value === "") {
        callback(new Error("受理人不能为空"));
        // console.log('value==<>');
      } else {
        info({ param: this.convenience.residentInformation || undefined }).then(
          res => {
            if (!res.d) {
              return callback(new Error("查无此人"));
            } else {
              this.searchInput = res.d.id;
              callback();
              // this.convenience.residentInformation = res.d.id;
            }
          }
        );
      }
    };
    return {
      convenience: {
        residentInformation: "",
        eventTypeId: undefined,
        remark: undefined,
        sponsor: "STAFF",
        attachment: undefined
      },
      typeOptions: [],
      rules: {
        residentInformation: [{ validator: checkInfo, trigger: "blur" }]
      },
      fileList: undefined,
      searchInput: undefined
    };
  },
  mounted() {
    this.getTypeList();
  },
  methods: {
    getTypeList() {
      typeList().then(res => {
        this.typeOptions = [];
        res.d.map(i => {
          const children = [];

          i.eventTypesList.map(c => {
            const level2 = {
              label: c.eventName,
              value: c.id
            };
            children.push(level2);
          });
          const level1 = {
            label: i.eventName,
            children
          };

          this.typeOptions.push(level1);
        });
      });
    },
    handleAdd() {
      this.$refs.convenienceForm.validate(valid => {
        if (valid) {
          this.convenience.residentInformation = this.searchInput;
          add(this.convenience).then(res => {
            if (res.c === 200) {
              this.$notify.success("创建成功");
              this.$router.push("/convenience/list");
            }
          });
        }
      });
    },
    handlePreview() {},
    handleRemove() {},
    beforeRemove() {},
    handleExceed() {}
  }
};
</script>

<style scope></style>
