<template>
  <div class="position-re">
    <small-big v-if="isPreviewDialogIsShow" v-model:is-small-img-show="isPreviewDialogIsShow" :src="baseUrl() + '/fileController/image?path='+currentImgFile[0].resUrl"/>

    <my-breadcrumb :breadcrumb-arr="myBread" class="my-breadcrumb"/>
    <div class="back" @click="$emit('changeOperation','',{})"><span class="fa fa-reply cur-po " >返回</span></div>
    <div class="my-detail-main">
      <div class="block">
        <div class="my-b-title">服务信息</div>
        <div class="form">
          <diy-el-form :span="12" v-model:model-form="forms" :forms="formConfig">
            <template #sltappend>
              <!--             :before-upload="beforeUpload.bind({-->
              <!--             gs:['png','jpg','jpeg'],-->
              <!--             tip:'请上传争取的文件格式'-->
              <!--             })"-->
              <!--             :on-success="uploadSucccess"-->
              <!--             :action="baseUrl() +'/gxyw/select_parameter_upload'"-->
              <!--             :data="{-->
              <!--             TYPE:'1'-->
              <!--             }"-->
              <el-upload
                :class="{'no-file':!(currentImgFile.length > 0)}"
                :multiple="false"
                :limit="1"
                v-model:file-list="currentImgFile"
                :before-upload="beforeUpload.bind({
             gs:['png','jpg','jpeg'],
             tip:'请上传争取的文件格式'
             })"
                :on-success="uploadSucccess"
                :action="baseUrl() +'/ptjkInterface/select_parameter_upload?appkey='+new UserInfo().GetUserKeyCode()"
                :data="{
                 TYPE:'1'
                 }"
                :headers="{
                  'Systemtype': 'ebb42096345340359741dcb9c039f15c'
                }"
                with-credentials
                ref="upload"
                :show-file-list="true"

                class="my-el-upload"

              >


                <!--                <template v-for="file in fileList" >-->
                <!--                  <span :key="file.name">{{ file.name }}</span>-->
                <!--                </template>-->
              </el-upload>
              <el-button plain class="my-preview-btn" @click="previewImg" disabled>预览</el-button>
            </template>
          </diy-el-form>
        </div>

      </div>
<!--      <div v-if="forms['SHARE_TYPE']?.includes('SHARING_TOOLKIT')" class="block">-->
<!--        <div class="my-b-title">工具包信息</div>-->
<!--        <div class="form">-->
<!--          <diy-el-form :span="12" v-model:model-form="forms" :forms="interfaceOrderDetailFormTool">-->
<!--            <template #sltappend>-->
<!--              &lt;!&ndash;             :before-upload="beforeUpload.bind({&ndash;&gt;-->
<!--              &lt;!&ndash;             gs:['png','jpg','jpeg'],&ndash;&gt;-->
<!--              &lt;!&ndash;             tip:'请上传争取的文件格式'&ndash;&gt;-->
<!--              &lt;!&ndash;             })"&ndash;&gt;-->
<!--              &lt;!&ndash;             :on-success="uploadSucccess"&ndash;&gt;-->
<!--              &lt;!&ndash;             :action="baseUrl() +'/gxyw/select_parameter_upload'"&ndash;&gt;-->
<!--              &lt;!&ndash;             :data="{&ndash;&gt;-->
<!--              &lt;!&ndash;             TYPE:'1'&ndash;&gt;-->
<!--              &lt;!&ndash;             }"&ndash;&gt;-->
<!--              <el-upload-->
<!--                :on-success="uploadSucccessTool"-->
<!--                :multiple="false"-->
<!--                :limit="1"-->
<!--                v-model:file-list="toolFire"-->
<!--                ref="upload"-->
<!--                :show-file-list="true"-->
<!--                :action="baseUrl() +'/gxyw/select_parameter_upload'"-->
<!--                :data="{-->
<!--             TYPE:'1'-->
<!--             }"-->

<!--                class="my-el-upload"-->
<!--              >-->
<!--                <el-button class="upload-btn" size="small" type="primary" disabled></el-button>-->
<!--                &lt;!&ndash;                <template v-for="file in fileList" >&ndash;&gt;-->
<!--                &lt;!&ndash;                  <span :key="file.name">{{ file.name }}</span>&ndash;&gt;-->
<!--                &lt;!&ndash;                </template>&ndash;&gt;-->
<!--              </el-upload>-->

<!--            </template>-->
<!--          </diy-el-form>-->
<!--        </div>-->

<!--      </div>-->
      <div class="block">
        <div class="my-b-title">接口信息</div>
        <div class="form">
          <diy-el-form :span="12" v-model:model-form="forms" :forms="interfaceOrderDetailFormInterface">

          </diy-el-form>
        </div>

      </div>
<!--      <template>-->
<!--        -->
<!--        <div class="block">-->

<!--          <div class="my-b-title">入参信息</div>-->
<!--          <div class="my-search-div-and-input"><el-input  placeholder="搜索" v-model="rcKeyWord" class="search"/></div>-->
<!--          <my-table-->
<!--            :filter-meothod="row => row.PARAM_NAME?.includes(rcKeyWord)"-->
<!--            border-->
<!--            :table-data="rcTableData"-->
<!--            :headers="interfaceOrderDetailTableHeaderRc"-->
<!--            :is-height-equal-max-height="true"-->
<!--            :page-size="6"-->
<!--          >-->
<!--            <template #[item.prop]="{data}" v-for="item in interfaceOrderDetailTableHeaderRc.filter(i => i.prop!=='operation')">-->
<!--              <template v-if="data.isEdit && operationType!=='detail'">-->

<!--                <el-select v-if="item.prop === 'PARAM_TYPE'"  v-model="data[item.prop]">-->
<!--                  <el-option value="" label="请选择"></el-option>-->
<!--                  <el-option value="1" label="字符型"></el-option>-->
<!--                  <el-option value="2" label="数值型"></el-option>-->
<!--                  <el-option value="3" label="日期型"></el-option>-->
<!--                  <el-option value="4" label="日期时间型"></el-option>-->
<!--                  <el-option value="6" label="逻辑型"></el-option>-->
<!--                  <el-option value="9" label="双精度型"></el-option>-->
<!--                  <el-option value="10" label="整型"></el-option>-->
<!--                  <el-option value="11" label="浮点型"></el-option>-->
<!--                </el-select>-->

<!--                <el-input v-else v-model="data[item.prop]"/>-->
<!--              </template>-->
<!--              <span v-else-if="item.prop === 'PARAM_TYPE'">{{getDataType(data[item.prop]) || ''}}</span>-->
<!--              <span v-else>{{data[item.prop]}}</span>-->
<!--            </template>-->

<!--          </my-table>-->
<!--          <div class="m-s">显示第 1 到第 {{rcTableData.length}} 条记录，总共 {{rcTableData.length}} 条记录</div>-->
<!--        </div>-->
<!--        <div class="block">-->
<!--          <div class="my-b-title">出参信息</div>-->
<!--          <div class="my-search-div-and-input"><el-input  placeholder="搜索" v-model="ccKeyWord" class="search"/></div>-->
<!--          <my-table-->
<!--            border-->
<!--            :filter-meothod="row => row.PARAM_NAME?.includes(ccKeyWord)"-->
<!--            :table-data="ccTableData"-->
<!--            :headers="interfaceOrderDetailTableHeaderCc"-->
<!--            :is-height-equal-max-height="true"-->
<!--            :page-size="6"-->
<!--          >-->
<!--            <template #[item.prop]="{data}" v-for="item in interfaceOrderDetailTableHeaderCc.filter(i => i.prop!=='operation')">-->
<!--              <template v-if="data.isEdit && operationType!=='detail'">-->

<!--                <el-select v-if="item.prop === 'PARAM_TYPE'"  v-model="data[item.prop]">-->
<!--                  <el-option value="" label="请选择"></el-option>-->
<!--                  <el-option value="1" label="字符型"></el-option>-->
<!--                  <el-option value="2" label="数值型"></el-option>-->
<!--                  <el-option value="3" label="日期型"></el-option>-->
<!--                  <el-option value="4" label="日期时间型"></el-option>-->
<!--                  <el-option value="6" label="逻辑型"></el-option>-->
<!--                  <el-option value="9" label="双精度型"></el-option>-->
<!--                  <el-option value="10" label="整型"></el-option>-->
<!--                  <el-option value="11" label="浮点型"></el-option>-->
<!--                </el-select>-->

<!--                <el-input v-else v-model="data[item.prop]"/>-->
<!--              </template>-->
<!--              <span v-else-if="item.prop === 'PARAM_TYPE'">{{getDataType(data[item.prop]) || ''}}</span>-->
<!--              <span v-else>{{data[item.prop]}}</span>-->
<!--            </template>-->
<!--          </my-table>-->
<!--          <div class="m-s">显示第 1 到第 {{ccTableData.length}} 条记录，总共 {{ccTableData.length}} 条记录</div>-->
<!--        </div>-->
<!--      </template>-->

      <div class="block">
        <div class="my-b-title">申请信息</div>
        <div class="form">
          <diy-el-form :span="12" v-model:model-form="forms" :forms="interfaceOrderDetailFormApply">
            <template #sltappend>
              <!--             :before-upload="beforeUpload.bind({-->
              <!--             gs:['png','jpg','jpeg'],-->
              <!--             tip:'请上传争取的文件格式'-->
              <!--             })"-->
              <!--             :on-success="uploadSucccess"-->
              <!--             :action="baseUrl() +'/gxyw/select_parameter_upload'"-->
              <!--             :data="{-->
              <!--             TYPE:'1'-->
              <!--             }"-->
              <el-upload
                :limit="1"

                ref="upload"
                :show-file-list="false"

                class="my-el-upload"
              >
                <el-button class="upload-btn" size="small" type="primary">{{currentImgFile.name}}</el-button>
                <!--                <template v-for="file in fileList" >-->
                <!--                  <span :key="file.name">{{ file.name }}</span>-->
                <!--                </template>-->
              </el-upload>
              <el-button plain class="my-preview-btn" @click="previewImg">预览</el-button>
            </template>
          </diy-el-form>
        </div>

      </div>
      <div class="block" v-if="operationType === 'check' ||  (+currentOpObj.AUDIT_STATE === 2 ||+currentOpObj.AUDIT_STATE === 3 )">
        <div class="my-b-title">审核信息</div>
        <diy-el-form v-model:model-form="forms" :forms="checkForm"/>
      </div>
      <div class="detail-operation-btn" v-if="operationType === 'check' ">
        <el-button @click="checkInfoData('2')">审核通过</el-button>
        <el-button @click="checkInfoData('3')">审核不通过</el-button>
        <el-button @click="$emit('changeOperation','')">返回</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import MyBreadcrumb from "@/components/common/MyBreadcrumb.vue";
import {onBeforeMount, ref} from "vue";
import DiyElForm from "@/components/common/DiyElForm.vue";
import {
  interfaceOrderDetailFormApply, interfaceOrderDetailFormCheck,
  interfaceOrderDetailFormInterface,
  interfaceOrderDetailFormService,
  interfaceOrderDetailFormTool
} from "@/data/all-forms";
import MyTable from "@/components/common/MyTable.vue";
import {interfaceOrderDetailTableHeaderCc, interfaceOrderDetailTableHeaderRc} from "@/data/all-table-header";
import {formatDateFun} from "@/unit/time";
import {
  checkInterOrderInfo,
  getInterFaceOrderApplyAndCheckInfo,
  getInterFaceOrderInterfaceDInfo
} from "@/service/system-manage/interface-order";
import {getInterfaceParamsInfo, getToolTypeOptions} from "@/service/system-manage/interface-manage";
import {baseUrl} from "@/service/config";
import {elAlert, handleMes, showMessage} from "@/unit/element-ui/tip";
import SmallBig from "@/components/SmallBig.vue";
import {useRootStore} from "@/stores/useStore";
import {decode, encode} from "js-base64";
import {UserInfo} from "@/unit/UserInfo";

export default {
  name: "InterfaceOrderDetail",
  methods: {
    UserInfo,
    baseUrl() {
      return import.meta.env.VITE_BASE_API
    }
  },
  components: {SmallBig, MyTable, DiyElForm, MyBreadcrumb},
  props:{
    currentOpObj:{

    },
    operationType:{

    }
  },
  setup(props,{emit}) {
    const checkForm =  ref({...interfaceOrderDetailFormCheck()})
    const isPreviewDialogIsShow = ref(false)
    const store = useRootStore()
    function checkInfoData(state){
      checkInterOrderInfo({
        AUDIT_STATE:state,
        UUID:props.currentOpObj.APPLY_UUID,
        AUDIT_USER:store.userInfo.ptjk_usercode,
        AUDIT_UNIT:store.userInfo.ptjk_unitcode,
        AUDIT_OPINION:forms.value.AUDIT_OPINION,
        AUDIT_TIME:formatDateFun(+new Date(),'yyyy-MM-dd hh:mm:ss')
      }).then(res => {
        handleMes(res,() => {
          emit('changeOperation','')
        })
      })
    }
    function getDataType(num){
      let obj = {
        1:'字符型',
        2:'数值型',
        3:'日期型',
        4:'日期时间型',
        6:'逻辑型',
        9:'双精度型',
        10:'整形',
        11:'浮点型',
      }
      return obj[num]
    }
    const formConfig = ref({...interfaceOrderDetailFormService()})
    const toolFire =  ref([])
    const forms = ref({

    })
    function previewImg(value) {
      if (!(currentImgFile.value.length > 0)){
        elAlert('请先上传文件')
      }else {
        isPreviewDialogIsShow.value = true
      }

    }
    function beforeUpload(file) {
      let neeReg = new RegExp(`\.(${this.gs.join('|')})$`)
      console.log(neeReg)
      if (!neeReg.test(file.name)){
        showMessage({
          type:'error',
          message:this.tip
        })
        return false
      }
      console.log(this,file,'beforeUpload')
      return true

    }
    function uploadSucccessTool(res,file) {

      console.log(res,file,'file')
      if (res.msg[0].success){
        toolFire.value = [].concat({
          ...file,
          resUrl:res.msg[0].error
        })
        // currentImgFile.value.resUrl = res.msg[0].error
        showMessage({
          type:'success',
          message:'上传成功'
        })
      }else {
        showMessage({
          type:'success',
          message:'上传失败'
        })
      }
    }
    function uploadSucccess(res,file) {

      console.log(res,file,'file')
      if (res.msg[0].success){
        currentImgFile.value = [].concat({
          ...file,
          resUrl:res.msg[0].error
        })
        // currentImgFile.value.resUrl = res.msg[0].error
        showMessage({
          type:'success',
          message:'上传成功'
        })
      }else {
        showMessage({
          type:'success',
          message:'上传失败'
        })
      }
    }
    onBeforeMount(() => {
      const isFindCheckRes = checkForm.value.formItemsArr.find(i => i.modelValue === 'AUDIT_STATE')
      const isFindCheckTime = checkForm.value.formItemsArr.find(i => i.modelValue === 'AUDIT_TIME')
      isFindCheckRes.isHide = isFindCheckTime.isHide = props.operationType !== 'detail'
      getToolTypeOptions().then(res => {
        const findToolType = formConfig.value.formItemsArr.find(i => i.modelValue === 'TYPE')
        findToolType.options = [{value:'',label:'请选择'}].concat(res.msg[0].Rows.map(i => {
          return {
            label:i.NAME,
            value:i.CODE,
          }
        }))
      })
      if (props.operationType !=='add'){
        const shareT = []
        getInterFaceOrderInterfaceDInfo(props.currentOpObj.UUID).then(res => {
          if (res.msg[0].Rows[0].SHARING_INTERFACE === '2'){
            shareT.push('SHARING_INTERFACE')
          }
          if (res.msg[0].Rows[0].SHARING_TOOLKIT === '2'){
            shareT.push('SHARING_TOOLKIT')
          }
          if (res.msg[0].Rows[0].RESOURCE_THUMBNAIL){
            currentImgFile.value = [].concat( {
              name:res.msg[0].Rows[0].RESOURCE_THUMBNAIL.slice(res.msg[0].Rows[0].RESOURCE_THUMBNAIL.lastIndexOf('/') + 1),
              resUrl:res.msg[0].Rows[0].RESOURCE_THUMBNAIL,
            })

          }
          if (res.msg[0].Rows[0].TOOLKIT_FILES){
            toolFire.value = [].concat( {
              name:res.msg[0].Rows[0].TOOLKIT_FILES.slice(res.msg[0].Rows[0].TOOLKIT_FILES.lastIndexOf('/') + 1),
              resUrl:res.msg[0].Rows[0].TOOLKIT_FILES,
            })

          }

          forms.value = {
            ...forms.value,
            ...res.msg[0].Rows[0],
            SHARE_TYPE:shareT,
            RELEASE_TIME:res.msg[0].Rows[0].RELEASE_TIME?formatDateFun(+new Date(res.msg[0].Rows[0].RELEASE_TIME),'yyyy-MM-dd hh:mm:ss'):''
          }
        })
        getInterFaceOrderApplyAndCheckInfo(props.currentOpObj.APPLY_UUID).then(res => {
          forms.value = {
            ...forms.value,
            ...res.msg[0].Rows[0],
            IN_PARAMETER:forms.value.IN_PARAMETER?decode(forms.value.IN_PARAMETER):'',
            OUT_PARAMETER:forms.value.OUT_PARAMETER?decode(forms.value.OUT_PARAMETER):'',
          }
        })
        getInterfaceParamsInfo(props.currentOpObj.UUID).then(res => {
          rcTableData.value = res.msg[0].Rows.filter(i => +i.TYPE === 1)
          ccTableData.value = res.msg[0].Rows.filter(i => +i.TYPE === 2)
        })
      }
    })
    const rcKeyWord = ref('')
    const ccKeyWord = ref('')
    const rcTableData = ref([])
    const ccTableData = ref([])
    const currentImgFile = ref([])
    const myBread = [
      {name:'接口订单'},
      {name:'审核'},
    ]
    return {
      myBread,
      forms,
      interfaceOrderDetailFormService,
      interfaceOrderDetailFormTool,
      currentImgFile,
      interfaceOrderDetailFormInterface,
      rcKeyWord,
      ccKeyWord,
      rcTableData,
      ccTableData,
      interfaceOrderDetailTableHeaderRc,
      interfaceOrderDetailTableHeaderCc,
      interfaceOrderDetailFormApply,interfaceOrderDetailFormCheck,
      formConfig,
      uploadSucccessTool,
      toolFire,
      uploadSucccess,
      beforeUpload,
      getDataType,
      previewImg,
      isPreviewDialogIsShow,
      checkInfoData,
      checkForm


    }
  }
}
</script>

<style scoped lang="scss">
.form{
  padding-right: 15%;
}
.my-el-upload{
  &.no-file{
    :deep{
      .el-upload-list{
        display: none;
      }
    }
  }
  :deep{
    .el-upload--text{
      display: block !important;
    }
  }
  height: unset;
}
.my-el-upload{

  :deep{
    .el-upload-list{
      margin-top: 8px;
      max-width: 25em;
      position: absolute;
      transform: translateY(-100%);
    }

  }
}
</style>
