<!--
 * @Descripttion:
 * @version:
 * @Author: kBank
 * @Date: 2022-10-24 15:45:01
-->
<template>
  <div class="page">
    <el-dialog
      :visible.sync="registerFlag"
      width="60%"
      class="domicile-change-dialog"
      :close-on-click-modal="false"
      :before-close="closeTc"
      center
      title="户籍变更详情"
      :show-close="false"
    >
      <div slot="title" class="dialog-header">
        <div class="header-content">
          <span class="header-title">户籍变更详情</span>
        </div>
      </div>

      <div class="dialog-content">
        <!-- 基本信息卡片 -->
        <div class="info-card">
          <div class="card-header">
            <i class="el-icon-user-solid" />
            <span>基本信息</span>
          </div>
          <div class="card-content">
            <div class="info-row">
              <div class="info-item">
                <label>会员编号</label>
                <div class="info-value">{{ diaLog.memberName || '-' }}</div>
              </div>
              <div class="info-item">
                <label>联系方式</label>
                <div class="info-value">{{ diaLog.phone || '-' }}</div>
              </div>
            </div>
          </div>
        </div>

        <!-- 变更信息卡片 -->
        <div class="info-card">
          <div class="card-header">
            <i class="el-icon-refresh" />
            <span>变更信息</span>
          </div>
          <div class="card-content">
            <div class="info-row">
              <div class="info-item">
                <label>新会员姓名</label>
                <div class="info-value highlight">{{ diaLog.changeMemberName || '-' }}</div>
              </div>
              <div class="info-item">
                <label>新联系方式</label>
                <div class="info-value highlight">{{ diaLog.changePhone || '-' }}</div>
              </div>
            </div>
            <div class="info-row full-width">
              <div class="info-item">
                <label>情况说明</label>
                <div class="info-value description">{{ diaLog.description || '-' }}</div>
              </div>
            </div>
          </div>
        </div>

        <!-- 证件信息卡片 -->
        <div class="info-card">
          <div class="card-header">
            <i class="el-icon-picture-outline" />
            <span>证件信息</span>
          </div>
          <div class="card-content">
            <div class="certificate-section">
              <h4 class="section-title">原会员证件</h4>
              <div class="certificate-images">
                <div class="certificate-card">
                  <div class="certificate-label">身份证正面</div>
                  <div class="image-container">
                    <el-image
                      v-if="diaLog.idFront"
                      :src="diaLog.idFront"
                      :preview-src-list="[diaLog.idFront]"
                      fit="cover"
                      class="certificate-image"
                    >
                      <div slot="error" class="image-error">
                        <i class="el-icon-picture-outline" />
                        <span>图片加载失败</span>
                      </div>
                    </el-image>
                    <div v-else class="image-placeholder">
                      <i class="el-icon-picture-outline" />
                      <span>暂无图片</span>
                    </div>
                  </div>
                </div>
                <div class="certificate-card">
                  <div class="certificate-label">身份证反面</div>
                  <div class="image-container">
                    <el-image
                      v-if="diaLog.idBack"
                      :src="diaLog.idBack"
                      :preview-src-list="[diaLog.idBack]"
                      fit="cover"
                      class="certificate-image"
                    >
                      <div slot="error" class="image-error">
                        <i class="el-icon-picture-outline" />
                        <span>图片加载失败</span>
                      </div>
                    </el-image>
                    <div v-else class="image-placeholder">
                      <i class="el-icon-picture-outline" />
                      <span>暂无图片</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <div class="certificate-section">
              <h4 class="section-title">新会员证件</h4>
              <div class="certificate-images">
                <div class="certificate-card">
                  <div class="certificate-label">身份证正面</div>
                  <div class="image-container">
                    <el-image
                      v-if="diaLog.changeIdFront"
                      :src="diaLog.changeIdFront"
                      :preview-src-list="[diaLog.changeIdFront]"
                      fit="cover"
                      class="certificate-image"
                    >
                      <div slot="error" class="image-error">
                        <i class="el-icon-picture-outline" />
                        <span>图片加载失败</span>
                      </div>
                    </el-image>
                    <div v-else class="image-placeholder">
                      <i class="el-icon-picture-outline" />
                      <span>暂无图片</span>
                    </div>
                  </div>
                </div>
                <div class="certificate-card">
                  <div class="certificate-label">身份证反面</div>
                  <div class="image-container">
                    <el-image
                      v-if="diaLog.changeIdBack"
                      :src="diaLog.changeIdBack"
                      :preview-src-list="[diaLog.changeIdBack]"
                      fit="cover"
                      class="certificate-image"
                    >
                      <div slot="error" class="image-error">
                        <i class="el-icon-picture-outline" />
                        <span>图片加载失败</span>
                      </div>
                    </el-image>
                    <div v-else class="image-placeholder">
                      <i class="el-icon-picture-outline" />
                      <span>暂无图片</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 费用信息卡片 -->
        <div class="info-card">
          <div class="card-header">
            <i class="el-icon-money" />
            <span>备注</span>
          </div>
          <div class="card-content">
            <div class="info-row">
              <!-- <div class="info-item">
                <label>业务扣费{{ isLocals() }}</label>
                <div class="info-value amount">{{ diaLog.amount || '-' }}</div>
              </div> -->
              <div class="info-item">
                <!-- <label>备注</label> -->
                <div class="info-value">{{ diaLog.remark || '-' }}</div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="dialog-footer">
        <el-button
          type="primary"
          size="medium"
          class="close-btn"
          @click="closeTc"
        >
          <i class="el-icon-back" />
          返回
        </el-button>
      </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="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="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="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"
              width="80"
            >
              <template slot-scope="scope">
                <div>
                  <el-button
                    v-hasButtons="['regiestSee']"
                    class="button-s"
                    type="text"
                    style="color: #E70DEC;"
                    size="small"
                    @click="check(scope.row.pkId,)"
                  >
                    {{ '查看' }}
                  </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"
    />

  </div>
</template>

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

export default {
  name: 'Bzpz',
  components: {
    topBar
  },
  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.getDataList()
  },
  methods: {
    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()
          }
        }
      )
    },
    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'
          })
        }
      })
    },

    changeTime(val) {
      if (val) {
        this.select.startDate = val[0]
        this.select.endDate = val[1]
      }
    },

    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) {},
    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;
}
// 简洁的弹窗样式
.domicile-change-dialog {
  ::v-deep .el-dialog {
    border-radius: 6px;
    margin: 5vh auto !important;
    max-height: 90vh;
    overflow: hidden;

    .el-dialog__header {
      padding: 0;
      border-bottom: 1px solid #e4e7ed;
    }

    .el-dialog__body {
      padding: 0;
      height: calc(90vh - 100px);
      overflow-y: auto;
    }
  }

  .dialog-header {
    padding: 20px 24px;

    .header-content {
      display: flex;
      align-items: center;

      .header-icon {
        font-size: 18px;
        margin-right: 8px;
      }

      .header-title {
        font-size: 18px;
        font-weight: normal;
      }
    }
  }

  .dialog-content {
    padding: 20px 24px;
    background: #f9f9f9;
  }

  .info-card {
    background: white;
    border: 1px solid #dcdfe6;
    margin-bottom: 16px;

    .card-header {
      padding: 12px 16px;
      background: #f5f7fa;
      border-bottom: 1px solid #e4e7ed;
      display: flex;
      align-items: center;

      i {
        font-size: 16px;
        color: #606266;
        margin-right: 6px;
      }

      span {
        font-size: 14px;
        font-weight: 500;
        color: #303133;
      }
    }

    .card-content {
      padding: 16px;
    }
  }

  .info-row {
    display: flex;
    gap: 16px;
    margin-bottom: 16px;

    &:last-child {
      margin-bottom: 0;
    }

    &.full-width {
      flex-direction: column;
      gap: 8px;
    }
  }

  .info-item {
    flex: 1;

    label {
      display: block;
      font-size: 14px;
      color: #606266;
      margin-bottom: 6px;
    }

    .info-value {
      background: #f5f7fa;
      padding: 8px 12px;
      border: 1px solid #dcdfe6;
      font-size: 14px;
      color: #303133;
      min-height: 18px;

      &.highlight {
        background: #ecf5ff;
        color: #409eff;
        border-color: #b3d8ff;
      }

      &.description {
        min-height: 50px;
        line-height: 1.4;
        white-space: pre-wrap;
      }

      &.amount {
        background: #f0f9ff;
        color: #67c23a;
        border-color: #c2e7b0;
      }
    }
  }

  .certificate-section {
    margin-bottom: 20px;

    &:last-child {
      margin-bottom: 0;
    }

    .section-title {
      font-size: 14px;
      color: #303133;
      margin: 0 0 12px 0;
      font-weight: 500;
      padding-bottom: 6px;
      border-bottom: 1px solid #e4e7ed;
    }
  }

  .certificate-images {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
  }

  .certificate-card {
    flex: 1;
    min-width: 260px;

    .certificate-label {
      font-size: 13px;
      color: #606266;
      margin-bottom: 6px;
      text-align: center;
    }

    .image-container {
      border: 1px solid #dcdfe6;
      background: #f5f7fa;
      height: 140px;
      position: relative;
    }

    .certificate-image {
      width: 100%;
      height: 100%;
    }

    .image-placeholder,
    .image-error {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      height: 100%;
      color: #c0c4cc;

      i {
        font-size: 24px;
        margin-bottom: 6px;
      }

      span {
        font-size: 12px;
      }
    }

    .image-error {
      color: #f56c6c;

      i {
        color: #f56c6c;
      }
    }
  }

  .dialog-footer {
    padding: 16px 24px;
    background: white;
    border-top: 1px solid #e4e7ed;
    display: flex;
    justify-content: center;

    .close-btn {
      padding: 8px 20px;
      font-size: 14px;

      i {
        margin-right: 6px;
      }
    }
  }
}
::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;
}
// 旧样式已移除，新的样式在 .domicile-change-dialog 中定义
::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;
  }
}

// 响应式设计
@media (max-width: 768px) {
  .domicile-change-dialog {
    ::v-deep .el-dialog {
      width: 95% !important;
      margin: 2vh auto !important;
    }

    .dialog-header {
      padding: 16px;
    }

    .dialog-content {
      padding: 16px;
    }

    .info-row {
      flex-direction: column;
      gap: 12px;
    }

    .certificate-images {
      flex-direction: column;
    }

    .certificate-card {
      min-width: auto;
    }

    .dialog-footer {
      padding: 12px 16px;
    }
  }
}

.bttn{
  display: flex;
  align-items: center;
}
</style>
