<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="6">
            <el-form-item label="统计周" prop="fillUnit">
              <el-date-picker
                  v-model="queryParams.firstOfWeek"
                  type="week"
                  value-format="YYYY-MM-DD"
                  placeholder="选择周">
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </template>

    <!-- 主表列 -->
    <el-table-column header-align="center" align="center" prop="district" label="执法单位" min-width="90"/>
    <el-table-column header-align="center" align="center" prop="statisticDate" label="统计数据" min-width="100"/>
    <el-table-column header-align="center" align="center" prop="hylb" label="行业领域" min-width="200"/>
    <el-table-column header-align="center" align="center" prop="qys" label="监管企业数" min-width="120"
                     class-name="can-click"/>
    <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="jccsl" label="执法检查次数" min-width="120"
                     class-name="can-click"/>
    <el-table-column header-align="center" align="center" prop="wfxwsl" label="发现违法行为数量" min-width="140"
                     class-name="can-click"/>
    <el-table-column header-align="center" align="center" prop="lasl" label="行政立案数量" min-width="120"
                     class-name="can-click"/>
    <el-table-column header-align="center" align="center" prop="lajss" label="立案家数" min-width="120"
                     class-name="can-click"/>
    <el-table-column header-align="center" align="center" prop="yasfs" label="一案双罚数量" min-width="120"
                     class-name="can-click"/>
    <el-table-column header-align="center" align="center" label="行政处罚金额（万元）" min-width="120">
      <el-table-column header-align="center" align="center" prop="fkze" label="罚款总额" min-width="120"
                       class-name="can-click"/>
      <el-table-column header-align="center" align="center" prop="cfqy" label="处罚企业" min-width="120"
                       class-name="can-click"/>
      <el-table-column header-align="center" align="center" prop="cfgr" label="处罚个人" min-width="120"
                       class-name="can-click"/>
    </el-table-column>
    <el-table-column header-align="center" align="center" label="行刑衔接情况" min-width="120">
      <el-table-column header-align="center" align="center" prop="yjajs" label="移交案件数" min-width="120"
                       class-name="can-click"/>
      <el-table-column header-align="center" align="center" prop="sjrys" label="涉及人员数" min-width="120"
                       class-name="can-click"/>
    </el-table-column>
    <el-table-column header-align="center" align="center" label="约谈情况" min-width="120">
      <el-table-column header-align="center" align="center" prop="yts" label="约谈企业数" min-width="120"
                       class-name="can-click"/>
      <el-table-column header-align="center" align="center" prop="ytrs" 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="tbs" label="通报企业数" min-width="120"
                       class-name="can-click"/>
      <el-table-column header-align="center" align="center" prop="tbrs" label="通报人员数" min-width="120"
                       class-name="can-click"/>
    </el-table-column>
    <el-table-column header-align="center" align="center" prop="tczds" label="责令停产整顿数量" min-width="140"
                     class-name="can-click"/>
    <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="tag"/>
      </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="tag" :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">
        <zflacssldetail :dialog-data="dialogConfig2.data"/>
      </el-dialog>
    </template>
    <template>
      <el-dialog :open="dialogConfig3.show" type="max" :title="dialogConfig3.title" v-if="dialogConfig3.show"
                 :show-footer="false" @update:open="dialogConfig3.show = false">
        <zflaqkdetail :dialog-data="dialogConfig3.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 moment from 'moment'
import ElDialog from "@/components/ElDialog/index.vue";
import Zfjcqysldetail from "@pages/dtsjygl/zfjcqysldetail.vue";
import zfjccssldetail from "@pages/dtsjygl/zfjccssldetail.vue";
import zflacssldetail from "@pages/dtsjygl/zflacssldetail.vue";
import zflaqkdetail from "@pages/dtsjygl/zflaqkdetail.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: 'zfsjzbbTableId',
    tableLoading: false,
    usePage: false,
    multipleSelect: false,
    hasControlColumn: false,
    controlWidth: '150',
    cellClick: caseEventClick,
    spanMethod: objectSpanMethod
  },
  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: {},
  },
  dialogConfig3: {
    show: false,
    mode: 'detail',
    loading: false,
    data: {},
    actions: {},
  },
  actions: {
    query: handleQuery,
    exportData: handleExport
  },
  queryParams: {
    period: 'week',
    firstOfWeek: moment().weekday(1).format('YYYY-MM-DD'),
    statisticDate: []
  },
  tag: ''
})


function handleQuery() {
  queryParams.value.statisticDate[0] = queryParams.value.firstOfWeek
  queryParams.value.statisticDate[1] = moment(queryParams.value.firstOfWeek).add(6, 'days').format('YYYY-MM-DD')
  tableConfig.value.tableLoading = true

  apiConfig.value.api.statisticByWeekForm(queryParams.value).then(res => {
    if (res.success) {
      tableConfig.value.tableData = res
      tableConfig.value.tableLoading = false
    }
  })
}

function caseEventClick(row, column, cell, event) {
  const colProp = column.property
  if (colProp === "qys" && row[colProp] > 0) {
    tag.value = 'jgqy'
    let query = Object.assign(queryParams.value, {industryType: row.industry_type})
    dialogConfig.value.data = query
    dialogConfig.value.show = true
    dialogConfig.value.mode = 'detail'
    dialogConfig.value.title = '监管企业'
  }
  if (colProp === "jcqysl" && row[colProp] > 0) {
    tag.value = 'jcqyszbb'
    let query = Object.assign(queryParams.value, {industryType: row.industry_type, statisticDate: row.tjsjd})
    dialogConfig.value.data = query
    dialogConfig.value.show = true
    dialogConfig.value.mode = 'detail'
    dialogConfig.value.title = '检查企业'
  }
  if (colProp === "jccsl" && row[colProp] > 0) {
    tag.value = 'jccsszbb'
    let query = Object.assign(queryParams.value, {industryType: row.industry_type, statisticDate: row.tjsjd})
    dialogConfig1.value.data = query
    dialogConfig1.value.show = true
    dialogConfig1.value.mode = 'detail'
    dialogConfig1.value.title = '检查次数详情'
  }
  if (colProp === "lajss" && row[colProp] > 0) {
    tag.value = 'lajsszbb'
    let query = Object.assign(queryParams.value, {industryType: row.industry_type, statisticDate: row.tjsjd})
    dialogConfig.value.data = query
    dialogConfig.value.show = true
    dialogConfig.value.mode = 'detail'
    dialogConfig.value.title = '立案企业'
  }
  if (colProp === "lasl" && row[colProp] > 0) {
    tag.value = 'laslzbb'
    let query = Object.assign(queryParams.value, {industryType: row.industry_type, statisticDate: row.tjsjd})
    dialogConfig2.value.data = query
    dialogConfig2.value.show = true
    dialogConfig2.value.mode = 'detail'
    dialogConfig2.value.title = '立案数量详情'
  }
  if ((colProp === "wfxwsl" && row[colProp] > 0) || (colProp === "yasfs" && row[colProp] > 0) || (colProp === "fkze" && row[colProp] > 0) || (colProp === "cfqy" && row[colProp] > 0)
      || (colProp === "wszs" && row[colProp] > 0) || (colProp === "xcclcss" && row[colProp] > 0) || (colProp === "zlxqzgs" && row[colProp] > 0)
      || (colProp === "cfgr" && row[colProp] > 0) || (colProp === "yjajs" && row[colProp] > 0) || (colProp === "sjrys" && row[colProp] > 0)
      || (colProp === "yts" && row[colProp] > 0) || (colProp === "ytrs" && row[colProp] > 0) || (colProp === "tbs" && row[colProp] > 0)
      || (colProp === "tbrs" && row[colProp] > 0) || (colProp === "tczds" && row[colProp] > 0)) {
    let query = Object.assign(queryParams.value, {industryType: row.industry_type, statisticDate: row.tjsjd})
    dialogConfig3.value.data = query
    dialogConfig3.value.show = true
    dialogConfig3.value.mode = 'detail'
    dialogConfig3.value.title = '填报详情'
  }

}

function objectSpanMethod({row, column, rowIndex, columnIndex}) {
  let rowCountWeek = row.rowCountWeek === undefined ? 0 : row.rowCountWeek
  let rowCountAll = row.rowCountAll === undefined ? 0 : row.rowCountAll
  if (columnIndex === 0) {
    if (rowIndex === 0) {
      return {rowspan: rowCountWeek + rowCountAll, colspan: 1}
    } else {
      return {rowspan: 0, colspan: 0}
    }
  }
  if (columnIndex === 1) {
    if (rowIndex === 0) {
      return {rowspan: rowCountWeek, colspan: 1}
    } else if (rowIndex === rowCountWeek) {
      return {rowspan: rowCountAll, colspan: 1}
    } else {
      return {rowspan: 0, colspan: 0}
    }
  }

}

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

const broTable = ref(null)

function handleExport() {
  broTable.value.busiTable.exportExcelFileForCurrentPage(tableConfig.value.tableId, '执法数据周报表')
}

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