<template>
  <div class="position-re">
    <div class="back" @click="$emit('changeOperation','',{})"><span class="fa fa-reply cur-po " >返回</span></div>
    <my-breadcrumb  :breadcrumb-arr="myBread" class="my-breadcrumb"/>
    <div class="my-detail-main">
      <div class="block">
        <div class="my-b-title">联盟用户信息</div>
        <diy-el-form :span="12" :forms="unionUserCheckDetailForm" v-model:model-form="forms">
          <template #dataConfirm="{data}">
            <div>
              <el-image
                title="点击图片查看大图"
                style="width: 100px; height: 100px"
                :src="sjqrdFileSrc"
                :zoom-rate="1.2"
                :preview-src-list="srcList"
                @load="changeSrcList"
                @error="() => {isSrcSuccess = false}"
                :initial-index="4"
                fit="cover"
              >

                <template #error>
                  <div class="image-slot">
                    <el-icon><icon-picture /></el-icon>
                  </div>
                </template>
              </el-image>
              <span v-if="isSrcSuccess">点击图片查看大图</span>
              <span v-else>暂无图片</span>
            </div>
          </template>
        </diy-el-form>
      </div>
      <div class="detail-operation-btn">
        <el-button :icon="Select" @click="saveS">提交申请</el-button>
        <el-button :icon="Close" @click="$emit('changeOperation','',{})">返回</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import MyBreadcrumb from "@/components/common/MyBreadcrumb.vue";
import {onBeforeMount, ref} from "vue";
import {firstCheckInfo, getUnionUserCheckDetail} from "@/service/system-manage/user-manaeg";
import DiyElForm from "@/components/common/DiyElForm.vue";
import {unionUserCheckDetailForm} from "@/data/all-forms";
import {Close, Select} from "@element-plus/icons-vue";
import { Picture as IconPicture } from '@element-plus/icons-vue'
import {UserInfo} from "@/unit/UserInfo";
import {handleMes} from "@/unit/element-ui/tip";
import {baseUrl} from "@/service/config";
export default {
  name: "UnionCheckDetail",
  computed: {
    Close() {
      return Close
    },
    Select() {
      return Select
    },

  },

  props:{
    operationType:{

    },
    currentOpObj:{

    }
  },
  components: {DiyElForm, MyBreadcrumb,IconPicture},
  setup(props,{emit}){
    function changeSrcList(){
      srcList.value= [sjqrdFileSrc.value]
      isSrcSuccess.value = true
    }
    const isSrcSuccess = ref(true)
    const sjqrdFileSrc = ref('')
    function saveS(){
      firstCheckInfo({
        a_userid: props.currentOpObj.USERID,
        "a_audit_id":"32",
        "a_audit_unit":"42",
        a_audit_state:forms.value.STATE,
        a_audit_advice:forms.value.ADVICE,
        appkey:new UserInfo().GetUserKeyCode()
      }).then(res => {
         handleMes(res,() => {
           emit('changeOperation','')
         })
      })
    }
    const srcList = ref([  'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg'])

    const forms = ref({})
    onBeforeMount(() => {
      getUnionUserCheckDetail(props.currentOpObj.USERID).then(res => {
        forms.value = {
          ...res.msg[0].Rows[0]
        }
        if (res.msg[0].Rows[0].FILENAME){
          sjqrdFileSrc.value = baseUrl + '/fileController/image?path=' +  res.msg[0].Rows[0].FILENAME
        }

      })
    })
    const myBread = ref([
      {value:'1',name:'联盟用户管理'},
      {value:'2',name:'联盟用户初审'},
    ])
    return {
      myBread,
      forms,
      unionUserCheckDetailForm,
      srcList,saveS,
      sjqrdFileSrc,
      isSrcSuccess,
      changeSrcList
    }
  }
}
</script>

<style scoped lang="scss">
.block{
  padding-right: 20%;
}
:deep{
  .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;
  }
}
</style>
