<template>
  <div>
    <el-form
      class="search-box"
      ref="form"
      :model="form"
      :inline="true"
    >
      <div class="block-title">
        查询条件
      </div>
      <el-form-item
        label="身份证号"
        prop="idcard">
        <el-input v-model="form.idcard"></el-input>
      </el-form-item>
      <el-form-item
        label="姓名"
        prop="name">
        <el-input v-model="form.name"></el-input>
      </el-form-item>
      <el-form-item
        label="手机号"
        prop="phone">
        <el-input v-model="form.phone"></el-input>
      </el-form-item>
      <el-form-item
        label="原因"
        prop="reason">
        <el-input v-model="form.reason"></el-input>
      </el-form-item>
      <el-form-item
        label="状态"
        prop="status">
        <el-select v-model="form.status" clearable placeholder="全部">
          <el-option label="生效" :value="1"></el-option>
          <el-option label="失效" :value="0"></el-option>
        </el-select>
      </el-form-item>
      <div class="btn-wrap">
        <el-button
          @click="reset"
        >
          重置
        </el-button>
        <el-button
          :disabled="loading"
          type="primary"
          @click="getList(true)"
        >
          搜索
        </el-button>
      </div>
    </el-form>

    <div class="table-box">
      <el-table
        stripe
        border
        v-loading="loading"
        :data="tableData">
        <el-table-column
          prop="idcard"
          label="身份证号"
          width="180"
        >
        </el-table-column>
        <el-table-column
          prop="name"
          label="姓名"
          width="100"
        >
        </el-table-column>
        <el-table-column
          prop="phone"
          label="手机号"
          width="120"
        >
        </el-table-column>
        <el-table-column
          prop="restrictSale"
          label="限制售票"
          width="90"
        >
          <template slot-scope="scope">
            <el-tag :type="scope.row.restrictSale === 1 ? 'danger' : 'info'" size="small">
              {{ scope.row.restrictSale === 1 ? '是' : '否' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column
          prop="restrictCheck"
          label="限制检票"
          width="90"
        >
          <template slot-scope="scope">
            <el-tag :type="scope.row.restrictCheck === 1 ? 'danger' : 'info'" size="small">
              {{ scope.row.restrictCheck === 1 ? '是' : '否' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column
          prop="reason"
          label="原因"
        >
        </el-table-column>
        <el-table-column
          prop="operatorName"
          label="操作人"
          width="100"
        >
        </el-table-column>
        <el-table-column
          prop="operateTime"
          label="操作时间"
          width="160"
        >
        </el-table-column>
        <el-table-column
          prop="expireTime"
          label="到期时间"
          width="160"
        >
        </el-table-column>
        <el-table-column
          prop="status"
          label="状态"
          width="80"
        >
          <template slot-scope="scope">
            <el-tag :type="scope.row.status === 1 ? 'success' : 'info'" size="small">
              {{ scope.row.status === 1 ? '生效' : '失效' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column
          label="操作"
          width="120"
          fixed="right"
        >
          <template slot-scope="scope">
            <el-button
              type="text"
              size="mini"
              @click="openEditDialog(scope.row)"
            >
              编辑
            </el-button>
            <el-button
              type="text"
              size="mini"
              class="del-btn"
              @click="handleDelete(scope.row)"
            >
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        background
        :current-page.sync="form.pageNum"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="form.pageSize"
        @size-change="handleSizeChange"
        @current-change="getList()"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>

    <!-- 编辑黑名单弹框 -->
    <el-dialog
      title="编辑黑名单"
      width="500px"
      :visible.sync="editDialogVisible"
      :close-on-click-modal="false"
    >
      <el-form
        ref="editForm"
        :model="editForm"
        :rules="editRules"
        label-width="100px"
      >
        <el-form-item label="姓名" prop="name">
          <el-input v-model="editForm.name"></el-input>
        </el-form-item>
        <el-form-item label="手机号" prop="phone">
          <el-input v-model="editForm.phone"></el-input>
        </el-form-item>
        <el-form-item label="限制售票" prop="restrictSale">
          <el-switch
            v-model="editForm.restrictSale"
            :active-value="1"
            :inactive-value="0"
          ></el-switch>
        </el-form-item>
        <el-form-item label="限制检票" prop="restrictCheck">
          <el-switch
            v-model="editForm.restrictCheck"
            :active-value="1"
            :inactive-value="0"
          ></el-switch>
        </el-form-item>
        <el-form-item label="原因" prop="reason">
          <el-input
            v-model="editForm.reason"
            type="textarea"
            :rows="3"
            placeholder="请输入原因"
          ></el-input>
        </el-form-item>
        <el-form-item label="到期时间" prop="expireTime">
          <el-date-picker
            v-model="editForm.expireTime"
            type="datetime"
            value-format="yyyy-MM-dd HH:mm:ss"
            placeholder="请选择到期时间"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <el-select v-model="editForm.status">
            <el-option label="生效" :value="1"></el-option>
            <el-option label="失效" :value="0"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="editDialogVisible = false">取消</el-button>
        <el-button
          type="primary"
          :loading="editSubmitting"
          @click="submitEdit"
        >
          确定
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getCustomerBlackList, updateCustomerBlack, deleteCustomerBlack } from '@/api/customerBlack'

export default {
  name: 'BlacklistManage',
  data () {
    return {
      form: {
        idcard: '',
        name: '',
        phone: '',
        reason: '',
        status: '',
        pageNum: 1,
        pageSize: 10
      },
      tableData: [],
      total: 0,
      loading: false,
      // 编辑弹框
      editDialogVisible: false,
      editSubmitting: false,
      editForm: {
        id: null,
        name: '',
        phone: '',
        restrictSale: 1,
        restrictCheck: 1,
        reason: '',
        expireTime: '',
        status: 1
      },
      editRules: {
        reason: [
          { required: true, message: '请输入原因', trigger: 'blur' }
        ]
      }
    }
  },
  created () {
    this.getList()
  },
  methods: {
    reset () {
      this.$refs.form.resetFields()
      this.form.status = ''
    },
    handleSizeChange (size) {
      this.form.pageSize = size
      this.getList()
    },
    getList (goFirst) {
      this.loading = true
      goFirst && (this.form.pageNum = 1)

      const params = { ...this.form }
      if (params.status === '') {
        delete params.status
      }
      getCustomerBlackList(params).then(res => {
        this.total = res.data.total
        this.tableData = res.data.records
      }).finally(() => {
        this.loading = false
      })
    },
    // 打开编辑弹框
    openEditDialog (row) {
      this.editForm = {
        id: row.id,
        name: row.name || '',
        phone: row.phone || '',
        restrictSale: row.restrictSale,
        restrictCheck: row.restrictCheck,
        reason: row.reason || '',
        expireTime: row.expireTime || '',
        status: row.status
      }
      this.editDialogVisible = true
      this.$nextTick(() => {
        this.$refs.editForm && this.$refs.editForm.clearValidate()
      })
    },
    // 提交编辑
    submitEdit () {
      this.$refs.editForm.validate(valid => {
        if (!valid) return
        this.editSubmitting = true
        updateCustomerBlack(this.editForm).then(() => {
          this.$message.success('修改成功')
          this.editDialogVisible = false
          this.getList()
        }).finally(() => {
          this.editSubmitting = false
        })
      })
    },
    // 删除
    handleDelete (row) {
      this.$confirm('是否删除该黑名单记录？', '提示', {
        type: 'warning'
      }).then(() => {
        deleteCustomerBlack([row.id]).then(() => {
          this.$message.success('删除成功')
          this.getList()
        })
      }).catch(() => {
        // 取消删除
      })
    }
  }
}
</script>

<style scoped>
.del-btn {
  color: #F56C6C;
}
</style>
