<template>
  <div class="tabs-content">
    <block-header title="基本信息"></block-header>
    <div class="block-box">
      <table class="table">
        <tr>
          <td>姓名:</td>
          <td>{{ basicInfo.name }}</td>
          <td>身份证号:</td>
          <td>{{ basicInfo.idCard }}</td>
          <td>手机号:</td>
          <td>
            {{ basicInfo.phone }}
            <el-button v-if="mobilePermission" type="primary" size="small" @click="updateTell(basicInfo.phone)">变更
            </el-button>
          </td>
        </tr>
        <tr>
          <td>实名认证:</td>
          <td>
            <el-tag
                size="mini"
                type="danger"
                v-if="basicInfo.isIdentity === '未认证'"
            >
              {{ basicInfo.isIdentity }}
            </el-tag
            >
            <el-tag size="mini" type="success" v-else>
              {{ basicInfo.isIdentity }}
            </el-tag
            >
          </td>
          <td>基础信息认证:</td>
          <td>
            <el-tag
                size="mini"
                type="danger"
                v-if="basicInfo.isIdentity === '未认证'"
            >
              {{ basicInfo.isBasicInfo }}
            </el-tag
            >
            <el-tag size="mini" type="success" v-else>
              {{ basicInfo.isBasicInfo }}
            </el-tag
            >
          </td>
          <td>活体认证:</td>
          <td>
            <el-tag
                size="mini"
                type="danger"
                v-if="basicInfo.isIdentity === '未认证'"
            >
              {{ basicInfo.isFace }}
            </el-tag
            >
            <el-tag size="mini" type="success" v-else>
              {{ basicInfo.isFace }}
            </el-tag
            >
          </td>
        </tr>
        <tr>
          <td>客户单位名称:</td>
          <td>{{ basicInfo.companyName }}</td>
          <td>客户单位地址:</td>
          <td>{{ basicInfo.companyAddress }}</td>
          <td>住宅地址:</td>
          <td>{{ basicInfo.houseAddress }}</td>
        </tr>
        <tr>
          <td>第一联系人姓名:</td>
          <td>{{ basicInfo.firstName }}</td>
          <td>第一联系人电话:</td>
          <td colspan="3">{{ basicInfo.firstPhone }}</td>
        </tr>
        <tr>
          <td>是否黑名单</td>
          <td colspan="5">
            <span>{{ basicInfo.isBlacklist ? '是' : '否' }}</span>
            <span v-if="basicInfo.isBlacklist">({{basicInfo.blackCause}})</span>
            <el-button v-if="!basicInfo.isBlacklist" size="small" style="margin-left: 10px" @click="handleAddBlack"
                       type="primary">添加
            </el-button>
          </td>
        </tr>
      </table>
    </div>
    <block-header title="银行卡列表"/>
    <div class="block-box">
      <el-table
          :header-row-class-name="headerStyle"
          :highlight-current-row="true"
          border
          size="small"
          :data="ownerBank"
          stripe
          style="width: 100%"
      >
        <el-table-column
            align="center"
            prop="bankAccount"
            label="银行卡号"
        ></el-table-column>
        <el-table-column
            align="center"
            prop="openBankName"
            label="银行名称"
        ></el-table-column>
        <el-table-column
            align="center"
            prop="ownerName"
            label="姓名"
        ></el-table-column>
        <el-table-column
            align="center"
            prop="payChannelApi"
            label="渠道名称"
        ></el-table-column>
        <el-table-column
            align="center"
            prop="gmtCreated"
            label="绑定时间"
            :formatter="transDateFormat"
        ></el-table-column>
        <el-table-column align="center" label="操作">
          <template slot-scope="scope">
            <el-button
                type="text"
                size="small"
                @click="ownerBankBind(scope.row, 'BindCardRecord', '绑卡记录')"
            >绑卡记录
            </el-button
            >
            <el-button type="text" size="small" @click="unSign(scope.row)"
            >解绑
            </el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!--绑卡记录-->
    <template v-if="visible">
      <component
          @handleClose="visible = false"
          :is="activeComponents"
          :dialogVisible="visible"
          :params="dParams"
          :title="dTitle"
      />
    </template>
    <!-- 解绑 -->
    <template v-if="dialogTableVisible">
      <el-dialog
          title="请输入手机号"
          center
          width="30%"
          :visible.sync="dialogTableVisible"
      >
        <el-form :model="tellphone">
          <el-form-item label="旧手机号：" label-width="100">
            <el-input v-model="tellphone.ownerMobile"></el-input>
          </el-form-item>
          <el-form-item label="新手机号：" label-width="100">
            <el-input v-model="tellphone.newOwnerMobile"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="cancel">取 消</el-button>
          <el-button type="primary" @click="submittel">确 定</el-button>
        </div>
      </el-dialog>
    </template>
    <!-- 变更手机号弹框 -->
    <el-dialog title="变更客户手机号" :visible.sync="tellDialog" width="30%" center>
      <el-form :model="tellUpdate">
        <el-form-item label="*原手机号" label-width="80">
          <el-input v-model="tellUpdate.oldTell" readonly></el-input>
        </el-form-item>
        <el-form-item label="*新手机号" label-width="80">
          <el-input v-model="tellUpdate.newTell"></el-input>
        </el-form-item>
      </el-form>
      <div>
        注：变更手机号后，客户的相关信息以及短信信息等均以变更后的新手机号为准。
      </div>
      <div>
        请谨慎操作！！！
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="tellDialog = false">取 消</el-button>
        <el-button type="primary" @click="tellDetermine"
        >确 定
        </el-button
        >
      </div>
    </el-dialog>
    <!--添加黑名单-->
    <el-dialog title="上黑说明" :visible.sync="blackDialog" width="30%" center>
      <el-form ref="blackForm" :model="form" label-width="110px" label-suffix=":" :show-message="false">
        <el-form-item label="上黑说明" required>
          <el-input v-model="form.cause" type="textarea" :rows="3"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="blackDialog = false">取 消</el-button>
        <el-button size="small" type="primary" @click="handleConfirmBlack">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import BlockHeader from "@/components/byh/componments/blockHeader";
import BindCardRecord from "./OwnerBankBind";
import * as moment from "moment";

export default {
  name: "AddUserServiceDialog",
  components: {
    BlockHeader,
    BindCardRecord,
  },
  props: {
    dialogVisible: {
      type: Boolean,
      required: true,
    },
    title: {
      type: String,
      required: true,
    },
    params: {
      type: Object,
      required: true,
    },
  },
  data() {
    return {
      mobilePermission: '',
      tellUpdate: {
        newTell: "",
        oldTell: ""
      },
      tellDialog: false,
      visible: false,
      activeComponents: "",
      dTitle: "",
      dParams: {},
      dialogTableVisible: false,

      basicInfo: {},
      ownerBank: [],
      // 手机号
      tellphone: {
        newOwnerMobile: "",
        ownerMobile: "",
      },
      creator: '',
      dataInfo: {
        bankAccount: "",
        bizType: "",
        clientNo: "",
        productName: "",
      },

      // 上黑
      blackDialog: false,
      form: {
        cause: '',
        certNo: '',
        channel: '',
        realName: ''
      }
    };
  },
  filters: {
    dateFilter: function (row) {
      const exp = row;
      if (!exp || typeof exp === undefined || typeof exp === null) {
        return "";
      }
      return moment(exp).format("YYYY-MM-DD");
    },
  },
  async created() {
    const updateMobile = localStorage.getItem('updateMobile');
    if (updateMobile) {
      this.mobilePermission = updateMobile
    } else {
      this.mobilePermission = null
    }
    if (this.params) {
      const params = this.params;
      console.log(params, "是什么");
      const {basicInfo} = params;
      this.basicInfo = basicInfo;
      if (basicInfo.cardList) this.ownerBank = basicInfo.cardList;
    }
    // console.log(this.$route.query.clientProductName)
    this.dataInfo.productName = this.$route.query.clientProductName;
    this.dataInfo.clientNo = this.$route.query.clientNo;
    this.creator = localStorage.getItem('userName');
  },
  methods: {
    // 变更手机号
    updateTell(n) {
      this.tellDialog = true;
      // console.log(n,'手机号');
      this.tellUpdate.oldTell = n;
      this.tellUpdate.newTell = "";
    },
    //变更手机号确认按钮
    tellDetermine() {
      this.tellDialog = false;
      const tellParams = {
        clientNo: this.dataInfo.clientNo,
        productName: this.dataInfo.productName,
        creator: this.creator,
        oldMobile: this.tellUpdate.oldTell,
        newMobile: this.tellUpdate.newTell,
        certNo: this.basicInfo.idCard
      }
      console.log(tellParams, '参数');
      this.$$post(`/detail/updateMobile`, tellParams).then(res => {
        console.log(res, 'resres');
        if (res.data.code == 200) {
          this.$message({
            type: "success",
            message: "更改成功！",
          });
        }
      })
    },
    headerStyle() {
      return "tableHeaderStyle";
    },
    // 查看绑卡记录
    ownerBankBind(row, com, title) {
      this.activeComponents = com;
      this.visible = true;
      this.dTitle = title;
      this.dParams = row;
    },
    //解绑
    unSign(n) {
      console.log(n, "88888");
      // console.log(this.params);
      this.$confirm("确定要解绑吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
          .then(() => {
            this.dialogTableVisible = true;
            // this.dataInfo.clientNo = n.clientNo;
            this.dataInfo.bizType = n.bizType;
            this.dataInfo.bankAccount = n.bankAccount;
            this.dataInfo.loanSign = n.loanSign;
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消解绑",
            });
          });
    },
    //点击取消
    cancel() {
      this.dialogTableVisible = false;
      this.tellphone = "";
      this.$message({
        type: "info",
        message: "已取消解绑",
      });
    },
    //点击确定提交数据
    submittel() {
      //验证电话号码
      if (!/^1[3-9][0-9]\d{8}$/.test(this.tellphone.newOwnerMobile)) {
        this.$message({
          message: "新号码填写有误",
          type: "error",
        });
        this.tellphone.newOwnerMobile = "";
      }
      if (!/^1[3-9][0-9]\d{8}$/.test(this.tellphone.ownerMobile)) {
        this.$message({
          message: "旧号码填写有误",
          type: "error",
        });
        this.tellphone.ownerMobile = "";
      } else {
        let postData = {...this.dataInfo, ...this.tellphone};
        console.log(postData);
        //调接口
        this.$$post(`/detail/unSign`, postData).then((res) => {
          if (res.data.code != 200) {
            this.dialogTableVisible = false;
            this.$message.error(res.data.message);
            this.tellphone = {};
            return;
          }
          this.$message({
            type: "success",
            message: "解绑成功!",
          });
          this.dialogTableVisible = false;
          this.tellphone = {};
          window.location.reload();
        });
      }
    },
    // 上黑
    handleAddBlack() {
      const {name, idCard} = this.basicInfo;
      this.blackDialog = true;
      console.log(this.basicInfo, '沃日')

      this.form.certNo = idCard;
      this.form.realName = name;
    },
    // 上黑提交
    async handleConfirmBlack() {
      this.$refs["blackForm"].validate((valid) => {
        if (valid) {
          const data = this.form;
          const that = this;
           this.$$post(`/detail/operateBlackListInfo`, data).then(res => {
            if (res.data.code === '200') {
              this.$message({
                type: "success",
                message: "更改成功！",
              });

              that.blackDialog=false;

            }
          }).catch(err => {
            this.$message({
              type: "error",
              message: "操作失败！",
            });

             that.blackDialog=false;
          })


        }
      });
    }
  },
};
</script>

<style>
.el-dialog__title {
  font-size: 20px;
  font-weight: 700;
}
</style>
