<!--
  @description: 招标-踏勘记录
  @Modifier: haoFx
  @routerPath:/bidding/projectDrive/exploration/projectExtendRecord
  @date: 2020/3/4-13:51
-->
<template>
  <div class="main mb10">
    <div class="page-title">
      踏勘通知基本信息
    </div>
    <el-form
      ref="fromData"
      :model="formData"
      :inline-message="true"
    >
      <table class="from_table">
        <tr>
          <td>
            <el-form-item label="通知名称" />
          </td>
          <td colspan="3">
            {{ formData.noticeName }}
          </td>
        </tr>
        <tr>
          <td>
            <el-form-item label="项目（包组）名称" />
          </td>
          <td colspan="3">
            <packDetail :pack-list="selectPackList" />
          </td>
        </tr>
        <tr>
          <td>
            <el-form-item label="踏勘场次" />
          </td>
          <td> {{ formData.explorationNum }}</td>
          <td>
            <el-form-item label="踏勘现场截止时间" />
          </td>
          <td>
            {{ formData.explorationSceneEndTime && $Moment(formData.explorationSceneEndTime).format(momentDateTime) }}
          </td>
        </tr>
        <tr>
          <td>
            <el-form-item label="集合时间" />
          </td>
          <td>
            {{ formData.gatherTime && $Moment(formData.gatherTime).format(momentDateTime) }}
          </td>
          <td>
            <el-form-item label="集合地点" />
          </td>
          <td> {{ formData.gatherAddr }}</td>
        </tr>
        <tr>
          <td>
            <el-form-item label="答疑会时间" />
          </td>
          <td>
            {{ formData.meetTime && $Moment(formData.meetTime).format(momentDateTime) }}
          </td>
          <td>
            <el-form-item label="答疑会地点" />
          </td>
          <td> {{ formData.meetAddr }}</td>
        </tr>
        <tr>
          <td>
            <el-form-item label="通知内容" />
          </td>
          <td colspan="3" v-html="formData.noticeContent" />
        </tr>
        <tr>
          <td>
            <el-form-item label="踏勘开始时间" />
          </td>
          <td>
            <el-date-picker
              v-model="formDataParams.explorationStartTime"
              :picker-options="disabledPickerOptions"
              :format="elValueFormat"
              placeholder="请选择踏勘开始时间"
              type="datetime"
              style="width: calc(100% - 60px)"
            />
          </td>
          <td>
            <el-form-item label="踏勘结束时间" />
          </td>
          <td>
            <el-date-picker
              v-model="formDataParams.explorationEndTime"
              :picker-options="disabledPickerOptions"
              :format="elValueFormat"
              placeholder="请选择踏勘结束时间"
              type="datetime"
              style="width: calc(100% - 60px)"
            />
          </td>
        </tr>
        <tr>
          <td>
            <el-form-item label="踏勘内容" />
          </td>
          <td colspan="3">
            <el-input
              v-model.trim="formDataParams.explorationContent"
              :autosize="{ minRows: 4, maxRows: 6}"
              placeholder="请填写通知内容"
              type="textarea"
            />
          </td>
        </tr>
        <tr>
          <td>
            <el-form-item label="附件" />
          </td>
          <td colspan="3">
            <upload
              ref="upload"
              :on-change="changeFile"
              :data="upLoadData"
              :file-list="fileList"
              :auto-delete="true"
              :auto-upload="true"
              :action="importFileUrl"
              title=""
              file-ref="fileRef"
            />
          </td>
        </tr>
      </table>
    </el-form>
    <div class="page-title">
      踏勘单位信息
    </div>
    <div>
      <el-table
        :data="projectExtendInfoList"
      >
        <el-table-column
          header-align="center"
          prop="supplierName"
          min-width="200"
          label="踏勘单位名称"
        />
        <el-table-column
          header-align="center"
          prop="linker"
          min-width="200"
          label="联系人"
        />
        <el-table-column
          header-align="center"
          min-width="200"
          prop="linkerTel"
          label="联系电话"
        />
        <el-table-column
          header-align="center"
          min-width="80"
          prop="isAttend"
          align="center"
          label="是否参加"
        >
          <template slot-scope="scope">
            <span v-if="scope.row.isAttend==='01'">是</span>
            <span v-if="scope.row.isAttend!=='01'">否</span>
          </template>
        </el-table-column>
        <el-table-column
          header-align="center"
          min-width="80"
          align="center"
          prop="isSign"
          label="是否签到"
        >
          <template slot-scope="scope">
            <el-checkbox
              v-model="scope.row.isSign"
              :disabled="scope.row.isAttend!=='01'"
            />
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!--保存按钮-->
    <div class="but_footer">
      <div class="but_footer-h">
        <div class="but_footer-but">
          <el-button :loading="confirmLoading" type="primary" @click="saveData">
            保 存
          </el-button>
          <el-button :loading="confirmLoading" @click="back">
            返 回
          </el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
/* api*/
import { getTenderExplorationById, saveExplorationInfo, getSupplierExplorationInfo } from '@api/bidding/exploration'
/* 组件*/
import upload from '@comp/common/updownload/upload'
import packDetail from '@comp/bidding/packComponent/packDetail'// 关联标包渲染组件
/* js混入*/
import { bidProjectExtendMixins } from '../mixins/bidProjectExtendMixins'
export default {
  name: 'ProjectExtendRecord',
  components: {
    upload, // 文件上传
    packDetail
  },
  mixins: [bidProjectExtendMixins],
  data() {
    return {
      explorationId: this.$route.query.explorationId, // 踏勘id
      fileList: [], // 附件列表
      selectPackList: [],
      upLoadData: {
        bizId: this.$route.query.explorationId,
        fileType: 'tender_exploration_notice_file_base'
      },
      // 保存参数
      formDataParams: {
        explorationStartTime: '', // 踏勘开始时间
        explorationEndTime: '', // 踏勘结束时间
        explorationContent: '', // 踏勘内容
        signSupplierIdList: [] // 签到供应商集合
      },
      // 踏勘单位信息
      projectExtendInfoList: []
    }
  },
  created() {
    // 项目经理-通过踏勘id获取详细信息
    this.getTenderExploration()
  },
  methods: {
    getTenderExploration() {
      getTenderExplorationById(this.explorationId).then(res => {
        this.formData = res.data
        this.formDataParams.explorationStartTime = res.data.explorationStartTime // 踏勘开始时间
        this.formDataParams.explorationEndTime = res.data.explorationEndTime // 踏勘结束时间
        this.formDataParams.explorationContent = res.data.explorationContent // 踏勘内容
        this.selectPackList = this.formData.bidtExplorationTenderExplorationExpandVo
        this.getSupplierExplorationInfoList()
      })
    },
    // 获取投标人踏勘信息标段信息
    getPackIds() {
      const stageIds = []// 阶段id集合
      this.selectPackList.map(item => {
        stageIds.push(item.stageId)// 阶段id集合
      })
      return stageIds
    },
    // 获取投标人踏勘信息
    getSupplierExplorationInfoList() {
      const data = this.getPackIds().join(',') // 阶段id集合
      const params = {
        stageIds: data, // 阶段id集合
        noticeId: this.explorationId // 踏勘通知表id
      }
      getSupplierExplorationInfo(params).then(res => {
        this.projectExtendInfoList = res.data
        this.projectExtendInfoList.map((item) => {
          if (item.isSign === '01') { // 已签到
            item.isSign = true
          }
        })
      }).catch(() => {

      })
    },
    // 保存组装数据
    assemblyData() {
      const signSupplierIdList = []
      this.projectExtendInfoList.map((item) => {
        if (item.isSign) { // 勾选已签到
          signSupplierIdList.push(item.supplierId) // 签到供应商集合
        }
      })
      this.formDataParams.signSupplierIdList = signSupplierIdList
      const data = {
        ...this.formDataParams,
        id: this.explorationId
      }
      // 踏勘结束时间
      if (data.explorationEndTime) {
        data.explorationEndTime = this.$Moment(data.explorationEndTime).format(this.momentSaveFormat)
      }
      // 踏勘开始时间
      if (data.explorationStartTime) {
        data.explorationStartTime	 = this.$Moment(data.explorationStartTime).format(this.momentSaveFormat)
      }
      return data
    },
    // 保存
    saveData() {
      this.confirmLoading = true// btnLoding
      const data = this.assemblyData()// 组装数据
      saveExplorationInfo(data).then(res => {
        this.confirmLoading = false// btnLoding
        this.$message({
          message: '保存成功',
          type: 'success'
        })
      }).catch(() => {
        this.confirmLoading = false// btnLoding
      })
    },
    back() {
      this.$router.push({
        path: '/bidding/projectDrive/projectExtend/projectExtendNoticeList',
        query: {
          ...this.$route.query
        }
      })
    },
    // 附件上传
    changeFile(file, fileList) {
      this.fileList = fileList
    }
  }
}
</script>

<style lang="less" scoped>

  /deep/.file-list{
    .fileBtn, li{
      margin-bottom: 0!important;
    }
    .name{
      margin-right: 0!important;
    }
  }
</style>
