<!-- 安全风险台账管理 -->
<template>
  <div>
    <a-space class="header">
      <div class="inputBox">
        <span class="title-box">{{ '时间查询' }}</span>
        <a-date-picker style="margin-left: 12px;" :disabled="showLock" v-model:value="informationData['disposalTime']"
          value-format="YYYY-MM-DD 00:00:00" />
        <span class="title-box">{{ '市州' }}</span>
        <a-select class="select-box" v-model:value="informationData.zcdzCity" style="width: 190px" placeholder="请选择">
          <a-select-option v-for="item in auditStatus" :key="item.id" :value="item.id">
            {{ item.dictLabel }}
          </a-select-option>
        </a-select>
        <span class="title-box">{{ '损失情况' }}</span>
        <a-input class="select-box" style="width: 190px" v-model:value="informationData.lossSituation"
          placeholder="请输入" />
        <span class="title-box">{{ '处置情况' }}</span>
        <a-input class="select-box" style="width: 190px" v-model:value="informationData.disposalSituation"
          placeholder="请输入" />
      </div>
      <div class="btnBox">
        <a-button style="margin-right: 16px" @click="searchData">查询</a-button>
        <a-button style="margin-right: 16px" @click="reset">重置</a-button>
        <a-button style="margin-right: 16px" type="primary" @click="statistics">统计图表</a-button>
      </div>
    </a-space>
    <a-table :dataSource="dataSource" @change="onChangePage" :row-key="(record) => record.id"
      :pagination="informationData" :columns="columns">
      <template #bodyCell="{ column, record }">
        <template v-if="column.key === 'action'">
          <span>
            <a-button class="check" @click="check(record)">查看</a-button>
          </span>
        </template>
      </template>
    </a-table>
    <!-- 查看--编辑--新增等操作 -->
    <FromData :dataObj="dataObj" @isVisible="isVisible" />
  </div>
</template>
<script setup name="riskLedgerAdministrate">
import safetyProductionApi from '@/api/security.info/riskLedgerApi.js'
import { useRouter } from 'vue-router'
import FromData from './from.vue'

const router = useRouter()
const columns = [
  {
    title: '序号',
    dataIndex: 'Index',
    align: 'center',
    customRender: ({ text, record, index }) => {
      return `${index + 1}`
    }
  },
  {
    title: '库区名称',
    dataIndex: 'orgName',
    align: 'center',
    key: 'orgName'
  },
  {
    title: '事故发生时间',
    dataIndex: 'occurrenceTime',
    align: 'center',
    key: 'occurrenceTime'
  },
  {
    title: '事故类型',
    dataIndex: 'accidentType',
    align: 'center',
    key: 'accidentType'
  },
  {
    title: '损失情况',
    dataIndex: 'lossSituation',
    align: 'center',
    key: 'lossSituation'
  },
  {
    title: '处置情况',
    dataIndex: 'disposalSituation',
    align: 'center',
    key: 'disposalSituation'
  },
  {
    title: '操作',
    dataIndex: 'action',
    align: 'center',
    key: 'action',
    width: '340px'
  }
]
const dataSource = ref([])
const dataObj = ref({
  visible: false,
  titleText: '',
  showLock: false,
  isType: '',
  id: ''
})

const informationData = ref({
  occurrenceTime: '',
  zcdzCity: undefined,
  lossSituation: '',
  disposalSituation: '',
  current: 1,
  size: 10
})
const auditStatus = ref([])
// 表格分页
const onChangePage = (ev) => {
  informationData.value = { ...ev }
  if (isShowName.value == '1') {
    informationData.value.occurrenceTime = ''
    informationData.value.zcdzCity = undefined
    informationData.value.lossSituation = ''
    informationData.value.disposalSituation = ''
  }
  onSearch()
}
// 市州下拉框数据
const getSearchData = () => {
  safetyProductionApi.recognizetParentId({ parentId: '1781535965870915586' }).then((res) => {
    auditStatus.value = res
  })
}
// 统计图表路由跳转
const statistics = () => {
  router.push({
    path: '/security/riskLedgerAdministrate/statistics',
    query: {}
  })
}
// 列表分页
const onSearch = () => {
  const fd = { ...informationData.value }
  safetyProductionApi.ssriskaccidentPage(fd).then((res) => {
    dataSource.value = []
    dataSource.value = res.records
    dataSource.value.forEach(i => {
      switch (i.accidentType) {
        case 1:
          i.accidentType = '熏蒸事故'
          break
        case 2:
          i.accidentType = '火灾事故'
          break
        case 3:
          i.accidentType = '烘干事故'
          break
        case 4:
          i.accidentType = '高空事故'
          break
        case 5:
          i.accidentType = '用电事故'
          break
        case 6:
          i.accidentType = '车辆事故'
          break
        case 7:
          i.accidentType = '吊装事故'
          break
        case 8:
          i.accidentType = '水灾事故'
          break
        default:
          break
      }
    })
    informationData.value.total = res.total
  })
}
// 查询
const isShowName = ref('1')
const searchData = () => {
  informationData.value.current = 1
  if (informationData.value.total > 10) {
    isShowName.value = '2'
  } else {
    isShowName.value = '1'
  }
  onSearch()
}
// 重置
const reset = () => {
  dataObj.value.isType = ''
  informationData.value = {
    occurrenceTime: '',
    zcdzCity: undefined,
    lossSituation: '',
    disposalSituation: '',
    current: 1,
    size: 10
  }
  onSearch()
}
// 查看
const check = (row) => {
  dataObj.value.id = row.id
  dataObj.value.isType = '3'
  dataObj.value.titleText = '查看安全风险台账'
  dataObj.value.visible = true
  dataObj.value.showLock = true
}
// 子组件传递
const isVisible = (val) => {
  dataObj.value.visible = false
  dataObj.value.showLock = false
  dataObj.value.titleText = ''
  informationData.value.occurrenceTime = ''
  informationData.value.zcdzCity = undefined
  informationData.value.lossSituation = ''
  informationData.value.disposalSituation = ''
  onSearch()
}

onMounted(() => {
  onSearch(), getSearchData()
})
</script>
<style scoped>
.header {
  display: flex;
  padding: 20px;
  width: 100%;
}

.inputBox {
  display: flex;
}

.input-box-sle {
  width: 92%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 24px;
}

.select-box {
  margin-left: 12px;
}

.title-box {
  margin-left: 20px;
  line-height: 30px;
}

.inputBoxContent {
  width: 400px;
}

.silt-title {
  width: 280px;
  display: flex;
  align-items: center;
  margin-right: 32px;
}

.btnBox {
  width: 260px;
  margin-left: 20px;
  justify-content: start;
  display: flex;
}

.ant-input-group-addon {
  border: 0;
}

.ant-input,
.ant-btn {
  border-radius: 5px;
}

.ant-pagination {
  margin-top: 12px;
  float: right;
  margin-right: 16px;
}

.add-btn {
  background-color: rgba(112, 125, 233);
}

.check {
  background-color: rgba(112, 125, 233);
  color: #fff;
  margin-left: 8px;
}

.edit {
  background-color: rgba(222, 186, 80);
  color: #fff;
  margin-left: 8px;
}

.flow {
  background-color: #22ce8d;
  color: #fff;
  margin-left: 8px;
}

.delete {
  background-color: rgba(255, 70, 70);
  color: #fff;
  margin-left: 8px;
}

.audit {
  background-color: rgba(83, 184, 36);
  color: #fff;
  margin-left: 8px;
}

.ant-table-thead>tr>th {
  text-align: center;
}

.ant-table-tbody>tr>td {
  text-align: center;
}

::v-deep .ant-pagination-options {
  display: none !important;
}

::v-deep .ant-table-selection {
  display: none !important;
}
</style>