<template>
  <view class="project-add cc-page-wrap">
    <!-- 项目新增表单卡片 -->
    <view class="cc-card form-card" ref="form">
      <view class="form-title">基本信息</view>
      <view class="form-item">
        <text class="form-label">项目名称</text>
        <view class="form-content">
          <input v-model="form.projectName" class="form-input" placeholder="请输入项目名称" />
        </view>
      </view>
      <view class="form-item">
        <text class="form-label">行政区划</text>
        <view class="form-content">
          <input v-model="form.adcd" class="form-input" placeholder="请选择行政区划" disabled/>
          <view style="position: relative;">
            <view class="form-select" @click="handleOpenSelect">
              选择
            </view>
          </view>
        </view>
      </view>

      <view class="form-item">
        <text class="form-label">项目编码</text>
        <view class="form-content">
          <input v-model="form.proCode" class="form-input" placeholder="请输入项目编码" />
        </view>
      </view>

      <view class="form-item">
        <text class="form-label">项目种类</text>
        <view class="form-content">
          <input v-model="form.projectKinds" class="form-input" placeholder="请选择项目种类" disabled/>
          <picker mode="selector" :range="projectKindsOptions" @change="onProjectCategoryPickerChange">
            <view class="form-select">
              选择
            </view>
          </picker>
        </view>
      </view>

      <view class="form-item">
        <text class="form-label">项目法人单位</text>
        <view class="form-content">
          <input v-model="form.projectLegalPerson" class="form-input" placeholder="请输入项目法人单位" />
        </view>
      </view>

      <view class="form-item">
        <text class="form-label">项目负责人</text>
        <view class="form-content">
          <input v-model="form.projectSuperintendent" class="form-input" placeholder="请输入项目负责人" />
        </view>
      </view>

      <view class="form-item">
        <text class="form-label">项目负责人电话</text>
        <view class="form-content">
          <input v-model="form.projectLegalPhone" class="form-input" placeholder="请输入项目负责人电话" type="number" />
        </view>
      </view>

      <view class="form-item">
        <text class="form-label">单位法定代表人</text>
        <view class="form-content">
          <input v-model="form.projectUnitLegal" class="form-input" placeholder="请输入单位法定代表人" />
        </view>
      </view>

      <view class="form-item">
        <text class="form-label">单位法定代表人电话</text>
        <view class="form-content">
          <input v-model="form.projectUnitLegalPhone" class="form-input" placeholder="请输入单位法定代表人电话" type="number" />
        </view>
      </view>

      <view class="form-item">
        <text class="form-label">项目类型</text>
        <view class="form-content">
          <input v-model="form.projectType" class="form-input" placeholder="请选择项目种类" disabled/>
          <picker mode="selector" :range="projectTypes" @change="onProjectTypePickerChange">
            <view class="form-select">
              选择
            </view>
          </picker>
        </view>
      </view>
      
      <view class="form-item">
        <text class="form-label">工程等别</text>
        <view class="form-content">
          <input v-model="form.engineeringGrade" class="form-input" placeholder="请选择工程等别" disabled/>
          <picker mode="selector" :range="engineeringGradeOptions" @change="onProjectLevelPickerChange">
            <view class="form-select">
              选择
            </view>
          </picker>
        </view>
      </view>

      <view class="form-item">
        <text class="form-label">工程用途</text>
        <view class="form-content">
          <input v-model="form.engineeringPurposes" class="form-input" placeholder="请选择工程用途" disabled/>
          <picker mode="selector" :range="engineeringPurposesOptions" @change="onProjectPurposesPickerChange">
            <view class="form-select">
              选择
            </view>
          </picker>
        </view>
      </view>

      <view class="form-item">
        <text class="form-label">项目建设地址</text>
        <view class="form-content">
          <input v-model="form.constructionAddress" class="form-input" placeholder="请输入项目建设地址" />
        </view>
      </view>

      <view class="form-item">
        <text class="form-label">建设模式</text>
        <view class="form-content">
          <input v-model="form.constructionMode" class="form-input" placeholder="请选择建设模式" disabled/>
          <picker mode="selector" :range="constructionModeOptions" @change="onProjectModesPickerChange">
            <view class="form-select">
              选择
            </view>
          </picker>
        </view>
      </view>

      <view class="form-item">
        <text class="form-label">建设性质</text>
        <view class="form-content">
          <input v-model="form.constructionNature" class="form-input" placeholder="请选择建设性质" disabled/>
          <picker mode="selector" :range="constructionNatureOptions" @change="onProjectBuildTypesPickerChange">
            <view class="form-select">
              选择
            </view>
          </picker>
        </view>
      </view>

      <view class="form-item">
        <text class="form-label">建设内容</text>
        <view class="form-content">
          <textarea v-model="form.constructionContent" class="form-input" placeholder="请输入建设内容" :rows="3"></textarea>
        </view>
      </view>

      <view class="form-item">
        <text class="form-label">中央资金（万元）</text>
        <view class="form-content">
          <input v-model="form.centralArrangedFunds" class="form-input" placeholder="请输入中央资金（万元）" type="number" />
        </view>
      </view>

      <view class="form-item">
        <text class="form-label">中央资金资金比例（%）</text>
        <view class="form-content">
          <input v-model="form.centralArrangedFundsRate" class="form-input" placeholder="请输入中央资金资金比例（%）" type="number"/>
        </view>
      </view>

      <view class="form-item">
        <text class="form-label">省级资金（万元）</text>
        <view class="form-content">
          <input v-model="form.provincialFunding" class="form-input" placeholder="请输入省级资金（万元）" type="number" />
        </view>
      </view>

      <view class="form-item">
        <text class="form-label">省级资金比例（%）</text>
        <view class="form-content">
          <input v-model="form.provincialFundingRate" class="form-input" placeholder="请输入省级资金比例（%）" type="number" />
        </view>
      </view>

      <view class="form-item">
        <text class="form-label">地市资金（万元）</text>
        <view class="form-content">
          <input v-model="form.cityLevelFunds" class="form-input" placeholder="请输入地市资金（万元）" type="number" />
        </view>
      </view>

      <view class="form-item">
        <text class="form-label">地市资金比例（%）</text>
        <view class="form-content">
          <input v-model="form.cityLevelFundsRate" class="form-input" placeholder="请输入地市资金比例（%）" type="number" />
        </view>
      </view>

      <view class="form-item">
        <text class="form-label">区县资金（万元）</text>
        <view class="form-content">
          <input v-model="form.countyLevelFunds" class="form-input" placeholder="请输入区县资金（万元）" type="number" />
        </view>
      </view>

      <view class="form-item">
        <text class="form-label">区县资金比例（%）</text>
        <view class="form-content">
          <input v-model="form.cityLevelFundsRate" class="form-input" placeholder="请输入区县资金比例（%）" type="number" />
        </view>
      </view>

      <view class="form-item">
        <text class="form-label">乡镇及群众自筹和其他投资（万元）</text>
        <view class="form-content">
          <input v-model="form.townshipInvestments" class="form-input" placeholder="请输入乡镇及群众自筹和其他投资（万元）" type="number" />
        </view>
      </view>

      <view class="form-item">
        <text class="form-label">乡镇及群众自筹和其他投资比例（%）</text>
        <view class="form-content">
          <input v-model="form.townshipInvestmentsRate" class="form-input" placeholder="请输入乡镇及群众自筹和其他投资比例（%）" type="number" />
        </view>
      </view>

      <view class="form-item">
        <text class="form-label">是否省重大水利工程项目</text>
        <view class="form-content">
          <input v-model="form.isMajorProject" class="form-input" placeholder="请选择是否省重大水利工程项目" disabled/>
          <picker mode="selector" :range="isMajorProjectOptions" @change="onImportProjectPickerChange">
            <view class="form-select">
              选择
            </view>
          </picker>
        </view>
      </view>
    </view>

    <view v-if="operateType==='examine'||operateType==='examineSee'" class="cc-card form-card" style="margin-top: 16px;">
      <view class="form-title">审核信息</view>
      <view class="form-item">
        <text class="form-label">审批人</text>
        <view class="form-content">
          <input v-model="checkForm.checkPerson" class="form-input" placeholder="请输入审批人" />
        </view>
      </view>
      <view class="form-item">
        <text class="form-label">审批时间</text>
        <view class="form-content">
          <input v-model="checkForm.checkTime" class="form-input" placeholder="请输入审批时间" />
        </view>
      </view>
      <view class="form-item">
        <text class="form-label">审批意见</text>
        <view class="form-content">
          <textarea v-model="checkForm.checkOpinion" class="form-input" placeholder="请输入审批意见" rows="3"></textarea>
        </view>
      </view>
    </view>

    <view v-if="operateType!=='see' && operateType!=='examineSee'" class="cc-operation-row operation-row">
      <view v-if="operateType==='edit'" class="buttons-group">
        <view class="button default-button" @click="handleSaveProject()">保存</view>
      </view>
      <view v-else-if="operateType==='add'" class="buttons-group">
        <view class="button primary-button" @click="handleSaveProject()">上报</view>
        <view class="button default-button" @click="handleSaveProjectDraft()">暂存</view>
      </view>
      <view v-else-if="operateType==='examine'" class="buttons-group">
        <view class="button primary-button" @click="handleSubmitCheck()">确定</view>
        <view class="button default-button" @click="handleCancelCheck()">取消</view>
      </view>
    </view>

    <!-- 省市区选项 -->
    <cityPicker :column="column" :default-value="defaultValue" :mask-close-able="maskCloseAble" @confirm="confirm" @cancel="cancel" :visible="visible"/>
  </view>
</template>

<script>
import { projectAddApi } from '@/api/system/project'
export default {
  data() {
    return {
      form: {
        id: null,
        isKeyProject: null,
        isPierceProject: null,
        isMajor: null,
        projectName: '',
        unitLeader: null,
        projectLegalPerson: '',
        projectLegalUnit: null,
        projectLegalPhone: '',

        projectSuperintendent: '',
        projectSuperintendentPhone: null,
        projectUnitLegal: '',
        projectUnitLegalPhone: '',

        engineeringGrade: '',
        engineeringPurposes: '',
        workCategory: null,
        constructionAddress: '',
        constructionMode: '',
        constructionNature: null,
        constructionContent: '',
        adcd: '',
        basin: null,
        projectType: '',
        // fundingSource: null,

        centralArrangedFunds: '',
        centralArrangedFundsRate: '',
        provincialFunding: '',
        provincialFundingRate: '',
        cityLevelFunds: '',
        cityLevelFundsRate: '',
        countyLevelFunds: '',
        countyLevelFundsRate: '',
        townshipInvestments: '',
        townshipInvestmentsRate: '',

        isMajorProject: '',
        investmentSubject: null,
        constructionPhase: null,
        fundingNumber: null,
        proCode: '',
        proNo: null,
        createUid: null,
        createTime: null,
        updateUid: null,
        updateTime: null,
        owerDept: null,
        pointLatitudeLongitudeList: null,
        lineLatitudeLongitudeList: null,
        allLatitudeLongitudeList: null,
        projectKinds: '',
      },
      projectTypes: ['建筑', 'IT', '教育', '制造业'], // 可根据实际项目类型进行扩展
      projectKindsOptions: [],
      engineeringGradeOptions: [],
      // 工程用途字典
      engineeringPurposesOptions: [],
      // 建设模式字典
      constructionModeOptions: [],
      // 建设性质字典
      constructionNatureOptions: [],
      isMajorProjectOptions: [],
      operateType: '',
      checkForm: {
        checkPerson: '',
        checkTime: '',
        checkOpinion: ''
      },

      // 省市区选项属性
      visible: false,
      maskCloseAble: true,
      str: '',
      defaultValue: '420103',
      column: 3,
    };
  },

  created () {
    this.getDicts("type_of_project").then((response) => {
      this.projectKindsOptions = response.data;
    })
    this.getDicts("engineering_grade").then((response) => {
      this.engineeringGradeOptions = response.data;
    })
    this.getDicts("project_purposes").then((response) => {
      this.engineeringPurposesOptions = response.data;
    })
    this.getDicts("Construction_mode").then((response) => {
      this.constructionModeOptions = response.data;
    })
    this.getDicts("CONSTRUCTION_NATURE").then((response) => {
      this.constructionNatureOptions = response.data;
    })
    this.getDicts("whether").then((response) => {
      this.isMajorProjectOptions = response.data;
    })
  },

  methods: {
    // 处理选择行政区划的变化
    onRegionChange(e) {
      this.form.region = e.detail.value;
    },
    // 提交表单
    submitForm() {
      // 在这里处理表单提交的逻辑
      console.log("提交的表单数据：", this.form);
      // 你可以进行数据校验，提交到后端等操作
    },
    // 展开省市区选项
    handleOpenSelect() {
      this.visible = true
    },
    cancel () {
      this.visible = false
    },
    confirm (val) {
      console.log(val)
      this.str = JSON.stringify(val)
      this.form.area = val.name
      this.visible = false
    },
    // 监听项目类型切换
    onProjectTypePickerChange(event) {
      this.form.projectType = this.projectTypes[event.detail.value]
    },
    onProjectCategoryPickerChange(event) {
      this.form.projectKinds = this.projectKindsOptions[event.detail.value]
    },
    onProjectLevelPickerChange(event) {
      this.form.engineeringGrade = this.engineeringGradeOptions[event.detail.value]
    },
    onProjectPurposesPickerChange(event) {
      this.form.engineeringPurposes = this.engineeringPurposesOptions[event.detail.value]
    },
    onProjectModesPickerChange(event) {
      this.form.constructionMode = this.constructionModeOptions[event.detail.value]
    },
    onProjectBuildTypesPickerChange(event) {
      this.form.constructionNature = this.constructionNatureOptions[event.detail.value]
    },
    onImportProjectPickerChange(event) {
      this.form.isMajorProject = this.isMajorProjectOptions[event.detail.value]
    },

    // 判断必填项是否填写
    judgeAttrWrite() {
      // const requiredFields = ['projectName', 'adcd', 'proCode', 'projectKinds', 'projectLegalPerson', 'projectSuperintendent', 'projectLegalPhone', 'projectUnitLegal', 'projectUnitLegalPhone', 'projectType', 'engineeringGrade', 'engineeringPurposes', 'constructionAddress', 'constructionMode', 'constructionContent', 'centralArrangedFunds', 'centralArrangedFundsRate', 'provincialFunding', 'provincialFundingRate', 'cityLevelFunds', 'cityLevelFundsRate', 'countyLevelFunds', 'cityLevelFundsRate', 'townshipInvestments', 'townshipInvestmentsRate', 'isMajorProject'];
      // const isValid = requiredFields.every(field => Boolean(this.myObject[field]));

      // if (!isValid) {
      //   return false
      // } else {
      //   return true
      // }
    },

    // 新增项目
    handleSaveProject() {
      if (!this.judgeAttrWrite()) {
        return
      }
      uni.showLoading({
        title: '加载中...',
        mask: true
      })
      projectAddApi(this.form).then(res => {
        uni.showToast({
          title: `操作成功`,
          icon: 'none'
        })
        uni.navigateTo({
          url: `/pages/project/list`
        });
      })
    },
    handleSaveProjectDraft() {
      uni.showToast({
        title: `新增项目草稿成功`,
        icon: 'none'
      });
      console.log(this.form)
    },
    handleSubmitCheck() {
      uni.showToast({
        title: `提交审核成功`,
        icon: 'none'
      });
    },
    handleCancelCheck() {
      uni.navigateBack()
    }
  },
  mounted() {
    // 在这里进行组件初始化的操作
    this.operateType = this.$route.query.operateType;
  }
};
</script>

<style lang="scss" scoped>
.project-add {
  padding: 16px 20px 96px 20px;
  .form-card {
    margin-bottom: 0;
  }
  // .form-card {
  //   background-color: white;
  //   padding: 20px;
  //   border-radius: 10px;
  //   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  //   .form-title {
  //     font-size: 18px;
  //     padding-bottom: 16px;
  //   }
  //   .form-item {
  //     .form-label {
  //       font-size: 14px;
  //       color: #595959;
  //       margin-bottom: 6px;
  //       display: block;
  //     }
  //     margin-bottom: 20px;
  //     .form-content {
  //       position: relative;
  //       padding-bottom: 16px;
  //       border-bottom: 1px solid #f0f0f0;
  //       .form-input {
  //         width: 100%;
  //         height: 30px;
  //         border-radius: 5px;
  //         font-size: 14px;
  //         color: #333;
  //       }
  //       .form-select {
  //         position: absolute;
  //         bottom: 4px;
  //         right: 0;
  //         color: #00B39D;
  //       }
  //     }
  //   }
  // }
}



</style>
