<template>
  <div>
    <el-dialog
      :title="title"
      :visible.sync="showFormDia"
      width="85%"
      :before-close="handleClose"
    >
      <el-form
        ref="formInfo"
        :rules="rules"
        :model="params"
        label-width="150px"
      >
        <el-row>
          <el-col :span="8">
            <el-form-item prop="name" label="姓名：">
              <el-input
                size="mini"
                placeholder="请输入姓名"
                v-model="params.name"
              ></el-input>
            </el-form-item>
          </el-col>
          
          <el-col :span="8">
                <el-form-item label="工程类型：" prop="projectType">
                  <el-select
                    @change="changetype"
                    style="width: 100%"
                    size="mini"
                    v-model="params.projectType"
                    multiple
                    clearable
                    placeholder="请选择工程类型"
                  >
                    <el-option
                      v-for="item in projectTypes"
                      :key="item.id"
                      :label="item.name"
                      :value="item.value"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
          <el-col :span="8">
            <el-form-item label="单位：" prop="dept">
              <el-input
                size="mini"
                placeholder="请输入单位"
                v-model="params.dept"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="职务：" prop="position">
              <el-input
                size="mini"
                placeholder="请输入职务"
                v-model="params.position"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="移动电话：" prop="mobilePhone">
              <el-input
                maxlength="11"
                size="mini"
                oninput="value=value.replace(/[^\d.]/g,'')"
                placeholder="请输入移动电话"
                v-model="params.mobilePhone"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="责任人描述：" prop="dutyMemo">
              <el-input
                size="mini"
                placeholder="组织责任人描述"
                v-model="params.dutyMemo"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row> </el-row>
        <el-form-item label="备注：" prop="memo">
          <el-input
            type="textarea"
            :autosize="{minRows: 3, maxRows: 4}"
            placeholder="请输入内容"
            v-model="params.memo"
          >
          </el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="goInfo">保 存</el-button>
        <el-button @click="handleClose">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import {mapState} from 'vuex'
import perSon from '@/api/perSon.js'
import req from '@/request.js'
// import { addCodeInfo,getCodeInfoById,editCodeInfo } from "@/api/cold-chain-info";
export default {
  name: 'FormDialog',
  props: {
    showFormDia: {
      type: Boolean,
      default: false,
    },
    title: {
      type: String,
      default: '',
    },
    pId: {
      type: String,
      default: '',
    },
    addId: {
      type: String,
      default: '',
    },
  },
  data() {
    return {
      params: {
        orgId: '',
        dept: '',
        dutyMemo: '',
        memo: '',
        mobilePhone: '',
        name: '',
        position: '',
        projectType:null,//工程类型
      },
        parentIds: [], //组织树数组
        projectTypes:[],//工程类型下拉
      
    
      rules: {
        orgId: [
          {
            required: true,
            message: '请选择责任人组织',
            trigger: 'blur',
          },
        ],
        name: [{required: true, message: '请输入姓名', trigger: 'blur'}],
      },
    }
  },
  created() {
    this.getSysDict()
    this.getDetailInfo()
    // 组织树查询
    perSon.getPerson({}, (res) => {
      this.parentIds = res.value;
    })
  },
  methods: {
    changetype(val) {
      if (val) {
        this.params.projectType = val
      } else {
        this.params.projectType = null
      }
    },
    // 根据ID查询
    getDetailInfo() {
      if (this.title === '修改') {
        perSon.getPerson({}, (res) => {
          this.parentIds = res.value
        })
        perSon.detailId(this.pId, (res) => {
          this.params = res.value; 
          this.params.projectType = res.value.projectType.split(",")
        })
      }
      if(this.title==='新增'){
        this.params.orgId=this.addId;        
      }
    },
    onparentIds(val) {
      if (val) {
        this.params.orgId = val.pop()
      }
    },

 
    handleClose() {
      this.params = {
        orgId: '',
        dept: '',
        dutyMemo: '',
        memo: '',
        mobilePhone: '',
        name: '',
        position: '',
        projectType:null,//工程类型

      }
      this.$emit('closeFormDiao')
    },
    goInfo(e) {
      this.$refs.formInfo.validate((valid) => {
        if (valid) {
          if (this.title === '新增') {
            this.params.projectType = String(this.params.projectType)
            perSon.addSave(this.params, (response) => {
              if (response.state) {
                this.$notify({
                  type: 'success',
                  message: '新增成功',
                  duration: 2000,
                  // offset: 80
                })
                this.$emit('closeFormDiao')
                this.$emit('refList')
              } else {
                this.$message.success(response.message)
              }
            })
          }
          if (this.title === '修改') {
            this.params.projectType = String(this.params.projectType)
            perSon.upData(this.params, (response) => {
              if (response.state) {
                this.$notify({
                  type: 'success',
                  message: '修改成功',
                  duration: 2000,
                  // offset: 80
                })
                this.$emit('closeFormDiao')
                this.$emit('refList')
              } else {
                
              }
            })
          }
        } else {
          return false
        }
      })
    },
     //获取字典数据
    getSysDict() {
      let portal = window.context.portal
      return new Promise((resolve, reject) => {
        req.post(portal + '/sys/sysDictionary/v1/queryAllDictItems').then(
          (response) => {
            resolve(response.data)
      this.projectTypes = response.data.gclx
      console.log(this.projectTypes);
          },
          (error) => {
            reject(error)
          }
        )
      })
    },
    getRowKey(row) {
      return row.id
    },
  },
}
</script>
<style lang="scss" scoped>
// ::v-deep .el-input__inner {
//   border: 1px solid orange;
// }
// ::v-deep .el-textarea__inner {
//   border: 1px solid orange;
// }
</style>
