<!--
 * @description: 交通信息页面
 * @author: tangQing
 * @date: 2022-12-15
!-->
<template>
  <div>
    <div>
      <div>
        <div style="width: 90%;margin-left: 4%;">
          <el-form ref="form" :model="formData" :rules="rules" label-width="180px">
            <el-row>
              <el-col>
                <el-row>
                  <el-col>
                    <el-form-item ref="planStartTime" label="计划开工时间" prop="planStartTime">
                      <!-- <gx-input
                        v-model.trim="formData.planStartTime"
                        style="width: 570px"
                        gx-maxlength="varchar1000"
                        placeholder="最多允许输入1000个字符"
                      /> -->
                      <el-date-picker
                        v-model="formData.planStartTime"
                        :default-time="defaultTimeDateTime"
                        :value-format="elValueSaveFormat"
                        :clearable="false"
                        :format="elValueFormat"
                        type="datetime"
                        placeholder="选择计划开工时间"
                      />
                    </el-form-item>
                  </el-col>
                  <el-col>
                    <el-form-item ref="planEndTime" label="计划交工时间" prop="planEndTime">
                      <!-- <gx-input
                        v-model.trim="formData.planEndTime"
                        style="width: 570px"
                        gx-maxlength="varchar1000"
                        placeholder="最多允许输入1000个字符"
                      /> -->
                      <el-date-picker
                        v-model="formData.planEndTime"

                        :default-time="defaultTimeDateTime"
                        :value-format="elValueSaveFormat"
                        :clearable="false"
                        :format="elValueFormat"
                        type="datetime"
                        placeholder="选择计划开工时间"
                      />
                    </el-form-item>
                  </el-col>

                  <el-col>
                    <el-form-item ref="trafficProjectType" label="交通项目类别" prop="trafficProjectType">
                      <el-select
                        v-model="formData.trafficProjectType"
                        style="width: 570px"
                        placeholder="请选择"
                      >
                        <el-option
                          v-for="(item,index) in trafficProjectTypeist"
                          :key="index"
                          :label="item.typename"
                          :value="item.typecode"
                        />
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col>
                    <el-form-item ref="trafficTechnicalLevel" label="交通项目技术等级" prop="trafficTechnicalLevel">
                      <el-select
                        v-model="formData.trafficTechnicalLevel"
                        style="width: 570px"
                        placeholder="请选择"
                      >
                        <el-option
                          v-for="(item,index) in trafficTechnicalLevelst"
                          :key="index"
                          :label="item.typename"
                          :value="item.typecode"
                        />
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col>
                    <el-form-item ref="trafficMileage" label="交通项目里程（公里)" prop="trafficMileage">
                      <gx-input
                        v-model="formData.trafficMileage"
                        style="width: 570px"
                        type="number"
                        gx-maxlength="varchar1000"
                        placeholder="最多允许输入1000个字符"
                      />
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-col>
            </el-row>
          </el-form>
        </div>
      </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>
import { saveTenderProjectTrafficInfo } from '@/api/bidding/biddingProject'// 获取信息
import { tenderProjectMixin } from './../mixins/tenderProjectMixin'// 字典信息

export default {
  mixins: [tenderProjectMixin],
  data() {
    return {
      confirmLoading: false, // 暂存、下一步Loding
      tenderId: this.$route.query.id, // 项目Id
      formData: {
        id: this.$route.query.id, // 项目Id
        planStartTime: '', // 计划开工时间
        planEndTime: '', // 计划交工时间
        trafficProjectType: '', // 交通项目类别
        trafficTechnicalLevel: '', // 交通项目技术等级
        trafficMileage: '' // 交通项目里程
      },
      rules: {
        trafficMileage: [{ required: true, message: '请输入', trigger: 'blur' }], // 交通项目里程
        planEndTime: [{ required: true, message: '请选择', trigger: 'change' }], // 计划交工时间
        planStartTime: [{ required: true, message: '请选择', trigger: 'change' }], // 计划开工时间
        trafficProjectType: [{ required: true, message: '请选择', trigger: 'change' }], // 交通项目类别
        trafficTechnicalLevel: [{ required: true, message: '请选择', trigger: 'change' }] // 交通项目技术等级
      },
      // 交通项目类别
      trafficProjectTypeist: [
        { typename: '公路', typecode: '00' },
        { typename: '水运', typecode: '01' },
        { typename: '地方铁路', typecode: '02' },
        { typename: '跨区客运线路', typecode: '03' },
        { typename: '科技项目', typecode: '04' }
      ],
      // 交通项目技术等级
      trafficTechnicalLevelst: [
        { typename: '高速公路', typecode: '00' },
        { typename: '港口', typecode: '01' },
        { typename: '国道', typecode: '02' },
        { typename: '省道', typecode: '03' },
        { typename: '农村公路', typecode: '04' },
        { typename: '水运', typecode: '05' },
        { typename: '公交线路', typecode: '06' },
        { typename: '地方铁路', typecode: '06' }
      ]
    }
  },
  watch: {
    baseTenderProjectInfo: {
      handler: function() {
        console.log(this.baseTenderProjectInfo)
        this.formData.planStartTime = this.baseTenderProjectInfo.planStartTime// 计划开工时间
        this.formData.planEndTime = this.baseTenderProjectInfo.planEndTime // 计划交工时间
        this.formData.trafficProjectType = this.baseTenderProjectInfo.trafficProjectType // 交通项目类别
        this.formData.trafficTechnicalLevel = this.baseTenderProjectInfo.trafficTechnicalLevel // 交通项目技术等级
        this.formData.trafficMileage = this.baseTenderProjectInfo.trafficMileage // 交通项目里程
      },
      deep: true
    }
  },
  created() {
  },
  methods: {
    // 下一步
    nextStep(formName) {
      this.confirmLoading = true// btnLoding
      this.$refs[formName].validate((valid, field) => {
        if (valid) { // 校验通过
          saveTenderProjectTrafficInfo(this.formData).then((response) => {
            // route携带参数
            const pathData = {
              ...this.$route.query
            }
            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 上一步
    }
  }
}
</script>
<style scoped></style>
