<template>
  <div class="app-container">
    <div class="filter-container">
      <el-input
        v-model="listQuery.nameB"
        placeholder="请输入用户姓名"
        class="filter-item"
        clearable
      ></el-input>
      <el-input
        v-model="listQuery.idCardB"
        placeholder="请输入身份证号"
        class="filter-item"
        clearable
      ></el-input>
      <el-input
        v-model="listQuery.phoneNumberB"
        placeholder="请输入手机号"
        class="filter-item"
        clearable
      ></el-input>

      <el-button
        class="filter-item"
        type="primary"
        @click="handleSearch"
        icon="el-icon-search"
        >搜索</el-button
      >

      <el-button
        class="filter-item"
        type="primary"
        @click="handleCreate"
        icon="el-icon-plus"
        v-if="userInfo.type === 5"
        >新建征信预审</el-button
      >
    </div>
    <el-table
      v-loading="listLoading"
      :data="list"
      style="width: 100%; margin-bottom: 20px"
      row-key="id"
      border
    >
      <el-table-column label="用户姓名" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.nameB }}</span>
        </template>
      </el-table-column>

      <el-table-column label="身份证号码" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.idCardB }}</span>
        </template>
      </el-table-column>

      <el-table-column label="手机号" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.phoneNumberB }}</span>
        </template>
      </el-table-column>

      <el-table-column label="创建时间" align="center" width="100">
        <template slot-scope="scope">
          <span>{{
            scope.row.createDate | parseTime("{y}-{m}-{d} {h}:{i}:{s}")
          }}</span>
        </template>
      </el-table-column>

      <el-table-column
        label="操作"
        align="center"
        width="300"
        class-name="small-padding fixed-width"
        v-if="userInfo.type === 3"
      >
        <template slot-scope="scope">
          <el-button type="primary" size="mini" @click="handleDetail(scope.row)"
            >填写申请书</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="listQuery.current"
      :limit.sync="listQuery.size"
      @pagination="getList"
    />

    <el-dialog
      title="填写征信预审信息"
      :visible.sync="dialogVisible"
      width="30%"
    >
      <!-- <el-form :model="form" ref="form" label-width="110px" :rules="rules">
        <el-form-item label="姓名" prop="nameB">
          <el-input v-model="form.nameB"></el-input>
        </el-form-item>
        <el-form-item label="身份证号" prop="idCardB">
          <el-input v-model="form.idCardB"></el-input>
        </el-form-item>
        <el-form-item label="手机号" prop="phoneNumberB">
          <el-input v-model="form.phoneNumberB"></el-input>
        </el-form-item>
      </el-form> -->
      <el-form
        ref="form"
        v-for="(item, index) in formItems"
        :rules="rules"
        :key="index"
        :model="item"
        label-width="110px"
      >
        <el-form-item
          ><el-button
            type="danger"
            v-if="index > 0"
            @click="handleRemove(index)"
            style="float: right"
            >删除</el-button
          ></el-form-item
        >
        <el-form-item label="姓名" prop="nameB">
          <el-input v-model="item.nameB"></el-input>
        </el-form-item>
        
        <el-form-item label="手机号" prop="phoneNumberB">
          <el-input v-model="item.phoneNumberB"></el-input>
        </el-form-item>
        <el-form-item label="身份证号" prop="idCardB">
          <el-input v-model="item.idCardB"></el-input>
        </el-form-item>
        <el-form-item label="附件">
          <el-upload
            class="upload-demo"
            action="/"
            :on-change="(val) => handleFileChange(val, index)"
            :on-success="handleSuccess"
            :on-error="handleError"
            :file-list="fileList"
            :auto-upload="false"
            :limit="1"
            :on-exceed="handleExceed"
          >
            <el-button slot="trigger" size="small" type="primary"
              >选取文件</el-button
            >
            <!-- <div slot="tip" class="el-upload__tip">
              只能上传jpg/png文件，且不超过500kb
            </div> -->
          </el-upload>
          <!-- <el-upload
            class="upload-demo"
            action="/"
            :auto-upload="false"
            :limit="1"
            :on-change="(val) => handleFileChange(val, index)"
            :file-list="fileList"
          >
            <el-button size="small" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">
              只能上传jpg/png文件，且不超过500kb
            </div>
          </el-upload> -->
          <!-- <el-upload
            class="upload-demo"
            drag
            action="/"
            :auto-upload="false"
            :limit="1"
            :on-change="(val) => handleFileChange(val, index)"
          >
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">
              将文件拖到此处，或<em>点击上传</em>
            </div>
            <div class="el-upload__tip" slot="tip">
              只能上传jpg/png文件，且不超过500kb
            </div>
          </el-upload> -->
        </el-form-item>
        <hr />
      </el-form>
      <div>
        <el-button type="primary" size="mini" @click="handleAdd"
          >新增</el-button
        >
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleSubmit">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { list, add } from "@/api/prePhase";
// import { dealPhase2 } from "@/api/housingTicket";
import Pagination from "@/components/Pagination/index";
import { mapGetters } from "vuex";
import { uploadFile } from "@/api/upload";

// import { housingStatusOptions } from "@/utils";
// import ReadExcel from "@/components/ReadExcel";
export default {
  components: { Pagination },
  //   computed: {
  //     statusCmp() {
  //       return (status) => {
  //         return housingStatusOptions.find((item) => item.value === status).label;
  //       };
  //     },
  //   },
  filters: {
    phaseFilter(phase) {
      const phaseMap = {
        0: "房票签约阶段",
        1: "选房阶段",
        2: "贷款审查阶段",
        3: "签订四方协议阶段",
        4: "登记备案阶段",
        5: "结算确认阶段",
        6: "还款阶段",
        7: "完结",
      };
      return phaseMap[phase];
    },
    currentAccountPhase(status) {
      const statusMap = {
        0: "待处理",
        1: "已处理",
        null: "全部",
      };
      return statusMap[status];
    },
  },
  computed: {
    ...mapGetters(["name", "avatar", "roles", "userInfo"]),
  },
  data() {
    return {
      total: 0,
      list: [],
      listQuery: {
        current: 1,
        size: 10,
        currentAccountPhase: 1,
      },
      listLoading: false,
      //   housingStatusOptions,
      downloadLoading: false,
      dialogProject: false,
      form: {},
      textMap: {
        update: "修改",
        create: "创建",
      },
      dialogStatus: "",
      dialogVisible: false,
      rules: {
        nameB: { required: true, message: "不能为空", trigger: "blur" },
        idCardB: { required: true, message: "不能为空", trigger: "blur" },
        phoneNumberB: { required: true, message: "不能为空", trigger: "blur" },
      },
      formItems: [
        {
          attachments: "",
          idCardB: "",
          nameB: "",
          phoneNumberB: "",
        },
      ],
      file: undefined,
      fileList: undefined,
    };
  },
  created() {
    if (this.userInfo.type === 3) {
      this.listQuery.prePhase = 20;
    }
    this.getList();
  },
  methods: {
    // openMethods() {
    //   this.$refs.form.clearValidate();
    // },
    getList() {
      list(this.listQuery).then((res) => {
        this.list = res.d.records;
        this.total = res.d.total;
      });
    },
    handleSearch() {
      this.listQuery.current = 1;
      this.getList();
    },
    handleCreate() {
      (this.formItems = [
        {
          attachments: "",
          idCardB: "",
          nameB: "",
          phoneNumberB: "",
        },
      ]),
        //   this.$router.push({
        //     path: "/ticket/create",
        //   });
        (this.dialogVisible = true);
        this.fileList=[]
    },
    handleSubmit() {
      // let that = this;
      this.$confirm(`是否提交?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        // console.log(this.$refs.form,this.$refs['form'][0]);
        let flag = 0;
        this.$refs.form.map((item) => {
          item.validate((valid) => {
            if (valid) {
              console.log(this.formItems);
              flag++;
            }
          });
        });
        setTimeout(() => {
          if (flag === this.$refs.form.length) {
            add(this.formItems).then((res) => {
              console.log(res);
              if (res.c === 200) {
                this.$message.success("创建成功");
                this.dialogVisible = false;
                this.getList();
              }
            });
          }
        }, 300);
      });
    },
    handleDetail(row) {
      sessionStorage.setItem("preStepInfo", JSON.stringify(row));
      this.$router.push("detail");
    },
    handleAdd() {
      this.formItems.push({
        attachments: "",
        idCardB: "",
        nameB: "",
        phoneNumberB: "",
      });
    },
    handleRemove(index) {
      this.formItems.splice(index, 1);
    },
    handleFileChange(file, index) {
      // console.log(file, index);
      // this.file = file.raw;
      uploadFile({ file: file.raw }).then((res) => {
        console.log(res);
        this.formItems[index].attachments = res.d;
        // if (res.c === 200) {
        //   serviceAgreementUrl({ url: res.d }).then((response) => {
        //     console.log(response);
        //     if (response.c === 200) {
        //       this.$message.success("上传成功");
        //       this.dialogVisible = false;
        //     }
        //   });
        // }
      });
    },
    handleUpload() {
      uploadFile({ file: this.file }).then((res) => {
        // console.log(res);
        if (res.c === 200) {
          serviceAgreementUrl({ url: res.d }).then((response) => {
            console.log(response);
            if (response.c === 200) {
              this.$message.success("上传成功");
              this.dialogVisible = false;
            }
          });
        }
      });
    },
    handleSuccess(response, file, fileList) {
      console.log("File uploaded successfully:", response);
      // 这里处理上传成功的逻辑
    },
    handleError(err, file, fileList) {
      console.error("Error while uploading file:", err);
      // 这里处理上传失败的逻辑
    },
    submitUpload() {
      // this.$refs.upload.submit();
      console.log(this.fileList);
      uploadFile({ file: this.file }).then((res) => {
        console.log(res);
      });
    },
    handleExceed(files, fileList) {
      this.$message.warning(
        `最多只能上传 1 个文件，当前共 ${files.length + fileList.length} 个`
      );
    },
  },
};
</script>

<style lang="scss" scoped>
.el-input {
  width: 200px;
  margin-right: 10px;
}
.el-select {
  margin-right: 10px;
}
</style>
