<template>
  <browser :component-loading="componentLoading"
           ref="broTable"
           :api-config="apiConfig"
           :table-config="tableConfig"
           :permissions="permissions"
           :dialog-config="dialogConfig"
           :custom-query="true"
           @custom-query="handleQuery"
           :actions="actions"
           @update:dialog-config="dialogConfig = $event">
    <template #queryPanel>
      <el-form label-width="120px" :model="queryParams">
        <el-row class="query-condition">
          <el-col :span="3">
            <el-radio-group v-model="queryParams.period" @change="changePeriod">
              <el-radio label="month">月度</el-radio>
              <el-radio label="quarter">季度</el-radio>
            </el-radio-group>
          </el-col>
          <el-col :span="8" v-if="queryParams.period==='month'">
            <el-form-item label="月度" prop="month">
              <el-date-picker
                  v-model="queryParams.Yd"
                  type="month" value-format="YYYY-MM-DD"
                  placeholder="选择月">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="8" v-if="queryParams.period==='quarter'">
            <el-form-item label="季度" prop="quarter">
              <el-select v-model="queryParams.Jd" placeholder="请选择">
                <el-option label="第一季度" :value="1">第一季度</el-option>
                <el-option label="第二季度" :value="2">第二季度</el-option>
                <el-option label="第三季度" :value="3">第三季度</el-option>
                <el-option label="第四季度" :value="4">第四季度</el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </template>
    <el-table-column header-align="center" align="center" prop="agencyName" label="属地" min-width="90"/>
    <el-table-column header-align="center" align="center" prop="agency_name" label="执法单位" min-width="250"/>
    <el-table-column header-align="center" align="center" prop="jcqysl" label="检查数量" min-width="120"
                     class-name="can-click"/>
    <el-table-column header-align="center" align="center" prop="jccs" label="检查次数" min-width="120"
                     class-name="can-click"/>
    <el-table-column header-align="center" align="center" prop="hylb" label="行业类别" min-width="200"/>
    <el-table-column header-align="center" align="center" prop="" label="查出隐患" min-width="120">
      <el-table-column header-align="center" align="center" prop="yhzs" label="隐患总数" min-width="120"
                       class-name="can-click"/>
      <el-table-column header-align="center" align="center" prop="zdyhs" label="重大隐患" min-width="120"
                       class-name="can-click"/>
      <el-table-column header-align="center" align="center" prop="ybyhs" label="一般隐患" min-width="120"
                       class-name="can-click"/>
    </el-table-column>
    <el-table-column header-align="center" align="center" prop="" label="执法文书使用" min-width="120">
      <el-table-column header-align="center" align="center" prop="wszs" label="总数" min-width="120"
                       class-name="can-click"/>
      <el-table-column header-align="center" align="center" prop="xcclcss" label="现场处理措施" min-width="120"
                       class-name="can-click"/>
      <el-table-column header-align="center" align="center" prop="zlxqzgs" label="责令限期整改" min-width="120"
                       class-name="can-click"/>
      <el-table-column header-align="center" align="center" prop="zgfcyjs" label="整改复查意见书" min-width="120"
                       class-name="can-click"/>
      <el-table-column header-align="center" align="center" prop="qtwss" label="其他文书" min-width="120"
                       class-name="can-click"/>
    </el-table-column>
    <template #dialogContent="{ dialogConfig: dc }">
      <el-dialog :open="dc.show" :title="dc.title" :type="dc.type" v-if="dc.show" :show-footer="false"
                 @update:open="dc.show = false">
        <Zfjcqysldetail :dialog-data="dc.data" tag="jcqys"/>
      </el-dialog>
    </template>
    <template #dialog>
      <el-dialog :open="dialogConfig1.show" :title="dialogConfig1.title" type="max" v-if="dialogConfig1.show"
                 :show-footer="false" @update:open="dialogConfig1.show = false">
        <zfjccssldetail tag="jccs" :dialog-data="dialogConfig1.data"/>
      </el-dialog>
    </template>
    <template>
      <el-dialog :open="dialogConfig2.show" type="max" :title="dialogConfig2.title" v-if="dialogConfig2.show"
                 :show-footer="false" @update:open="dialogConfig2.show = false">
        <zfjcqkdetail :dialog-data="dialogConfig2.data"/>
      </el-dialog>
    </template>
  </browser>
</template>
<script setup>
import {reactive, toRefs, getCurrentInstance, watch, computed, ref} from 'vue'
import Browser from '@/components/Browser.vue'
import {useUserStore} from '@/stores/modules/user'
import statisticsApi from '@/api/lawenforcement/Statistics.js'
import Zfjcqysldetail from "@pages/dtsjygl/zfjcqysldetail.vue"
import moment from 'moment'
import ElDialog from "@/components/ElDialog/index.vue";
import zfjccssldetail from "@pages/dtsjygl/zfjccssldetail.vue";
import zfjcqkdetail from "@pages/dtsjygl/zfjcqkdetail.vue";

const userStore = useUserStore()

const state = reactive({
  componentLoading: false,
  permissions: {
    query: true,
    add: false,
    modify: false,
    detail: false,
    delete: false,
    importFile: false,
    exportFile: true,
    exportSelectFile: false,
    downloadTemp: false,
  },
  tableConfig: {
    tableId: 'zfjcqktjTableId',
    tableLoading: false,
    usePage: false,
    multipleSelect: false,
    hasControlColumn: false,
    controlWidth: '150',
    hasSummary: true,
    cellClick: caseEventClick
  },
  apiConfig: {
    tableLoading: false,
    api: statisticsApi,
    modelId: 'enterpriseId',
  },
  dialogConfig: {
    show: false,
    mode: 'detail',
    loading: false,
    data: {},
    actions: {},
  },
  dialogConfig1: {
    show: false,
    mode: 'detail',
    loading: false,
    data: {},
    actions: {},
  },
  dialogConfig2: {
    show: false,
    mode: 'detail',
    loading: false,
    data: {},
    actions: {},
  },
  actions: {
    query: handleQuery,
    exportData: handleExport
  },
  queryParams: {
    period: 'month',
    Yd: moment().startOf('month').format('YYYY-MM-DD')
  }
})

function changePeriod(val) {
  if (val === 'quarter')
    getCurrentQuarter()
}

function getCurrentQuarter() {
  const now = new Date()
  const quarter = Math.floor(now.getMonth() / 3) + 1;
  queryParams.value.Jd = queryParams.value.Jd === undefined ? quarter : queryParams.value.Jd
}

function handleQuery() {
  tableConfig.value.tableLoading = true
  apiConfig.value.api.statisticEnforceCheckForm(queryParams.value).then(res => {
    if (res.success) {
      tableConfig.value.tableData = res
      tableConfig.value.tableLoading = false
    }
  })
}


const {
  componentLoading,
  queryParams,
  permissions,
  tableConfig,
  apiConfig,
  dialogConfig,
  dialogConfig1,
  dialogConfig2,
  actions
} = toRefs(state)

const broTable = ref(null)

function handleExport() {
  broTable.value.busiTable.exportExcelFileForCurrentPage(tableConfig.value.tableId, '检查情况统计')
}

function caseEventClick(row, column, cell, event) {
  const colProp = column.property
  if (colProp === "jcqysl" && row[colProp] > 0) {
    let query = Object.assign(queryParams.value, {gxdwbm: row.agency_code})
    dialogConfig.value.data = query
    dialogConfig.value.show = true
    dialogConfig.value.mode = 'detail'
    dialogConfig.value.title = '企业列表'
  }
  if (colProp === "jccs" && row[colProp] > 0) {
    let query = Object.assign(queryParams.value, {gxdwbm: row.agency_code})
    dialogConfig1.value.data = query
    dialogConfig1.value.show = true
    dialogConfig1.value.mode = 'detail'
    dialogConfig1.value.title = '检查列表'
  }
  if ((colProp === "yhzs" && row[colProp] > 0) || (colProp === "zdyhs" && row[colProp] > 0) || (colProp === "ybyhs" && row[colProp] > 0) || (colProp === "yhzs" && row[colProp] > 0)
      || (colProp === "wszs" && row[colProp] > 0) || (colProp === "xcclcss" && row[colProp] > 0) || (colProp === "zlxqzgs" && row[colProp] > 0)
      || (colProp === "zgfcyjs" && row[colProp] > 0) || (colProp === "qtwss" && row[colProp] > 0)) {

    let query = Object.assign(queryParams.value, {gxdwbm: row.agency_code})
    dialogConfig2.value.data = query
    dialogConfig2.value.show = true
    dialogConfig2.value.mode = 'detail'
    dialogConfig2.value.title = '检查情况'
  }

}
</script>
<style lang="scss" scoped>
:deep(.el-table) {
  .can-click {
    cursor: pointer;
    color: #126eee;
  }
}
</style>
