<template>
  <div class="app-container">
    <div class="filter-container">
      <el-form ref="form" v-model="form">
        <el-row>
          <el-col :span="5">
            <el-form-item label="车牌号:">
              <el-input v-model="form.LICENCE_NO" placeholder="搜索" class="filter-item" style="width: 200px;"/>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-button v-waves class="filter-item" type="primary" icon="el-icon-search" @click="getQuery">搜索</el-button>
            <el-button v-waves class="filter-item" type="success" icon="el-icon-refresh" @click="reset">重置</el-button>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <el-table
      v-loading="listLoading"
      ref="multipleTable"
      :data="varList"
      :row-key="getRowKey"
      :header-cell-style="{
        'font-weight': 'bold',
        'color': '#000'
      }"
      tooltip-effect="dark"
      border
      fit
      highlight-current-row
    >
      <el-table-column
        :reserve-selection="true"
        type="selection"
        width="55"
        align="center"/>
      <el-table-column type="index" label="序号" width="50" align="center" />
      <el-table-column prop="LICENCE_NO" label="车牌号"/>
      <el-table-column prop="CONTACT" label="联系人姓名"/>
      <el-table-column prop="PHONE" label="联系人电话"/>
      <el-table-column label="车牌类型" align="center">
        <template slot-scope="{row}">
          {{ translateLicenceType(row.LICENCE_TYPE) }}
        </template>
      </el-table-column>
      <el-table-column label="车辆类型" align="center">
        <template slot-scope="{row}">
          {{ translateVehicleType(row.VEHICLE_TYPE) }}
        </template>
      </el-table-column>
      <el-table-column prop="AUDIT_STATE" label="审核状态" >
        <template slot-scope="{row}">
          <el-tag v-if="row.QY_AUDITOR == null && row.GA_AUDITOR == null" type="success">待申请</el-tag>
          <el-tag v-if="(row.IS_AUDIT === '0' || row.IS_AUDIT === null) && row.GA_AUDITOR != null" type="success">待公安审批</el-tag>
          <el-tag v-if="row.IS_AUDIT === '1' && row.QY_AUDITOR != null" type="success">待企业审批</el-tag>
          <el-tag v-if="row.IS_AUDIT === '2'" type="success">企业审批通过</el-tag>
          <el-tag v-if="row.IS_AUDIT === '3'" type="error">审批驳回</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="left" width="300">
        <template slot-scope="{row}">
          <el-button v-if="getButton(row)" type="primary" icon="el-icon-edit" size="mini" @click="apply(row)">申请</el-button>
          <el-button v-if="row.IS_AUDIT === '3'" type="warning" icon="el-icon-edit" size="mini" @click="remark(row)">查看原因</el-button>
          <el-button v-if="row.IS_AUDIT === '3'" type="primary" icon="el-icon-edit" size="mini" @click="apply(row)">重新申请</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="page-btn-group">
      <div>
        <el-button plain type="info" @click="returnBtn">返回</el-button>
      </div>
      <pagination :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />
    </div>
    <el-dialog
      :visible.sync="dialogVisible"
      :before-close="handleClose"
      title="申请信息"
      width="30%">
      <el-form ref="auditForm" :model="auditForm" :rules="rules" label-width="120px">
        <el-form-item label="访问起始时间" prop="VISIT_START_TIME">
          <el-date-picker
            v-model="auditForm.VISIT_START_TIME"
            type="datetime"
            placeholder="选择日期时间"/>
        </el-form-item>
        <el-form-item label="访问结束时间" prop="VISIT_END_TIME">
          <el-date-picker
            v-model="auditForm.VISIT_END_TIME"
            type="datetime"
            placeholder="选择日期时间"/>
        </el-form-item>
        <el-form-item v-if="showCorpSelect" label="审核人公司" prop="CORPINFO_ID">
          <el-select
            v-model="auditForm.CORPINFO_ID"
            placeholder="请选择公司"
            filterable
            @change="handleCorpChange">
            <el-option
              v-for="corp in corpList"
              :key="corp.CORPINFO_ID"
              :label="corp.CORP_NAME"
              :value="corp.CORPINFO_ID"/>
          </el-select>
        </el-form-item>
        <el-form-item label="审核人" prop="AUDITOR_ID">
          <el-select
            v-model="auditForm.AUDITOR_ID"
            filterable
            placeholder="请选择审核人">
            <el-option
              v-for="auditor in personList"
              :key="auditor.USER_ID"
              :label="auditor.USERNAME"
              :value="auditor.USER_ID"/>
          </el-select>
        </el-form-item>
        <el-form-item label="访问地" prop="VISIT_PLACE">
          <el-select
            v-model="auditForm.VISIT_PLACE"
            filterable
            placeholder="请选择访问口门">
            <el-option
              v-for="place in doorList"
              :key="place.DOOR_ID"
              :label="place.DOOR_NAME"
              :value="place.DOOR_ID"/>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitAudit">确 定</el-button>
      </span>
    </el-dialog>

    <el-dialog
      :visible.sync="remarkDialogVisible"
      :before-close="handleRemarkClose"
      title="驳回原因"
      width="30%">
      <el-form>
        <el-form-item label="驳回原因">
          <el-input
            v-model="remarkText"
            :rows="4"
            type="textarea"
            readonly/>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="remarkDialogVisible = false">关闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import Pagination from '@/components/Pagination' // 通过 el-pagination二次打包
import { requestFN } from '@/utils/request'
import SelectTree from '@/components/SelectTree'
export default{
  components: { Pagination, SelectTree },
  data() {
    return {
      listQuery: {
        page: 1,
        limit: 10
      },
      remarkDialogVisible: false, // 控制驳回原因弹窗的显示
      remarkText: '',
      areaList: [], // 省市县列表
      listLoading: true,
      varList: [],
      total: 0,
      title: '',
      isShow: false,
      dialogVisible: false,
      addForm: {
        LICENCE_NO: '', // 车牌号
        MOTORCADE_ID: '', // 所属车队ID
        CORPINFO_ID: '',
        LICENCE_TYPE: '',
        VEHICLE_TYPE: '',
        CONTACT: '',
        PHONE: '',
        EMISSION_STANDARDS: ''
      },
      form: {
        MOTORCADE_NAME: '',
        PHONE: '',
        ID_CARD: '',
        CORPINFO_NAME: '',
        DEPARTMENT_NAME: '',
        VISIT_START_TIME: '',
        VISIT_END_TIME: '',
        DOOR_NAME: '',
        TEMPORARY_TYPE: '2',
        CORPINFO_ID: JSON.parse(sessionStorage.getItem('user')).CORPINFO_ID,
        MOTORCADE_ID: this.$parent.MOTORCADE_ID
      },
      showCorpSelect: true,
      auditForm: {
        VISIT_START_TIME: '',
        VISIT_END_TIME: '',
        CORPINFO_ID: '',
        AUDITOR_ID: '',
        VISIT_PLACE: ''
      },
      corpList: [], // 公司列表
      doorList: [], // 口门列表
      personList: [], // 审核人
      // 车牌类型列表
      licenceTypeList: [
        // { ID: '', NAME: '请选择' },
        { ID: '0', NAME: '白牌' },
        { ID: '1', NAME: '蓝牌' },
        { ID: '2', NAME: '黄牌' },
        { ID: '3', NAME: '绿牌' },
        { ID: '4', NAME: '黑牌' }
      ],
      // 车辆类型列表
      vehicleTypeList: [
        // { ID: '', NAME: '请选择' },
        { ID: '0', NAME: '货车' },
        { ID: '1', NAME: '轿车' },
        { ID: '2', NAME: '大巴客车' }
      ],
      // 车辆下拉树默认属性
      vehicleDefaultProps: {
        value: 'ID',
        label: 'NAME',
        children: 'nodes'
      },
      rules: {
        VISIT_START_TIME: [
          { required: true, message: '访问起始时间不能为空', trigger: 'blur' },
          { validator: (rule, value, callback) => {
            if (value !== '') {
              if (this.auditForm.VISIT_START_TIME !== '') {
                this.$refs.auditForm.validateField('VISIT_END_TIME')
              }
              callback()
            }
          }, trigger: 'change' }
        ],
        VISIT_END_TIME: [
          { required: true, message: '访问结束时间不能为空', trigger: 'blur' },
          { validator: (rule, value, callback) => {
            if (value !== '' && this.auditForm.VISIT_START_TIME &&
              this.auditForm.VISIT_START_TIME >= this.auditForm.VISIT_END_TIME) {
              callback(new Error('起始时间不能大于结束时间'))
            }
            callback()
          }, trigger: 'change' }
        ],
        CORPINFO_ID: [{ required: true, message: '审核公司不能为空', trigger: 'blur' }],
        AUDITOR_ID: [{ required: true, message: '审核人不能为空', trigger: 'blur' }],
        VISIT_PLACE: [{ required: true, message: '访问地不能为空', trigger: 'blur' }]
      }
    }
  },
  async created() {
    this.getList()
  },
  methods: {
    getButton(row) {
      if (row.IS_DANGEROUS_CAR === '0' && row.IS_AUDIT === '1' && row.QY_AUDITOR == null) {
        return true
      } else if (row.IS_DANGEROUS_CAR === '1' && row.IS_AUDIT === '0' && row.GA_AUDITOR == null) {
        return true
      } else {
        return false
      }
    },
    // 搜索
    getQuery() {
      this.$refs.multipleTable.clearSelection()
      this.getList()
    },
    remark(row) {
      this.remarkText = row.QY_REMARK || row.GA_REMARK // 假设驳回原因存储在 row.REJECT_REASON 中
      this.remarkDialogVisible = true // 显示弹窗
    },
    handleRemarkClose() {
      this.remarkDialogVisible = false // 关闭弹窗
    },
    translateLicenceType(id) {
      for (var i = 0; i < this.licenceTypeList.length; i++) {
        if (this.licenceTypeList[i].ID == id) return this.licenceTypeList[i].NAME
      }
    },
    translateVehicleType(id) {
      for (var i = 0; i < this.vehicleTypeList.length; i++) {
        if (this.vehicleTypeList[i].ID == id) return this.vehicleTypeList[i].NAME
      }
    },
    // 重置
    reset() {
      this.form.LICENCE_NO = ''
      this.getList()
    },
    // 获取列表
    getList() {
      this.listLoading = true
      requestFN(
        '/mkmj/management/carInfoList?showCount=' + this.listQuery.limit + '&currentPage=' + this.listQuery.page, this.form
      ).then((data) => {
        console.log(data)
        this.listLoading = false
        this.varList = data.carInfoList
        this.total = data.page.totalResult
        this.hasButton()
        this.pd = data.pd
      }).catch((e) => {
        this.listLoading = false
      })
    },
    apply(row) {
      this.dialogVisible = true
      this.auditForm = {
        VISIT_START_TIME: '',
        VISIT_END_TIME: '',
        CORPINFO_ID: '',
        AUDITOR_ID: '',
        VISIT_PLACE: ''
      }
      this.VEHICLE_ID = row.VEHICLE_ID
      this.IS_DANGEROUS_CAR = row.IS_DANGEROUS_CAR
      this.showCorpSelect = row.IS_DANGEROUS_CAR !== '1'
      // 这里可以调用接口获取公司列表、审核人列表和访问地列表
      this.getCorpList()
      this.getPlaceList()
      if (!this.showCorpSelect) {
        this.getAuditorList()
      }
    },
    handleCorpChange(corpId) {
      // 根据选择的公司ID获取审核人列表
      this.getAuditorList(corpId)
    },
    getCorpList() {
      // 调用接口获取公司列表
      requestFN('/mkmj/management/getCorpList').then(response => {
        this.corpList = response.corpList
      })
    },
    getAuditorList(corpId) {
      // 调用接口获取审核人列表
      requestFN('/mkmj/management/getPersonList',
        { CORPINFO_ID: corpId }
      ).then(response => {
        this.personList = response.personList
      })
    },
    getPlaceList() {
      // 调用接口获取访问地列表
      requestFN('/mkmj/management/getPlaceList').then(response => {
        this.doorList = response.doorList
      })
    },
    submitAudit() {
      this.$refs.auditForm.validate(valid => {
        if (!valid) {
          return false
        }
        // 提交审核信息
        requestFN('/mkmj/management/intoPortApplication',
          {
            VEHICLE_ID: this.VEHICLE_ID,
            IS_DANGEROUS_CAR: this.IS_DANGEROUS_CAR,
            VISIT_START_TIME: this.auditForm.VISIT_START_TIME,
            VISIT_END_TIME: this.auditForm.VISIT_END_TIME,
            AUDITOR: this.auditForm.AUDITOR_ID,
            DOOR_ID: this.auditForm.VISIT_PLACE
          }
        ).then(response => {
          this.$message.success('申请提交成功')
          this.dialogVisible = false
          this.getList()
        })
      })
    },
    handleClose() {
      this.dialogVisible = false
      this.auditForm = {
        VISIT_START_TIME: '',
        VISIT_END_TIME: '',
        CORPINFO_ID: '',
        AUDITOR_ID: '',
        VISIT_PLACE: ''
      }
    },
    returnBtn() {
      this.$parent.activeName = 'List'
    }

  }

}
</script>

