<template>
  <div class="dialog" v-if="dialogForm">
    <div class="head_box">
      <span class="title">重点人员深度发掘详情</span>
      <div>
        <el-button size="small" @click="close">关闭</el-button>
      </div>
    </div>
    <div class="flex just-between">

      <div :class="listQuery.gzlid ? 'ww79' : 'ww100'">
        <div class="" style="overflow: auto;height: 100%;color: #000;">
          <el-card shadow="never" style="border: none;">
            <template #header>
              <h3 class="card-header">
                基础信息
              </h3>
            </template>
            <div class="flex  flex-warp just-between">
              <div class="flex flex-1" v-for="(item, index) in basicInformation" :key="index">
                <div class="lable">{{ item.label }}：</div>
                <div v-if="item.showSolt">
                  <DictTag :tag="false" :value="listQuery[item.key]" color="#000" :options="item.options" />
                </div>
                <div v-else>
                  {{ listQuery[item.key] }}
                </div>
              </div>
            </div>
          </el-card>
          <el-card shadow="never" style="border: none;">
            <template #header>
              <h3 class="card-header">
                附件
              </h3>
            </template>
            <div class="grid-container">
              <div class="grid-item" :key="index">
                <el-image :src="setAddress(listQuery.ryFjZp)" :zoom-rate="1.2" :max-scale="7" :min-scale="0.2"
                  :preview-src-list="[listQuery.ryFjZp]" show-progress :initial-index="4" fit="cover">
                  <template #error>
                    <div class="image-slot">
                      <el-icon><icon-picture /></el-icon>
                    </div>
                  </template>
                </el-image>
              </div>
            </div>
          </el-card>
        </div>
      </div>
      <div class="ww20" v-if="listQuery.gzlid">
        <ApprovalEcho ref="approvalEcho" />
      </div>
    </div>

  </div>
</template>

<script setup>
import { qcckGet } from '@/api/qcckApi'
import { ref, defineExpose, watch,getCurrentInstance  } from "vue";
import ApprovalEcho from "@/components/flowPath/ApprovalEcho.vue";
import { Picture as IconPicture } from '@element-plus/icons-vue'
import { setAddress } from '@/utils/tools'
const { proxy } = getCurrentInstance();
const {  D_GS_RQFJ_FXDJ, D_GS_RQFJ_FXLB } =
  proxy.$dict(
    "D_BZ_RCSHZT",
    "D_GS_RQFJ_LX",
    "D_GS_RQFJ_FXDJ",
    "D_BZ_SF",
    "D_GS_RQFJ_FXLB"
  );
const dialogForm = ref(false); //弹窗
const approvalEcho=ref()
const listQuery = ref({})
// 基础信息
const basicInformation = ref(
  [
    {
      label: '姓名',
      key: 'ryXm',
    },
    {
      label: '电话',
      key: 'rySjhm'
    },
    {
      label: '身份证号',
      key: 'rySfzh'
    },
    {
      label: '户籍地址',
      key: 'ryHjdz',
    },

    {
      label: '护照号码',
      key: 'ryHzhm',
    },
    {
      label: '现住地址',
      key: 'ryXzdz',
    },
    {
      label: '管辖单位',
      key: 'gxDwMc',

    }, {
      label: '责任部门',
      key: 'ssbm',
    },
    {
      label: '标签',
      key: 'bqList',
    },
    {
      label: '风险积分',
      key: 'fxjf',
    }, {
      label: '风险等级',
      key: 'fxDj',
      showSolt: true,
      options: D_GS_RQFJ_FXDJ
    }, {
      label: '风险类别',
      key: 'fxLb',
      showSolt: true,
      options: D_GS_RQFJ_FXLB
    }
  ]
)
// 初始化数据
const init = (row) => {
  dialogForm.value = true
  qcckGet({}, '/mosty-gsxt/tbGsxtRqfjRy/' + row.id).then(res => {
    listQuery.value = res
  })
};

watch(() => approvalEcho.value, (val) => {
  if (val) {
    approvalEcho.value.getWorkflow(listQuery.value.gzlid)
  }
}, { deep: true })

// 关闭
const close = () => {
  dialogForm.value = false;
};
defineExpose({ init });
</script>

<style lang="scss" scoped>
@import "~@/assets/css/layout.scss";
@import "~@/assets/css/element-plus.scss";




.dialog {
  ::v-deep .el-form-item--default {
    margin: 0 1% 0 0 !important;
    padding-bottom: 0 !important;
  }
}

::v-deep .el-card {
  background-color: #fff;
  color: #000;
}



.nodeBox {
  width: 80%;
  text-align: center;
  line-height: 30px;
  border-radius: 10px;
  overflow: hidden;
  background-color: aliceblue;

  .nodeorgNameTg {
    background-color: #1abe20;
  }

  .nameTag {
    line-height: 30px;
    padding: 0 10px;
  }

  .nodeorgNameDd {
    background-color: #18a2dd;
  }

  .fontColor {
    color: #1abe20;
  }

  .fontColorDd {
    color: #18a2dd;
  }
}
.card-header {
  font-size: 18px;
  color: #303133;
  font-weight: 600;
  margin: 0;
}

::v-deep .el-card {
  border: none !important;
}

.flex-1 {
  width: 48%;
  font-family: verdana;
  font-size: 14px;
  margin-bottom: 20px;

  .lable {
    font-size: 14px;
    width: 13%;
    font-weight: 700;
  }
}

.el-image {
  padding: 0 5px;
  max-width: 300px;
  max-height: 200px;
  width: 100%;
  height: 200px;
}

.image-slot {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  background: var(--el-fill-color-light);
  color: var(--el-text-color-secondary);
  font-size: 30px;
  border: 1px solid silver;
  border-radius: 5px;
}

.grid-container {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  /* 5等分列 */
  gap: 0px;
  width: 100%;
  box-sizing: border-box;
}

.grid-item {
  width: 290px;
  display: flex;
  align-items: center;
  justify-content: center;

  img {
    width: 100%;
  }
}
</style>
