<template>
  <div class="app-container">
    <!--工具栏-->
    <div class="head-container">
      <div v-if="crud.props.searchToggle">
        <!-- 搜索 -->
        <el-input v-model="query.caseNumber"  size="small" placeholder="输入案件编号搜索" style="width: 180px;"
                  class="filter-item" @keyup.enter.native="crud.toQuery"/>
        <el-input v-model="query.involvedPerson"  size="small" placeholder="输入涉案人员搜索"
                  style="width: 180px;" class="filter-item" @keyup.enter.native="crud.toQuery"/>
        <el-input v-model="query.involvedCompany"  size="small" placeholder="输入涉案企业搜索"
                  style="width: 180px;" class="filter-item" @keyup.enter.native="crud.toQuery"/>
        <el-input v-model="query.lawEnforcementOfficer"  size="small" placeholder="输入执法人员搜索"
                  style="width: 180px;" class="filter-item" @keyup.enter.native="crud.toQuery"/>
        <date-range-picker v-model="query.filingTimes" startPlaceholder="立案开始时间" class="date-item"
                           endPlaceholder="立案结束时间"/>
        <date-range-picker v-model="query.caseTimes" startPlaceholder="案发开始时间" class="date-item"
                           endPlaceholder="案发结束时间"/>
        <el-select v-model="query.caseType"  size="small" placeholder="案件类型" class="filter-item"
                   style="width: 120px" @change="crud.toQuery">
          <el-option key="" label="全部" value=""/>
          <el-option v-for="item in dict.case_type" :key="item.label" :label="item.value" :value="item.value"/>
        </el-select>
        <el-select v-model="query.caseStatus"  size="small" placeholder="案件状态" class="filter-item"
                   style="width: 120px" @change="crud.toQuery">
          <el-option key="" label="全部" value=""/>
          <el-option v-for="item in caseStatusOptions" :key="item.key" :label="item.name" :value="item.key"/>
        </el-select>
        <rrOperation/>
      </div>
      <!--如果想在工具栏加入更多按钮，可以使用插槽方式， slot = 'left' or 'right'-->
      <crudOperation :permission="permission"/>

      <!--表单组件-->
      <el-dialog :close-on-click-modal="false" :before-close="crud.cancelCU" :visible.sync="crud.status.cu > 0" :title="crud.status.title" width="1080px">
        <el-form ref="form" :model="form" :rules="rules" size="small" label-width="80px">

          <div style="display: flex; gap: 10px;">
            <el-form-item label="案件编号" prop="caseNumber">
              <el-input v-model="form.caseNumber" style="width: 260px;"/>
            </el-form-item>
            <el-form-item label="案件类型" prop="caseType">
              <el-select v-model="form.caseType" style="width: 260px">
                <el-option v-for="item in dict.case_type" :key="item.label" :label="item.value" :value="item.value"/>
              </el-select>
            </el-form-item>
            <el-form-item label="案件标题" prop="caseTitle">
              <el-input v-model="form.caseTitle" style="width: 260px;"/>
            </el-form-item>
          </div>

          <div style="display: flex; gap: 10px;">
            <el-form-item label="案发地点" prop="caseLocation">
              <el-input v-model="form.caseLocation" style="width: 260px;"/>
            </el-form-item>
            <el-form-item label="案件状态" prop="caseStatus">
              <el-select v-model="form.caseStatus"  size="small" placeholder="案件状态" class="filter-item"
                         style="width: 260px">
                <el-option v-for="item in caseStatusOptions" :key="item.key" :label="item.name" :value="item.key"/>
              </el-select>
            </el-form-item>
            <el-form-item label="案发时间" prop="caseTime">
              <el-date-picker type="datetime" value-format="yyyy-MM-dd HH:mm:ss" v-model="form.caseTime"
                              style="width: 260px;"></el-date-picker>
            </el-form-item>
          </div>

          <div style="display: flex; gap: 10px;">
            <el-form-item label="案件描述" prop="caseDescription">
              <el-input v-model="form.caseDescription" style="width: 960px;" rows="2" type="textarea"/>
            </el-form-item>
          </div>

          <div style="display: flex; gap: 10px;">
            <el-form-item label="涉案企业" prop="involvedCompany">
              <el-input v-model="form.involvedCompany" style="width: 260px;"/>
            </el-form-item>
            <el-form-item label="涉案人员" prop="involvedPerson">
              <el-input v-model="form.involvedPerson" style="width: 260px;"/>
            </el-form-item>
            <el-form-item label="涉案金额" prop="caseAmount">
              <el-input v-model="form.caseAmount" style="width: 260px;" type="number" min="0"/>
            </el-form-item>
          </div>

          <div style="display: flex; gap: 10px;">
            <el-form-item label="执法人员" prop="lawEnforcementOfficer">
              <el-input v-model="form.lawEnforcementOfficer" style="width: 260px;"/>
            </el-form-item>
            <el-form-item label="执法部门" prop="enforcementDepartment">
              <el-input v-model="form.enforcementDepartment" style="width: 260px;"/>
            </el-form-item>
            <el-form-item label="执法行为" prop="enforcementAction">
              <el-input v-model="form.enforcementAction" style="width: 260px;"/>
            </el-form-item>
          </div>

          <div style="display: flex; gap: 10px;">
            <el-form-item label="处罚类型" prop="punishmentType">
              <el-input v-model="form.punishmentType" style="width: 260px;"/>
            </el-form-item>
            <el-form-item label="处罚金额" prop="punishmentAmount">
              <el-input v-model="form.punishmentAmount" style="width: 260px;" type="number" min="0"/>
            </el-form-item>
            <el-form-item label="立案时间" prop="filingTime">
              <el-date-picker type="datetime" value-format="yyyy-MM-dd HH:mm:ss" v-model="form.filingTime"
                              style="width: 260px;"></el-date-picker>
            </el-form-item>
          </div>

          <div style="display: flex; gap: 10px;">
            <el-form-item label="证据清单" prop="evidenceList">
              <el-input v-model="form.evidenceList" style="width: 260px;"/>
            </el-form-item>
            <el-form-item label="法律依据" prop="legalBasis">
              <el-input v-model="form.legalBasis" style="width: 260px;"/>
            </el-form-item>
            <el-form-item label="结案时间" prop="closingTime">
              <el-date-picker type="datetime" value-format="yyyy-MM-dd HH:mm:ss" v-model="form.closingTime"
                              style="width: 260px;"></el-date-picker>
            </el-form-item>
          </div>

          <el-form-item label="备注" prop="remark">
            <el-input v-model="form.remark" style="width: 960px;" rows="2" type="textarea"/>
          </el-form-item>
          <el-form-item label="哈希">
            <el-input v-model="form.hexId" style="width: 960px;" disabled/>
          </el-form-item>

        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="text" @click="crud.cancelCU">取消</el-button>
          <el-button :loading="crud.status.cu === 2" type="primary" @click="crud.submitCU">确认</el-button>
        </div>
      </el-dialog>

      <el-dialog :close-on-click-modal="false" :visible.sync="showChainListData" title="溯源" width="1500px">
        <el-table :data="chainListData" >
          <el-table-column prop="caseNumber" label="案件编号" />
          <el-table-column prop="caseType" label="案件类型" />
          <el-table-column prop="caseTitle" label="案件标题" />
          <el-table-column prop="caseDescription" label="案件描述" />
          <el-table-column prop="involvedPerson" label="涉案人员" />
          <el-table-column prop="involvedCompany" label="涉案企业" />
          <el-table-column prop="caseAmount" label="涉案金额" />
          <el-table-column prop="caseLocation" label="案发地点" />
          <el-table-column prop="caseTime" label="案发时间" />
          <el-table-column prop="lawEnforcementOfficer" label="执法人员" />
          <el-table-column prop="enforcementDepartment" label="执法部门" />
          <el-table-column prop="enforcementAction" label="执法行为" />
          <el-table-column prop="punishmentType" label="处罚类型" />
          <el-table-column prop="punishmentAmount" label="处罚金额" />
          <el-table-column prop="caseStatus" label="案件状态" />
          <el-table-column prop="filingTime" label="立案时间" />
          <el-table-column prop="closingTime" label="结案时间" />
          <el-table-column prop="evidenceList" label="证据清单" />
          <el-table-column prop="legalBasis" label="法律依据" />
          <el-table-column prop="remark" label="备注" />
          <el-table-column prop="hexId" label="上链哈希"/>
          <el-table-column prop="createTime" label="创建时间" />
        </el-table>
        <!--分页组件-->
        <template>
          <el-pagination
            :page-size.sync="chainPage.size"
            :total="chainPage.total"
            :current-page.sync="chainPage.page"
            style="margin-top: 8px;"
            layout="total, prev, pager, next, sizes"
            @size-change="chainSizeChangeHandler($event)"
            @current-change="chainPageChangeHandler"
          />
        </template>

      </el-dialog>

      <!--表格渲染-->
      <el-table ref="table" v-loading="crud.loading" :data="crud.data" size="small" style="width: 100%;"
                @selection-change="crud.selectionChangeHandler">
        <el-table-column type="selection" width="55"/>
        <el-table-column prop="caseNumber" label="案件编号"/>
        <el-table-column prop="caseType" label="案件类型"/>
        <el-table-column prop="caseTitle" label="案件标题"/>
        <el-table-column prop="caseDescription" label="案件描述"/>
        <el-table-column prop="involvedPerson" label="涉案人员"/>
        <el-table-column prop="involvedCompany" label="涉案企业"/>
        <el-table-column prop="caseAmount" label="涉案金额"/>
        <el-table-column prop="caseLocation" label="案发地点"/>
        <el-table-column prop="caseTime" label="案发时间"/>
        <el-table-column prop="lawEnforcementOfficer" label="执法人员"/>
        <el-table-column prop="enforcementDepartment" label="执法部门"/>
        <el-table-column prop="enforcementAction" label="执法行为"/>
        <el-table-column prop="punishmentType" label="处罚类型"/>
        <el-table-column prop="punishmentAmount" label="处罚金额"/>
        <el-table-column prop="caseStatus" label="案件状态"/>
        <el-table-column prop="filingTime" label="立案时间"/>
        <el-table-column prop="closingTime" label="结案时间"/>
        <el-table-column prop="evidenceList" label="证据清单"/>
        <el-table-column prop="legalBasis" label="法律依据"/>
        <el-table-column prop="remark" label="备注"/>
        <el-table-column prop="hexId" label="哈希"/>
        <el-table-column prop="createTime" label="创建时间"/>
        <el-table-column v-if="checkPer(['admin','busLawEnforcement:edit','busLawEnforcement:del'])" label="操作" width="260px" align="center">
            <template slot-scope="scope">
               <udOperation
                 :data="scope.row"
                 :permission="permission"
               />
               <el-button type="success" size="mini" title="溯源" @click="openChainListData(scope.row.id)"><svg-icon icon-class="list"/></el-button>
            </template>
        </el-table-column>
      </el-table>
      <!--分页组件-->
      <pagination/>
    </div>
  </div>
</template>

<script>
import crudBusLawEnforcement, {chainList} from '@/api/system/busLawEnforcement'
import CRUD, {presenter, header, form, crud} from '@crud/crud'
import rrOperation from '@crud/RR.operation'
import crudOperation from '@crud/CRUD.operation'
import udOperation from '@crud/UD.operation'
import pagination from '@crud/Pagination'
import DateRangePicker from "@/components/DateRangePicker/index.vue";

const defaultForm = {
  id: null,
  caseNumber: null,
  caseType: null,
  caseTitle: null,
  caseDescription: null,
  involvedPerson: null,
  involvedCompany: null,
  caseAmount: null,
  caseLocation: null,
  caseTimes: null,
  caseTime: null,
  lawEnforcementOfficer: null,
  enforcementDepartment: null,
  enforcementAction: null,
  punishmentType: null,
  punishmentAmount: null,
  caseStatus: null,
  filingTimes: null,
  filingTime: null,
  closingTime: null,
  evidenceList: null,
  legalBasis: null,
  remark: null,
  hexId: null,
  createTime: null,
  updateTime: null
}
export default {
  name: 'BusLawEnforcement',
  components: {DateRangePicker, pagination, crudOperation, rrOperation, udOperation},
  mixins: [presenter(), header(), form(defaultForm), crud()],
  // 设置数据字典
  dicts: ['case_type'],
  cruds() {
    return CRUD({
      title: '',
      url: 'api/busLawEnforcement',
      idField: 'id',
      sort: 'id,desc',
      crudMethod: {...crudBusLawEnforcement}
    })
  },
  data() {
    return {
      chainPage: { page: 1, size: 8, total: 0 },
      chainLawId: null,
      chainListData: [],
      showChainListData: false,
      permission: {
        add: ['admin', 'busLawEnforcement:add'],
        edit: ['admin', 'busLawEnforcement:edit'],
        del: ['admin', 'busLawEnforcement:del']
      },
      caseStatusOptions: [
        {'key': '处理中', 'name': '处理中'},
        {'key': '已结案', 'name': '已结案'}
      ],
      rules: {
        caseNumber: [
          {required: true, message: '案件编号不能为空', trigger: 'blur'}
        ],
        caseType: [
          {required: true, message: '案件类型不能为空', trigger: 'blur'}
        ],
        caseTitle: [
          {required: true, message: '案件标题不能为空', trigger: 'blur'}
        ],
        caseLocation: [
          {required: true, message: '案发地点不能为空', trigger: 'blur'}
        ],
        caseTime: [
          {required: true, message: '案发时间不能为空', trigger: 'blur'}
        ],
        lawEnforcementOfficer: [
          {required: true, message: '执法人员不能为空', trigger: 'blur'}
        ],
        enforcementDepartment: [
          {required: true, message: '执法部门不能为空', trigger: 'blur'}
        ],
        enforcementAction: [
          {required: true, message: '执法行为不能为空', trigger: 'blur'}
        ],
        caseStatus: [
          {required: true, message: '案件状态不能为空', trigger: 'blur'}
        ],
        filingTime: [
          {required: true, message: '立案时间不能为空', trigger: 'blur'}
        ],
        legalBasis: [
          {required: true, message: '法律依据不能为空', trigger: 'blur'}
        ],
      },
    }
  },
  created() {
    this.crud.optShow = {add: true, edit: true, del: true, download: false}
  },
  methods: {
    openChainListData(id) {
      this.showChainListData = true;
      this.chainLawId = id;
      this.pageChainListData();
    },
    pageChainListData() {
      let params = "?lawId=" + this.chainLawId + "&page=" + this.chainPage.page + "&size=" + this.chainPage.size;
      chainList(params).then(res => {
        this.chainListData = res.content;
        this.chainPage.total = res.totalElements;
      })
    },
    // 当前页改变
    chainPageChangeHandler(e) {
      this.chainPage.page = e
      this.pageChainListData();
    },
    // 每页条数改变
    chainSizeChangeHandler(e) {
      this.chainPage.size = e
      this.chainPage.page = 1
      this.pageChainListData();
    },
    // 钩子：在获取表格数据之前执行，false 则代表不获取数据
    [CRUD.HOOK.beforeRefresh]() {
      return true
    },
  }
}
</script>

<style scoped>

</style>
