<template>
    <!-- 工程管理 新增、编辑 表单组件 -->
    <div>
        <el-form
            label-width="100px"
            size="medium"
            ref="projectParamsRef"
            :model="projectParams"
            :rules="projectParamsRules"
        >
          <el-row type="flex" justify="space-between" :gutter="24">
            <el-col :span="12">
              <el-form-item label="工程名称" prop="proName">
                <el-select
                  v-model="projectParams.proName"
                  allow-create
                  clearable
                  filterable
                  placeholder="请选择"
                  @change="proNameChange"
                >
                  <el-option
                    v-for="item in projNameRange"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="所属项目部" prop="departId">
                <el-select
                  v-model="projectParams.departId"
                  clearable
                  filterable
                  placeholder="请选择"
                >
                  <el-option
                    v-for="item in deptRange"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row type="flex" justify="space-between" :gutter="24">
            <el-col :span="12">
              <el-form-item label="电压等级" prop="relId">
                <el-select
                  v-model="projectParams.relId"
                  clearable
                  filterable
                  allow-create
                  placeholder="请选择"
                >
                  <el-option
                    v-for="item in volRange"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="建管单位" prop="areaId">
                <el-select
                  v-model="projectParams.areaId"
                  clearable
                  filterable
                  placeholder="请选择"
                >
                  <el-option
                    v-for="item in provinceRange"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row type="flex" justify="space-between" :gutter="24">
            <el-col :span="12">
              <el-form-item label="工程类型" prop="proType">
                <el-select
                  v-model="projectParams.proType"
                  clearable
                  filterable
                  placeholder="请选择"
                >
                  <el-option
                    v-for="item in projTypeRange"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="工程状态" prop="proStatus">
                <el-select
                  v-model="projectParams.proStatus"
                  clearable
                  filterable
                  placeholder="请选择"
                >
                  <el-option
                    v-for="item in projStatusRange"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row type="flex" justify="space-between" :gutter="24">
            <el-col :span="12">
              <el-form-item label="经度" prop="lon">
                <el-input v-model="projectParams.lon" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="纬度" prop="lat">
                <el-input v-model="projectParams.lat" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-form-item>
              <el-button type="success" @click="onSubmit">确认</el-button>
              <el-button
                  @click="
                      () => {
                          this.$emit('closeDialog')
                      }
                  "
                  >取消</el-button
              >
          </el-form-item>
        </el-form>
    </div>
</template>

<script>
import {
  addProjApi,
  editProjApi,
  queryProjNameApi,
  queryDeptApi,
  queryVolLevelApi
} from '@/api/base/proj'
import {
  queryProvincesApi
} from '@/api/base/projDept'
export default {
    name: 'FormProject',
    props: {
        editParams: {
            type: Object,
            default: () => null,
        },
    },
    components: {  },
    created() {
      this.getRanges()
    },
    mounted() {
        console.log(this.editParams)
        if (this.editParams) {
            Object.assign(this.projectParams, this.editParams)
            this.subSort = 2
        } else {
            this.subSort = 1
        }
    },
    data() {
        return {
            subSort: '', // 提交类型：新增 1 / 修改 2
            projectParams: {
              proName: undefined, //工程名称
              departId: undefined, //所属项目部
              relId: undefined, // 电压等级
              areaId: undefined, // 建管单位
              proType: undefined, //工程类型
              proStatus: undefined, // 工程状态
              lon: undefined, // 经度
              lat: undefined, // 纬度
            },
            // 校验规则
            projectParamsRules: {
              proName: [
                  {
                      required: true,
                      message: '请输入工程名称',
                      trigger: 'blur',
                  },
              ],
              departId: [
                {
                  required: true,
                  message: '请输入所属项目部',
                  trigger: 'blur',
                },
              ],
              relId: [
                {
                  required: true,
                  message: '请输入电压等级',
                  trigger: 'blur',
                },
              ],
              areaId: [
                {
                  required: true,
                  message: '请输入建管单位',
                  trigger: 'blur',
                },
              ],
              proType: [
                {
                  required: true,
                  message: '请输入工程类型',
                  trigger: 'blur',
                },
              ],
              proStatus: [
                {
                  required: true,
                  message: '请输入工程状态',
                  trigger: 'blur',
                },
              ],
              lon: [
                {
                  required: true,
                  message: '请输入经度',
                  trigger: 'blur',
                },
              ],
              lat: [
                {
                  required: true,
                  message: '请输入纬度',
                  trigger: 'blur',
                },
              ],
            },
            // 各类下拉
            projNameRange: [],
            deptRange: [],
            volRange: [],
            projStatusRange: [
              { label: '施工', value: '0' },
              { label: '暂停', value: '1' },
            ],
            projTypeRange: [
              { label: '变电工程', value: '1' },
              { label: '线路工程', value: '2' },
              { label: '电缆工程', value: '3' },
            ],
            provinceRange: [],
            // 手机号正则
            phoneReg: /^(?:(?:\+|00)86)?1[3-9]\d{9}$/
        }
    },
    methods: {
        /** 获取各类下拉框 */
        async getRanges() {
          // 获取工程名称下拉选
          let nameRes = await queryProjNameApi()
          this.projNameRange = nameRes.data.map(item => {
            return {
              label: item.proName,
              value: item.proName,
              departId: item.departId,
              relId: item.relName,
              areaId: item.areaId,
              proType: item.proTypeName,
              proStatus: item.proStatusName,
              lon: item.lon,
              lat: item.lat
            }
          })
          // 获取省份下拉选
          let provinceRes = await queryProvincesApi()
          this.provinceRange = provinceRes.data.map(item => {
            return {
              label: item.areaName,
              value: item.areaId
            }
          })
          // 获取所属项目部下拉选
          let deptRes = await queryDeptApi({
            isAll: 0
          })
          this.deptRange = deptRes.data.map(item => {
            return {
              label: item.departName,
              value: item.id,
            }
          })
          // 获取电压等级下拉选
          let volRes = await queryVolLevelApi({
            dictType: 'rel_level'
          })
          this.volRange = volRes.data.map(item => {
            return {
              label: item.dictLabel,
              value: item.dictCode
            }
          })
        },
        /** 改变树结构 */
        changeTree(leaf) {
          leaf.map(item => {
            item.value = item.id
            if(item.children) {
              this.changeTree(item.children)
            }
          })
          return leaf
        },
        /** 工程名称改变 */
        proNameChange(e) {
          this.projNameRange.forEach(item => {
            if(e === item.label) {
              console.log(e, item)
              this.projectParams.departId = item.departId
              this.projectParams.relId = item.relId
              this.projectParams.areaId = item.areaId
              this.projectParams.proType = item.proType
              this.projectParams.proStatus = item.proStatus
              this.projectParams.lon = item.lon
              this.projectParams.lat = item.lat
            }
          })
        },
        /** 级联选择器改变 */
        handleCas(e) {
          this.projectParams.impUnit = e[e.length - 1]
        },
        /** 确认按钮 */
        onSubmit() {
            this.$refs.projectParamsRef.validate(valid => {
                if (valid) {
                    console.log('校验通过', this.projectParams, this.subSort)
                    // 1. 表单校验通过后调后台 Api
                    if(this.subSort === 1) {
                      addProjApi(this.projectParams).then(res => {
                        this.$modal.msgSuccess('操作成功')
                        // 2. 成功之后通知父组件关闭弹框
                        this.$emit('closeDialog', true)
                      }).catch(err => {
                        console.log(err)
                      })
                    } else if(this.subSort === 2) {
                      editProjApi(this.projectParams).then(res => {
                        this.$modal.msgSuccess('操作成功')
                        // 2. 成功之后通知父组件关闭弹框
                        this.$emit('closeDialog', true)
                      }).catch(err => {
                        console.log(err)
                      })
                    }
                }
            })
        },
    },
}
</script>

<style scoped>
::v-deep .el-select {
    width: 100%;
}
::v-deep .el-form-item__label{
  font-weight: normal;
}
</style>
