<template>
  <div class="content">
    <el-descriptions class="margin-top" title="队伍信息" :column="3" size="medium" border>

      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-user-solid"></i>
          队伍名称
        </template>
        {{ detailData.teamName }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-office-building"></i>
          队伍级别
        </template>
        {{ detailData.teamLevel }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-office-building"></i>
          所属单位
        </template>
        {{ detailData.unit }}
      </el-descriptions-item>

      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-user"></i>
          负责人
        </template>
        {{ detailData.dutyer }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-mobile-phone"></i>
          联系电话
        </template>
        {{ detailData.phone }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-s-home"></i>
          驻地
        </template>
        {{ detailData.station }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-office-building"></i>
          队伍属性
        </template>
        <p v-if="detailData.teamProperty == 0">其他</p>
        <p v-if="detailData.teamProperty == 1">政府</p>
        <p v-if="detailData.teamProperty == 2">企业</p>
        <p v-if="detailData.teamProperty == 3">社会</p>
      </el-descriptions-item>


      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-location-outline"></i>
          救援人员数量
        </template>
        {{ detailData.rescueWorkerNum }}
      </el-descriptions-item>

      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-s-order"></i>
          备注
        </template>
        {{ detailData.remark }}
      </el-descriptions-item>
    </el-descriptions>
    <span style="font-size: 16px;font-weight: bold;display: block;">人员信息</span>

    <el-table
        v-loading="loading"
        :data="workerList"
        height="450"
        border
      >

      <el-table-column label="序号" align="center" prop="" >
        <template slot-scope="scope">
          <span>{{scope.$index+1}}</span>
        </template>
      </el-table-column>
      <el-table-column label="队伍名称" align="center" prop="rescueTeamName" :show-overflow-tooltip="true"/>
      <el-table-column label="人员姓名" align="center" prop="workerName" :show-overflow-tooltip="true">
        <template slot-scope="scope">
          <span
            @click="getWorkerDetail(scope.row)"
            style="color: blue; cursor: pointer"
          >{{scope.row.workerName}}</span>
        </template>
      </el-table-column>
      <el-table-column label="年龄" align="center" prop="workerAge" :show-overflow-tooltip="true"/>
      <el-table-column label="性别" align="center" prop="gender" :show-overflow-tooltip="true">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.sys_user_sex" :value="scope.row.gender"/>
        </template>
      </el-table-column>
      <el-table-column label="身份证号" align="center" prop="idCard" :show-overflow-tooltip="true"/>
      <el-table-column label="联系方式" align="center" prop="phone" :show-overflow-tooltip="true"/>
      <el-table-column label="队内职务" align="center" prop="teamPost" :show-overflow-tooltip="true"/>
      <el-table-column label="工作年限" align="center" prop="workYear" :show-overflow-tooltip="true"/>
      <el-table-column label="救援技能特长" align="center" prop="speciality" :show-overflow-tooltip="true"/>
      <el-table-column label="培训次数" align="center" prop="trainNum" :show-overflow-tooltip="true"/>
      <el-table-column label="备注" align="center" prop="remark" :show-overflow-tooltip="true"/>

    </el-table>
    <workerDetail
      ref="workerDetailRef"
      :detailData="detailDataWorker"
    ></workerDetail>

    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="pageNum"
      :limit.sync="pageSize"
      @pagination="getList"
    />


  </div>
</template>

<script>
import { getWorkerInfo } from '@/api/ehs/realdata'
import { getEhsRescueTeamWorker } from '@/api/ehs/ehsRescueTeamWorker'
import workerDetail from '@/views/ehs/ehsRescueTeamWorker/workerDetail.vue'
export default {
  components: { workerDetail },
  dicts: ['team_property','team_level','sys_user_sex'],
  props: {
    detailData: {
      type: Object,
    },
    readParams: {
      type: Object,
    }
  },
  data(){
    return{
      workerList: [],
      loading: false,
      total: 0,
      pageNum: 1,
      pageSize: 10,
      // 队员详情
      detailDataWorker: {},
    }

  },
  created() {
    this.getList();
  },
  methods:{
    async getList() {
      this.loading = true;
      await getWorkerInfo({"pageNum" : this.pageNum, "pageSize" : this.pageSize, "rescueTeamId" : this.readParams.rescueTeamId}).then(res => {
        this.total = res.total;
        this.workerList = res.rows;
        this.loading = false;
      })
    },
    getWorkerDetail(row) {
      // 获取人员详情
      getEhsRescueTeamWorker(row.id).then((res) => {
        if (res.code == 200) {
          this.detailDataWorker = res.data;
          this.$refs.workerDetailRef.open = true;
        } else {
          this.$message.warning(res.msg);
        }
      })
    },
  }
};
</script>

<style>

</style>
