<template>
  <div style="display:flex">
    <div>
      <el-form ref="form" :model="form" label-width="80px" :rules="rules" size="medium">
        <el-row>
          <el-col :span="6">
            <el-form-item label="单位名称" prop="customerOrgId">
              <el-cascader v-model="form.customerOrgId" :options="patientRegister.customerOrgTreeAll"
                :props="{ checkStrictly: true, expandTrigger: 'hover', ...customerOrg.treeprops }" :show-all-levels="false"
                disabled>
              </el-cascader>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="条码号" prop="patientRegisterNo">
              <el-input v-model="form.patientRegisterNo" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="档案号" prop="patientId">
              <el-input v-model="form.patientId" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6" />
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-form-item label="姓名" prop="patientName">
              <el-input v-model="form.patientName"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="性别" prop="sexId">
              <el-select v-model="form.sexId" placeholder="请选择">
                <el-option v-for="item in dict.sex" :key="item.id" :label="item.displayName" :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="体检次数" prop="medicalTimes">
              <el-input v-model="form.medicalTimes" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6" />
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-form-item label="年龄" prop="age">
              <el-input v-model="form.age"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="出生日期" prop="birthDate">
              <el-date-picker v-model="form.birthDate" type="date" placeholder="出生日期" style="width:135px;" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="婚姻状况" prop="maritalStatusId">
              <el-select v-model="form.maritalStatusId" placeholder="请选择">
                <el-option v-for="item in dict.maritalStatus" :key="item.id" :label="item.displayName" :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6" />
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-form-item label="体检类别" prop="medicalTypeId">
              <el-select v-model="form.medicalTypeId" placeholder="请选择">
                <el-option v-for="item in dict.medicalType" :key="item.id" :label="item.displayName" :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="6">
            <el-form-item label="工卡号" prop="jobCardNo">
              <el-input v-model="form.jobCardNo"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="体检卡号" prop="medicalCardNo">
              <el-input v-model="form.medicalCardNo"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="职务" prop="jobPost">
              <el-input v-model="form.jobPost"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="职称" prop="jobTitle">
              <el-input v-model="form.jobTitle"></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="6">
            <el-form-item label="介绍人" prop="salesman">
              <el-input v-model="form.salesman"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="性激素期" prop="sexHormoneTermId">
              <el-select v-model="form.sexHormoneTermId" placeholder="请选择" filterable clearable>
                <el-option v-for="item in dict.sexHormoneTerm" :key="item.id" :label="item.displayName" :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="是否VIP" prop="isVip">
              <el-radio v-model="form.isVip" label="Y">是</el-radio>
              <el-radio v-model="form.isVip" label="N">否</el-radio>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>

          <el-col :span="6">
            <el-form-item label="电话随访" prop="isPhoneFollow">
              <el-radio v-model="form.isPhoneFollow" label="Y">是</el-radio>
              <el-radio v-model="form.isPhoneFollow" label="N">否</el-radio>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="隐藏姓名" prop="isNameHide">
              <el-radio v-model="form.isNameHide" label="Y">是</el-radio>
              <el-radio v-model="form.isNameHide" label="N">否</el-radio>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="是否锁住" prop="isLock">
              <el-radio v-model="form.isLock" label="Y">是</el-radio>
              <el-radio v-model="form.isLock" label="N">否</el-radio>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="体检开始" prop="isMedicalStart">
              <el-radio v-model="form.isMedicalStart" label="Y" disabled>是</el-radio>
              <el-radio v-model="form.isMedicalStart" label="N" disabled>否</el-radio>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="体检中心" prop="organizationUnitId">
              <el-select v-model="form.organizationUnitId" placeholder="请选择" filterable>
                <el-option v-for="item in dict.organization" :key="item.id" :label="item.displayName" :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="分组" prop="customerOrgGroupId">
              <el-select v-model="form.customerOrgGroupId" placeholder="请选择" filterable clearable
                :disabled="form.customerOrgId == '00000000-0000-0000-0000-000000000000' ? false : true">
                <el-option v-for="item in patientRegister.customerOrgGroup" :key="item.id" :label="item.displayName"
                  :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="套餐" prop="medicalPackageId">
              <el-select v-model="form.medicalPackageId" placeholder="请选择" filterable clearable
                :disabled="form.customerOrgId == '00000000-0000-0000-0000-000000000000' ? true : false">
                <el-option v-for="item in dict.medicalPackage" :key="item.id" :label="item.displayName" :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="完成标志" prop="completeFlag">
              <el-select v-model="form.completeFlag" placeholder="请选择" disabled>
                <el-option v-for="item in dict.completeFlag" :key="item.id" :label="item.displayName" :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="备注" prop="remark">
              <el-input v-model="form.remark" type="textarea" :rows="2" placeholder="请输入内容"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-form-item label="创建者">
              <el-input v-model="form.creatorName" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="创建时间">
              <el-input :value="form.creationTime | dateFormat" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="修改者">
              <el-input v-model="form.creatorName" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="修改时间">
              <el-input :value="form.lastModificationTime | dateFormat" disabled></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

      <el-image class="photo" src="https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg">
        <div slot="placeholder" class="image-slot">
          加载中<span class="dot">...</span>
        </div>
      </el-image>
    </div>
    <!-- 按钮区域 -->
    <div style="margin-left: 10px;" width="120px">
      <div class="btn">
        <el-button @click="readIdCard">读身份证</el-button>
      </div>
      <div class="btn">
        <el-button type="success" @click="Onsubmit('form')">保存</el-button>
      </div>
      <div class="btn">
        <el-button type="primary" @click="">拍照</el-button>
      </div>
      <div class="btn">
        <el-button type="primary" @click="">申请单</el-button>
      </div>
      <div class="btn">
        <el-button type="primary" @click="">打条码</el-button>
      </div>
      <div class="btn">
        <el-button type="primary" @click="">打指引单</el-button>
      </div>
      <div class="btn">
        <el-button type="primary" @click="">复制新增</el-button>
      </div>
    </div>
  </div>
</template>
<script>

import moment from 'moment';
import { mapState } from 'vuex'
import { getapi, postapi, putapi, deletapi } from "@/api/api";
import { tcdate, objCopy } from '../../utlis/proFunc'

export default {
  components: {

  },
  data() {
    return {
      data: {

        organizationdata: [], //体检中心数据
        customerOrgType: [], //单位类别
      },

      form: {
        id: '', //id
        patientId: '00000000-0000-0000-0000-000000000000', //档案号ID 选择了档案就传档案号，未选就传00000-0000...
        customerOrgId: null, //单位编号
        customerOrgGroupId: null, //分组
        medicalPackageId: null,//套餐
        patientName: '', //姓名
        birthDate: '',  //字符串 如：2012-01-29
        sexId: 'U',     //性别 默认未知U
        age: null,      //年龄
        jobCardNo: '',   //工卡号
        medicalCardNo: '', //体检卡号
        maritalStatusId: 'U', //婚姻状况 默认未知
        medicalTypeId: null,   //体检类别
        personnelTypeId: null,  //人员类别
        jobPost: '', //职务
        jobTitle: '', //职称
        photo: '', //照片
        salesman: '', //介绍人
        sexHormoneTermId: null, //性激素期限
        isNameHide: 'N', //隐藏姓名
        isPhoneFollow: 'N', //电话随访
        isVip: 'N',  //vip客户
        remark: '',  //
        isLock: 'N', //是否锁住
        completeFlag: '1', //完成标志 0:预登记，1：未检，2：部份已检，3：已总检  【创建编辑时不操作】
        isMedicalStart: 'N', //体检开始标志 【创建编辑时不操作】
        patientRegisterNo: '', //条码号 【创建编辑时不操作】
        medicalTimes: 1, //条码号 【创建编辑时不操作】
        organizationUnitId: null //体检中心
      },     //单位 记录 目前新增与更新是一致      


      rules: {
        patientName: [
          { required: true, message: "请输入姓名", trigger: "blur" },
        ],
      },
    };
  },

  created() {

  },

  //挂载完成
  mounted() {
    //表单赋值
    //console.log('mounted this.patientRegister.patientRegisterRd',this.patientRegister.patientRegisterRd)
    objCopy(this.patientRegister.patientRegisterRd, this.form)
    //console.log('mounted this.form',this.form)
  },

  computed: {
    ...mapState(['dict', 'patientRegister', 'customerOrg']),
  },
  methods: {

    readIdCard() {
      console.log('this.form1', this.form)
    },

    //提交
    Onsubmit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          //赋值
          let body = {...this.form}

          delete body.id
          delete body.patientRegisterNo
          delete body.medicalTimes
          delete body.completeFlag
          delete body.isMedicalStart

          delete body.customerOrgGroupId
          delete body.medicalPackageId

          //日期转换
          console.log('body.birthDate',body.birthDate)
          if(body.birthDate){
            body.birthDate = moment(new Date(body.birthDate)).format('yyyy-MM-DD')
          }
          console.log('body.birthDate',body.birthDate)
          //moment(pub.dateAddSeconds(new Date('2022-12-09T02:39:33.983Z'),60*60)).format('yyyyMMDDHHmmssSSS')

          console.log('this.form.id',this.form.id)
          console.log('body',body)
          if (this.form.id.length < 1) {
            //id为空则新增

            postapi(`/api/app/patient-register`, body).then(
              (res) => {                
                if(res.code == 1){
                  this.$message.success("创健 操作成功");
                  this.patientRegister.patientRegisterId = res.id
                  this.patientRegister.patientRegisterRd = res
                }
              }
            );

          } else {
            //id不为空则编辑
            putapi(`/api/app/patient-register/${this.form.id}`, body).then(
              (res) => {
                this.$message.success("更新 操作成功");
                objCopy(this.patientRegister.patientRegisterRd,this.form)
              }
            );
          }
        } else {
          alert('未通过数据校验');
          return false;
        }
      });

    },
    //新增弹框
    add() {
      this.customerOrg.customerOrgId = ''
      this.customerOrg.customerOrgRd = {
        id: '', isLock: 'N',
        isActive: 'Y'
      }
    },

    //删除
    del() {
      deletapi(`/api/app/customer-org/${this.customerOrg.customerOrgRd.id}`).then(
        (res) => {
          this.$message.success("删除 操作成功");
          this.setData({ key: 'customerOrg.customerOrgRd', value: { id: '' } })
          this.getCustomerOrgTree()
        }
      );
    }
  },

  //监听事件
  watch: {
    'patientRegister.patientRegisterRd.customerOrgId'(newVal, oldVal) {
      if (newVal != oldVal) {
        //console.log('patientRegister.patientRegisterRd.customerOrgId',this.patientRegister.patientRegisterRd.customerOrgId)
        objCopy(this.patientRegister.patientRegisterRd, this.form)
      }
    },
    'patientRegister.patientRegisterRd.id'(newVal, oldVal) {
      if (newVal != oldVal) {
        //console.log('patientRegister.patientRegisterRd.customerOrgId',this.patientRegister.patientRegisterRd.customerOrgId)
        objCopy(this.patientRegister.patientRegisterRd, this.form)
      }
    },
  },
};
</script>
<style scoped>
.btn {
  margin-top: 10px;
}

.photo {
  position: absolute;
  top: 60px;
  right: 150px;
  width: 150px;
  height: 180px;
}</style>