<script setup name="securityPersonnelControl">
import ElTree from '@/components/elTree/index.vue'
import { h, onMounted, reactive, ref } from 'vue'
import store from '@/store'
import EditPersonInfoDialog
  from '@/pages/projectSafetyRiskMonitor/securityPersonnelControl/components/editPersonInfoDialog.vue'
import EditSupplierDialog
  from '@/pages/projectSafetyRiskMonitor/securityPersonnelControl/components/editSupplierDialog.vue'
import DetailDialog from '@/pages/projectSafetyRiskMonitor/securityPersonnelControl/components/detailDialog.vue'
import { list } from '@/http/apis/projectSafetyRiskMonitor/securityPersonnelControl'
import { getIsShowRegionTree, getTreeParams } from '@/utils/getIsShowRegionTree'

const { statusOptions } = store.dictStore.globalDicts || {},
  searchForm = reactive({
    projectName: undefined
  }),
  tableListRef = ref(),
  total = ref(2),
  column = reactive([
    {
      label: '序号',
      type: 'index',
      width: '80'
    },
    {
      label: '项目名称',
      key: 'projectName',
      prop: 'projectName'
    },
    {
      label: '申报单位',
      key: 'buildOrgName',
      prop: 'buildOrgName'
    },
    {
      label: '预算年度',
      key: 'projectYear',
      prop: 'projectYear',
      width: '80'
    },
    {
      label: '项目状态',
      key: 'status',
      prop: 'status',
      width: '220',
      render: row => [
        h('span', {
          class: ['dot mr-4', `bg-${statusOptions[row.status]?.color}`]
        }),
        h(
          'span',
          {
            class: `text-${statusOptions[row.status]?.color}`
          },
          row.status && statusOptions[row.stage]?.name + '-' + statusOptions[row.status]?.name
        )
      ]
    },
    {
      label: '操作',
      slot: 'action',
      width: '380',
      fixed: 'right'
    }
  ]),
  data = ref([{}]),
  getTableData = async (pageParams = tableListRef.value.pageParams) => {
    const res = await list({
      ...pageParams,
      ...searchForm
    })
    data.value = res.data.records
    total.value = res.data.total
  },
  search = () => {
    getTableData()
  },
  reset = () => {
    searchForm.projectName = undefined
    tableListRef.value.pageParams.pageNumber = 1
    tableListRef.value.pageParams.pageSize = 10
    getTableData()
  },
  getTree = (data) => {
    searchForm.regionCode = data.regionLevel === 3 ? data.regionCode : undefined
    tableListRef.value.pageParams.pageNumber = 1
    getTableData()
  },
  // 填写安全人员信息
  editPersonInfoDialogData = reactive({
    visible: false,
    data: undefined
  }),
  showEditPersonInfoDialog = (data) => {
    editPersonInfoDialogData.visible = true
    editPersonInfoDialogData.data = data
  },
  closeEditPersonInfoDialog = (flag) => {
    flag && getTableData()
    editPersonInfoDialogData.visible = false
  },
  // 填写供应商安全资质
  editSupplierDialogData = reactive({
    visible: false,
    data: undefined
  }),
  showEditSupplierDialog = (data) => {
    editSupplierDialogData.visible = true
    editSupplierDialogData.data = data
  },
  closeEditSupplierDialog = (flag) => {
    flag && getTableData()
    editSupplierDialogData.visible = false
  },
  // 详情
  detailDialogData = reactive({
    visible: false,
    data: undefined
  }),
  showDetailDialogData = (data) => {
    detailDialogData.visible = true
    detailDialogData.data = data
  }
onMounted(() => {
  if (!getIsShowRegionTree(['SUPER_ADMIN', 'REGION_MANAGER'])) getTableData()
})
</script>

<template>
  <el-row>
    <el-col v-if="getIsShowRegionTree(['SUPER_ADMIN','REGION_MANAGER'])" style="padding-right: 16px" :span="4">
      <elTree :params="getTreeParams({'SUPER_ADMIN':false,'REGION_MANAGER':false})" @get-tree="getTree" />
    </el-col>
    <el-col :span="getIsShowRegionTree(['SUPER_ADMIN','REGION_MANAGER'])?20:24">
      <div>
        <el-card class="search mb-16">
          <el-form label-suffix=":" :model="searchForm" size="small">
            <el-row :gutter="16">
              <el-col :span="8">
                <el-form-item label="项目名称">
                  <el-input
                    v-model="searchForm.projectName"
                    placeholder="请输入"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="16">
                <el-form-item class="btn">
                  <el-button type="primary" @click="search">查询</el-button>
                  <el-button @click="reset">重置</el-button>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </el-card>
        <el-card>
          <template #header>
            <div class="flex justify-between items-center">
              <span>项目列表</span>
            </div>
          </template>
          <table-list
            ref="tableListRef"
            :column="column"
            :data="data"
            :total="total"
            @get-table-data="getTableData"
          >
            <template #action="{scope}">
              <a @click="showEditPersonInfoDialog(scope.row)">填写项目安全负责人信息</a>
              <a @click="showEditSupplierDialog(scope.row)">填写供应商安全信息</a>
              <a @click="showDetailDialogData(scope.row)">详情</a>
            </template>
          </table-list>
        </el-card>
      </div>
    </el-col>
  </el-row>
  <edit-person-info-dialog :visible="editPersonInfoDialogData.visible" :data="editPersonInfoDialogData.data" @close="closeEditPersonInfoDialog" />
  <edit-supplier-dialog :visible="editSupplierDialogData.visible" :data="editSupplierDialogData.data" @close="closeEditSupplierDialog" />
  <detail-dialog :visible="detailDialogData.visible" :data="detailDialogData.data" @close="detailDialogData.visible=false" />
</template>
