<template>
  <div style="display:flex;">
    <el-tabs tabPosition="left" type="border-card" style="display:inline-black;">
      <el-tab-pane v-for="item in sysInspec" :key="item.project_id" :label="item.project_name" >
        <el-table :data="item.inspection_reference" border style="width: 100%">
          <el-table-column
            prop="item_name"
            label="检验名称"
            width="180">
          </el-table-column>
          <el-table-column
            prop="id"
            label="item_id"
            width="180">
          </el-table-column>
        </el-table>
      </el-tab-pane>
    </el-tabs>

    <template v-if="ownerInspec">
      <el-tabs  tabPosition="left" type="border-card" style="display:inline-black;margin-left:100px;">
        <el-tab-pane v-for="owner in ownerInspec" :key="owner.project_id" :label="owner.project_name" >
          <el-table :data="owner.inspection_reference" border style="width: 100%">
            <el-table-column
              prop="item_name"
              label="检验名称"
              width="180">
            </el-table-column>
            <el-table-column label="item_id"  width="180"> 
              <template slot-scope="scope">
                <span v-if="scope.row.sys_item_id > 0">{{scope.row.sys_item_id}}</span>
              </template>
            </el-table-column>
            <el-table-column label="编辑" width="180">
              <template slot-scope="scope">
              <el-button size="mini"  @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
      </el-tabs>
    </template>
    <el-dialog title="编辑item_id" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-form-item label="检验检查名称" :label-width="formLabelWidth">
          <el-input v-model="form.item_name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="系统item_id" :label-width="formLabelWidth">
          <el-input v-model="form.sys_item_id" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveinspection()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getsysinspectionlist, saveinspectionsysitemid } from '@/api/integration'

export default {
  name: 'patientHisConfig',

  created() {
    this.getsysinspectionlist()
  },
  data() {
    return {
      dialogFormVisible: false,
      ownerInspec: {},
      sysInspec: {},
      form: []
    }
  },
  methods: {
    handleEdit: function(index, row) {
      this.form = row
      this.dialogFormVisible = true
    },
    saveinspection: function() {
      saveinspectionsysitemid(this.form).then(response => {
        if (response.data.state == 0) {
          this.$message.error(response.data.msg)
          return false
        } else {
          this.ownerInspec[this.form.project_id]['inspection_reference']['sys_item_id'] = this.form.sys_item_id
          this.dialogFormVisible = false
        }
      })
    },
    getsysinspectionlist: function() {
      getsysinspectionlist().then(response => {
        if (response.data.state == 0) {
          this.$message.error(response.data.msg)
          return false
        } else {
          this.ownerInspec = response.data.data.ownerInspec
          this.sysInspec = response.data.data.sysInspec
        }
      })
    }
  }
}
</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>
