<template>
  <div class="fullHeight">
    <div class="searchBox whiteBlock">
      <el-form
        :inline="true"
        size="medium"
        :model="searchForm"
        ref="searchForm"
      >
        <div style="display: flex; justify-content: space-between;margin-top:15px">
          <div style="position: relative;">
            <el-form-item label="访客姓名" prop="visitName">
              <el-input
                v-model="searchForm.visitName"
                :placeholder="$t('message.personnelPosition.please_enter')"
                clearable
              ></el-input>
            </el-form-item>
            <el-form-item label="预约人姓名" prop="appointmentName">
              <el-input
                v-model="searchForm.appointmentName"
                :placeholder="$t('message.personnelPosition.please_enter')"
                clearable
              ></el-input>
            </el-form-item>
            <el-form-item label="预约审批结果" prop="isSuccess">
              <el-select v-model="searchForm.isSuccess" placeholder="请选择">
                <el-option
                  v-for="item in isSuccessState"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <!-- 状态 -->
            <el-form-item label="当前状态" prop="isEnable">
              <el-select v-model="searchForm.isEnable" placeholder="请选择">
                <el-option
                  v-for="item in isEnableState"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <!-- 时间 -->
            <el-form-item label="预约有效结束时间" prop="workerName">
              <el-date-picker
                v-model="searchForm.endTime"
                type="daterange"
                value-format="yyyy-MM-dd"
                range-separator="—"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
              >
              </el-date-picker>
            </el-form-item>
            <el-form-item label="预约有效开始时间" prop="workerName">
              <el-date-picker
                v-model="searchForm.beginTime"
                type="daterange"
                value-format="yyyy-MM-dd"
                range-separator="—"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
              >
              </el-date-picker>
            </el-form-item>
            <span style="width: 400px;">
            <el-form-item>
              <el-button v-permission="{key: 'fkyyjl_inquiry', menuPath: '/project/labor/visitRecord'}" type="primary" plain @click="loadCardData">
                {{ $t('message.personnelPosition.beaconManage.query') }}
              </el-button>
              <el-button v-permission="{key: 'fkyyjl_delete', menuPath: '/project/labor/visitRecord'}" type="warning" plain @click="resetForm">
                {{ $t('message.personnelPosition.beaconManage.refresh') }}
              </el-button>
              <!-- <el-button type="primary" @click="addPoint">
            {{ $t("message.laborDev.add2") }}
          </el-button> -->
            </el-form-item>
          </span>
          </div>

        </div>
      </el-form>
    </div>
    <div class="table_wrap whiteBlock">
      <el-table class="tables" :data="pointList">
        <el-table-column
          type="index"
          width="50"
          align="center"
          :label="$t('message.personnelPosition.beaconManage.table.index')"
        ></el-table-column>
        <el-table-column
          prop="visitName"
          label="访客姓名"
          align="center"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          prop="idCard"
          label="访客身份证号"
          align="center"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          prop="visitUnit"
          label="来访人单位"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="takeName"
          label="接送人姓名"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="takePhone"
          label="接送人手机号"
          show-overflow-tooltip
          align="center"
        ></el-table-column>
        <el-table-column
          prop="takeUnit"
          label="接送人单位"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="takeJob"
          label="接送人职务"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="reason"
          label="访问事由"
          align="center"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          prop="local"
          label="访问区域"
          align="center"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          prop="carNumber"
          label="车牌号"
          align="center"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          prop="appointmentName"
          label="预约人姓名"
          show-overflow-tooltip
          align="center"
        ></el-table-column>
        <el-table-column
          prop="isSuccess"
          label="预约结果"
          align="center"
        >
        <template v-slot="{row}">{{row.isSuccess=== 1 ? "预约成功" : row.isSuccess=== 0 ?'预约失败' : ''}}</template>
      </el-table-column>
        <el-table-column
          prop="beginTime"
          label="预约有效开始时间"
          width="150"
          align="center"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          prop="endTime"
          label="预约有效结束时间"
          width="150"
          align="center"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          prop="isEnable"
          label="当前状态"
          align="center"
        >
        <template v-slot="{row}">{{row.isEnable === 1 ? "预约有效" : row.isEnable === 0 ? '预约已失效' : ''}}</template>
      </el-table-column>
        <el-table-column
          :label="$t('message.personnelPosition.beaconManage.table.operation')"
          align="center"
          width="150"
        >
          <template v-slot="{row}">
            <div>
              <!-- <div @click="editPoint(scope.row)" class="operationText">
                <img
                  src="@/assets/images/icon-edit.png"
                  width="15px"
                  height="15px"
                />
                <span>{{
                  $t('message.personnelPosition.beaconManage.table.edit')
                }}</span>
              </div> -->
              <div @click="removePoint(row)" class="operationText" v-permission="{key: 'fkyyjl_delete', menuPath: '/project/labor/visitRecord'}">
                <img
                  src="@/assets/images/icon-delete.png"
                  width="15px"
                  height="15px"
                />
                <span>{{
                  $t('message.personnelPosition.beaconManage.table.delete')
                }}</span>
              </div>
            </div>
          </template>
        </el-table-column>
        <!-- <div slot="empty">{{$t('message.personnelPosition.empty')}}</div> -->
      </el-table>
      <el-pagination
        class="pagerBox"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageNo"
        :page-sizes="$store.state.PAGESIZRS"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next"
        :total="Number(total)"
        background
      ></el-pagination>
    </div>
    <!-- 添加卡片弹框 -->
    <el-dialog
      :modal-append-to-body="false"
      :title="cardDialogTitle"
      :visible.sync="cardDialog"
      width="667px"
      @close="close"
    >
      <div class="dialog_content">
        <el-form
          size="medium"
          :model="cardForm"
          ref="cardForm"
          :rules="cardFormRules"
          label-width="125px"
          class="dialogFormBox"
        >
          <el-form-item
            :label="$t('message.laborDev.addToBlackReason')"
            prop="addReason"
          >
            <el-input
              v-model="cardForm.addReason"
              :placeholder="$t('message.personnelPosition.please_enter')"
            ></el-input>
          </el-form-item>
          <el-form-item
            :label="$t('message.laborDev.addToBlackTime')"
            prop="addTime"
          >
            <el-date-picker
              v-model="cardForm.addTime"
              type="date"
              :placeholder="$t('message.laborMange.pleaseSelectADate')"
              value-format="yyyy-MM-dd"
              style="width: 100%"
            ></el-date-picker>
          </el-form-item>
          <el-form-item
            :label="$t('message.laborDev.blackNames')"
            prop="workerId"
          >
            <!-- multiple clearable-->
            <el-select
              v-model="cardForm.workerId"
              :placeholder="$t('message.personnelPosition.please_select')"
              filterable
            >
              <el-option
                :label="item.workerName"
                :value="item.id"
                v-for="(item, index) in allPersonList"
                :key="index"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <div class="dialog-footer">
            <el-button
              class="cancleBtn"
              @click="cardDialog = false"
              icon="el-icon-circle-close"
              size="medium"
              >{{ $t('message.personnelPosition.cancel') }}
            </el-button>
            <el-button
              type="primary"
              icon="el-icon-circle-check"
              @click="saveCardFn"
              size="medium"
              >{{ $t('message.personnelPosition.determine') }}
            </el-button>
          </div>
        </el-form>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { getWorkerInfoListApi } from '@/assets/js/api/personnelPosition.js'
import {
  workerBlacklistListApi,
  workerBlacklistAddApi,
  workerBlacklistEditApi,
  workerBlacklistDeleteApi
} from '@/assets/js/api/laborPerson.js'

import { xmglXzVisitorManageRecordPageApi,xmglXzVisitorManageRecordDeleteApi } from '@/assets/js/api/visitRecordAPI.js'
export default {
  data () {
    return {
      searchForm: {
       appointmentName:'', //预约人员姓名
       beginTime:'' , // 有效开始时间
       endTime:'', // 有效结束时间
       idCard:'',// 来访人员身份证号
       isEnable:'',// 是否有效
       isSuccess:'',// 预约是否成功
       visitName:''
      },
      pointList: [],
      total: 0,
      pageNo: 1,
      pageSize: 10,
      cardDialogTitle: '',
      cardDialog: false,
      cardForm: {
        addReason: '',
        addTime: '',
        idCard: '',
        reason: '',
        workerId: '',
        workerName: '',
        projectSn: this.$store.state.projectSn
      },
      cardFormRules: {
        addReason: [
          {
            required: true,
            message: this.$t('message.personnelPosition.required'),
            trigger: 'blur'
          }
        ],
        addTime: [
          {
            required: true,
            message: this.$t('message.personnelPosition.mandatory'),
            trigger: 'change'
          }
        ],
        workerId: [
          {
            required: true,
            message: this.$t('message.personnelPosition.mandatory'),
            trigger: 'change'
          }
        ]
      },
      isAdd: false,
      allPersonList: [],
      isEnableState: [
        {
          value: 1,
          label: '预约有效'
        },
        {
          value: 0,
          label: '预约已失效'
        }
      ],
      isSuccessState: [
        {
          value: 1,
          label: '预约成功'
        },
        {
          value: 0,
          label: '预约失败'
        }
      ],
      dialogVisible:false
    }
  },
  mounted () {
    this.loadAllPerson()
    this.loadCardData()
  },
  methods: {
    //获取所有人员
    loadAllPerson () {
      getWorkerInfoListApi({
        projectSn: this.$store.state.projectSn,
        userEnterpriseId: this.$store.state.userInfo.userEnterpriseId
      }).then(res => {
        this.allPersonList = res.result
      })
    },
    addPoint (event) {
      this.isAdd = true
      this.cardDialog = true
      this.cardForm = {
        addReason: '',
        addTime: '',
        idCard: '',
        reason: '',
        workerId: '',
        workerName: '',
        projectSn: this.$store.state.projectSn
      }
      this.cardDialogTitle = this.$t('message.laborDev.add2')
    },
    editPoint (item) {
      this.isAdd = false
      this.cardDialogTitle = this.$t('message.laborDev.btn_edit') //编辑卡片
      this.cardForm = JSON.parse(JSON.stringify(item))
      this.cardDialog = true
    },
    removePoint (item) {
      this.$confirm(
        this.$t('message.personnelPosition.beaconManage.table.confirmText') ,
        this.$t('message.personnelPosition.beaconManage.table.Tips'),
        {
          type: 'warning'
        }
      ).then(() => {
        xmglXzVisitorManageRecordDeleteApi({ id: item.id }).then(res => {
          this.loadCardData()
          this.$message.success(
            this.$t('message.personnelPosition.delete_success')
          ) //删除成功!
        })
      })
    },
    //获取卡片列表
    loadCardData () {
      let requestData = {
        projectSn: this.$store.state.projectSn,
        pageNo: this.pageNo,
        pageSize: this.pageSize,
        appointmentName:this.searchForm.appointmentName,
        idCard:this.searchForm.idCard,
        isEnable:this.searchForm.isEnable,
        isSuccess:this.searchForm.isSuccess,
        visitName:this.searchForm.visitName
      }
      if(this.searchForm.beginTime){
        requestData.beginTime_begin = this.searchForm.beginTime[0];
        requestData.beginTime_end = this.searchForm.beginTime[1];
      }
      if(this.searchForm.endTime){
        requestData.endTime_begin = this.searchForm.endTime[0];
        requestData.endTime_end = this.searchForm.endTime[1];
      }
      xmglXzVisitorManageRecordPageApi(requestData).then(res => {
        this.pointList = res.result.records
        this.total = res.result.total
      })
    },
    //添加或编辑卡片
    saveCardFn () {
      this.$refs['cardForm'].validate(valid => {
        if (valid) {
          if (this.isAdd) {
            // this.cardForm.floorId = this.currentFloorDetail.floorId
            workerBlacklistAddApi(this.cardForm).then(res => {
              this.cardDialog = false
              this.loadCardData()
              this.$message.success(
                this.$t('message.personnelPosition.add_success')
              ) //添加成功！
            })
          } else {
            workerBlacklistEditApi(this.cardForm).then(res => {
              this.cardDialog = false
              this.loadCardData()
              this.$message.success(
                this.$t('message.personnelPosition.edit_success')
              ) //编辑成功！
            })
          }
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    resetForm () {
      this.$refs['searchForm'].resetFields()
      this.searchForm.beginTime = 0
      this.searchForm.endTime = 0
      this.loadCardData()
    },

    //查看条数
    handleSizeChange (val) {
      this.pageSize = val
      this.loadCardData()
    },
    //查看页
    handleCurrentChange (val) {
      this.pageNo = val
      this.loadCardData()
    },
    close () {
      this.$nextTick(() => {
        this.$refs.cardForm.clearValidate()
      })
    }
  }
}
</script>

<style lang="less" scoped>
::v-deep {
  .el-form-item {
    margin-bottom: 5px;
  }

  .searchBox{
    height:auto;
  }
}
</style>
