<template>
  <div class="app-container">
    <div class="form-container">
      <el-form label-width="150px" ref="form" :model="form" :rules="rules">
        <el-form-item label="姓名：" prop="name">
          <el-input v-model="form.name"></el-input>
          <el-tooltip
            content="可重名，街道办涉及到数据过滤，只能命名为胜利或高桥。开发商涉及到房源查询过滤和电子签信息匹配，需要与楼盘的”开发商名称“一致。"
            placement="right"
          >
            <i class="el-icon-question"></i>
          </el-tooltip>
        </el-form-item>
        <el-form-item label="用户名：" prop="username">
          <el-input v-model="form.username"></el-input
          ><el-tooltip
            content="登陆系统的账号，不可重复"
            placement="right"
          >
            <i class="el-icon-question"></i>
          </el-tooltip>
        </el-form-item>
        <el-form-item label="密码：" prop="password" v-if="type === 'create'">
          <el-input v-model="form.password"></el-input>
        </el-form-item>
        <el-form-item label="用户状态：" prop="status">
          <el-select v-model="form.status">
            <el-option label="启用" value="1"></el-option>
            <el-option label="禁用" value="0"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="账号类型：" prop="type">
          <el-select v-model="form.type" @change="handleTypeChange">
            <el-option
              v-for="(item, index) in staffTypeOptions"
              :key="index"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          v-if="form.type === 5"
          label="银行名称："
          prop="remark.bankName"
        >
          <el-input v-model="form.remark.bankName"></el-input>
        </el-form-item>
        <el-form-item
          v-if="form.type === 5"
          label="银行授权代表名称："
          prop="remark.bankAuthName"
        >
          <el-input v-model="form.remark.bankAuthName"></el-input>
        </el-form-item>
        <el-form-item
          v-if="form.type === 5"
          label="银行地址："
          prop="remark.bankAddress"
        >
          <el-input v-model="form.remark.bankAddress"></el-input>
        </el-form-item>
        <el-form-item
          v-if="form.type === 5"
          label="银行电话："
          prop="remark.bankPhone"
        >
          <el-input v-model="form.remark.bankPhone"></el-input>
        </el-form-item>
        <el-form-item
          v-if="form.type === 3"
          label="盖章账号:"
          prop="remark.fadadaAccount1"
        >
          <el-input v-model="form.remark.fadadaAccount1"></el-input>
        </el-form-item>

        <el-form-item
          v-if="form.type === 3"
          label="代表人账号:"
          prop="remark.fadadaAccount2"
        >
          <el-input v-model="form.remark.fadadaAccount2"></el-input>
        </el-form-item>
        <el-form-item
          v-if="form.type === 3"
          label="分管领导账号:"
          prop="remark.fadadaAccount3"
        >
          <el-input v-model="form.remark.fadadaAccount3"></el-input>
        </el-form-item>
        <el-form-item
          v-if="form.type === 3"
          label="经办人账号:"
          prop="remark.fadadaAccount4"
        >
          <el-input v-model="form.remark.fadadaAccount4"></el-input>
        </el-form-item>
        <el-form-item
          v-if="form.type === 4"
          label="盖章账号:"
          prop="remark.fadadaAccount1"
        >
          <el-input v-model="form.remark.fadadaAccount1"></el-input>
        </el-form-item>

        <el-form-item
          v-if="form.type === 4"
          label="代表人账号:"
          prop="remark.fadadaAccount2"
        >
          <el-input v-model="form.remark.fadadaAccount2"></el-input>
        </el-form-item>
      </el-form>
    </div>
    <el-button v-if="type === 'create'" type="primary" @click="handleCreate"
      >新建账号</el-button
    >
    <el-button v-if="type === 'update'" type="primary" @click="handleUpdate"
      >修改</el-button
    >
    <!-- <el-button v-if="type === 'info'" type="primary" @click="handerCreate"
      >返回</el-button
    > -->
    <!-- <el-button type="primary" @click="handerCreate"
      >{{type==='create'?'提交':'返回'}}</el-button
    > -->
    <!-- <el-button
      v-if="type === 'create'"
      class="create-btn"
      type="primary"
      @click="handerCreate"
      >新建账号</el-button
    >
    <el-button
      v-if="type === 'update'"
      class="create-btn"
      type="primary"
      
      @click="handerCreate"
      >提交</el-button
    > -->
  </div>
</template>

<script>
// import MyForm from "@/quickComponents/coreCmp/MyForm.vue";
// import { createFields, businessInfoFields, typeOptions } from "@/define/staff";
import { staffTypeOptions } from "@/utils";
import { info, update } from "@/api/staff";
export default {
  // components: { MyForm },
  data() {
    return {
      type: "create",
      // formProps: {
      //   fields: { ...createFields },
      //   defaultValue: {}
      // },
      // businessInfoFormProps: {
      //   fields: { ...businessInfoFields },
      //   defaultValue: {}
      // },
      // showInfo: false,
      // showCreate: false,
      // disabled: false
      form: {
        remark: {},
      },
      staffTypeOptions: [
        {
          label: "0-管理员",
          value: 0,
        },
        {
          label: "1-领导",
          value: 1,
        },
        // {
        //   label: "2-普通用户",
        //   value: 2,
        // },
        {
          label: "3-街道办",
          value: 3,
        },
        {
          label: "4-开发商",
          value: 4,
        },
        {
          label: "5-银行",
          value: 5,
        },
        {
          label: "6-签署四方协议",
          value: 6,
        },
        {
          label: "7-登记备案",
          value: 7,
        },
        {
          label: "8-结算确认阶段",
          value: 8,
        },

        {
          label: "9-还款处理",
          value: 9,
        },
      ],
      rules: {
        name: { required: true, message: "不能为空", trigger: "blur" },
        username: { required: true, message: "不能为空", trigger: "blur" },
        password: { required: true, message: "不能为空", trigger: "blur" },
        type: { required: true, message: "不能为空", trigger: "change" },
        status: { required: true, message: "不能为空", trigger: "change" },
        "remark.bankName": {
          required: true,
          message: "不能为空",
          trigger: "change",
        },
        "remark.bankAuthName": {
          required: true,
          message: "不能为空",
          trigger: "change",
        },
        "remark.bankAddress": {
          required: true,
          message: "不能为空",
          trigger: "change",
        },
        "remark.bankPhone": {
          required: true,
          message: "不能为空",
          trigger: "change",
        },
        "remark.fadadaAccount1": {
          required: true,
          message: "不能为空",
          trigger: "change",
        },
        "remark.fadadaAccount2": {
          required: true,
          message: "不能为空",
          trigger: "change",
        },
        "remark.fadadaAccount3": {
          required: true,
          message: "不能为空",
          trigger: "change",
        },
        "remark.fadadaAccount4": {
          required: true,
          message: "不能为空",
          trigger: "change",
        },
        // amount4: { required: true, message: "不能为空", trigger: "change" },
      },
    };
  },
  created() {
    const { query, name } = this.$route;
    // console.log(query,name);
    const { id } = query;
    if (name === "StaffCreate") {
      this.type = "create";
    } else if (name === "StaffUpdate") {
      this.type = "update";
      this.getInfo(id);
    } else {
      this.type = "detail";
      this.disabled = true;
      this.getInfo(id);
    }
    // this.initData();
    // this.getTypes();
  },
  methods: {
    // initData() {
    //   const { type } = this;
    //   switch (type) {
    //     case "update":
    //       this.formProps.fields.username.hidden = true;
    //       this.formProps.fields.password.hidden = true;
    //       this.formProps.fields.secondaryType.props.disabled = true;
    //       break;
    //     case "detail":
    //       this.formProps.fields.username.hidden = false;
    //       this.formProps.fields.password.hidden = true;
    //       break;
    //     default:
    //       this.formProps.fields.username.hidden = false;
    //       this.formProps.fields.password.hidden = false;
    //       this.formProps.fields.secondaryType.props.disabled = false;
    //   }
    // },
    // getTypes() {
    //   getAddType().then((res) => {
    //     console.log(res.d);
    //     const arr = res.d;
    //     if (arr && arr.length) {
    //       createFields.secondaryType.hidden = false;
    //       createFields.secondaryType.props.options = arr.map((key) =>
    //         typeOptions.find((item) => item.value === key)
    //       );
    //     } else {
    //       createFields.secondaryType.hidden = true;
    //     }
    //     this.$set(this.formProps, "fields", { ...createFields });
    //     // this.formProps.fields = createFields
    //   });
    // },
    getInfo(id) {
      info({ id }).then((res) => {
        this.form = res.d;
      });
    },
    handleCreate() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          update(this.form).then((res) => {
            if (res.c === 200) {
              this.$router.back();
              this.$message.success("创建成功");
            }
          });
        }
      });

      // const form = this.$refs["form"];
      // form.validate((vaild) => {
      //   if (vaild) {
      //     const formData = form.getFormData();
      //     if (formData.secondaryType) {
      //       const infoForm = this.$refs["infoForm"];
      //       infoForm.validate((vaid) => {
      //         if (vaid) {
      //           formData.businessInfo = infoForm.getFormData();
      //           this.create(formData);
      //         }
      //       });
      //     } else {
      //       this.create(formData);
      //     }
      //   }
      // });
    },
    handleUpdate() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          update(this.form).then((res) => {
            this.$message.success("修改成功");
            this.$router.back();
          });
        }
      });
    },
    create(formData) {
      let fn = add;
      if (this.type === "update") fn = update;
      fn(formData).then((res) => {
        console.log(res);
        this.$message({
          type: "success",
          message: "操作成功!",
        });
        this.$router.back();
      });
    },
    formChange(e) {
      const { secondaryType } = e;
      this.showInfo = !!secondaryType;
    },
    handleTypeChange(val) {
      if (val !== 5) {
        this.form.remark.bankName = undefined;
        this.form.remark.bankAddress = undefined;
        this.form.remark.bankPhone = undefined;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
// .info-title {
//   margin-top: 40px;
//   margin-left: 40px;
// }
// .create-btn {
//   margin-top: 20px;
//   margin-bottom: 120px;
//   margin-left: 240px;
// }
.form-container {
  width: 50%;
  .el-input {
    width: 202px;
  }
}
</style>
