<template>
  <div class="bidding-sign-up">
    <div class="inner-form">
      <el-form ref="form" :model="form" label-width="80px">
          <el-form-item label="项目编号">
            <el-input v-model="form.noticeCode" readonly></el-input>
          </el-form-item>
          <el-form-item label="项目名称">
            <el-input v-model="form.noticeTitle" readonly></el-input>
          </el-form-item>
      </el-form>
      <h1 class="zz-title">资质要求</h1>
      <div
        v-for="item in qualificationsList"
        :key="item.id"
        class="qualification"
      >
        <span class="qualification-title"
          >{{ item.qualificationTypeName }}:</span
        >
        <el-row :gutter="24">
          <el-form ref="form" :model="form" label-width="80px">
            <el-table
              class="down"
              :data="item.qualificationsList"
              border
              stripe
              style="width: 100%; margin-top: 10px; margin-bottom: 20px"
            >
              <el-table-column prop="qualificationCode" label="资质编码">
                <template slot-scope="scope">
                  <el-input
                    :disabled="currentNode != 1"
                    v-model="scope.row.qualificationCode"
                    placeholder="请输入资质编码"
                  ></el-input>
                </template>
              </el-table-column>
              <el-table-column prop="qualificationName" label="资质名称">
                <template slot-scope="scope">
                  <el-input
                    v-model="scope.row.qualificationName"
                    placeholder="请输入资质名称"
                    :disabled="currentNode != 1"
                  ></el-input>
                </template>
              </el-table-column>
              <el-table-column
                prop="qualificationAcquisitionDate"
                label="取得日期"
              >
                <template slot-scope="scope">
                  <el-date-picker
                    :disabled="currentNode != 1"
                    v-model="scope.row.qualificationAcquisitionDate"
                    type="date"
                    placeholder="请选择取得日期"
                    style="width: 100%"
                    clearable
                    value-format="yyyy-MM-dd"
                  ></el-date-picker>
                </template>
              </el-table-column>
              <el-table-column prop="expiryDate" label="到期日期">
                <template slot-scope="scope">
                  <el-date-picker
                    style="width: 100%"
                    :disabled="currentNode != 1"
                    v-model="scope.row.expiryDate"
                    type="date"
                    placeholder="请选择到期日期"
                    clearable
                    value-format="yyyy-MM-dd"
                  ></el-date-picker>
                </template>
              </el-table-column>
            </el-table>
          </el-form>
        </el-row>
        <Upload
          multiple
          v-if="currentNode == 1"
          :isUploadList="true"
          @upload="(fileList) => upload(item, fileList)"
          :imgUrl="item.fileList"
        ></Upload>
        <Upload
          multiple
          v-if="currentNode == 2"
          :isUploadList="true"
          :disabled="disabled"
          @upload="(fileList) => upload(item, fileList)"
          :imgUrl="item.accessoryList"
        ></Upload>
      </div>
    </div>
  </div>
</template>
  <script>
import {helper} from '../../../public/hotent.helper.js'
import req from '@/request.js'
import utils from '@/hotent-ui-util.js'
import Upload from '@/components/upload/Upload.vue'
export default {
  name: 'bidding-sign-up', // 竞拍报名
  components: {
    Upload,
  },
  data() {
    return {
      currentNode: 1,
      tempMethodName: '',
      params: {},
      form: {
        hasQualifications: 1,
        qualificationsList: [],
      },
      data: {},
      qualificationsList: [],
      uploadList: [],
      saveFlag: true,
      disabled: false,
      qualificationLabelList: [],
      currentUser: {},
    }
  },
  mounted() {
    this.currentNode = this.$route.query.node
    window.saveData = this.saveData
    if (this.currentNode == 2) {
      this.disabled = true
    }
    window.relationData = this.relationData
    this.id = utils.getUrlKey('id')
    this.node = utils.getUrlKey('node')
    console.log(this.id, this.node, 'this.node')
    console.log(this.form, 'this.from')
    if (this.id) {
      req
        .post(
          window.context.portal +
            '/userParticipation/v1/getDataById?id=' +
            this.id
        )
        .then((res) => {
          console.log(res, 2222222222)
          if (res.data.value) {
            this.form = res.data.value
            this.form.id = this.form.noticeId
            res.data.value.qualificationLabelList.forEach(item=>{
                if(item.accessoryList&&item.accessoryList.length){
                    item.accessoryList.forEach(val=>{
                        if(val.id){
                            delete val.id
                        }
                    })
                }
            })
            this.qualificationsList = res.data.value.qualificationLabelList
            this.qualificationsList.forEach((item) => {
              item.fileList = []
              item.fileList = item.accessoryList
              item.qualificationsList = []
              item.qualificationsList.push(item)
            })
            // this.formatEditData()
            console.log(this.qualificationsList);
            console.log(this.form, 'this.form ')
          }
        })
    }
  },
  methods: {
    formatEditData() {
      let filesListTemp = utils.deepClone(this.form.accessoryList)
      this.qualificationsList = utils.deepClone(
        this.form.matApprovalQualificationList
      )
      this.qualificationsList.forEach((item) => (item.fileList = []))
      setTimeout(() => {
        this.form.qualificationsList.forEach((qualificate) => {
          let fileList = []
          filesListTemp.forEach((file) => {
            if (qualificate.id == file.group) {
              fileList.push(file)
            }
          })
          qualificate.fileList = fileList
        })
        this.qualificationsList = utils.deepClone(this.form.qualificationsList)
      }, 1000)
    },

    upload(item, fileList) {
      let arr = []
      fileList.forEach((e) => {
        if (e.response.state) {
          arr.push(e.response.value)
        }
      })
      item.fileList = arr
    },

    formatData() {
      console.log(this.qualificationsList)
      this.uploadList = []
      this.qualificationLabelList = []
      this.qualificationsList.forEach((item) => {
        if (item.fileList && item.fileList.length) {
          item.accessoryList = item.fileList
          item.fileList.forEach((file) => {
            file.group = item.qualificationTypeCode
            delete item.id
            this.uploadList.push(file)
          })
        }

        if (item.qualificationsList && item.qualificationsList.length) {
          item.qualificationsList.forEach((val) => {
            let obj = {}
            obj = {...item, ...val}
            this.qualificationLabelList.push(obj)
          })
        }
      })
      console.log(this.uploadList, 'this.uploadList')
    },
    /* 保存 */
    saveData() {
      this.formatData()
      if (this.uploadList.length == 0 && this.currentNode == 1) {
        this.$message.warning('资质要求未上传,请上传相关资质文件!')
        return fasle
      }
      console.log(this.uploadList, '图片总数')
      //   if (this.currentNode == 1) {
      //     this.qualificationLabelList.forEach((item, index) => {
      //       if (Object.keys(item).length == 0 ) {
      //         this.qualificationLabelList.splice(index, 1)
      //       }
      //     })
      //   }
      this.qualificationsList.forEach((item) => {
        if (item.qualificationsList) {
          delete item.qualificationsList
        }
      })
      let data = {
        qualificationLabelList: this.qualificationLabelList,
        noticeId: this.form.id,
        noticeTitle: this.form.noticeTitle,
        noticeType: '2',
        status: '2',
        noticeCode: this.form.noticeCode,
        price: this.form.bond,
        type: 1,
        documentFee: this.form.documentFee,
      }
      console.log(data, '123')
      if (this.saveFlag) {
        //如果是第一个节点他可以保存数据，否则不需要进行数据操作
        if (this.node == 1) {
          this.$http
            .post(
              '${portal}/userParticipation/v1/qualificationsParticipate',
              data
            )
            .then((res) => {
              if (res.data.state) {
                console.log(res.data, '报名调用结果')
                this.id = res.data.value
                let params = {
                  type: 'saveData',
                  state: true,
                  businessKey: this.id, // todo 确认id字段是否正确 用接口返回值做businessKey
                  sysCode: '',
                }
                params.vars = {
                  // props1: this.forms.props1,
                  noticeReleaseUserAccount: this.form.noticeReleaseUserAccount,
                }
                hotent.sendMessage(params)
                this.saveFlag = false
              }
            })
        } else {
          let params = {
            type: 'saveData',
            state: true,
            businessKey: this.id, // 流程地址参数id
            sysCode: '',
          }
          hotent.sendMessage(params)
          this.isFirst = false
        }
      } else {
        let params = {
          type: 'saveData',
          state: true,
          businessKey: this.id, // 流程地址参数id
          sysCode: '',
        }
        params.vars = {
          noticeReleaseUserAccount: this.form.noticeReleaseUserAccount,
        }
        hotent.sendMessage(params)
        this.isFirst = false
      }
      // }
    },
    relationData(data) {
      this.currentUser = JSON.parse(sessionStorage.getItem('currentUserDetail'))
      this.form = data
      this.$http
        .post('${portal}/projectApproval/v1/getDataById?id=' + this.form.id)
        .then((res) => {
          if (res.data.state) {
            this.params = res.data.value
            this.params.matApprovalQualificationList.forEach((item, index) => {
              item.qualificationsList = []
              item.qualificationsList.push({
                qualificationName: '',
                qualificationCode: '',
                qualificationAcquisitionDate: '',
                expiryDate: '',
                qualificationMemberId: this.currentUser.org[0].orgId,
                qualificationMember: this.currentUser.org[0].orgName,
                qualificationTypeCode: item.qualificationTypeValue,
                qualificationTypeName: item.qualificationTypeName,
              })
              if (item.qualificationTypeName == undefined) {
                this.params.matApprovalQualificationList.splice(index, 1)
                return
              }
            })
            this.qualificationsList = utils.deepClone(
              this.params.matApprovalQualificationList
            )
          }
        })
    },
  },
}
</script>
  
  <style lang="scss" scoped>
.bidding-sign-up {
  width: 100%;
  margin: 0 auto;
  background: #fff;
  .inner-form {
    width: 1000px;
    margin: 0 auto;
  }
  .qualification {
    margin-bottom: 20px;
  }
  .qualification-title {
    color: #909399;
    display: inline-block;
    margin-bottom: 10px;
    font-weight: bold;
    font-size: 16px;
  }
  .zz-title {
    color: #303133;
    font-weight: bold;
    font-size: 16px;
  }
}
/deep/ .el-upload-list__item-actions {
  /deep/ .el-upload-list__item-delete {
    display: none;
    /depp/ .el-icon-delete:before {
      content: '';
    }
  }
}
</style>
  