<!--
 * @Descripttion:
 * @version:
 * @Author: kBank
 * @Date: 2022-10-24 15:45:01
-->
<template>
  <div class="page">
    <el-dialog :title="'户籍变更'"
               :visible.sync="registerFlag"
               width="40%"
               class="showAll_dialog"
               :close-on-click-modal="false"
               :before-close="closeTc"
               center>
      <el-form class="padding-s">
        <el-form-item class="label"
                      :label="'会员编号'"
                      label-width="140px">
          <el-input disabled="disabled"
                    class="width-s"
                    v-model="diaLog.memberName"
                    clearable />
        </el-form-item>
        <el-form-item class="label"
                      :label="'联系方式'"
                      label-width="140px">
          <el-input disabled="disabled"
                    class="width-s"
                    v-model="diaLog.phone"
                    clearable />
        </el-form-item>
        <el-form-item class="label"
                      :label="'新会员姓名'"
                      label-width="140px">
          <el-input disabled="disabled"
                    class="width-s"
                    v-model="diaLog.changeMemberName"
                    clearable />
        </el-form-item>
        <el-form-item class="label"
                      :label="'新联系方式'"
                      label-width="140px">
          <el-input disabled="disabled"
                    class="width-s"
                    v-model="diaLog.changePhone"
                    clearable />
        </el-form-item>
        <el-form-item class="label"
                      :label="'情况说明'"
                      label-width="140px">
          <el-input disabled="disabled"
                    style="line-height: 30px"
                    class="width-s heights"
                    v-model="diaLog.description"
                    clearable />
        </el-form-item>
        <el-form-item class="label"
                      :label="'原会员证件图片'"
                      label-width="140px">
          <div style="display: flex;justify-content: space-between">
            <div class="id-cards">
              <!-- <img :src="diaLog.idFront" /> -->
              <el-image 
    style="width: 100%; height: 100%"
    :src="diaLog.idFront" 
    :preview-src-list="[diaLog.idFront]">
  </el-image>
            </div>
            <div class="id-cards">
              <!-- <img :src="diaLog.idBack" /> -->
              <el-image 
    style="width: 100%; height: 100%"
    :src="diaLog.idBack" 
    :preview-src-list="[diaLog.idBack]">
  </el-image>
            </div>
          </div>
        </el-form-item>
        <el-form-item class="label"
                      :label="'新会员证件图片'"
                      label-width="140px">
          <div style="display: flex;justify-content: space-between">
            <div class="id-cards">
              <!-- <img :src="diaLog.changeIdFront" /> -->
              <el-image 
    style="width: 100%; height: 100%"
    :src="diaLog.changeIdFront" 
    :preview-src-list="[diaLog.changeIdFront]">
  </el-image>
            </div>
            <div class="id-cards">
              <!-- <img :src="diaLog.changeIdBack" /> -->
              <el-image 
    style="width: 100%; height: 100%"
    :src="diaLog.changeIdBack" 
    :preview-src-list="[diaLog.changeIdBack]">
  </el-image>
            </div>
          </div>
        </el-form-item>
        <el-form-item class="label"
                      :label="'业务扣费'+(isLocals())"
                      label-width="140px">
          <el-input disabled="disabled"
                    class="width-s"
                    v-model="diaLog.amount"
                    clearable />
        </el-form-item>
        <el-form-item class="label"
                      :label="'备注'"
                      label-width="140px">
          <el-input disabled="disabled"
                    class="width-s"
                    v-model="diaLog.remark"
                    clearable />
        </el-form-item>
      </el-form>
      <div class="return-s"
           @click="closeTc"> {{ '返回' }}</div>
    </el-dialog>
    <topBar v-if="topList.length > 0"
            :top-list="topList"
            :moren="moren" />
    <div class="main">
      <div class="form_all">
        <el-form ref="select"
                 :model="select"
                 label-width="120px">
          <el-row :gutter="40">
            <!-- 一层 -->
            <el-col :span="4"
                    style="margin-left: -20px">
              <el-form-item :label="'会员编号'">
                <el-input v-model="select.memberCode"
                          clearable />
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item :label="'变更前联系方式'">
                <el-input v-model="select.phone"
                          clearable />
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item :label="'变更前会员姓名'">
                <el-input v-model="select.memberName"
                          clearable />
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item :label="'审核状态'">
                <el-select v-model="select.approveStatus"
                           clearable
                           :placeholder="'请选择'">
                  <el-option v-for="item in actStatus"
                             :key="item.value"
                             :label="item.label"
                             :value="item.value" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item :label="'申请日期'">
                <el-date-picker v-model="creationTime"
                                value-format="yyyy-MM-dd"
                                type="datetimerange"
                                :range-separator="'至'"
                                :start-placeholder="'开始日期'"
                                :end-placeholder="'结束日期'"
                                @change="changeTime" />
              </el-form-item>
            </el-col>
            <el-col :span="4"
                    style="margin-left: 30px">
              <el-button type="primary"
                         size="small"
                         class="my_search"
                         @click="getDataList"> {{ '搜索' }}</el-button>
              <el-button size="small"
                         class="my_reset"
                         @click="reset"> {{ '重置' }}</el-button>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <div class="main_a">
        <!--        <div class="mainbtn">-->
        <!--          <el-button-->
        <!--            size="small"-->
        <!--            style="background: #009b58"-->
        <!--            class="addBtn"-->
        <!--            @click="agree('')"-->
        <!--          >同意</el-button>-->
        <!--          <el-button-->
        <!--            size="small"-->
        <!--            style="background:#C8161D;color: #fff;border: none"-->
        <!--            class="addBtn"-->
        <!--            @click="rejects('')"-->
        <!--          >驳回</el-button>-->
        <!--        </div>-->
        <div class="maintable">
          <el-table ref="multipleTable"
          v-loading="loading"
                    :data="tableData"
                    style="width: 100%"
                    height="77vh"
                    :header-cell-style="{ background: '#EEEEEE' }"
                    :row-class-name="tableRowClassName"
                    @selection-change="handleSelectionChange">
            <el-table-column type="selection"
                             width="21" />
            <el-table-column align="left"
                             prop="memberCode"
                             :label="'会员编号'"
                             width="120" />
            <el-table-column align="center"
                             prop="memberName"
                             :label="'变更前会员姓名'" />
            <el-table-column align="center"
                             prop="phone"
                             :label="'变更前联系方式'" />
            <el-table-column align="center"
                             prop="changeMemberName"
                             :label="'变更后会员姓名'">
              <template slot-scope="scope">
                <div style="color: #4391FD">{{scope.row.changeMemberName}}</div>
              </template>
            </el-table-column>
            <el-table-column align="center"
                             prop="changePhone"
                             :label="'变更后联系方式'">
              <template slot-scope="scope">
                <div style="color: #4391FD">{{scope.row.changePhone}}</div>
              </template>
            </el-table-column>
            <el-table-column
            align="center"
            prop="approveStatusVal"
            :end-placeholder="'审核状态'"
            :label="'审核状态'"
          >
          <template slot-scope="scope">
            <div v-if="scope.row.approveStatus == 3">
              <el-popover placement="right"
                          width="400"
                          trigger="hover">
                <div v-html="scope.row.rejectMsg"></div>
                <div style="cursor: pointer;" slot="reference">{{ scope.row.approveStatusVal }}</div>
              </el-popover>
            </div>
            <div v-else>{{ scope.row.approveStatusVal }}</div>
          </template>
      </el-table-column>
            <el-table-column align="center"
                             prop="amount"
                             :label="'业务扣费'" />
            <el-table-column align="center"
                             prop="remark"
                             :label="'备注'" />
            <el-table-column align="center"
                             prop="creationTime"
                             :label="'申请日期'"
                             width="200">
              <template slot-scope="scope">
                <div>{{scope.row.approveTime || scope.row.creationTime}}</div>
              </template>
            </el-table-column>
            <el-table-column align="center"
                             prop="time"
                             :label="'操作'"
                             fixed="right">
              <template slot-scope="scope">
<div class="bttn">
                <el-button class="button-s"
                           type="text"
                           style="color: #E70DEC;"
                           size="small"
                           v-hasButtons="['regiestSee']"
                           @click="check(scope.row.pkId,)">
                  {{ '查看' }}
                </el-button>
                <el-button class="button-s"
                           type="text"
                           style="color: #009B58;"
                           size="small"
                           v-hasButtons="['regiestYes']"
                           @click="agrees(scope.row)"
                           v-if="scope.row.approveStatus==0">
                  {{ '同意' }}
                </el-button>
                <el-button class="button-s"
                           type="text"
                           v-hasButtons="['regiestNo']"
                           size="small"
                           style="color: #C8161D"
                           @click="reject_s(scope.row.pkId)"
                           v-if="scope.row.approveStatus==0">
                  {{ '驳回' }}
                </el-button>
              </div>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>

    </div>
    <pagination v-show="total > 0"
                :total="total"
                :page.sync="queryParams.pageNum"
                :limit.sync="queryParams.pageSize"
                @pagination="getDataList" />
    <el-dialog title="驳回意见"
               :visible.sync="isShow"
               width="40%"
               center
               :close-on-click-modal="false"
               :before-close="handleClose1">
      <div>
        <editor ref="sptwEditor"
                v-model="relContent"
                :min-height="283"
                :upload-url="uploadImgUrl" />
      </div>
      <div class="button-s1">
        <div class="submit"
             @click="handleClose1"> {{ '取消' }}</div>
        <div class="submit colors"
             @click="confirmSubmit"> {{ '确认' }}</div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import topBar from '@/components/topBar'
import * as api from '@/api/giftGoods.js'
import {
  DomicileDetails,
  domicileReject,
  getDomicileChangeList,
} from '@/api/settle'
import { getApproveStatus } from '@/api/financial'
import { Message } from 'element-ui'
import { isLocals } from '@/utils/numberToCurrency'
import Editor from '@/components/Editor/index.vue'

export default {
  name: 'Bzpz',
  components: {
    topBar,
    Editor,
  },
  filters: {
    isAgree(val) {
      if (!val) {
        return '允许'
      } else {
        return '禁止'
      }
    },
  },
  data() {
    return {
      uploadImgUrl: process.env.VUE_APP_BASE_API + '/system/upload',
      relContent: '',
      relId: '',
      isShow: false,
      diaLog: {},
      registerFlag: false,
      creationTime: '',
      select: {},
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 50,
      },
      addOrEdit: '',
      total: 0,
      dialogVisible: false,
      tableData: [],
      loading:false,
      moren: 'Register',
      topList: [
        {
          name: '户籍变更',
          path: 'Register',
        },
      ],
      form: {
        name: '',
      },
      rules: {
        name: [
          { required: true, message: '请输入规格类型', trigger: 'blur' },
        ],
      },
      actStatus: [],
    }
  },
  mounted() {
    // 获取下拉
    this.getData()
    // 获取列表
    this.getDataList()
  },
  methods: {
    handleClose1() {
      this.isShow = false
      this.relContent = ''
      this.relId = ''
    },
    isLocals,
    closeTc() {
      this.registerFlag = false
      this.diaLog = {}
    },
    // 重置
    reset() {
      this.select = {}
      this.creationTime = ''
      this.getDataList()
    },
    // 驳回申请
    confirmSubmit() {
      if (this.relContent.length == 0) {
        this.$message({
          message: '请输入驳回信息',
          type: 'warning',
        })
        return false
      }
      domicileReject({ rejectMsg: this.relContent, pkId: this.relId }).then(
        (res) => {
          if (res.code == 200) {
            this.$message({
              message: res.msg,
              type: 'success',
            })
            this.isShow = false
            this.relContent = ''
            this.getDataList()
          }
        }
      )
    },
    reject_s(id) {
      this.isShow = true
      this.relId = id
      // this.$confirm('是否驳回该申请?', '警告', {
      //   confirmButtonText: '确定',
      //   cancelButtonText: '取消',
      //   type: 'warning'
      // }).then((_) => {
      //   domicileReject({ 'pkId': id }).then((res) => {
      //     if (res.code == '200') {
      //       Message({
      //         message: res.msg,
      //         type: 'success'
      //       })
      //       this.getDataList()
      //     } else {
      //       Message({
      //         message: res.msg,
      //         type: 'error'
      //       })
      //     }
      //   })
      // })
    },
    rejects(id) {
      const flags = this.verifySelect()
      if (id != '' || flags != undefined) {
        if (
          this.$refs.multipleTable.selection[0].approveStatus == 2 ||
          this.$refs.multipleTable.selection[0].approveStatus == 4
        ) {
          this.$confirm('是否驳回该申请?', '警告', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
          }).then((_) => {
            domicileReject({
              pkId: id || this.$refs.multipleTable.selection[0].pkId,
            }).then((res) => {
              if (res.code == '200') {
                Message({
                  message: res.msg,
                  type: 'success',
                })
                this.getDataList()
              } else {
                Message({
                  message: res.msg,
                  type: 'error',
                })
              }
            })
          })
        } else if (this.$refs.multipleTable.selection[0].approveStatus == 3) {
          Message({
            message: '用户申请户籍变更已被驳回,请勿重复申请',
            type: 'warning',
          })
        }
      }
    },
    check(id) {
      DomicileDetails({ pkId: id }).then((res) => {
        if (res.code == '200') {
          this.diaLog = res.data
          this.registerFlag = true
        } else {
          Message({
            message: res.msg,
            type: 'error',
          })
        }
      })
    },
    agree(item) {
      const flags = this.verifySelect()
      if (item != '' || flags != undefined) {
        if (
          this.$refs.multipleTable.selection[0].approveStatus == 2 ||
          this.$refs.multipleTable.selection[0].approveStatus == 4
        ) {
          this.$router.push({
            path: 'hjbgQc',
            query: {
              data: JSON.stringify([
                item || this.$refs.multipleTable.selection[0],
              ]),
              approvalBusiness: 132,
            },
          })
        } else if (this.$refs.multipleTable.selection[0].approveStatus == 3) {
          Message({
            message: '用户申请户籍变更已被驳回,请勿重复申请',
            type: 'warning',
          })
        }
      }
    },
    agrees(item) {
      this.$router.push({
        path: 'hjbgQc',
        query: {
          data: JSON.stringify([item]),
          approvalBusiness: 132,
        },
      })
    },
    getData() {
      getApproveStatus().then((res) => {
        this.actStatus = res.data
      })
    },
    verifySelect() {
      const len = this.$refs.multipleTable.selection.length
      if (len === 0) {
        Message({ message: '请选择一条数据', type: 'warning' })
      } else if (len > 1) {
        Message({ message: '只能选择一条', type: 'warning' })
      } else {
        return true
      }
    },
    changeTime(val) {
      if (val) {
        this.select.startDate = val[0]
        this.select.endDate = val[1]
      }
    },
    // 点击修改
    toFixed(id, index) {
      // this.addOrEdit = false
      // this.dialogVisible = true
      this.$router.push({
        path: 'addGiftGoodsInfo',
        query: {
          pkId: id,
          type: index,
          // functionType:this.select.functionType
        },
      })
    },
    // 删除
    handleDelete(id) {
      this.$confirm('确认删除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        api.activityRemove(id).then((res) => {
          this.getDataList()
        })
      })
    },
    onSubmit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let url = ''
          if (this.addOrEdit == true) {
            url = classifySave
          } else {
            url = classifyUpdate
          }
          url(this.form).then((res) => {
            if (res.code == 200) {
              this.$message({
                message: res.msg,
                type: 'success',
              })
              this.dialogVisible = false
              // 充值数据
              this.$refs[formName].resetFields()
              // 获取列表
              this.getDataList()
            }
          })
        } else {
          return false
        }
      })
    },
    handleClose() {
      this.dialogVisible = false
      this.$refs['form'].clearValidate()
      this.$refs['form'].resetFields()
    },
    openDig() {
      this.$router.push({
        path: 'addGiftGoodsInfo',
      })
    },
    getDataList() {
      this.loading = true
      if (this.creationTime == '' || this.creationTime == null) {
        this.select.startDate = ''
        this.select.endDate = ''
      }
      getDomicileChangeList(this.select).then((res) => {
        this.loading = false
        this.tableData = res.rows
        const regex = new RegExp('<img', 'gi');
        this.tableData.forEach(item=>{
         if(item.rejectMsg){
          item.rejectMsg= item.rejectMsg.replace(regex, `<img style="max-width: 200px;"`);
         }
        })
        this.total = res.total
      })
    },
    handleSelectionChange(val) {},
    /** 导出按钮操作 */
    handleExport() {
      const queryParams = this.queryParams
      this.$confirm('是否确认导出所有数据项?', '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(function () {
          return api.exportClassIfy(queryParams)
        })
        .then((response) => {
          this.download(response)
        })
    },
    tableRowClassName({ row, rowIndex }) {
      if (rowIndex % 2 == 1) {
        return 'warning-row'
      } else if (rowIndex % 2 == 0) {
        return 'success-row'
      }
      return ''
    },
  },
}
</script>
<style scoped lang="scss">
::v-deep .el-checkbox__inner {
  width: 10px;
  height: 10px;
}
.showAll_dialog {
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;

  ::v-deep .el-dialog {
    margin: 0 auto !important;
    height: 80%;
    overflow: hidden;
    background-color: #fff;
    .el-dialog__body {
      position: absolute;
      left: 0;
      top: 80px;
      bottom: 0;
      right: 0;
      padding: 0;
      z-index: 1;
      overflow: hidden;
      overflow-y: auto;
      // 下边设置字体，我的需求是黑底白字
      color: #ffffff;
      line-height: 30px;
      padding: 0 15px;
    }
  }
}
::v-deep .el-table th:nth-child(5) {
  color: rgb(67, 145, 253);
}
::v-deep .el-table th:nth-child(6) {
  color: rgb(67, 145, 253);
}
::v-deep .el-dialog {
  max-height: 700px;
  overflow: auto;
}
.return-s {
  width: 209px;
  height: 48px;
  background: #cccccc;
  border-radius: 5px 5px 5px 5px;
  opacity: 1;
  text-align: center;
  line-height: 48px;
  color: #fff;
  font-size: 18px;
  margin: 40px auto 20px auto;
  cursor: pointer;
}
.id-cards {
  width: 235px;
  height: 137px;
  //background: rgba(0,0,0,0.2);
  border-radius: 10px 10px 10px 10px;
  opacity: 1;
  img {
    width: 235px;
    height: 137px;
    border-radius: 10px 10px 10px 10px;
  }
}
::v-deep .el-input.is-disabled .el-input__inner {
  background: rgba(0, 0, 0, 0.05) !important;
}
::v-deep .label .el-form-item__label {
  line-height: 65px;
  font-size: 18px;
  color: #333;
}
.padding-s {
  padding: 0 40px 0 0;
}
::v-deep .width-s input {
  height: 65px;
}
::v-deep .heights input {
  height: 200px !important;
  line-height: 20px !important;
}
::v-deep .el-dialog__header {
  padding-bottom: 20px;
}
::v-deep .el-dialog__title {
  font-size: 24px;
}
::v-deep .el-range-editor.el-input__inner {
  width: 100% !important;
}
::v-deep .el-row {
  margin: 0 !important;
}
::v-deep .el-col {
  padding-left: 0 !important;
  padding-right: 0 !important;
  //margin-right: 30px;
}
.button-s {
  padding: 7px 5px;
}
.addBtn {
  width: 68px;
}
::v-deep .el-table .warning-row {
  background: #f9f9f9;
}

::v-deep .el-table .success-row {
  background: #ffffff;
}
::v-deep .el-table thead {
  color: #000000;
}
::v-deep .el-select {
  width: 100%;
}
.page {
  padding: 20px;
  background: #f9f9f9;
  font-size: 14px;
  .main {
    // background: #ffffff;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    .main_a {
      background: #fff;
      border-radius: 8px;
      justify-content: space-between;
      align-items: center;
      box-shadow: 0px 2px 20px 0px rgba(238, 238, 238, 0.5);
    }
    .mainbtn {
      padding: 10px 20px;
    }
    .maintable {
      flex: 1;
    }
  }
}
::v-deep .el-date-editor.el-input,
.el-date-editor.el-input__inner {
  width: 100%;
}
.form_all {
  padding: 0px 0 10px 0;
  //margin-bottom: 20px;
  background: #fff;
}
.button-s1 {
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  margin-top: 20px;
  .submit {
    width: 209px;
    height: 48px;
    background: #cccccc;
    border-radius: 5px 5px 5px 5px;
    line-height: 48px;
    text-align: center;
    color: #fff;
    font-size: 18px;
  }
  .colors {
    margin-left: 40px;
    background-color: #48b2fd;
  }
}
.bttn{
  display: flex;
  align-items: center;
}
</style>
