<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
          label="车辆使用单位："
          prop="vehicleUsingUnit"
        >
          <el-input
            placeholder="请输入车辆使用单位"
            v-model="searchForm.vehicleUsingUnit"
          />
        </el-form-item>
        <el-form-item
          label="辖区："
          prop="area"
        >
          <el-select
            v-model="searchForm.area"
            placeholder="请选择辖区"
            style="width: 100%"
            :clearable="true"
          >
            <el-option
              v-for="item in areaList"
              :label="item.name"
              :key="item.id"
              :value="item.val"
            />
          </el-select>
        </el-form-item>
        <el-form-item
          label="车牌号："
          prop="licensePlateNumber"
        >
          <el-input
            placeholder="请输入车牌号"
            v-model="searchForm.licensePlateNumber"
          />
        </el-form-item>
        <el-form-item
          prop="vechieType"
          label="车辆类型"
        >
          <el-select
            v-model="searchForm.vechieType"
            placeholder="请选择车辆类型"
            style="width: 100%"
            :clearable="true"
          >
            <el-option
              v-for="item in vechieTypeList"
              :label="item.name"
              :key="item.id"
              :value="item.val"
            />
          </el-select>
        </el-form-item>
        <el-form-item
          prop="vechieUseStatus"
          label="车辆状态"
        >
          <el-radio-group v-model="searchForm.vechieUseStatus">
            <el-radio label="">全部</el-radio>
            <el-radio label="1">在用</el-radio>
            <el-radio label="2">闲置</el-radio>
            <el-radio label="3">其他</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item
          prop="siteId"
          label="站点"
        >
          <el-select
            v-model="searchForm.siteId"
            placeholder="请选择站点"
            style="width: 100%"
            :clearable="true"
          >
            <el-option
              v-for="item in siteList"
              :label="item.siteName"
              :key="item.id"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item
          prop="auditStatus"
          label="审核状态"
        >
          <el-select
            v-model="searchForm.auditStatus"
            placeholder="请选择站点"
            style="width: 100%"
            :clearable="true"
          >
            <el-option
              v-for="item in auditStatusList"
              :label="item.name"
              :key="item.id"
              :value="item.val"
            />
          </el-select>
        </el-form-item>
        <div class="btns">
          <el-button
            type="primary"
            size="small"
            @click="searchFormSub"
          >查询</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="exportFile()"
          >导出</el-button>
          <el-button
            type="primary"
            size="small"
            v-if="!checkPermission()"
            @click="showEmergencyCarDialog()"
          >新增</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="230px"
            >
              <template slot-scope="scope">
                <el-link
                  type="primary"
                  @click="showEmergencyCarDialog('detail',scope.row.id)"
                >查看详情</el-link>
                <el-link
                  type="primary"
                  v-if="!checkPermission()"
                  @click="showEmergencyCarDialog('update', scope.row.id)"
                >修改</el-link>
                <el-link
                  type="primary"
                  v-if="!checkPermission() && scope.row.auditStatus != 4"
                  @click="delHandler(scope.row.id)"
                >删除</el-link>
                <el-link
                  type="primary"
                  v-if="!checkPermission()"
                  @click="siteHandler(scope.row.id)"
                >绑定站点</el-link>
                <el-link
                  type="primary"
                  v-if="(scope.row.auditStatus === 1 || scope.row.auditStatus === 5) && checkPermission()"
                  @click="auditHandler(scope.row.id)"
                >审核</el-link>
              </template>
            </el-table-column>
          </el-table>
        </table-mixin>
        <EmergencyCarDialog
          ref="emergencyCarDialog"
          @subsucc="search"
        />
        <BindSiteDialog
          ref="bindSiteDialog"
          @subsucc="search"
        />
      </div>
    </div>
  </div>
</template>
<script>
import { tableDataMixin } from '../../common/js/mixin'
import EmergencyCarDialog from './components/emergencyCarDialog.vue'
import BindSiteDialog from './components/bindSiteDialog.vue'
import { queryEmergencyCarPageList, deleteEmergencyCar, toExamineEmergencyCar } from '@/api/emergencyCar'
import { exportEmergencyResources } from '@/api/common'
import { queryEmergencySiteList } from '@/api/site'

import { getDic } from '../../util/dict'
export default {
  name: 'emergencyCar',
  mixins: [tableDataMixin],
  components: {
    EmergencyCarDialog,
    BindSiteDialog
  },
  data() {
    return {
      searchForm: {
        vehicleUsingUnit: '',
        area: '',
        licensePlateNumber: '',
        vechieUseStatus: '',
        vechieType: '',
        siteId: ''
      },
      vechieTypeList: [],
      auditStatusList: [],
      areaList: [],
      siteList: [],
      tableData: {
        loading: false,
        head: [
          {
            name: '车辆使用单位',
            key: 'vehicleUsingUnit',
            sortable: false,
            width: '200',
            fixed: false
          },
          {
            name: '辖区',
            key: 'area',
            sortable: false,
            width: '120',
            fixed: false,
            formatter: this.areaFormatter
          },
          {
            name: '急救车牌号',
            key: 'licensePlateNumber',
            sortable: false,
            width: '120',
            fixed: false
          },
          {
            name: '车辆负责人',
            key: 'vehicleManager',
            sortable: false,
            width: '200',
            fixed: false
          },
          {
            name: '当前车辆状态',
            key: 'vechieUseStatus',
            sortable: false,
            width: '80',
            fixed: false,
            formatter: this.vechieUseStatusFormatter
          },
          {
            name: '是否120急救车',
            key: 'isEmergencyCar',
            sortable: false,
            width: '80',
            fixed: false,
            formatter: this.isPreHospitalVechieFormatter
          },
          {
            name: '车辆类型',
            key: 'vechieType',
            sortable: false,
            width: '120',
            fixed: false,
            formatter: this.vechieTypeFormatter
          },
          {
            name: '审核状态',
            key: 'auditStatusStr',
            sortable: false,
            width: '100',
            fixed: false
          }
        ],
        body: [],
        option: [],
        condition: []
      }
    }
  },
  mounted() {
    // 获取字典
    getDic(['vechie_type', 'area', 'audit_status']).then(res => {
      this.vechieTypeList = res.vechie_type
      this.areaList = res.area
      this.auditStatusList = res.audit_status
    })
    queryEmergencySiteList().then(res => {
      if (res.msg === 201) {
        this.siteList = res.respData
      } else {
        this.$message.error(res.content)
      }
    })
    this.search()
  },
  methods: {
    getTableData() {
      this.tableData.loading = true
      const params = {
        ...this.searchForm,
        pageNo: this.pageNum,
        pageSize: this.pageSize
      }
      queryEmergencyCarPageList(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)
    },
    siteHandler(id = "") {
      this.$refs.bindSiteDialog.init(id)
    },
    areaFormatter(row, column, cellValue, index) {
      const area = this.areaList.find(i => i.val === cellValue)
      return area ? area.name : ''
    },
    vechieUseStatusFormatter(row, column, cellValue, index) {
      const vechieUseStatusList = ['', '在用', '闲置', '其他']
      return vechieUseStatusList[cellValue] || ''
    },
    isPreHospitalVechieFormatter(row, column, cellValue, index) {
      const isPreHospitalVechieList = ['', '是', '否']
      return isPreHospitalVechieList[cellValue] || ''
    },
    vechieTypeFormatter(row, column, cellValue, index) {
      const vechieType = this.vechieTypeList.find(i => i.val === cellValue)
      return vechieType ? vechieType.name : ''
    },
    delHandler(id) {
      this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$message({
          type: 'success',
          message: '删除成功!'
        });
        deleteEmergencyCar({ id: id }).then(res => {
          if (res.msg === 201) {
            this.$message.success('进入删除审核中！')
          } else {
            this.$message.error(res.content)
          }
          this.search()
        })
      })
    },
    exportFile() {
      const params = {
        ...this.searchForm,
        exportType: 1
      }
      exportEmergencyResources(params).then(res => {
        if (res.msg === 201) {
          window.open(res.respData)
        } else {
          this.$message.error(res.content)
        }
      })
    },
    auditHandler(id) {
      this.$confirm('是否审批通过？', '提示', {
        confirmButtonText: '通过',
        cancelButtonText: '拒绝',
        distinguishCancelAndClose: true,
        type: 'warning'
      }).then(() => {
        this.auditData(id, 2)
      }).catch(action => {
        if (action === 'cancel') {
          this.auditData(id, 3)
        }
      })
    },
    auditData(id, auditStatus) {
      toExamineEmergencyCar({ id: id, auditStatus: auditStatus }).then(res => {
        if (res.msg === 201) {
          this.$message.success('操作成功！')
        } else {
          this.$message.error(res.content)
        }
        this.search()
      })
    },
  }
}
</script>
<style lang="scss" scoped>
.mainContent {
  padding: 20px;
  .bt {
    text-align: right;
    margin-bottom: 16px;
  }
}
</style>
