<!--
  @description: 招标-招标公告-项目概况与招标范围 招标-资审公告-项目概况
  @Modifier: 肖文龙
  @routerPath:/bidding/projectDrive/bulletin/tabs/tenderBulletinExpandInfo-add
  @date: 2019/12/31-10:36
-->
<template>
  <div>
    <div>
      <div style="width: 90%;margin-left: 4%;">
        <el-form ref="form" :model="formData" :rules="rules" label-width="140px">
          <el-row>
            <!--
            后审阶段展示
            tenderBase.stageType 00 资审 01 后审
            -->
            <el-col v-if="tenderBase.stageType==='01'">
              <el-row>
                <el-col>
                  <!--建设地点-->
                  <el-form-item ref="buildAddress" :label="expandTextData.jsdd" style="display: inline-block">
                    <!--地区组件-->
                    <cascader :region-text="formData.buildAddress" style="width:220px" @regionData="regionData" />
                  </el-form-item>
                  <!--建设地点详细地址-->
                  <el-form-item ref="buildDetailAddress" style="display: inline-block" class="buildDetailAddress">
                    <gx-input
                      v-model.trim="formData.buildDetailAddress"
                      gx-maxlength="varchar1000"
                      placeholder="最多允许输入1000个字符"
                      style="width:344px"
                    />
                  </el-form-item>
                </el-col>
              </el-row>
              <!--计划工期-->
              <el-form-item ref="planConstructionPeriod" :label="expandTextData.jhgq">
                <gx-input
                  v-model.trim="formData.planConstructionPeriod"
                  style="width: 570px"
                  gx-maxlength="varchar1000"
                  placeholder="最多允许输入1000个字符"
                />
              </el-form-item>
              <!--招标规模/采购规模-->
              <el-form-item ref="tenderScale" :label="dict.tenderScaleLabel">
                <gx-input
                  v-model.trim="formData.tenderScale"
                  style="width: 570px"
                  gx-maxlength="varchar1000"
                  placeholder="最多允许输入1000个字符"
                />
              </el-form-item>
            </el-col>
            <!--
            资审阶段展示
            tenderBase.stageType 00 资审 01 后审
            -->
            <el-col v-else>
              <!--项目概况-->
              <el-form-item ref="tenderSurvey" label="项目概况" prop="tenderSurvey">
                <gx-input
                  v-model="formData.tenderSurvey"
                  :autosize="{ minRows: 8, maxRows: 8 }"
                  type="textarea"
                  gx-maxlength="varchar500"
                  show-word-limit
                  style="width: 100%"
                />
              </el-form-item>
            </el-col>
            <el-col>
              <!--招标范围/采购范围-->
              <el-form-item ref="tenderingArea" :label="dict.tenderingAreaLabel" prop="tenderingArea">
                <gx-input
                  v-model="formData.tenderingArea"
                  :autosize="{ minRows: 8, maxRows: 8 }"
                  type="textarea"
                  show-word-limit
                  style="width: 100%"
                />
              </el-form-item>
              <!--标段划分情况-->
              <el-form-item ref="buyersLinkerAddress" label="标段划分情况" prop="buyersLinkerAddress">
                <!--isPack===01 分包-->
                <span v-if="tenderBase.isPack==='01'">本项目有{{ formData.projectPackageNum }}个标段（包）</span>
                <span v-else>本项未划分标段（包）</span>
              </el-form-item>
              <!--本次招标标段isPack===01 分包-->
              <el-form-item v-if="tenderBase.isPack==='01'" ref="bulletinPublishMethod" label="本次招标标段" prop="bulletinPublishMethod">
                <el-radio-group v-model="formData.bulletinPublishMethod" :disabled="formData.bulletinPublishMethodChange==='00'">
                  <el-radio v-for="(item,index) in publishMethodList" :key="index" :label="item.typecode">
                    {{ item.typename }}
                  </el-radio>
                </el-radio-group>
              </el-form-item>
              <!--
                选择标段（包）
                按标段发布时展示 bulletinPublishMethod==='01'
              -->
              <el-form-item v-if="formData.bulletinPublishMethod==='01'" required label="选择标段（包）">
                <!--
                bulletin-type 01 招标公告
                -->
                <packComponent ref="packComp" :selet-pack-list="seletPackList" :bulletin-type="tenderBase.bulletinType" />
              </el-form-item>
              <!--标的物-->
              <el-form-item class="form_item_table" label="标的物">
                <div>
                  <el-table :data="is_show?materieList:materieList[0]?[materieList[0]]:[]">
                    <el-table-column type="index" label="序号" width="60" align="center" />
                    <el-table-column header-align="center" label="标段名称" prop="packName" />
                    <el-table-column header-align="center" label="产品名称" prop="productName" />
                    <el-table-column header-align="center" label="型号" prop="productModel" />
                    <el-table-column header-align="center" label="数量" prop="quantity" align="right" />
                    <el-table-column header-align="cenister" label="单位" prop="unit" />
                  </el-table>
                  <div class="more">
                    <span v-if="is_show" class="pointer" @click="is_show=false">
                      收起更多（0）
                      <i class="el-icon-arrow-up" />
                    </span>
                    <span v-else class="pointer" @click="is_show=true">
                      展开更多（{{ materieList.length>0?materieList.length -1:0 }}）
                      <i class="el-icon-arrow-down" />
                    </span>
                  </div>
                </div>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
    </div>
    <!--保存按钮-->
    <div class="but_footer">
      <div class="but_footer-h" />
      <div class="but_footer-but">
        <el-button @click="prevStep">
          上一步
        </el-button>
        <el-button :loading="confirmLoading" type="primary" @click="nextStep('form')">
          暂存，进入下一步
        </el-button>
      </div>
    </div>
  </div>
</template>

<script>
/* api*/
import { queryTenderBulletinExpandInfo, saveTenderBulletinExpandInfo } from
  '@/api/bidding/bidBulletin'
import { listPackageMaterielInfo } from '@/api/bidding/biddingProject'//
/* 公用方法*/
import { characters1_auto } from '@/assets/js/validate'// 校验输入内容
/* 混合开发方法-参数字段*/
import { tenderBulletinInitGroupMixin } from './../mixins/tenderBulletinInitGroupMixin'// 字典信息
/* 组件*/
import cascader from '@comp/common/cascader'// 地区三级联动
import packComponent from '@comp/bidding/packComponent/packComponent'
// 选择标段（包）
export default {
  name: 'TenderBulletinExpandInfoAdd',
  components: {
    cascader, // 地区三级联动
    packComponent
  },
  mixins: [tenderBulletinInitGroupMixin],
  data() {
    return {
      confirmLoading: false, // 暂存、下一步Loding
      is_show: false, // 物料展示状态
      tenderBase: this.$store.getters.tenderBase, // 项目信息
      tenderId: this.$route.query.id, // 项目Id
      bulletinId: this.$route.query.bulletinId, // 公告Id
      // 根据不同采购分类展示不同的标题文案
      expandTextData: {
        jsdd: '建设地点', // 建设地点
        jhgq: '计划工期'// 计划工期
      },
      formData: {
        bulletinId: '', // 公告Id
        buildAddress: '', // 建设地点名称
        buildAddressCode: '', // 建设地点编码
        buildDetailAddress: '', // 建设项目详细地址
        purchaseClassification: '', // 采购分类 00:物资类 01:非物资类
        listMarkedBulletinPackage: [], // 已选标段（包）列表=》前端展示，不需要传给后端
        packIds: [], // 已选标段（包）Id=》存储时才使用
        planConstructionPeriod: '', // 计划工期
        tenderScale: '', // 招标规模
        isPublishTenderScale: '01', // 招标规模不公开 00 不公开 01 公开
        tenderSurvey: '', // 项目概况
        tenderingArea: '', // 招标范围
        projectPackageNum: '', // 项目标段数量
        bulletinPublishMethodChange: '00', // 本次招标标段是否可以修改 01 可以修改 00 不可以修改
        bulletinPublishMethod: '00'// 本次招标标段  00:按项目发布 01:按标段发布
      },
      seletPackList: [], // 获取的已选择的标段（包）
      materieList: [], // 要展示标的物
      initMaterieList: [], // 初始化所有标的物
      // 校验输入内容
      rules: {
        buildAddress: [{ required: true, message: '请选择', trigger: 'change' }], // 建设地点
        // 计划工期
        planConstructionPeriod: [{ required: true, validator: characters1_auto, trigger: 'blur' }],
        // 招标规模
        tenderScale: [{ required: true, validator: characters1_auto, trigger: 'blur' }],
        // 项目概况
        tenderSurvey: [{ required: true, validator: characters1_auto, trigger: 'blur' }],
        buildDetailAddress: [{ required: false, validator: characters1_auto, trigger: 'blur' }], // 建设项目详细地址
        tenderingArea: [{ required: true, validator: characters1_auto, trigger: 'blur' }], // 招标范围
        bulletinPublishMethod: [{ required: true, message: '请选择', trigger: 'change' }] // 本次招标标段
      }
    }
  },
  // 监听标段（包）
  watch: {
    seletPackList() {
      this.materieFiltr()// 物料信息-筛选已选物料
    },
    // 监听 发布方式 00 按项目发布 01 按标段发布
    'formData.bulletinPublishMethod'() {
      this.materieFiltr()// 物料信息-筛选已选物料
    }
  },
  created() {
    this.getBulletinPublishMethodInitInfo()// 字典
    this.initData()// 初始化
    this.materieQuery()// 获取物料信息
  },
  methods: {
    // 初始化文案标题
    initTitleData() {
      if (this.formData.purchaseClassification === '00') {
        this.expandTextData = {
          jsdd: '交货地点', // 建设地点
          jhgq: '交货期'// 计划工期
        }
      } else if (this.formData.purchaseClassification === '01') {
        this.expandTextData = {
          jsdd: '建设地点', // 建设地点
          jhgq: '计划工期'// 计划工期
        }
      }
    },
    // 加载数据
    initData() {
      if (!this.bulletinId) return
      const data = {
        tenderId: this.tenderId, // 項目Id
        bulletinId: this.bulletinId, // 公共Id
        bulletinType: this.tenderBase.bulletinType// 21资审公告 01 招标公告
      }
      queryTenderBulletinExpandInfo(data).then((response) => {
        this.formData = response.data
        this.seletPackList = this.formData.listMarkedBulletinPackage// 获取的已选择的标段（包）
        if (!this.formData.isPublishTenderScale) {
          // 为空时设置默认
          this.formData.isPublishTenderScale = '01' // 招标规模不公开 00 不公开 01 公开
        }
        if (!this.formData.bulletinPublishMethod) {
          // 为空时设置默认
          this.formData.bulletinPublishMethod = '00' // 本次招标标段  00:按项目发布 01:按标段发布
        }
        this.initTitleData()// 初始化文案标题
      })
    },
    // 获取物料信息
    materieQuery() {
      const data = {
        tenderId: this.tenderId// 项目Id
      }
      listPackageMaterielInfo(data).then(res => {
        this.initMaterieList = res.data// 初始化所有标的物
        this.materieFiltr()// 物料信息-筛选已选物料
      })
    },
    // 获取要移除的标段id集合
    getPackIds() {
      const packIds = []
      this.seletPackList.map(item => {
        packIds.push(item.packId)
      })
      return packIds
    },
    // 物料信息-筛选已选物料
    materieFiltr() {
      this.materieList = []// 要展示标的物
      if (this.formData.bulletinPublishMethod === '00') {
        // 按项目发布
        this.initMaterieList.map(item => {
          if (item.materielInfoVo.length > 0) {
            /* 有物料时*/
            item.materielInfoVo.map(child => {
              const data = {
                ...item,
                ...child,
                length: item.materielInfoVo.length// 单元格合并个数
              }
              this.materieList.push(data)
            })
          } else {
            /* 无物料时*/
            const data = {
              ...item,
              length: item.materielInfoVo.length// 单元格合并个数
            }
            this.materieList.push(data)
          }
        })
      } else if (this.formData.bulletinPublishMethod === '01') {
        // 按标段发布
        // 筛选
        const packIds = [...this.getPackIds()] // 要查询的标段id集合
        this.initMaterieList.map(item => {
          if (packIds.indexOf(item.packId) !== -1) {
            if (item.materielInfoVo.length > 0) {
              /* 有物料时*/
              item.materielInfoVo.map(child => {
                const data = {
                  ...item,
                  ...child,
                  length: item.materielInfoVo.length// 单元格合并个数
                }
                this.materieList.push(data)
              })
            } else {
              /* 无物料时*/
              const data = {
                ...item,
                length: item.materielInfoVo.length// 单元格合并个数
              }
              this.materieList.push(data)
            }
          }
        })
      }
    },
    // 建设地点三级联动组件使用
    regionData(regionName, location) {
      this.formData.buildAddress = regionName
      this.formData.buildAddressCode = location.join(',')
    },
    // 保存数据接口 暂存，下一步
    saveData(type) {
      // 按标段发布时
      if (this.formData.bulletinPublishMethod === '01' &&
        !this.$refs.packComp.isCheck()) {
        return // 校验是否选择标段（包）
      }
      this.confirmLoading = true// btnLoding
      this.formData.tenderId = this.tenderId// 项目Id
      this.formData.packIds = [...this.getPackIds()] // 要存储的标段id集合
      // 删除不需要的参数
      delete this.formData.listMarkedBulletinPackage// 标段（包）信息
      delete this.formData.bulletinPublishMethodChange // 本次招标标段是否可以修改
      saveTenderBulletinExpandInfo(this.formData).then(response => {
        // route携带参数
        const pathData = {
          ...this.$route.query,
          isSwitchTable: '01'// 是否可以切换项目概况已后的tab页 00 不可以切换 01可以切换
        }
        if (type === 'draft') return false// 判断是否-点击步骤条切换-如果是则不执行next下一步
        this.$emit('stepPage', 'next', pathData)// 步骤条切换方法 next 下一步
        this.confirmLoading = false// btnLoding
      }).catch(() => {
        this.confirmLoading = false// btnLoding
      })
    },
    // 上一步
    prevStep() {
      // router携带参数
      const pathData = {
        ...this.$route.query
      }
      this.$emit('stepPage', 'prev', pathData)// 步骤条切换方法 prev 上一步
    },
    // 下一步
    nextStep(formName) {
      // 校验输入内容
      this.$refs[formName].validate((valid, field) => {
        if (valid) { // 校验通过
          this.saveData()
        } else { // 校验不通过
          this.$confirm('项目概况与招标范围未完善, 是否进入下一步?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            confirmButtonClass: 'confirmBtn',
            cancelButtonClass: 'cancelBtn',
            type: 'warning'
          }).then(() => {
            this.saveData()
          }).catch(() => {
          })
        }
      })
    }
  }
}
</script>
<style lang="less" scoped>
/deep/.buildDetailAddress{
  .el-form-item__content{
    margin-left: 5px!important;
  }
}
</style>
