<template>
  <div class="evalute_one evalute_three">
    <div class="evalute_main">
      <!-- 标题 -->
      <div class="evalute_title_wrap layout flex_row align_left">
        <div class="evalute_title_l"></div>
        <div class="evalute_title_c">
          <span class="evalute_title">
            测评
            <!-- Evaluation -->
          </span>
        </div>
        <div class="evalute_title_r"></div>
      </div>
      <!-- 测试内容 -->
      <div class="test_content">
        <!-- 步骤条 -->
        <!-- 步骤条 -->
        <div class="step_bar layout align_left">
          <div class="step_single ">
            第一步：国家选择
            <!-- FIRST: Select country -->
          </div>
          <div class="step_img">
            <img src="@/assets/img_12.png" alt />
          </div>
          <div class="step_single">
            第二步：基本调查
            <!-- SECOND: Questionnaire -->
          </div>
          <div class="step_img">
            <img src="@/assets/img_11.png" alt />
          </div>
          <div class="step_single active_step">
            第三步：客户信息
            <!-- THIRD: Customer Information -->
          </div>
        </div>
        <!-- 客户信息 -->
        <div class="test_question_wrap third_form">
          <!-- 客户信息 -->
          <div class="customer_infor">
            <!-- 标题 -->
            <div class="customer_title_wrap">
              <div class="customer_title">
                客户信息
                <!-- Customer Information -->
                </div>
              <div class="customer_infor_tips">
                信息的准确性将影响到移民的成功率，请务必如实填写。
                <!-- The accuracy of the information will affect the success rate of immigrants.Please fill in the information truly and correctly -->
              </div>
            </div>
            <!-- 表单 -->
            <!-- 中文 -->
            <el-form
              class="layout flex_row align_left"
              label-position="left"
              label-width="150px"
              :model="formLabelChinese"
              :rules="rules"
              ref="formLabelChinese"
            >
              <div class="chinese_form">
                <el-form-item label="中文姓名:" prop="name">
                  <el-input v-model="formLabelChinese.name"></el-input>
                </el-form-item>
                <el-form-item label="性别:" prop="gender">
                  <el-select v-model="formLabelChinese.gender" placeholder="请选择">
                    <el-option label="男" value="1"></el-option>
                    <el-option label="女" value="2"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="身份证号:" prop="card_number">
                  <el-input v-model="formLabelChinese.card_number" maxlength="18"></el-input>
                </el-form-item>
                <el-form-item label="护照号码:" prop="passport_number">
                  <el-input v-model="formLabelChinese.passport_number"></el-input>
                </el-form-item>
                <el-form-item label="国籍:" prop="nation">
                  <el-select
                    v-model="formLabelChinese.nation"
                    placeholder="请选择"
                  >
                    <el-option
                      v-for="item in  countryList"
                      :key="item.id"
                      :label="item.name_en"
                      :value="item.name_en"
                    ></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="联系电话:" prop="phone">
                  <el-input v-model="formLabelChinese.phone" maxlength="11"></el-input>
                </el-form-item>
              </div>
              <div class="english_form">
                <div class="layout flex_row">
                  <el-form-item
                    label="English name:"
                    class="input_single first_name"
                    prop="first_name"
                  >
                    <el-input placeholder="First/Given Name" v-model="formLabelChinese.first_name"></el-input>
                  </el-form-item>
                  <el-form-item label class="input_single second_name" prop="middle_name">
                    <el-input placeholder="Middle Name" v-model="formLabelChinese.middle_name"></el-input>
                  </el-form-item>
                  <el-form-item label class="input_single second_name" prop="last_name">
                    <el-input placeholder="Last/Family Name" v-model="formLabelChinese.last_name"></el-input>
                  </el-form-item>
                </div>
                <el-form-item label="Address1:" prop="add1">
                  <el-input v-model="formLabelChinese.add1"></el-input>
                </el-form-item>
                <el-form-item label="Address2:">
                  <el-input v-model="formLabelChinese.add2"></el-input>
                </el-form-item>
                <el-form-item label="Address3:">
                  <el-input v-model="formLabelChinese.add3"></el-input>
                </el-form-item>
                <el-form-item label="Postcode:" prop="postCode">
                  <el-input v-model="formLabelChinese.postCode" maxlength="6"></el-input>
                </el-form-item>
              </div>
            </el-form>
            <!-- </div> -->
          </div>
          <!-- 其它加分项 -->
          <div class="other_option">
            <!-- 标题 -->
            <div class="customer_title_wrap">
              <div class="customer_title">
                其他加分项
                <!-- The extra point column -->
                </div>
              <div class="customer_infor_tips">
                以下项均为非必填
                <!-- The following items are optional -->
                </div>
            </div>
            <!-- 上传文件 -->
            <div class="personal_property" v-for="(item,index) in uploadList" :key="index">
              <!-- 表头 -->
              <div class="table_wrap_title">
                <div class="table_title">{{item.question_name}}</div>
                <div class="table_tips">{{item.upload_explain}}</div>
                <!-- 上传文件 -->
                <el-upload
                  class="upload-demo"
                  action="http://yiminadmin.zishike.cn/api/common/upload"
                  :headers="headers"
                  :on-success="uploadSuccProperty"
                >
                <!-- <el-upload
                  class="upload-demo"
                  action="http://yiminadmin.zishike.com/api/common/upload"
                  :headers="headers"
                  :on-success="uploadSuccProperty"
                > -->
                  <!-- http://yiminadmin.zishike.com -->
                  <div class="table_upload" @click="getItem(item)">
                    <img src="@/assets/img_25.png" alt />
                  </div>
                </el-upload>
              </div>
              <!-- 表格 -->
              <div class="personal_table_wrap">
                <el-table
                  v-if="item.tableData.length>0"
                  ref="singleTable"
                  :data="item.tableData"
                  highlight-current-row
                  :row-class-name="getRowIndex"
                  @cell-mouse-enter="enterTable"
                  @cell-mouse-leave="leaveTable"
                  style="width: 100%"
                  :cell-style="cellStyle"
                  :header-row-style="changeHeader"
                >
                  <el-table-column property="file_name" label="文件名" align="center"></el-table-column>
                  <el-table-column property="file_size" label="文件大小" align="center"></el-table-column>
                  <el-table-column property="state" label="状态" align="center"></el-table-column>
                  <el-table-column property="opertion" label="操作" align="center">
                    <template slot-scope="scope">
                      <div class="layout justify_center align_center">
                        <div class="layout flex_row align_center">
                          <div class="watch_pdf">
                            <a :href="scope.row.url" target="_blank" rel="noopener noreferrer">
                              <img :src="scope.row.showIcon == true?watchImg2:watchImg1" alt />
                            </a>
                          </div>
                          <div class="delete_pdf" @click="deleteDialog(item,scope.row)">
                            <img :src="scope.row.showIcon == true?deleteImg2:deleteImg1" alt />
                          </div>
                        </div>
                      </div>
                    </template>
                  </el-table-column>
                </el-table>
                <div class="no_upload" v-else>
                  请上传文件
                  <!-- Please upload the file -->
                  </div>
                <!-- 删除确认弹窗 -->
                <el-dialog
                  lock-scroll
                  :visible.sync="dialogVisible"
                  width="498px"
                  :before-close="handleClose"
                >
                  <div class="capion_title">提示</div>
                  <div class="capion_tips">确认要删除吗?</div>
                  <div slot="footer" class="dialog-footer clearfix">
                    <div class="dialog_btn_l dialog_btn_r" @click="deleteSure()">确认</div>
                    <div class="dialog_btn_l" @click="dialogVisible = false">取消</div>
                  </div>
                </el-dialog>
              </div>
            </div>
          </div>
          <!-- 上一页 提交 撤销 -->
          <div class="btn_group">
            <div class="layout align_center justify_center flex_row">
              <div class="btn_l" @click="prevPage()">
                上一步
                <!-- Back -->
                </div>
              <div class="btn_l btn_c" @click="submitNow('formLabelChinese')">
                提交
                <!-- Submit -->
                </div>
              <div class="btn_l" @click="cancelSubmit()">
                取消
                <!-- Cancel -->
                </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { Message } from "element-ui";
import { post } from "../../../api/http";
let uploadObj = {};
let uploadObjk={};
export default {
  data() {
    // 身份证号正则
    var validateIdNum = (rule, value, callback) => {
      if (
        !/^(([1][1-5])|([2][1-3])|([3][1-7])|([4][1-6])|([5][0-4])|([6][1-5])|([7][1])|([8][1-2]))\d{4}(([1][9]\d{2})|([2]\d{3}))(([0][1-9])|([1][0-2]))(([0][1-9])|([1-2][0-9])|([3][0-1]))\d{3}[0-9xX]$/.test(
          value
        )
      ) {
        callback(new Error("请输入身份证号"));
      } else {
        callback();
      }
    };
    // 手机号码正则
    var validatePhone = (reule, value, callback) => {
      if (!/^1\d{10}$/.test(value)) {
        callback(new Error("请输入手机号码"));
      } else {
        callback();
      }
    };
    // 邮编正则
    var validatePostCode = (resule, value, callback) => {
      if (!/^[0-9]{6}$/.test(value)) {
        callback(new Error("请输入邮编"));
      } else {
        callback();
      }
    };
    return {
      // 国家选择
      countryList: [],
      countryId: "",
      // 选中答案
      isChoice: -1,
      //   中文表单
      formLabelChinese: {
        name: "",
        gender: "",
        card_number: "",
        passport_number: "",
        nation: "",
        phone: "",
        first_name: "",
        middle_name: "",
        last_name: "",
        add1: "",
        add2: "",
        add3: "",
        postCode: ""
      },
      rules: {
        name: [
          {
            required: true,
            message: "请输入您的名字",
            trigger: "blur"
          }
        ],
        gender: [
          {
            required: true,
            message: "请选择您的性别",
            trigger: "change"
          }
        ],
        card_number: [
          {
            required: true,
            validator: validateIdNum,
            trigger: "blur"
          }
        ],
        passport_number: [
          {
            required: true,
            message: "请输入您的护照号码",
            trigger: "blur"
          }
        ],
        nation: [
          {
            required: true,
            message: "请选择您的国籍",
            trigger: "change"
          }
        ],
        phone: [
          {
            required: true,
            validator: validatePhone,
            trigger: "blur"
          }
        ],
        first_name: [
          {
            required: true,
            message: "Please enter first name",
            trigger: "blur"
          }
        ],

        last_name: [
          {
            required: true,
            message: "Please enter last name",
            trigger: "blur"
          }
        ],
        add1: [
          {
            required: true,
            message: "Please enter address",
            trigger: "blur"
          }
        ]
      },
      currentRow: null,
      // 删除弹窗
      dialogVisible: false,
      deleteId: "",
      // 删除的表格
      deleteList: "",
      // 删除的下标
      deleteIndex: "",
      // 查看icon
      watchImg1: require("../../../assets/img_7.png"),
      watchImg2: require("../../../assets/img_6.png"),
      // 删除icon
      deleteImg1: require("../../../assets/img_24.png"),
      deleteImg2: require("../../../assets/img_23.png"),
      // 国家id
      countryId: "",
      uploadList: [],
      // 上传文件请求头
      headers: {
        token: ""
      },
      // 当前点击的上传
      tableId: "",
      tableData: [],
      tableDatak:[],
      // 第二步答案
      choiceAns: "",
      // 文件是否为必传
      requireObj: {}
    };
  },
  methods: {
    // 表格
    // 修改表头样式
    changeHeader({ row, rowIndex }) {
      return "color:#333;font-size:16px";
    },
    // 修改第一列样式
    cellStyle({ row, column, rowIndex, columnIndex }) {
      if (columnIndex == 0) {
        return "color:#003CFF";
      }
    },
    // 获取国家列表
    getCountryList() {
      let url = "/api/sundry/get_country";
      post(url).then(res => {
        this.countryList = res;
      });
    },
    // 上传证明
    // 上传成功回调
    uploadSuccProperty(response, file, fileList) {
      if (response.code == 1) {
        // 上传成功
        var obj = {};
        var objk={};
        const fileSize = (file.size / 1024 / 1024).toFixed(2) + "M";
        obj["file_name"] = file.name;
        obj["file_size"] = fileSize;
        obj["state"] = "上传成功";
        obj["url"] = response.data.url;
        obj["showIcon"] = false;
        obj["id"] = this.tableId;
        this.tableData.push(obj);

         objk["file_name"] = file.name;
        objk["file_size"] = fileSize;
        objk["state"] = "上传成功";
        objk["url"] = response.data.relative_url;
        objk["showIcon"] = false;
        objk["id"] = this.tableId;
        this.tableDatak.push(objk);
        for (let obj of this.uploadList) {
          if (this.tableId == obj.id) {
            obj.tableData = this.tableData;
          }
        }

        uploadObj[this.tableId] = this.tableData;
        uploadObjk[this.tableId] = this.tableDatak;
        localStorage.setItem("uploadAnswer", JSON.stringify(uploadObj));
        localStorage.setItem("uploadAnswerk", JSON.stringify(uploadObjk));
        console.log('3443734',uploadObjk)
      } else if (response.code == 0) {
        // 上传失败
        this.$message.error(response.msg);
      }
    },
    // 上传对应的表格
    getItem(item) {
      this.tableId = item.id;
      this.tableData = item.tableData;
    },
    // 获取该行的下标
    getRowIndex({ row, rowIndex }) {
      row.index = rowIndex;
    },
    // 删除弹窗
    deleteDialog(item, row) {
      this.dialogVisible = true;
      this.deleteList = item.tableData;
      this.deleteIndex = row.index;
      this.deleteId = row.id;
    },
    // 确认删除
    deleteSure() {
      // 删除缓存中对应的数据
      let uploadAnswer = JSON.parse(localStorage.getItem("uploadAnswer"));
     
      for (let i in uploadAnswer) {
        if (i == this.deleteId) {
          uploadAnswer[i].splice(this.deleteIndex, 1);
        }
      }
      localStorage.setItem("uploadAnswer", JSON.stringify(uploadAnswer));


       let uploadAnswerk = JSON.parse(localStorage.getItem("uploadAnswerk"));
       for (let i in uploadAnswerk) {
        if (i == this.deleteId) {
          uploadAnswerk[i].splice(this.deleteIndex, 1);
        }
      }
      localStorage.setItem("uploadAnswerk", JSON.stringify(uploadAnswerk));
      // 删除表格中的数据
      this.deleteList.splice(this.deleteIndex, 1);
      this.dialogVisible = false;
    },
    // 删除之前
    handleClose(done) {
      this.dialogVisible = false;
    },
    // 返回上一页
    prevPage() {
      this.$router.push({ path: "/evaluteTwo" });
    },
    // 提交
    submitNow(formName) {
      // 判断文件是否为必传
      let isRequire = "";
      // console.log(this.requireObj,uploadObj,"提交")
      for (let item in this.requireObj) {
        // 所有文件都为非必传
        if (this.requireObj[item] == 0) {
          isRequire = true;
        }
        // console.log(this.requireObj[item] == 0)
      }
      if (isRequire) {
        // JSON.stringify(uploadObj) != "{}"
        this.$refs[formName].validate(valid => {
          if (valid) {
            localStorage.setItem(
              "formMsg",
              JSON.stringify(this.formLabelChinese)
            );
            let url = "/api/template/get_result";
            let params = {
              country_id: this.countryId,
              name: this.formLabelChinese.name,
              gender: this.formLabelChinese.gender,
              card_number: this.formLabelChinese.card_number,
              passport_number: this.formLabelChinese.passport_number,
              country: this.formLabelChinese.nation,
              mobile: this.formLabelChinese.phone,
              first_name: this.formLabelChinese.first_name,
              middle_name: this.formLabelChinese.middle_name,
              last_name: this.formLabelChinese.last_name,
              postcode: this.formLabelChinese.postCode,
              address1: this.formLabelChinese.add1,
              address2: this.formLabelChinese.add2,
              address3: this.formLabelChinese.add3,
              content1: this.choiceAns,
              content2: JSON.parse(localStorage.getItem("uploadAnswerk"))
            };
            post(url, params).then(res => {
              localStorage.setItem("evalute_result", JSON.stringify(res));
              uploadObj = {};
              this.$router.push({ path: "/evaluteResult" });
            });
          } else {
            this.$message({
              showClose: true,
              message: "请填写完整信息",
              type: "warning"
            });
          }
        });
      } else {
        this.$message({
          showClose: true,
          message: "请上传",
          type: "warning"
        });
      }
    },
    // 取消
    cancelSubmit() {
      localStorage.removeItem("uploadAnswer");
      localStorage.removeItem("choicedAnswer");
      localStorage.removeItem("countryId");
      localStorage.removeItem("formMsg");
      localStorage.removeItem("evalute_result");
      this.$router.push({ path: "/indexMid" });
    },
    // 操作
    // 划过单元格
    enterTable(row, column, cell, event) {
      row.showIcon = true;
    },
    leaveTable(row, column, cell, event) {
      row.showIcon = false;
    },
    // 获取文件上传问题
    getUpload() {
      let url = "/api/template/get_question3";
      let params = {
        country_id: this.countryId
      };
      post(url, params).then(res => {
        for (let obj of res) {
          obj.tableData = [];
        }

        // 数据回显
        let uploadAnswer = JSON.parse(localStorage.getItem("uploadAnswer"));
        if (uploadAnswer) {
          uploadObj = uploadAnswer;
        }
        for (let i in uploadObj) {
          for (let obj of res) {
            if (i == obj.id) {
              obj.tableData = uploadObj[i];
            }
          }
        }
        this.uploadList = res;
        console.log(this.uploadList, "文件上传");
        // let requireObj = {};
        res.forEach(ele => {
          this.requireObj[ele.id] = ele.is_required;
        });
      });
    }
  },
  mounted() {
    this.headers.token = localStorage.getItem("token");
    // 国家id
    this.countryId = localStorage.getItem("countryId");
    // 获取国家列表
    this.getCountryList();
    // 第二步答案
    this.choiceAns = JSON.parse(localStorage.getItem("choicedAnswer"));
    // 个人信息 回显
    if (localStorage.getItem("formMsg")) {
      this.formLabelChinese = JSON.parse(localStorage.getItem("formMsg"));
    }

    this.getUpload();
  }
};
</script>
<style>
.third_form .el-form-item__label {
  font-weight: bold;
  color: #666;
  font-size: 16px;
}
.third_form .el-input__inner {
  height: 35px;
  line-height: 35px;
  border-radius: 3px;
  font-size: 12px;
}
/* 中文表单 输入框 */
.chinese_form .el-input__inner {
  width: 302px;
}
/* 英文表单 输入框 */

/* 英文名字 */
.english_form .input_single {
  width: 139px;
}
.english_form .input_single .el-input {
  width: 139px !important;
}
.english_form .first_name {
  width: 289px;
}
.english_form .input_single:nth-child(2) {
  margin: 0 10px !important;
}
.english_form .input_single .el-input .el-input__inner {
  width: 139px !important;
}
.english_form .second_name .el-form-item__content {
  margin-left: 0 !important;
}
/* 表格 */
.third_form .el-table thead th {
  background-color: #fff !important;
}
.third_form .el-table th > .cell {
  font-weight: bold;
}
/* 表头下划线 */
.third_form .el-table td,
.third_form .el-table th.is-leaf {
  border-bottom-color: #999;
}
/* 去掉行的下划线 */
.third_form .el-table__row > td {
  border: none;
}
.third_form .el-table::before {
  /* 去掉最下面的那一条线 */
  height: 0px;
}
/* 上传文件回显列表 */
.third_form .el-upload-list {
  display: none;
}
/* 删除弹窗 */
.third_form .el-dialog {
  background-color: #526aa6;
  box-shadow: 2px 0px 5px 1px rgba(0, 0, 0, 0.2);
}
.third_form .el-dialog__body {
  color: #fff;
  text-align: left;
}
/* x号 */
.third_form .el-dialog__headerbtn {
  top: 12px;
  right: 12px;
}
.third_form .el-dialog__headerbtn .el-dialog__close {
  color: #fff;
}
/* 底部 */
.third_form .el-dialog__footer {
  background-color: #fff;
  color: #999;
  padding: 0;
}
</style>
<style scoped>
@import "../../../style/evalute.css";
.evalute_main {
  height: auto;
  padding-bottom: 60px;
}
/* 客户信息 */
.customer_title_wrap {
  margin-bottom: 35px;
  text-align: left;
  margin-top: 55px;
}
.customer_title {
  color: #526aa6;
  font-size: 20px;
  font-weight: bold;
}
.customer_infor_tips {
  color: #999;
  font-size: 14px;
}
/* 中文表单 */
.chinese_form {
  margin-right: 117px;
}
.english_form {
  /* width: 526px */
}
/* 其他加分项 */
.other_option {
  margin-top: 60px;
}
/* 个人房产证明 */
.personal_property {
  margin-top: 36px;
  margin-right: 21px;
  border: 1px solid #526aa6;
  border-radius: 3px;
}
/* 表头 */
.table_wrap_title {
  width: 100%;
  height: 52px;
  background-color: #526aa6;
  border-radius: 3px 3px 0 0;
  color: #fff;
  text-align: left;
  position: relative;
}
.table_title {
  font-size: 18px;
  font-weight: bold;
  padding-top: 9px;
  margin-left: 17px;
}
.table_tips {
  font-size: 12px;
  margin-left: 17px;
}
/* 上传文件 */
.table_upload {
  position: absolute;
  right: 18px;
  top: 7px;
  width: 22px;
  height: 20px;
}
/* 表格 */
.personal_table_wrap {
  margin: 0 20px 20px;
}
/* 操作 */
.watch_pdf {
  width: 34px;
  height: 20px;
  margin-right: 13px;
  border-radius: 3px;
}
.delete_pdf {
  width: 34px;
  height: 20px;
  border-radius: 3px;
}
/* 暂无上传 */
.no_upload {
  margin: 22px auto;
  color: #666;
  font-size: 16px;
}
/* 弹窗内文字 */
.capion_title {
  font-size: 20px;
  font-weight: bold;
}
.capion_tips {
  font-size: 16px;
  margin-top: 20px;
  margin-bottom: 50px;
}
/* 底部按钮 */
.dialog_btn_l {
  float: left;
  width: 50%;
  height: 84px;
  line-height: 84px;
  text-align: center;
  font-size: 16px;
}
.dialog_btn_r {
  position: relative;
}
.dialog_btn_r::before {
  position: absolute;
  top: 0;
  right: 0;
  content: "";
  width: 1px;
  height: 84px;
  background-color: #999;
}
.dialog_btn_l:hover {
  color: #fff;
  background-color: #526aa6;
  opacity: 0.8;
}
/* 提交 */
.btn_group {
  margin: 100px auto 0;
}
.btn_l {
  width: 120px;
  height: 38px;
  text-align: center;
  line-height: 38px;
  border: 1px solid #999;
  font-size: 20px;
  color: #666;
  border-radius: 3px;
}
.btn_c {
  color: #fff;
  background-color: #526aa6;
  border-color: #526aa6;
  margin: 0 60px;
}
.btn_l:hover {
  border-color: #526aa6;
  opacity: 0.8;
}
</style>