<!--
  @description:  立项-项目基本信息-hn配置
  @Modifier: 肖文龙
  @routerPath: /bidding/bidProjectStep/bidProjectBase
  @date: 2019/10/26-12:56
-->
<template>
  <div>
    <el-form
      ref="form"
      :model="formData"
      :rules="rules"
      :inline-message="true"
    >
      <table class="from_table">
        <tr>
          <td>
            <el-form-item label="招标项目编号" prop="tenderNo" />
          </td>
          <td colspan="3">
            <gx-input
              v-model="formData.tenderNo"
              disabled
              style="width:calc(100% - 50px)"
              gx-maxlength="varchar200"
              placeholder="招标项目编号自动生成"
            />
          </td>
        </tr>
        <tr>
          <td><el-form-item label="招标项目名称" prop="tenderName" /></td>
          <td colspan="3">
            <gx-input
              v-model.trim="formData.tenderName"
              style="width:calc(100% - 50px)"
              gx-placeholder="placeholderText600"
              gx-maxlength="varchar600"
            />
          </td>
        </tr>
        <tr>
          <td>
            <el-form-item label="招标人项目编号" prop="buyersTenderNo" />
          </td>
          <td>
            <gx-input
              v-model="formData.buyersTenderNo"
              gx-maxlength="varchar200"
              placeholder="请输入招标人项目编号"
            />
          </td>
          <td>
            <el-form-item label="组织形式" prop="tenderOrgMethod" />
          </td>
          <td colspan="3">
            <el-radio-group v-model="formData.tenderOrgMethod">
              <el-radio
                v-for="(item,index) in orgMethodList"
                :key="index"
                :label="item.typecode"
              >
                {{ item.typename }}
              </el-radio>
            </el-radio-group>
          </td>
        </tr>
        <tr>
          <!--招标方式-->
          <td>
            <el-form-item label="招标方式" prop="tenderMethod" />
          </td>
          <td>
            <el-radio-group v-model="formData.tenderMethod">
              <el-radio v-for="(item,index) in bidTypeList" :key="index" :label="item.typecode">
                {{ item.typename }}
              </el-radio>
            </el-radio-group>
          </td>
          <td>
            <el-form-item label="资格审查方式" prop="qualificationMethod" />
          </td>
          <td>
            <el-radio-group v-model="formData.qualificationMethod">
              <el-radio v-for="(item,index) in phaseTypeList" :key="index" :label="item.typecode">
                {{ item.typename }}
              </el-radio>
            </el-radio-group>
          </td>
        </tr>
        <tr>
          <!--项目分类-->
          <td>
            <el-form-item label="项目分类" prop="projectIndustryName" />
          </td>
          <td>
            <!--父级-->
            <el-select
              v-model="formData.industryName"
              style="width: calc(48% - 5px);"
              placeholder="请选择"
              @change="projectIndustryChange"
            >
              <el-option
                v-for="(item,index) in projectClassificationList"
                :key="index"
                :label="item.typename"
                :value="item.typecode"
              />
            </el-select>
            <!--子级-->
            <el-select
              v-for="(item,index) in projectClassificationList"
              v-if="formData.industryName===item.typecode"
              :key="index"
              v-model="formData.projectIndustryCode"
              style="width: calc(48% - 5px)"
              placeholder="请选择"
              @change="projectIndustryChange(item.typecode,item.child)"
            >
              <el-option
                v-for="(child,childIndex) in item.child"
                :key="childIndex"
                :label="child.typename"
                :value="child.typecode"
              />
            </el-select>
          </td>
          <td>
            <el-form-item label="项目性质" prop="projectNature" />
          </td>
          <td>
            <el-select v-model="formData.projectNature" style="width: 100%;" placeholder="请选择">
              <el-option
                v-for="(item,index) in projectNatureList"
                :key="index"
                :label="item.typename"
                :value="item.typecode"
              />
            </el-select>
          </td>
        </tr>
        <tr>
          <!--委托招标时展示-委托合同-->
          <td>
            <el-form-item label="建设项目" prop="constructionProjectName" />
          </td>
          <td>
            <gx-input
              v-model="formData.constructionProjectName"
              placeholder="请选择"
              style="width: calc(100% - 180px)"
              disabled
              gx-maxlength="varchar500"
            />
            <el-button type="primary" @click="dialogData.buildingProjectVisible=true">
              选择
            </el-button>
            <el-button @click="buildingProjectInfo('clear')">
              清空
            </el-button>
          </td>
          <td>
            <el-form-item v-if="formData.tenderOrgMethod=='01'" label="委托合同" prop="contractName" />
          </td>
          <td>
            <template v-if="formData.tenderOrgMethod=='01'">
              <gx-input
                v-model="formData.contractName"
                gx-maxlength="varchar200"
                placeholder="请选择"
                style="width:calc(100% - 180px)"
                disabled
              />
              <el-button type="primary" @click="dialogData.consignContractVisible=true">
                选择
              </el-button>
              <el-button @click="consignContractInfo('clear')">
                清空
              </el-button>
            </template>
          </td>
        </tr>
        <tr>
          <td>
            <el-form-item label="所属二级公司" prop="secondaryLevelCompanyName" />
          </td>
          <td>
            <el-input v-model="formData.secondaryLevelCompanyName" disabled style="width: calc(100% - 180px)" />
            <el-button type="primary" @click="handelSecondaryLevelCompanyName('00')">
              选择
            </el-button>
            <el-button @click="handelSecondaryLevelCompanyName('01')">
              清空
            </el-button>
          </td>
          <td>
            <el-form-item label="基层公司" prop="grassRootsCompaniesName" />
          </td>
          <td>
            <el-input v-model="formData.grassRootsCompaniesName" disabled style="width: calc(100% - 180px)" />
            <el-button type="primary" @click="handleGrassRootsCompaniesName('00')">
              选择
            </el-button>
            <el-button @click="handleGrassRootsCompaniesName('00')">
              清空
            </el-button>
          </td>
        </tr>
        <tr>
          <td>
            <el-form-item label="系统内/外" prop="systemSource" />
          </td>
          <td>
            <el-radio-group v-model="formData.systemSource">
              <el-radio v-for="(item,index) in systemSourceList" :key="index" :label="item.typecode">
                {{ item.typename }}
              </el-radio>
            </el-radio-group>
          </td>
          <td>
            <el-form-item label="采购类别" prop="purchaseType" />
          </td>
          <td>
            <el-radio-group v-model="formData.purchaseType">
              <el-radio v-for="(item,index) in purchaseTypeList" :key="index" :label="item.typecode">
                {{ item.typename }}
              </el-radio>
            </el-radio-group>
          </td>
        </tr>
        <tr>
          <td>
            <el-form-item label="采购分类" prop="purchaseClassification" />
          </td>
          <td>
            <el-radio-group v-model="formData.purchaseClassification">
              <el-radio v-for="(item,index) in purchaseClassificationList" :key="index" :label="item.typecode">
                {{ item.typename }}
              </el-radio>
            </el-radio-group>
          </td>
          <td>
            <el-form-item label="采购内容分类" prop="purchaseContentClassification" />
          </td>
          <td>
            <el-select v-model="formData.purchaseContentClassification" style="width: 100%;" placeholder="请选择">
              <el-option
                v-for="(item,index) in purchaseContentClassList"
                :key="index"
                :label="item.typename"
                :value="item.typecode"
              />
            </el-select>
          </td>
        </tr>
        <tr>
          <td>
            <el-form-item label="采购级别" prop="purchaseLevel" />
          </td>
          <td>
            <el-select v-model="formData.purchaseLevel" style="width: 100%;" placeholder="请选择">
              <el-option
                v-for="(item,index) in purchaseLevelList"
                :key="index"
                :label="item.typename"
                :value="item.typecode"
              />
            </el-select>
          </td>
          <td>
            <el-form-item label="项目行业" prop="projectIndustry" />
          </td>
          <td>
            <el-select v-model="formData.projectIndustry" style="width: 100%;" placeholder="请选择">
              <el-option
                v-for="(item,index) in projectIndustryList"
                :key="index"
                :label="item.typename"
                :value="item.typecode"
              />
            </el-select>
          </td>
        </tr>
        <!--项目所在区域-->
        <tr>
          <td>
            <el-form-item label="项目所在区域" prop="projectAreaName" />
          </td>
          <td colspan="3">
            <!--地区组件-->
            <cascader
              :region-text="formData.projectAreaName"
              style="width: 220px"
              @regionData="regionData"
            />
            <gx-input
              v-model.trim="formData.palceAddress"
              style="width:calc(100% - 270px)"
              gx-placeholder="placeholderText1000"
              gx-maxlength="varchar1000"
            />
          </td>
        </tr>
        <tr>
          <td>
            <el-form-item label="项目总概算" />
          </td>
          <td colspan="3">
            <!--金额组件-->
            <money
              :thousands="true"
              :unit-stust="true"
              :great="true"
              :money-value="formData"
              style="display: inline-block"
              name="budgetTotalMoney"
            />
            <!--华能展示-Start-->
            <el-popover
              placement="top-start"
              popper-class="hint"
              offset="5"
              trigger="hover"
              content="项目总概算由标的清单物料预算总额总计自动求和而得"
            >
              <el-button slot="reference" type="info" class="prompt">
                <i class="iconfont icon-qm" />
              </el-button>
            </el-popover>
            <!--华能展示-End-->
          </td>
        </tr>
        <!-- <tr>
          <td>
            <el-form-item label="实施地点" />
          </td>
          <td colspan="3">
            <gx-input
              v-model.trim="formData.palceAddress"
              style="width: 96%"
              gx-maxlength="varchar1000"
              show-word-limit
              placeholder="最多允许输入500个汉字(1000字符)"
            />
          </td>
        </tr> -->
        <tr>
          <td>
            <el-form-item label="服务费收取方式" prop="agentServiceFeeMethod" />
          </td>
          <td>
            <!--01 委托招标 委托合同带出不可编辑  00 自主招标可编辑-->
            <el-select
              v-model="formData.agentServiceFeeMethod"
              style="width: 100%;"
              placeholder="请选择"
              :disabled="agentServiceFeeMethodDisabled"
            >
              <el-option
                v-for="(item,index) in agentServiceFeeMethodList"
                :key="index"
                :label="item.typename"
                :value="item.typecode"
              />
            </el-select>
          </td>
          <td><el-form-item label="服务费收取对象" prop="agentServiceFeePeople" /></td>
          <td>
            <el-radio-group v-model="formData.agentServiceFeePeople">
              <el-radio v-for="(item,index) in agentServiceFeePeopleList" :key="index" :label="item.typecode">
                {{ item.typename }}
              </el-radio>
            </el-radio-group>
          </td>
        </tr>
        <tr>
          <td><el-form-item label="申报责任人" prop="declarePerson" /></td>
          <td>
            <gx-input v-model="formData.declarePerson" gx-maxlength="varchar200" />
          </td>
          <td><el-form-item label="是否限额以下" prop="beyondLegalLimit" /></td>
          <td>
            <el-radio-group v-model="formData.beyondLegalLimit">
              <el-radio v-for="(item,index) in beyondLegalLimitList" :key="index" :label="item.typecode">
                {{ item.typename }}
              </el-radio>
            </el-radio-group>
          </td>
        </tr>
        <tr>
          <td><el-form-item label="机组容量" prop="unitCapacity" /></td>
          <td>
            <gx-input v-model="formData.unitCapacity" gx-maxlength="varchar36" />
          </td>
          <td>
            <el-form-item label="是否依法必招" prop="isLegalTender" />
          </td>
          <td>
            <el-radio-group v-model="formData.isLegalTender">
              <el-radio v-for="(item,index) in isLegalTenderList" :key="index" :label="item.typecode">
                {{ item.typename }}
              </el-radio>
            </el-radio-group>
          </td>
        </tr>
        <tr>
          <td>
            <el-form-item label="入库专业" prop="libraryProfessional" />
          </td>
          <td colspan="3">
            <gx-input
              v-model="formData.libraryProfessional"
              placeholder="请选择"
              style="width: calc(100% - 180px)"
              disabled
              gx-maxlength="varchar100"
            />
            <el-button type="primary" @click="LibraryTreeChange">
              选择
            </el-button>
            <el-button @click="LibraryTreeInfo('clear')">
              清空
            </el-button>
          </td>
        </tr>
        <tr>
          <td>
            <el-form-item label="项目内容范围" />
          </td>
          <td colspan="3">
            <gx-input
              v-model="formData.tenderingArea"
              :autosize="{ minRows: 4, maxRows: 4 }"
              type="textarea"
              show-word-limit
              class="show-word-limit-padding"
              style="width: 96%"
            />
          </td>
        </tr>
      </table>
    </el-form>
    <!-- 委托合同选择弹框 -->
    <consignContractSelectDialog :dialog-data="dialogData" @consignContractInfo="consignContractInfo" />
    <!-- 建设项目选择弹框 -->
    <buildingProjectSelectDialog :dialog-data="dialogData" @buildingProjectInfo="buildingProjectInfo" />
    <!--入库专业选择弹框-->
    <LibraryTreeDialog ref="LibraryTreeDialog" :dialog-data="LibraryTreeDialogData" @LibraryTreeInfo="LibraryTreeInfo" />
    <!--所属二级公司-->
    <secondLevelOrganTree ref="secondLevelOrganTree" @secondaryLevelCheckedNodes="checkedNodes" />
    <!--获取基层公司-->
    <organTreeDialog ref="organTree" @call-back="callBackOrganTree" />
  </div>
</template>

<script>
/* 组件*/
import consignContractSelectDialog from '@/views/purchasePlan/consignContract/components/consignContractSelect-dialog'// 委托合同选择弹框
import buildingProjectSelectDialog from '@//views/purchasePlan/buildingProject/components/buildingProjectSelect-dialog'// 建设项目选择弹框
import LibraryTreeDialog from '@/views/common/tools/LibraryTree-dialog'// 入库专业选择弹框
import secondLevelOrganTree from '@views/common/user/organizationTree/secondLevelOrganTree-dialog'
import organTreeDialog from '@views/common/user/organizationTree/organTree-dialog'
import { bidProjectInfo } from './mixins/bidProject' // mixins混入公共方法
import { bidProjectCommon } from '../mixins/bidProjectCommon'
import { bidProjectBase } from './mixins/bidProjectBase'

export default {
  name: 'BidProjectBaseHNForm',
  components: {
    consignContractSelectDialog, // 委托合同选择弹框
    buildingProjectSelectDialog, // 建设项目选择弹框
    LibraryTreeDialog, // 入库专业选择弹框
    secondLevelOrganTree, // 所属二级公司
    organTreeDialog // 基层公司
  },
  mixins: [bidProjectCommon, bidProjectInfo, bidProjectBase],
  data() {
    return {
      // 入库专业-弹窗-展示/隐藏状态 true 展示/false 隐藏
      LibraryTreeDialogData: {
        dialog: false, // 弹窗状态
        selectCodes: []// 当前选中的专业Code
      },
      agentServiceFeeMethodDisabled: false // 招标服务费代理收取方式
    }
  },
  watch: {
    // 01 委托招标 委托合同带出不可编辑  00 自主招标可编辑
    'formData.tenderOrgMethod'(val) {
      if (val === '01') {
        this.agentServiceFeeMethodDisabled = true
      } else {
        this.agentServiceFeeMethodDisabled = false
      }
    }
  },
  methods: {
    // 选择入库专业按钮
    LibraryTreeChange() {
      this.LibraryTreeDialogData.dialog = true// 打开弹窗
      this.LibraryTreeDialogData.selectCodes = this.formData.libraryProfessionalId.split(',')// 入库专业选择状态回显
    },
    // 挑选入库专业信息
    LibraryTreeInfo(data) {
      if (data === 'clear') { // 清空
        this.formData.libraryProfessional = ''
        this.formData.libraryProfessionalId = ''
      } else { // 选择
        this.formData.libraryProfessional = data.labels // 入库专业
        this.formData.libraryProfessionalId = data.keys // 入库专业id
      }
    },
    // 选择/清空所属公司 00选择 01清空
    handelSecondaryLevelCompanyName(type) {
      if (type === '00') {
        this.$refs.secondLevelOrganTree.openDialog()
      } else {
        this.formData.secondaryLevelCompanyName = ''
        this.formData.secondaryLevelCompanyId = ''
      }
    },
    // 子组件返回已选所属公司
    checkedNodes(CheckedNodes) {
      this.formData.secondaryLevelCompanyName = CheckedNodes.companyName // 所属二级公司名称
      this.formData.secondaryLevelCompanyId = CheckedNodes.companyId // 所属二级公司id
    },
    // 选择/清空基层公司 00选择 01清空
    handleGrassRootsCompaniesName(type) {
      if (type === '00') {
        if (this.formData.secondaryLevelCompanyId) {
          this.$refs.organTree.open({
            title: '选择基层公司', // 弹框标题
            dialog: true, // 弹窗状态
            onlyOneSelected: true, // 是否只能选最后一级且是单选
            companyId: this.formData.secondaryLevelCompanyId
          })
        } else {
          this.$message.warning('请先选择所属二级公司')
        }
      } else {
        this.formData.grassRootsCompaniesName = '' // 基层公司名称
        this.formData.grassRootsCompaniesId = '' // 基层公司id
      }
    },
    // 子组件返回已选基层公司
    callBackOrganTree(data) {
      this.formData.grassRootsCompaniesName = data.labels //  基层公司名称
      this.formData.grassRootsCompaniesId = data.keys // 基层公司id
    }
  }
}
</script>

<style lang="less" scoped>

  /deep/.show-word-limit-padding{
    .el-input__inner{
      padding-right: 70px;
    }
  }
</style>
