<template>
  <div>
    <el-dialog width="1010px"
               :title="his_id.length == 0?'添加his_user_id':'修改his_user_id'" :visible.sync="dialogFormVisible">
      <el-form
        :rules="rules"
        ref="dataForm"
        :model="form"
        label-width="70px"
        style="width: 800px;"
      >

        <el-row :gutter="24">

          <el-col :span="8">
            <el-form-item label="姓名： ">
              <el-input  style="width: 200px" disabled v-model="form.name"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="性别： ">
              <el-input style="width: 200px" disabled v-model="form.sex"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="年龄:">
              <el-input style="width: 200px" disabled v-model="form.other_age"></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="传染病:">
              <el-input disabled style="width: 200px"  v-model="form.infectious"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="his_id" prop="his_user_id">
              <el-input style="width: 200px" v-model="form.his_user_id" placeholder="请输入his_id"></el-input>
            </el-form-item>
          </el-col>
        </el-row>


      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button
          v-if="his_id == 0"
          type="primary"
          @click="createData('dataForm')"
        >保存
        </el-button>
        <el-button
          v-if="his_id > 0"
          type="primary"
          @click="modifyData('dataForm')"
        >修改
        </el-button>
      </div>
    </el-dialog>


    <el-row :gutter="12" style="margin-top: 10px">
      <el-table
        :data="patientData"
        border
        :row-style="{ color: '#303133' }"
        :header-cell-style="{
          backgroundColor: 'rgb(245, 247, 250)',
          color: '#606266'
        }"
      >
        <el-table-column label="姓名" align="center" width="200">
          <template slot-scope="scope">
            {{ scope.row.name }}
          </template>
        </el-table-column>

        <el-table-column label="性别" align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.gender == 1">男</span>
            <span v-if="scope.row.gender == 2">女</span>
          </template>
        </el-table-column>

        <el-table-column label="年龄" align="center">
          <template slot-scope="scope">
            {{getAge(scope.row)}}
          </template>
        </el-table-column>

        <el-table-column label="传染病" align="center">
          <template slot-scope="scope">
            {{ getInfectiousName(scope.row) }}
          </template>
        </el-table-column>

        <el-table-column label="his_id" align="center">
          <template slot-scope="scope">
            {{scope.row.his_patient?scope.row.his_patient.his_user_id:''}}
          </template>
        </el-table-column>


        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-tooltip
              class="item"
              effect="dark"
              content="编辑"
              placement="top"
            >
              <el-button
                size="mini"
                type="primary"
                icon="el-icon-edit-outline"
                @click="handleEdit(scope.$index, scope.row)"
              >
              </el-button>
            </el-tooltip>
          </template>
        </el-table-column>


      </el-table>

      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-sizes="[10, 50, 100]"
        :page-size="10"
        background
        style="margin-top:20px;float: right"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </el-row>
  </div>
</template>

<script>
  import { jsGetAge, uParseTime } from '@/utils/tools'
  import { fetchAllAdminUsers } from '@/api/doctor'
  import { createPatientHis, editPatientHis, fetchPatientList } from '@/api/integration'
  import { getDataConfig } from '@/utils/data'

  export default {
    name: 'patientHisConfig',

    created() {
      this.contagions = getDataConfig('patient', 'contagions')
      this.fetchPatientList()
      this.fetchAllAdminUsers()
    },
    data() {
      return {
        dialogFormVisible: false,
        page: 1,
        limit: 10,
        total: 0,
        pageTotal: 0,
        pageSelect: 0,
        adminUserOptions: [],
        patientData: [],
        contagions: [],
        patient_id: 0,
        his_record_id: 0,
        his_id: '',
        current_index: 0,
        name: '',

        form: {
          his_user_id: '',
          name: '',
          sex: '',
          other_age: '',
          infectious: ''
        },
        rules: {
          his_user_id: [{ required: true, message: '请输入his_id', trigger: 'blur' }]
        }
      }
    },
    methods: {
      fetchPatientList: function() {
        const Params = {
          page: this.page,
          limit: this.limit
        }
        fetchPatientList(Params).then(response => {
          if (response.data.state == 0) {
            this.$message.error(response.data.msg)
            return false
          } else {
            this.total = response.data.data.total
            this.patientData = response.data.data.list
          }
        })
      },
      getXuserName(id) {
        if (id <= 0) {
          return ''
        }
        var name = ''
        if (
          this.adminUserOptions == null ||
          typeof this.adminUserOptions.length === 'undefined'
        ) {
          return name
        }
        var leng = this.adminUserOptions.length
        if (leng == 0) {
          return name
        }
        for (let index = 0; index < leng; index++) {
          if (this.adminUserOptions[index].id == id) {
            name = this.adminUserOptions[index].name
            break
          }
        }
        return name
      },
      fetchAllAdminUsers() {
        fetchAllAdminUsers().then(response => {
          console.log(response)
          if (response.data.state == 1) {
            this.adminUserOptions = response.data.data.users
            var alen = this.adminUserOptions.length
            for (let index = 0; index < alen; index++) {
              if (this.adminUserOptions[index].user_type == 2) {
                // this.doctorOptions.push(this.adminUserOptions[index]);
              }
            }
          }
        })
      },
      handleSizeChange(val) {
        this.limit = val
        this.fetchPatientList()
      },
      handleCurrentChange(val) {
        this.page = val
        this.fetchPatientList()
      },

      getTimestamp(time) {
        // 把时间日期转成时间戳
        return new Date(time).getTime() / 1000
      },

      handleEdit: function(index, row) {
        this.current_index = index
        this.dialogFormVisible = true
        this.his_id = row.his_patient.his_user_id
        this.form.his_user_id = row.his_patient.his_user_id
        this.patient_id = row.id

        this.form.name = row.name
        if (row.gender == 1) {
          this.form.sex = '男'
        } else {
          this.form.sex = '女'
        }
        this.form.other_age = this.getAge(row)
        this.form.infectious = this.getInfectiousName(row)
       // console.log('111111')
       // console.log(this.getInfectiousName(row))

        if (row.his_patient.id > 0) {
          this.his_record_id = row.his_patient.id
        }
      }, getAge: function(val) {
        if (val.birthday > 0) {
          return jsGetAge(uParseTime(val.birthday, '{y}-{m}-{d}'), '-')
        }
      }, getInfectiousName: function(val) {
        var names = []
        for (let i = 0; i < val.contagions.length; i++) {
          names.push(this.GetName(val.contagions[i].disease_id))
        }
        return names.join(',')
      }, GetName: function(id) {
        for (let i = 0; i < this.contagions.length; i++) {
          if (this.contagions[i].id == id) {
            return this.contagions[i].name
          }
        }
      }, createData: function(formName) {
        this.$refs[formName].validate(valid => {
          if (valid) {
            const params = {
              id: this.patient_id,
              his_user_id: this.form.his_user_id

            }
            createPatientHis(params).then(response => {
              if (response.data.state == 1) {
                this.dialogFormVisible = false

                this.$message.success('创建成功')
                this.patientData[this.current_index].his_patient.his_user_id = response.data.data.patient.his_user_id
                this.patientData[this.current_index].his_patient.id = response.data.data.patient.id
              } else {
                this.$message.error(response.data.msg)
              }
            })
          }
        })
      }, modifyData: function(formName) {
        this.$refs[formName].validate(valid => {
          if (valid) {
            const params = {
              id: this.his_record_id,
              his_user_id: this.form.his_user_id
            }
            editPatientHis(params).then(response => {
              if (response.data.state == 1) {
                this.dialogFormVisible = false

                this.$message.success('修改成功')
                this.patientData[this.current_index].his_patient.his_user_id = response.data.data.his_user_id
              } else {
                this.$message.error(response.data.msg)
              }
            })
          }
        })
      }

    }
  }
</script>

<style rel="stylesheet/css" lang="scss" scoped>
  .information {
    border: 1px #dcdfe6 solid;
    padding: 30px 20px 30px 20px;

  .border {
    border-bottom: 1px #dcdfe6 solid;
    margin: 0px 0 20px 0;
  }

  }

  .edit_separater {
    border-top: 1px solid rgb(233, 233, 233);
    margin-top: 15px;
    margin-bottom: 15px;
  }
</style>

<style>
  .sign-and-weigh-box .sign-and-weigh-box-patients .cell {
    font-size: 12px;
  }

  .sign-and-weigh-box .sign-and-weigh-box-patients .current-row > td {
    background: #6fb5fa;
  }

  .count {
    color: #bd2c00;
  }

  .el-table td,
  .el-table th.is-leaf,
  .el-table--border,
  .el-table--group {
    border-color: #d0d3da;
  }

  .el-table--border::after,
  .el-table--group::after,
  .el-table::before {
    background-color: #d0d3da;
  }
</style>
