<template>
  <el-dialog
    :title="title + '救护车信息明细'"
    :visible.sync="dialogVisible"
    width="1300px"
    :close-on-click-modal="false"
    class="detailDialog"
  >
    <table-mixin
      :pageSize="pageSize"
      :pageNum="pageNum"
      :total="total"
      :pagination="pagination"
      :handleSizeChange="handleSizeChange"
      :handleCurrentChange="handleCurrentChange"
    >

      <el-table
        v-loading="tableData.loading"
        :data="tableData.body"
        height="400"
        @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"
        >
          <template slot-scope="scope">
            <p v-if="item.key === 'vechieUseStatusStr'">
              <i class="icon-d" :style="{ backgroundColor: scope.row.vechieUseStatusColor }"></i> <span>{{scope.row.vechieUseStatusStr}}</span>
            </p>
            <span v-else>{{ scope.row[scope.column.property] }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="操作"
          align="left"
          width="auto"
          min-width="100px"
        >
          <template slot-scope="scope">
            <el-link
              type="primary"
              @click="showEmergencyCarDialog('detail',scope.row.id)"
            >查看详情</el-link>
          </template>
        </el-table-column>
      </el-table>
    </table-mixin>
    <EmergencyCarDialog
      ref="emergencyCarDialog"
      @subsucc="search"
    />
  </el-dialog>
</template>

<script>
import { queryTotalCarInfoByHospital } from '@/api/emergencyCar'
import { tableDataMixin } from '../../../common/js/mixin'
import EmergencyCarDialog from '../../emergencyCar/components/emergencyCarDialog.vue'
export default {
  name: 'detailDialog',
  mixins: [tableDataMixin],
  components: {
    EmergencyCarDialog
  },   
  data() {
    return {
      dialogVisible: false,
      title: '',
      tableData: {
        loading: false,
        head: [
          {
            name: '车辆使用单位',
            key: 'vehicleUsingUnit',
            sortable: false,
            width: '180',
            fixed: false
          },
          {
            name: '车辆类型',
            key: 'vechieTypeStr',
            sortable: false,
            width: '100',
            fixed: false
          },
          {
            name: '车辆管理负责人',
            key: 'vehicleManager',
            sortable: false,
            width: '120',
            fixed: false
          },
          {
            name: '是否120救护车',
            key: 'isEmergencyCarStr',
            sortable: false,
            width: '120',
            fixed: false
          },
          {
            name: '车辆来源',
            key: 'vechieSourceStr',
            sortable: false,
            width: '80',
            fixed: false,
          },
          {
            name: '车辆品牌',
            key: 'vechieBrand',
            sortable: false,
            width: '80',
            fixed: false,
          },
          {
            name: '首次登记日期',
            key: 'firstRegisterDate',
            sortable: false,
            width: '100',
            fixed: false,
          },
          {
            name: '车辆使用状态',
            key: 'vechieUseStatusStr',
            sortable: false,
            width: '110',
            fixed: false,
          },
          {
            name: '车牌号',
            key: 'licensePlateNumber',
            sortable: false,
            width: '110',
            fixed: false,
          },
          {
            name: '车辆特殊用途',
            key: 'vechieSpecialPurposeStr',
            sortable: false,
            width: '110',
            fixed: false,
          }
        ],
        body: [],
        option: [],
        condition: []
      }
    }
  },
  mounted() {
    // 获取字典

  },
  methods: {
    init(title) {
      this.dialogVisible = true
      this.title = title
      this.pageNum = 1
      this.pageSize = 10
      this.getTableData()
    },
    getTableData() {
      this.tableData.loading = true
      const params = {
        vehicleUsingUnit: this.title,
        pageNo: this.pageNum,
        pageSize: this.pageSize
      }
      queryTotalCarInfoByHospital(params).then((res) => {
        if (res.msg == 201) {
          this.dealTableResponse(res)
        } else {
          this.$message.error(res.content)
        }
      })
    },
    showEmergencyCarDialog(type = 'add', id = '') {
      this.$refs.emergencyCarDialog.init(type, id)
    },
    search() {

    }
  }
}
</script>


<style lang="scss" scoped>
.detailDialog {
  .icon-d{
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 2px;
  }
}
</style>
