<template>
  <!-- 违章信息列表 -->
  <div class="app-container">
    <el-form v-show="showSearch" :model="queryParams" ref="queryForm" size="small" inline>
      <el-form-item label="" prop="keyWord">
        <el-input
          v-model="queryParams.keyWord"
          placeholder="请输入关键字"
          clearable v-no-whitespace
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="" prop="proName">
        <el-input
          v-model="queryParams.proName"
          placeholder="请输入违章工程名称"
          clearable v-no-whitespace
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="" prop="violationType">
        <el-select v-model="queryParams.violationType" placeholder="请选择违章类型" clearable>
          <el-option v-for="item in violationTypeOpts" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item>
      <!-- 日期范围 -->
      <el-form-item label="" prop="violationTimeRange">
        <el-date-picker
          v-model="queryParams.violationTimeRange"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          clearable
          value-format="yyyy-MM-dd"
          format="yyyy-MM-dd"
        />
      </el-form-item>
      <el-form-item label="" prop="isTicket">
        <el-select v-model="queryParams.isTicket" placeholder="请选择是否下发处罚单" clearable>
          <el-option v-for="item in isPunishOpts" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item>
      <el-form-item >
        <el-button type="primary" icon="el-icon-search" @click="handleQuery">查询</el-button>
        <el-button icon="el-icon-refresh" @click="handleReset">重置</el-button>
        <el-button type="text" style="margin-left: 30px; color: #409eff" @click="drawer = true">高级筛选</el-button>
      </el-form-item>
    </el-form>

    <!-- 高级筛选 -->
    <el-drawer title="高级筛选" :visible.sync="drawer" :direction="direction" size="40%">
      <div class="app-container">
        <el-form v-show="showSearch" :model="queryParams" ref="queryForm" size="small" label-width="110px">
          <el-row :gutter="20">
            <el-col :span="12" :offset="0">
              <el-form-item label="关键字" prop="keyWord">
                <el-input
                  v-model="queryParams.keyWord"
                  placeholder="请输入关键字"
                  clearable v-no-whitespace
                  @keyup.enter.native="handleQuery"
                  class="ipt-width"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12" :offset="0">
              <el-form-item label="违章工程名称" prop="proName">
                <el-input
                  v-model="queryParams.proName"
                  placeholder="请输入违章工程名称"
                  clearable v-no-whitespace
                  class="ipt-width"
                />
              </el-form-item>
            </el-col>

            <el-col :span="12" :offset="0">
              <el-form-item label="违章类型" prop="violationType">
                <el-select v-model="queryParams.violationType" placeholder="请选择违章类型" clearable class="ipt-width">
                  <el-option
                    v-for="item in violationTypeOpts"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>

            <el-col :span="12" :offset="0">
              <el-form-item label="是否下发处罚单" prop="isTicket">
                <el-select
                  v-model="queryParams.isTicket"
                  placeholder="请选择是否下发处罚单"
                  clearable
                  class="ipt-width"
                >
                  <el-option v-for="item in isPunishOpts" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12" :offset="0">
              <el-form-item label="违章采集来源" prop="violationSource">
                <el-select
                  v-model="queryParams.violationSource"
                  placeholder="请选择违章采集来源"
                  clearable
                  class="ipt-width"
                >
                  <el-option
                    v-for="item in dict.type.wz_violation_source"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>

            <el-col :span="12" :offset="0">
              <el-form-item label="处罚完成状态" prop="ticketStatus">
                <el-select
                  v-model="queryParams.ticketStatus"
                  placeholder="请选择处罚完成状态"
                  clearable
                  class="ipt-width"
                >
                  <el-option
                    v-for="item in punishCompleteStatusOpts"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>

            <el-col :span="12" :offset="0">
              <el-form-item label="责任承包商" prop="consName">
                <el-input
                  v-model="queryParams.consName"
                  placeholder="请输入责任承包商"
                  clearable v-no-whitespace
                  class="ipt-width"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12" :offset="0">
              <el-form-item label="承包商负责人" prop="personName">
                <el-input
                  v-model="queryParams.personName"
                  placeholder="请输入承包商负责人"
                  clearable v-no-whitespace
                  class="ipt-width"
                />
              </el-form-item>
            </el-col>
            <!-- 违章编号 -->
            <el-col :span="12" :offset="0">
              <el-form-item label="违章编号" prop="violationCode">
                <el-input
                  v-model="queryParams.violationCode"
                  placeholder="请输入违章编号"
                  clearable v-no-whitespace
                  class="ipt-width"
                />
              </el-form-item>
            </el-col>
            <!-- 负责人 -->
            <el-col :span="12" :offset="0">
              <el-form-item label="负责人" prop="directorName">
                <el-input v-model="queryParams.directorName" placeholder="请输入负责人" clearable class="ipt-width"  v-no-whitespace/>
              </el-form-item>
            </el-col>
            <el-col :span="24" :offset="0">
              <el-form-item label="违章日期" prop="violationTimeRange">
                <el-date-picker
                  v-model="queryParams.violationTimeRange"
                  type="daterange"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  clearable
                  value-format="yyyy-MM-dd"
                  format="yyyy-MM-dd"
                />
              </el-form-item>
            </el-col>
          </el-row>

          <el-form-item>
            <el-button type="primary" icon="el-icon-search" @click="handleQuery">查询</el-button>
            <el-button icon="el-icon-refresh" @click="handleReset">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-drawer>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport">导出数据</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd">新增违章</el-button>
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <el-table :data="tableList" fit highlight-current-row style="width: 100%">
      <!-- 多选 -->
      <el-table-column type="selection" width="55" align="center" @selection-change="selectionChange" />
      <el-table-column
        type="index"
        width="55"
        label="序号"
        align="center"
        :index="indexContinuous(queryParams.pageNum, queryParams.pageSize)"
      />
      <el-table-column
        v-for="(column, index) in tableColumns"
        show-overflow-tooltip
        :key="column.prop"
        :label="column.label"
        :prop="column.prop"
        align="center"
      >
        <!-- 插槽 -->
        <template v-slot="scope" v-if="column.prop == 'violationPhoto'">
          <span v-if="Number(scope.row.photoNum) === 1" class="see" @click="handleSeeFill(scope.row)"
          >{{ scope.row.photoNum }}</span>
          <span v-else-if="Number(scope.row.photoNum) > 1" class="see" @click="handleSeeFills(scope.row)">
            {{ scope.row.photoNum }}
          </span>
          <span v-else>-</span>
        </template>
      </el-table-column>
      <!-- 操作 -->
      <el-table-column label="操作" align="center" width="150">
        <template slot-scope="scope">
          <el-button type="text" size="mini" v-if="scope.row.isTicket === '否'" @click="handleEdit(scope.row)">编辑</el-button>
          <el-button type="text" size="mini" @click="handleDetails(scope.row)">查看详情</el-button>
          <el-button type="text" size="mini" v-if="scope.row.isTicket === '否'" style="color: #e6a23c" @click="handleIssue(scope.row)">
            下发处罚单
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <!-- 违章弹框 -->
    <ViolationDialog ref="violationDialog" @getList="getList"/>
    <!-- 下发处罚单 -->
    <PunishFormDialog ref="punishFormDialog" @getList="getList" />
    <!-- 文件查看 -->
    <el-dialog title="文件查看" :visible.sync="previewOpen" width="90%" append-to-body>
      <div style="width: 100%; height: 720px">
        <bns-kkFile-preview :items="filePreview"></bns-kkFile-preview>
      </div>
    </el-dialog>

    <el-dialog title="文件查看" :visible.sync="document" width="80%" top="5vh" append-to-body>
      <div style="width: 100%; height: 720px">
        <bns-file-list-tabs :items="fileList" />
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { dictTableOption } from '@/api/tool/select'
import bnsFileListTabs from '@/components/pro-tabs/bns-file-list-tabs'
import bnsKkFilePreview from '@/components/pro-tabs/bns-kkFile-preview'
import ViolationDialog from './components/ViolationDialog'
import PunishFormDialog from './components/PunishFormDialog'
import {
  exportViolationInfo,
  getTypeOfViolationSelect,
  getViolationList,
  getViolationPhoto
} from '@/api/violation/violation'
import { parseTime } from '@/utils/bonus'

export default {
  components: {
    ViolationDialog,
    PunishFormDialog,
    bnsFileListTabs,
    bnsKkFilePreview
  },
  dicts: ['wz_violation_source'],
  data() {
    return {
      showSearch: true,
      drawer: false, // 高级筛选
      direction: 'rtl', // 抽屉方向-右侧
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        keyWord: '', // 关键字
        proName: '', // 违章工程名称
        violationType: '', // 违章类型
        violationTimeRange: [], // 违章日期范围
        isTicket: '', // 是否下发处罚单
        violationSource: '', // 违章采集来源
        ticketStatus: '', // 处罚完成状态
        consName: '', // 责任承包商
        personName: '', // 承包商负责人
        violationCode: '', // 违章编号
        directorName: '' // 负责人
      },
      // 违章类型-下拉框
      violationTypeOpts: [],
      // 是否下发处罚单-下拉框
      isPunishOpts: [
        { label: '是', value: '1' },
        { label: '否', value: '0' }
      ],
      // 违章采集来源-下拉框
      violationCollectionSourceOpts: [
        { label: '来源1', value: '1' },
        { label: '来源2', value: '2' }
      ],
      // 处罚完成状态-下拉框
      punishCompleteStatusOpts: [
        { label: '已完成', value: '1' },
        { label: '未完成', value: '0' }
      ],
      total: 0, // 总条数
      // 表头
      tableColumns: [
        { label: '违章工程', prop: 'proName' },
        { label: '违章编号', prop: 'violationCode' },
        { label: '违章类型', prop: 'violationTypeName' },
        { label: '责任承包商', prop: 'consName' },
        { label: '责任承包商负责人', prop: 'personName' },
        { label: '负责人', prop: 'directorName' },
        { label: '违章依据', prop: 'violationContent' },
        { label: '违章时间', prop: 'violationTime' },
        { label: '违章采集来源', prop: 'violationSource' },
        { label: '违章照片', prop: 'violationPhoto' },
        { label: '是否下发处罚单', prop: 'isTicket' },
        { label: '处罚完成状态', prop: 'ticketStatus' }
      ],
      // 表格数据
      tableList: [],
      filePreview: {
        filePreviewUrl: '',
        fileName: ''
      },
      previewOpen: false,
      fileList: [],
      document: false
    }
  },
  created() {
    this.getTypeOfViolationSelect()
    this.getList()
  },
  methods: {
    handleQuery() {
      this.getList()
    },
    getTypeOfViolationSelect() {
      getTypeOfViolationSelect({ type: 2 }).then(response => {
        this.violationTypeOpts = response.data
      })
    },
    // 重置
    handleReset() {
      this.queryParams.pageNum = 1
      this.queryParams.pageSize = 10
      this.$refs.queryForm.resetFields()
      this.getList()
    },
    // 获取列表
    async getList() {
      try {
        const param = {
          ...this.queryParams,
          startTime: parseTime(this.queryParams.violationTimeRange[0]),
          endTime: parseTime(this.queryParams.violationTimeRange[1])
        }
        getViolationList(param).then(response => {
          this.tableList = response.rows
          this.total = response.total
        })
      } catch (error) {
        console.log('🚀 ~ 获取列表 ~ error:', error)
      }
    },
    // 多选
    selectionChange(val) {
      console.log('selectionChange', val)
    },
    //获取工程类型
    getProType() {
      const params = {
        dictType: 'sys_pro_type',
        dictValue: ''
      }
      dictTableOption(params).then(response => {
        console.log('🚀 ~ dictTableOption ~ response:', response)
      })
    },
    handleAdd() {
      console.log('新增')
      this.$refs.violationDialog.openDialog({
        isDialogDetail: false,
        dialogTitle: '新增违章'
      })
    },
    // 编辑
    handleEdit(row) {
      console.log('编辑', row)
      this.$refs.violationDialog.openDialog({
        isDialogDetail: false,
        dialogTitle: '编辑违章',
        ...row
      })
    },
    // 查看详情
    handleDetails(row) {
      console.log('查看详情', row)
      this.$refs.violationDialog.openDialog({
        isDialogDetail: true,
        dialogTitle: '查看详情',
        ...row
      })
    },
    // 下发处罚单
    handleIssue(row) {
      console.log('下发处罚单', row)
      this.$refs.punishFormDialog.openDialog({
        ...row
      })
    },
    // 导出数据
      handleExport() {
        try {
          let fileName = `违章信息记录_${new Date().getTime()}.xLsx`
          let url = exportViolationInfo()
          let startTime = ''
          let endTime = ''
          if (this.queryParams.violationTimeRange && this.queryParams.violationTimeRange.length > 0) {
            startTime = parseTime(this.queryParams.violationTimeRange[0])
            endTime = parseTime(this.queryParams.violationTimeRange[1])
          } else {
            startTime = ''
            endTime = ''
          }
          const params = { ...this.queryParams, startTime, endTime }
          delete params.violationTimeRange
          console.log('🚀 ~ 导出 ~ params:', params)
          this.derive(url, params, fileName)
        } catch (error) {
          console.log('导出数据失败', error)
        }
    },
    // 查看
    handleSeeFill(row) {
      console.log('查看', row)
      getViolationPhoto({
        violationId: row.violationId,
        bigType: '3',
        fileType: '8'
      }).then(response => {
        console.log('查看', response)
        this.filePreview = {
          filePreviewUrl: response.data[0].url,
          fileName: response.data[0].url
        }
        this.previewOpen = true
      })
    },
    handleSeeFills(row) {
      console.log('查看', row)
      getViolationPhoto({
        violationId: row.violationId,
        bigType: '3',
        fileType: '8'
      }).then(response => {
        console.log('查看', response)
        this.fileList = response.data
        this.document = true
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.ipt-width {
  width: 220px;
}

.see {
  color: #409eff;
  cursor: pointer;
}
</style>
