<template>
  <div class="wrapper">
    <div>
      <el-form
        :model="dataForm"
        ref="dataForm"
        @keyup.enter.native="dataFormSubmitHandle()"
        :label-width="$i18n.locale === 'en-US' ? '120px' : 'auto'"
      >
        <div v-if="shifoushizujian">
          <el-form-item label="应用名称">
            <el-input
              v-model="dataForm.name"
              :disabled="fieldDisabled"
              placeholder="应用名称"
            ></el-input>
          </el-form-item>
          <el-form-item label="应用描述">
            <el-tooltip
              effect="dark"
              :content="dataForm.description"
              placement="top"
              popper-class="kuandukuandukuandu"
            >
              <el-input
                v-model="dataForm.description"
                :disabled="fieldDisabled"
                placeholder="应用描述"
              ></el-input>
            </el-tooltip>
          </el-form-item>
          <el-form-item label="部门联系人">
            <el-input
              v-model="dataForm.deptContacts"
              :disabled="fieldDisabled"
              placeholder="部门联系人"
            ></el-input>
          </el-form-item>
          <el-form-item label="共享类型">
            <el-input
              v-model="dataForm.shareType"
              :disabled="fieldDisabled"
              placeholder="共享类型"
            ></el-input>
          </el-form-item>
          <el-form-item label="共享方式">
            <el-input
              v-model="dataForm.shareMode"
              :disabled="fieldDisabled"
              placeholder="共享方式"
            ></el-input>
          </el-form-item>
          <el-form-item label="共享条件">
            <el-input
              v-model="dataForm.shareCondition"
              :disabled="fieldDisabled"
              placeholder="共享方条件"
            ></el-input>
          </el-form-item>
          <el-form-item label="访问地址">
            <el-input
              v-model="dataForm.link"
              :disabled="fieldDisabled"
              placeholder="访问地址"
            ></el-input>
          </el-form-item>
        </div>
        <div v-if="!shifoushizujian">
          <el-form-item label="组件名称" v-if="algorithmShow">
            <el-input
              v-model="dataForm.name"
              :disabled="fieldDisabled"
              placeholder="组件名称"
            ></el-input>
          </el-form-item>
          <el-form-item label="算法名称" v-if="nameNotShow">
            <el-input
              v-model="dataForm.name"
              :disabled="fieldDisabled"
              placeholder="算法名称"
            ></el-input>
          </el-form-item>
          <el-form-item label="应用描述" v-if="algorithmShow">
            <el-input
              v-model="dataForm.description"
              :disabled="fieldDisabled"
              placeholder="应用描述"
            ></el-input>
          </el-form-item>
          <el-form-item label="算法描述" v-if="nameNotShow">
            <el-input
              v-model="dataForm.description"
              :disabled="fieldDisabled"
              placeholder="算法描述"
            ></el-input>
          </el-form-item>
          <el-form-item label="部门联系人" v-if="algorithmShow">
            <el-input
              v-model="dataForm.deptContacts"
              :disabled="fieldDisabled"
              placeholder="部门联系人"
            ></el-input>
          </el-form-item>
          <el-form-item label="共享类型">
            <el-input
              v-model="dataForm.shareType"
              :disabled="fieldDisabled"
              placeholder="共享类型"
            ></el-input>
          </el-form-item>
          <el-form-item
            label="共享方式"
            v-if="coverageNotShow && algorithmShow"
          >
            <el-input
              v-model="dataForm.shareMode"
              :disabled="fieldDisabled"
              placeholder="共享方式"
            ></el-input>
          </el-form-item>
          <el-form-item label="共享条件">
            <el-input
              v-model="dataForm.shareCondition"
              :disabled="fieldDisabled"
              placeholder="共享方条件"
            ></el-input>
          </el-form-item>
          <el-form-item label="服务接口" v-if="coverageNotShow">
            <el-input
              v-model="dataForm.apiUrl"
              :disabled="fieldDisabled"
              placeholder="服务接口"
            ></el-input>
          </el-form-item>
          <el-form-item label="接口请求方式" v-if="coverageNotShow">
            <el-input
              v-model="dataForm.apiMethodType"
              :disabled="fieldDisabled"
              placeholder="接口请求方式"
            ></el-input>
          </el-form-item>
        </div>
        <el-form-item
          v-for="item in dataForm.infoList"
          :key="item.index"
          :label="item.attrType"
          :disabled="fieldDisabled"
        >
          <el-input
            v-model="item.attrValue"
            :placeholder="item.attrType"
            :disabled="fieldDisabled"
          ></el-input>
        </el-form-item>
        <el-form-item
          v-if="dataForm.enclosure"
          label="申请附件"
          prop="enclosure"
        >
          <el-button @click="downloadFile(dataForm.enclosure, '申请附件')"
            >附件下载</el-button
          >
        </el-form-item>
      </el-form>
    </div>
    <!--  流程综合组件   -->
    <ren-process-multiple
      v-if="processVisible"
      updateInstanceIdUrl="/processForm/tabilityapplication/updateInstanceId"
      saveFormUrl="/processForm/tabilityapplication"
      dataFormName="dataForm"
      ref="renProcessMultiple"
    ></ren-process-multiple>
  </div>
</template>

<script>
import processModule from '@/mixins/process-module'
export default {
  // 注入公共方法
  mixins: [processModule],
  components: {},
  props: {
    // fromList: {
    //   // type: Array,
    //   // default: () => {
    //   //   return []
    //   // }
    // }
  },
  data () {
    return {
      // processVisible: true,
      visible: false,
      // 表单属性是否可编辑
      fieldDisabled: false,
      dataForm: [],
      id: '',
      shifoushizujian: true,
      coverageNotShow: true,
      nameNotShow: false,
      algorithmShow: true
    }
  },
  watch: {},
  computed: {},
  methods: {
    init () {
      this.visible = true
      // this.getInfo(this.$router.currentRoute.params.params.params.resourceDTO.id)
      // this.dataForm = this.$router.currentRoute.params.params.params.resourceDTO
      // this.id=this.$router.currentRoute
      this.$nextTick(() => {
        this.$refs.dataForm.resetFields()
        // if (this.dataForm.id) {
        // 如业务KEY已存在，不允许编辑
        this.fieldDisabled = true
        // this.id = this.$router.currentRoute.businessKey
        this.getInfo(this.$router.currentRoute.params.businessKey)
        console.log('id', this.$router.currentRoute.params.businessKey)
        // }
      })
    },
    getInfo (id) {
      this.$http.get('/resourceMountApply/' + id).then(({ data: res }) => {
        if (res.code !== 0) {
          return this.$message.error(res.msg)
        }
        this.dataForm = res.data.resourceDTO
        if (this.dataForm.type != '应用资源') {
          this.shifoushizujian = false
          this.dataForm.infoList.forEach((val) => {
            if (val.attrValue === '图层服务') {
              this.coverageNotShow = false
            } else if (val.attrValue === '智能算法') {
              this.nameNotShow = true
              this.algorithmShow = false
              console.log(this.nameNotShow, 'wowowo')
            }
          })
        } else {
          this.shifoushizujian = true
        }
        console.log('this.dataForm', this.dataForm)
      })
    }
  },
  created () {
    // this.dataForm = this.$router.currentRoute.params.id
    this.init()
    console.log('fromList', this.$router.currentRoute.params.businessKey)
    // this.dataForm = this.$router.currentRoute.params.params.params.resourceDTO
    var callbacks = {
      startProcessSuccessCallback: this.closeCurrentTab,
      startProcessErrorCallback: this.startProcessErrorCallback,
      taskHandleSuccessCallback: this.closeCurrentTab,
      taskHandleErrorCallback: this.taskHandleErrorCallback,
      formSaveSuccessCallback: null,
      formSaveErrorCallback: null
    }
    // 初始化综合组件
    this.initProcessMultiple(callbacks)
  },
  mounted () {}
}
</script>
<style lang="scss">
.kuandukuandukuandu {
  max-width: 1500px;
}
.wrapper {
}
</style>
