<script src="configData.js"></script>
<template>
  <div class="wrap">

    <div class="main">
      <div class="btn">
        <div class="title" style="margin-top: 0">{{ bigTitle }}</div>
        <div class="chunkList">
          <div class="chunk">
          </div>
          <div class="chunk">
            <el-button
              v-if="showForm"
              icon="el-icon-close"
              @click="showForm=false"
            >取消
            </el-button>
            <el-button v-if="showForm" icon="el-icon-first-aid-kit" type="primary" @click="saveHandle"
                       :loading="saveLoading"
            >保存
            </el-button>
            <el-button v-if="!showForm" icon="el-icon-first-aid-kit" type="primary" @click="showForm=true">编辑
            </el-button>
          </div>
        </div>
      </div>
      <!--      展示页-->
      <template v-if="!showForm">
        <div class="planInfo">
          <div class="img">
            <img v-if="imgUrl" :src="imgUrl" class="avatar">
            <img v-else src="./images/icon.png" alt="">
          </div>
          <div class="info">
            <div class="name">{{ this.ruleForm.mdmName }}</div>
            <div class="remark">{{ this.ruleForm.remark }}</div>
          </div>
        </div>
      </template>

      <template v-if="showForm">
        <!--      编辑页-->
        <div class="upload">
          <div class="uploadMain">
            <div class="left">
              <div class="smalltitle">主数据logo</div>
              <el-upload class="avatar-uploader" ref="upload" action="https://jsonplaceholder.typicode.com/posts/"
                         :on-preview="handlePreview" :before-upload="handleProgress"
                         list-type="picture" :limit="1" :disabled="lookFlag"
                         :show-file-list="false"
              >
                <div class="line">
                  <div class="left" v-loading="imgLoading">
                    <img v-if="imgUrl" :src="imgUrl" class="avatar">
                    <img v-else src="./images/icon.png" alt="">
                  </div>
                  <div class="right" v-if="!lookFlag">
                    <el-button size="small" type="primary" :loading="loading">点击上传</el-button>
                  </div>
                </div>
                <div slot="tip" class="el-upload__tip" v-if="!lookFlag">
                  只能上传jpg/png文件，且不超过2MB
                </div>
              </el-upload>
            </div>
            <div class="right">

            </div>
          </div>
        </div>
        <div class="form">
          <baseNewForm ref="mainForm" :spanNumber="24" :isFunBtn="false" :lookFlag="lookFlag" :formRule="!lookFlag"
                       :formRow="formRow" :ruleForm="ruleForm" @onSubmit="onSubmit"
          ></baseNewForm>
        </div>
      </template>
    </div>
    <div class="rule">
      <div class="title">数据源</div>
      <div class="line">
        <div class="name">单据规则</div>
        <template v-if="!receiptsTableData.length">
          <div class="value">尚未设置</div>
        </template>
        <template v-else>
          <div class="value">
            <div class="receiptsItem" v-for="(item,index) in receiptsTableData">{{ item.dbValue }}</div>
          </div>
        </template>
      </div>
    </div>
  </div>
</template>

<script>
import { getApiModuleApi } from '@/api/apiChunks/index.js'
import configData from './configData'
import baseNewForm from '@/views/intergrationTask/compoments/baseNewForm'
import request from '@/utils/request'
import { authApi } from '@/api/apis/auth'

export default {
  data() {
    return {
      fileList: [],
      iconBase64: '',
      imgUrl: '',
      loading: false,
      appLogo: '',
      ruleForm: {
        accessMode: []
      },
      lookFlag: false,
      formRow: configData.addForm,
      imgLoading: false,
      saveLoading: false,
      showForm: false,
      billid: '',
      receiptsTableData: [],
      bigTitle: '主数据信息',
      mdmType: 1
    }
  },
  methods: {
    // 文件上传相关时间
    handleProgress(fileList, file) {
      console.log(fileList, 'file')
      if (!fileList) return
      if (
        fileList.type.split('/')[1] != 'jpeg' &&
        fileList.type.split('/')[1] != 'png'
      ) {
        this.$message({
          type: 'warning',
          message: '只能上传jpg/png文件'
        })
        return false
      }
      if (fileList.size >= 2000000) {
        this.$message({
          type: 'warning',
          message: '文件大小不超过2MB'
        })
        return false
      }
      this.handleAvatarSuccess({}, fileList).then(res => {
      })
    },
    handlePreview(file) {
    },
    async handleAvatarSuccess(res, file) {
      this.loading = true
      this.$refs.upload.clearFiles()//清理文件上传状态
      this.imgUrl = URL.createObjectURL(file)
      let formData = new FormData()
      formData.append('file', file)
      formData.append('fileFlag', true)
      formData.append('businessType', 'application')
      return request({
        url: '/kangarooDataCenterV3/entranceController/fileUpload',
        method: 'post',
        data: formData
      }).then((res) => {
        if (res.status === '200') {
          console.log(res)
          this.$vmNews('上传成功', 'success')
          this.appLogo = res.attribute.id
          this.loading = false
        }
      })
      this.loading = false
      return true

    },
    async beforeUpload(file) {
    },
    // 保存按钮、列表验证
    saveHandle() {
      this.$refs.mainForm.submitForm()

    },
    //验证成功准备上传
    async onSubmit() {
      this.saveLoading = true
      if (!this.billid) {
        this.openLoading('submit')
        const res = await authApi('mdmModuleService', '', 'saveMdm', '', {
          updateType: 1, ...this.ruleForm, mdmLogo: this.appLogo, mdmType: this.mdmType
        })
        this.$vmNews('保存成功', 'success')
        this.saveLoading = false
        this.$emit('saveSuccessInit', res, this.initEditFormData)
        this.showForm = false
      } else {
        this.openLoading('submit')
        const res = await authApi('mdmModuleService', '', 'updateMdm', '', {
          ...this.ruleForm,
          mdmLogo: this.appLogo,
          mdmType: this.mdmType
        })
        this.$vmNews('保存成功', 'success')
        this.saveLoading = false
        this.showForm = false
        this.$emit('saveSuccess')
      }
    },
    // 获取下拉数据(作废）
    async initSelectOptions() {
      let params = {
        tab_name: 'mdm',
        column_name: 'mdm_type'
      }
      const res = await getApiModuleApi({
        tl: 'generalServiceImpl',
        as: 'dictionaryshop',
        dj: 'selectDictionaryshop'
      }, params)
      this.formRow[1].elCol[0].options = []
      res.attribute.forEach((item) => {
        this.formRow[1].elCol[0].options.push({
          label: item.column_content,
          id: item.column_value
        })
      })
      console.log(this.formRow[1].elCol[0].options)
    },
    // 复制-获取表单数据
    async initCopyFormData() {
      const res = await getApiModuleApi({
        tl: 'sysApplicationService',
        as: 'application',
        dj: 'getCopyApp'
      }, { id: this.$route.query.id })
      this.ruleForm = res.attribute
      this.ruleForm.accessMode = JSON.parse(res.attribute.accessMode)
    },
    async initEditFormData() {
      const res = await getApiModuleApi({
        tl: 'mdmModuleService',
        as: '',
        dj: 'getMdm'
      }, { id: this.billid })
      this.ruleForm = res.attribute
      if (res.attribute.mdmLogo) {
        this.appLogo = res.attribute.mdmLogo
        this.getLogoUrl()
      } else {
        // this.imgUrl = false
      }
    },
    //下载logo
    getLogoUrl() {
      this.imgLoading = true
      let id = this.appLogo ? this.appLogo : this.$route.query.appLogo
      return request({
        url: '/kangarooDataCenterV3/entranceController/fileDownloadNew?id=' + id,
        method: 'get',
        responseType: 'arraybuffer'
      }).then((res) => {
        this.imgLoading = false
        if (!res.byteLength) {
          this.imgUrl = false
          return
        }
        this.imgUrl =
          'data:image/png/jpg;base64,' + btoa(new Uint8Array(res).reduce((data, byte) => data + String.fromCharCode(byte), ''))
      })
    },
    //单据规则获取
    async getRuleHandle() {
      this.openLoading('submit')
      const res = await authApi('mdmModuleService', '', 'getMdmTableCodeRule', '', {
        mdmId: this.billid
      })
      this.receiptsTableData = res.attribute
    }

  },
  components: {
    baseNewForm
  },
  created() {
    // 请求下拉options
    // this.initSelectOptions()
    // 判断是什么类型进来的
    if (this.$route.query.id) {
      this.billid = this.$route.query.id
      this.initEditFormData()
      this.getRuleHandle()
    }
    if (this.$route.query.type) {
      this.bigTitle = '数据中心信息'
      this.mdmType = 2
    } else {
      this.bigTitle = '主数据信息'
      this.mdmType = 1
    }
  }
}
</script>

<style scoped lang="scss">
::v-deep .el-button {
  border-radius: 4px;
}

::v-deep .el-form-item {
  display: block !important;
}

.wrap {
  width: 99.5%;
  overflow: auto;
  border-radius: 8px;
  margin-left: 5px;

  .title {
    margin-bottom: 10px;
    margin-left: 32px;
    font-family: PingFangSC, PingFang SC;
    font-weight: 600;
    font-size: 18px;
    color: #333333;
    text-align: left;
    font-style: normal;
  }

  > .main {
    background-color: #fff;
    border-radius: 16px;

    > .btn {
      padding-top: 20px;
      padding-right: 10px;
      display: flex;
      justify-content: space-between;
      align-items: center;

      .chunkList {
        display: flex;

        > .chunk {
          margin-left: 10px;
        }
      }

    }

    > .planInfo {
      margin-top: 17px;
      padding-bottom: 20px;
      display: flex;
      align-items: center;

      > .img {
        margin-left: 24px;
        width: 64px;
        height: 64px;

        img {
          width: 100%;
          height: 100%;
        }

      }

      .info {
        margin-left: 11px;

        .name {
          margin-bottom: 14px;
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 18px;
          color: #333333;
          line-height: 25px;
          text-align: left;
          font-style: normal;
        }

        .remark {
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 16px;
          color: #999999;
          line-height: 25px;
          text-align: left;
          font-style: normal;
        }
      }
    }

    > .upload {
      background-color: #fff;
      border-radius: 16px;
      padding: 12px 30px 0px;

      > .title {
        font-size: 18px;
        font-weight: 600;
      }

      > .uploadMain {
        display: flex;
        align-items: center;
        justify-content: space-between;

        > .left {
          > .smalltitle {
            font-size: 18px;
            color: #999999;
            margin-bottom: 10px;
          }

          .line {
            display: flex;
            align-items: center;

            .left {
              border: 1px dashed #999999;
              width: 64px;
              height: 64px;

              > img {
                width: 100%;
                height: 100%;
              }
            }

            .right {
              margin-left: 15px;
            }
          }
        }
      }
    }

    > .form {
      overflow: auto;
      margin-top: 10px;
      background-color: #fff;
      border-radius: 16px;
      width: 100%;
      padding: 10px 20px;
    }
  }

  > .rule {
    padding: 30px 0;
    margin-top: 10px;
    background-color: #fff;
    border-radius: 16px;

    .line {
      margin-left: 32px;
      display: flex;

      .name {
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 18px;
        color: #999999;
        line-height: 25px;
        text-align: left;
        font-style: normal;
      }

      .value {
        display: flex;
        margin-left: 15px;
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 18px;
        color: #333333;
        line-height: 25px;
        text-align: left;
        font-style: normal;
      }
    }
  }
}
</style>
