<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="name">
                        <el-input v-model="projectParams.name" />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="工程编号" prop="num">
                        <el-input v-model="projectParams.num" />
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row :gutter="24">
                <el-col :span="12">
                    <el-form-item label="实施单位" prop="impUnit">
                      <treeselect
                        v-model="projectParams.impUnit"
                        :options="proSelRanges.pro_unit_range"
                        noChildrenText="没有数据了"
                        noOptionsText="没有数据"
                        noResultsText="没有搜索结果"
                        placeholder="请选择所属上级"
                      />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="工程类型" prop="projectType">
                        <el-select
                            v-model="projectParams.projectType"
                        >
                          <el-option
                            v-for="item in proSelRanges.pro_type_range"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                          ></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="24">
                <el-col :span="12">
                    <el-form-item label="工程状态" prop="stats">
                        <el-select
                          v-model="projectParams.stats"
                        >
                          <el-option
                            v-for="item in proSelRanges.pro_stats_range"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                          ></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="工程性质" prop="nature">
                        <el-select
                            v-model="projectParams.nature"
                        >
                          <el-option
                            v-for="item in proSelRanges.pro_nature_range"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                          ></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="24">
                <el-col :span="12">
                    <el-form-item label="项目经理" prop="manager">
                        <el-input v-model="projectParams.manager" />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="联系电话" prop="phone">
                        <el-input v-model="projectParams.phone" :maxlength="11" />
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="24">
                <el-col :span="12">
                    <el-form-item label="合同主体单位" prop="htzt">
                        <el-input v-model="projectParams.htzt" />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="项目部" prop="deptName">
                        <el-input v-model="projectParams.deptName" />
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="24">
                <el-col :span="12">
                    <el-form-item label="i8工程ID" prop="proId">
                        <el-input v-model="projectParams.proId" />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="关联i8工程" prop="isMatch">
                      <span
                        style="box-sizing: border-box; padding: 5px 10px; background-color: #00afff; color: #fff; border-radius: 10px"
                      >{{ projectParams.proId === null || projectParams.proId === undefined || projectParams.proId === '' ? '未 关 联' : '已 关 联' }}</span>
<!--                      <el-switch
                        v-model="projectParams.isMatch"
                        active-color="#13ce66"
                        inactive-color="#ff4949"
                        active-value="1"
                        inactive-value="0"
                      >
                      </el-switch>-->
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="24">
                <el-col :span="12">
                    <el-form-item label="备注" prop="remark">
                        <el-input type="textarea" v-model="projectParams.remark" :rows="4" />
                    </el-form-item>
                </el-col>
                <el-col :span="12"> </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 {
  addProjectApi,
  editProjectApi,
  queryProjectTypeApi,
  queryProjectStatusApi,
  queryProjectNatureApi
} from '@/api/base/project.js'
import {
  queryCompanyTreeApi
} from '@/api/base/customer'
import Treeselect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
export default {
    name: 'FormProject',
    props: {
        editParams: {
            type: Object,
            default: () => null,
        },
    },
    components: { Treeselect },
    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: {
                name: undefined, // 工程名称
                num: undefined, // 工程编号
                impUnit: undefined, // 实施单位
                projectType: undefined, //工程类型
                stats: undefined, // 工程状态
                nature: undefined, // 工程性质
                manager: undefined, // 项目经理
                phone: undefined, // 联系电话
                htzt: undefined, // 合同主体
                deptName: undefined, // 项目部
                proId: undefined, // i8工程id
                isMatch: undefined, // 是否关联i8工程
                remark: undefined, // 备注
            },
            // 工程下拉列表
            proSelRanges: {
              pro_unit_range: [], // 实施单位下拉列表
              pro_type_range: [], // 工程类型下拉列表
              pro_stats_range: [], // 工程状态下拉列表
              pro_nature_range: [], // 工程性质下拉列表
            },
            // 校验规则
            projectParamsRules: {
                name: [
                    {
                        required: true,
                        message: '请输入工程名称',
                        trigger: 'blur',
                    },
                ],
                impUnit: [
                    {
                        required: true,
                        message: '请选择实施单位',
                        trigger: 'blur',
                    },
                ],
                projectType: [
                    {
                        required: true,
                        message: '请选择工程类型',
                        trigger: 'blur',
                    },
                ],
                stats: [
                    {
                        required: true,
                        message: '请选择工程状态',
                        trigger: 'blur',
                    },
                ],
                nature: [
                    {
                        required: true,
                        message: '请选择工程性质',
                        trigger: 'blur',
                    },
                ],
            },
        }
    },
    methods: {
        /** 获取各类下拉框 */
        async getRanges() {
          // 获取实施单位树下拉框
          let unitRes = await queryCompanyTreeApi()
          this.proSelRanges.pro_unit_range = unitRes.data
          // 获取工程类型下拉框
          let typeRes = await queryProjectTypeApi()
          this.proSelRanges.pro_type_range = typeRes.data.data.map(item => {
            return {
              label: item.dictLabel,
              value: item.dictCode
            }
          })
          // 获取工程状态下拉框
          let statRes = await queryProjectStatusApi()
          this.proSelRanges.pro_stats_range = statRes.data.data.map(item => {
            return {
              label: item.dictLabel,
              value: item.dictCode
            }
          })
          // 获取工程性质下拉框
          let natureRes = await queryProjectNatureApi()
          this.proSelRanges.pro_nature_range = natureRes.data.data.map(item => {
            return {
              label: item.dictLabel,
              value: item.dictCode
            }
          })
        },
        /** 确认按钮 */
        onSubmit() {
            this.$refs.projectParamsRef.validate(valid => {
                if (valid) {
                    console.log('校验通过', this.projectParams, this.subSort)
                    // 1. 表单校验通过后调后台 Api
                    if(this.subSort === 1) {
                        addProjectApi(this.projectParams).then(res => {
                          console.log(res)
                          /* if(res.code === 200) {
                            this.$modal.msgSuccess('新增成功')
                          } else {
                            this.$modal.msgError(res.msg)
                          } */
                        }).catch(err => {
                          console.log(err)
                        })
                    } else if(this.subSort === 2) {
                        editProjectApi(this.projectParams).then(res => {
                          console.log(res)
                          /* if(res.code === 200) {
                            this.$modal.msgSuccess('修改成功')
                          } else {
                            this.$modal.msgError(res.message)
                          } */
                        }).catch(err => {
                          console.log(err)
                        })
                    }
                    // 2. 成功之后通知父组件关闭弹框
                    this.$emit('closeDialog', true)
                }
            })
        },
    },
}
</script>

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