<template>
  <div>
    <el-dialog width="1010px"
               :title="his_id.length == 0?'添加his_id':'修改his_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.mobile"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="角色">
              <el-input style="width: 200px" disabled v-model="form.role_name"></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="adminData"
        border
        highlight-current-row
        :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.user_name}}
          </template>
        </el-table-column>

        <el-table-column label="电话" align="center">
          <template slot-scope="scope">
            {{scope.row.admin.mobile}}

          </template>
        </el-table-column>

        <el-table-column label="角色" align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.admin.is_super_admin == 1">管理员</span>
            <span v-if="scope.row.admin.is_super_admin == 0"> {{scope.row.role.role_name}}</span>
          </template>
        </el-table-column>


        <el-table-column label="his_id" align="center">
          <template slot-scope="scope">
            {{scope.row.middle_admin_role.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 { uParseTime } from '@/utils/tools'
  import { fetchAllAdminUsers } from '@/api/doctor'
  import { fetchAdminList,createAdminHis,editAdminHis } from '@/api/integration'

  export default {
    name: 'adminHisConfig',

    created() {
      this.fetchAdminList()
      this.fetchAllAdminUsers()
    },
    data() {
      return {
        dialogFormVisible:false,
        page: 1,
        limit: 10,
        total: 0,
        pageTotal: 0,
        pageSelect: 0,
        adminUserOptions: [],
        adminData: [],
        form: {
          his_user_id: '',
          name: '',
          mobile: '',
          role_name: '',
        },
        rules: {
          his_user_id: [{ required: true, message: '请输入his_id', trigger: 'blur' }]
        },
        admin_user_id: 0,
        his_record_id: 0,
        his_id: '',
        current_index: 0,
      }
    },
    methods: {
      fetchAdminList: function() {
        const Params = {
          page: this.page,
          limit: this.limit
        }
        fetchAdminList(Params).then(response => {
          if (response.data.state == 0) {
            this.$message.error(response.data.msg)
            return false
          } else {
            this.total = response.data.data.total_count
            this.adminData = response.data.data.admins

          }
        })
      },
      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.fetchAdminList()
      },
      handleCurrentChange(val) {
        this.page = val
        this.fetchAdminList()
      },

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

      handleEdit: function(index, row) {
        this.current_index = index
        this.dialogFormVisible = true
        this.his_id = row.middle_admin_role.his_user_id
        this.form.his_user_id = row.middle_admin_role.his_user_id
        this.admin_user_id = row.admin_user_id

        this.form.name = row.user_name
        this.form.mobile = row.admin.mobile

        if(row.admin.is_super_admin == 1){
          this.form.role_name = "管理员"

        }else{
          this.form.role_name = row.role.role_name
        }
        if (row.middle_admin_role.id > 0) {
          this.his_record_id = row.middle_admin_role.id
        }
      },createData: function(formName) {
        this.$refs[formName].validate(valid => {
          if (valid) {
            let params = {
              id: this.admin_user_id,
              his_user_id: this.form.his_user_id

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

                this.$message.success('创建成功')
                this.adminData[this.current_index].middle_admin_role.his_user_id = response.data.data.his_role.his_user_id
                this.adminData[this.current_index].middle_admin_role.id = response.data.data.his_role.id


              } else {
                this.$message.error(response.data.msg)
              }
            })
          }
        })

      }, modifyData: function(formName) {
        this.$refs[formName].validate(valid => {
          if (valid) {
            let params = {
              id: this.his_record_id,
              his_user_id: this.form.his_user_id
            }
            editAdminHis(params).then(response => {
              if (response.data.state == 1) {
                this.dialogFormVisible = false

                this.$message.success('修改成功')
                this.adminData[this.current_index].middle_admin_role.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>
