<template>
  <div class="main-page">
    <div class="main-page-header">
      <p class="title">院前急救信息</p>
      <el-form
        :inline="true"
        :model="searchForm"
        ref="searchForm"
        size="small"
      >
        <el-form-item
          prop="patientType"
          label="病种"
        >
          <el-select
            v-model="searchForm.patientType"
            placeholder="请选择病种"
            style="width: 100%"
            :clearable="true"
          >
            <el-option
              v-for="item in patientTypeList"
              :label="item.name"
              :key="item.id"
              :value="item.val"
            />
          </el-select>
        </el-form-item>
        <el-form-item
          prop="time"
          label="急救时间"
        >
          <el-date-picker
            type="datetimerange"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            v-model="searchForm.time"
            style="width: 100%;"
            prefix-icon="el-icon-date"
            format="yyyy-MM-dd HH:mm:ss"
            value-format="yyyy-MM-dd HH:mm:ss"
          ></el-date-picker>
        </el-form-item>
        <div class="btns">
          <el-button
            type="primary"
            size="small"
            @click="search"
          >查询</el-button>
          <el-button
            size="small"
            @click="resetForm('searchForm')"
          >重置</el-button>
        </div>
      </el-form>
    </div>
    <div class="main-page-body">
      <div class="mainContent">
        <div class="bt">
          <el-button
            type="primary"
            size="small"
            v-if="!checkPermission()"
            @click="goDetail('add')"
          >新增</el-button>
        </div>
        <table-mixin
          :pageSize="pageSize"
          :pageNum="pageNum"
          :total="total"
          :pagination="pagination"
          :handleSizeChange="handleSizeChange"
          :handleCurrentChange="handleCurrentChange"
        >
          <el-table
            v-loading="tableData.loading"
            :data="tableData.body"
            @sort-change="handleSortChange"
          >
            <div
              slot="empty"
              class="noData"
            ></div>
            <el-table-column
              label="序号"
              type="index"
              min-width="50"
            >
            </el-table-column>
            <el-table-column
              v-for="(item,index) in tableData.head"
              :prop="item.key"
              :label="item.name"
              align="left"
              :formatter="item.formatter"
              :sortable="item.sortable"
              :fixed="item.fixed"
              :key="index"
              :min-width="item.width"
              :show-overflow-tooltip="true"
            >
            </el-table-column>
            <el-table-column
              label="操作"
              align="left"
              width="auto"
              min-width="200px"
            >
              <template slot-scope="scope">
                <el-link
                  type="primary"
                  @click="goDetail('detail', scope.row)"
                >查看详情</el-link>
                <el-link
                  type="primary"
                  @click="goDetail('update', scope.row)"
                  v-if="!checkPermission()"
                >修改</el-link>
              </template>
            </el-table-column>
          </el-table>
        </table-mixin>
      </div>
    </div>
  </div>
</template>
<script>
import { tableDataMixin } from '../../common/js/mixin'
import { queryIntegrationList } from '@/api/hospital'
import { getDic } from '../../util/dict'
import SaveDialog from './components/saveDialog.vue'
export default {
  name: 'LogPage',
  mixins: [tableDataMixin],
  components: {
    SaveDialog
  },
  data() {
    return {
      searchForm: {
        operateType: '',
        time: []
      },
      patientTypeList: [],
      tableData: {
        loading: false,
        head: [
          {
            name: '患者姓名',
            key: 'patientName',
            sortable: false,
            width: '100',
            fixed: false
          },
          {
            name: '性别',
            key: 'sex',
            sortable: false,
            width: '80',
            fixed: false,
            formatter: (row, column, cellValue, index) => {
              return cellValue === 1 ? '男' : cellValue === 2 ? '女' : ''
            }
          },
          {
            name: '身份证号',
            key: 'identityNumber',
            sortable: false,
            width: '180',
            fixed: false
          },
          {
            name: '120急救申请时间',
            key: 'firstAidApplicationTime',
            sortable: false,
            width: '200',
            fixed: false
          },
          {
            name: '车牌号',
            key: 'licensePlateNumber',
            sortable: false,
            width: '100',
            fixed: false
          },
          {
            name: '申请机构',
            key: 'applicant',
            sortable: false,
            width: '100',
            fixed: false
          },
          {
            name: '接诊医院',
            key: 'clinicalHospital',
            sortable: false,
            width: '100',
            fixed: false
          },
          {
            name: '请求绿道',
            key: 'patientType',
            sortable: false,
            width: '100',
            fixed: false,
            formatter: (row, column, cellValue, index) => {
              return ['', '胸痛中心', '卒中中心', '创伤中心', '烧伤中心'][cellValue] || ''
            }
          },
          {
            name: '院前诊断',
            key: 'preHospitalDiagnosis',
            sortable: false,
            width: '100',
            fixed: false
          }
        ],
        body: [],
        option: [],
        condition: []
      }
    }
  },
  mounted() {
    // 获取字典
    getDic(['patient_type']).then(res => {
      this.patientTypeList = res.patient_type
    })
    this.search()
  },
  methods: {
    getTableData() {
      this.tableData.loading = true
      const params = {
        patientType: this.searchForm.patientType,
        pageNo: this.pageNum,
        pageSize: this.pageSize
      }
      if (this.searchForm.time && this.searchForm.time.length === 2) {
        params.time = this.searchForm.time[0] + "_" + this.searchForm.time[1]
      }
      queryIntegrationList(params).then((res) => {
        if (res.msg == 201) {
          this.dealTableResponse(res)
        } else {
          this.$message.error(res.content)
        }
      })
    },
    logTypeFormatter(row, column, cellValue, index) {
      const logType = this.logTypeList.find(i => i.val === cellValue)
      return logType ? logType.name : ''
    },
    goDetail(type, row) {
      const query = {
        type: type
      }
      if (type === 'update' || type === 'detail') {
        query.patientType = row.patientType
        query.associationId = row.associationId
      }
      const routerData = this.$router.resolve({
        path: '/business/hospital/detail',
        query: query
      })

      window.open(routerData.href, '_blank')
    }
  }
}
</script>
<style lang="scss" scoped>
.mainContent {
  padding: 20px;
  .bt {
    text-align: right;
    margin-bottom: 16px;
  }
}
</style>
