<template>
  <section class="addVaccination">
    <ai-detail>
      <ai-title slot="title" :title="addTitle" isShowBottomBorder
                isShowBack @onBackClick="back"/>
      <template #content>
        <el-form size="small" :model="form" ref="vaccinationForm" :rules="rules" label-width="100px">
          <ai-card title="基本信息">
            <template #content>
              <el-form-item label="受种人姓名" prop="name">
                <el-row type="flex" align="middle">
                  <el-input placeholder="请输入" v-model="form.name" :disabled="isEdit" clearable
                            style="margin-right: 8px"/>
                  <ai-person-select v-if="!isEdit" :instance="instance" @selectPerson="handleSelectPerson"/>
                </el-row>
              </el-form-item>
              <el-form-item label="身份证号码" prop="idNumber">
                <ai-id v-model="form.idNumber" @change="getInfoByIdNumber" :disabled="isEdit"/>
              </el-form-item>
              <el-form-item label="性别" prop="sex">
                <ai-select disabled v-model="form.sex" :selectList="dict.getDict('sex')"/>
              </el-form-item>
              <el-form-item label="出生日期" prop="birthday">
                <el-date-picker v-model="form.birthday" type="date" disabled/>
              </el-form-item>
              <el-form-item label="联系方式" prop="phone">
                <el-input v-model="form.phone" placeholder="请输入"/>
              </el-form-item>
              <el-form-item label="所属地区" isLine prop="areaId">
                <ai-area-select :instance="instance" v-model="form.areaId" always-show @name="v=>form.areaName=v"/>
              </el-form-item>
              <el-form-item label="住址" isLine prop="address">
                <el-input v-model="form.address" placeholder="请输入"/>
              </el-form-item>
            </template>
          </ai-card>
          <ai-card title="接种情况">
            <template #right>
              <el-button icon="iconfont iconAdd" type="text" @click="dialog=true">添加</el-button>
            </template>
            <template #content>
              <el-form-item isLine label-width="0">
                <ai-table :tableData="form.detailList" :colConfigs="colConfigs" :isShowPagination="false" :dict="dict">
                  <el-table-column slot="options" label="操作" align="center" fixed="right">
                    <template v-slot="{row,$index}">
                      <el-button type="text" @click="handleEdit(row,$index)">编辑</el-button>
                      <el-button type="text" @click="handleDelete($index)">删除</el-button>
                    </template>
                  </el-table-column>
                </ai-table>
              </el-form-item>
            </template>
          </ai-card>
        </el-form>
      </template>
      <template #footer>
        <el-button @click="back">取消</el-button>
        <el-button type="primary" @click="handleSubmit">提交</el-button>
      </template>
    </ai-detail>
    <ai-dialog :visible.sync="dialog" title="接种情况" @closed="dialogForm={}" @onConfirm="handleConfirm">
      <el-form ref="appvaccineinoculationuser" size="small" :model="dialogForm" label-width="100px" :rules="rules">
        <el-form-item label="接种次数" prop="type">
          <ai-select v-model="dialogForm.type" :selectList="dict.getDict('vaccineType')"/>
        </el-form-item>
        <el-form-item label="接种日期" prop="vaccinateDate">
          <el-date-picker v-model="dialogForm.vaccinateDate" value-format="yyyy-MM-dd"/>
        </el-form-item>
        <el-form-item label="接种人员" prop="vaccinatePerson">
          <el-input v-model="dialogForm.vaccinatePerson"/>
        </el-form-item>
        <el-form-item label="生产企业" prop="createCompany">
          <el-input v-model="dialogForm.createCompany"/>
        </el-form-item>
        <el-form-item label="接种单位" prop="vaccinateUnit">
          <el-input v-model="dialogForm.vaccinateUnit"/>
        </el-form-item>
      </el-form>
    </ai-dialog>
  </section>
</template>

<script>
import {mapState} from "vuex";
import {ID} from "dui/lib/js/utils";

export default {
  name: "addVaccination",
  inject: ['top'],
  props: {
    instance: Function,
    dict: Object,
  },
  data() {
    return {
      form: {detailList: []},
      dialog: false,
      dialogForm: {}
    }
  },
  computed: {
    ...mapState(['user']),
    isEdit() {
      return !!this.$route.query.id
    },
    addTitle() {
      return this.isEdit ? '编辑疫苗接种人员' : '新增疫苗接种人员'
    },
    rules() {
      return {
        vaccinateDate: {required: true, message: "请选择 接种日期"},
        type: {required: true, message: "请选择 接种次数",},
        areaId: [
          {required: true, message: "请选择 所属地区"},
          {trigger:'blur',validator: (r, v, cb) => /0{3}$/g.test(v) ? cb('请选择到村/社区') : cb()}
        ],
        name: {required: true, message: "请填写 受种人姓名"},
        idNumber: {required: true, message: "请填写 身份号码"},
        sex: {required: true, message: "请填写 性别"},
        birthday: {required: true, message: "请填写 出生日期"},
        phone: {required: true, message: "请填写 联系方式"},
      }
    },
    colConfigs() {
      return [
        {label: "类型", align: 'center', prop: "type", dict: 'vaccineType'},
        {label: "接种日期", align: 'center', prop: "vaccinateDate"},
        {label: "接种人员", align: 'center', prop: "vaccinatePerson"},
        {label: "生产企业", align: 'center', prop: "createCompany"},
        {label: "接种单位", align: 'center', prop: "vaccinateUnit"},
        {slot: "options"}
      ]
    }
  },
  methods: {
    back() {
      this.$router.push({})
    },
    getDetail() {
      let {id} = this.$route.query
      if (id) {
        this.instance.post("/app/appvaccineinoculationuser/queryDetailById", null, {
          params: {id}
        }).then(res => {
          if (res?.data) {
            this.form = res.data
          }
        })
      } else {
        this.$set(this.form,'areaId',JSON.parse(JSON.stringify(this.top.areaId)))
      }
    },
    handleSubmit() {
      this.$refs.vaccinationForm?.validate(v => {
        if (v) {
          this.instance.post("/app/appvaccineinoculationuser/addOrUpdate", this.form).then(res => {
            if (res?.code == 0) {
              this.$message.success("提交成功!")
              this.top.resetSearch()
              this.back()
            }
          })
        }
      })
    },
    handleEdit(row, index) {
      this.dialogForm = JSON.parse(JSON.stringify({...row, index}))
      this.dialog = true
    },
    handleConfirm() {
      this.$refs.appvaccineinoculationuser.validate(v => {
        if (v) {
          if (this.dialogForm.index > -1) {
            this.form.detailList.splice(this.dialogForm.index, 1, this.dialogForm)
          } else {
            this.form.detailList.push(this.dialogForm)
          }
          this.dialog = false
        }
      })
    },
    handleSelectPerson(v) {
      let {name, idNumber, phone, currentAreaId:areaId, currentAddress:address} = v
      this.form = {...this.form, name, idNumber, phone, areaId, address}
    },
    getInfoByIdNumber(code) {
      if (ID.check(code)) {
        let info = new ID(code)
        this.form.sex = info.sex
        this.form.birthday = info.birthday
        this.$forceUpdate()
      }
    },
    handleDelete(index) {
      this.$confirm("是否要删除该条数据?").then(() => this.form.detailList.splice(index, 1)).catch(() => 0)
    }
  },
  created() {
    this.dict.load('vaccineType')
    this.getDetail()
  }
}
</script>

<style lang="scss" scoped>
.addVaccination {
  height: 100%;

  :deep( .ai-card__body), .el-form {
    display: flex;
    flex-wrap: wrap;
  }

  .ai-card {
    width: 100%;
  }

  .el-form-item {
    width: 50%;

    &[isLine] {
      width: 100%;
    }

    .el-date-editor {
      width: 100%;
    }
  }

  :deep( .el-button ){
    .iconfont {
      color: inherit
    }
  }
}
</style>
