<template>
  <div class="subPage">
    <div class="list flex-h">
      <div class="flex-item">
        <div class="flex-h" style="margin: 20px 0 0;border:none;">
          <div class="flex-item">
            <div class="userInfo">
              <span>用户名：</span>
              <b>{{customerName}}</b>
              <span>手机号：</span>
              <b>{{phone}}</b>
            </div>
          </div>
          <el-button
            size="mini"
            type="warning"
            @click="reback">返回</el-button>
        </div>
        <div v-if="courses.length>0">
          <el-table
              :data="courses"
              stripe
              style="width: 100%">
              <el-table-column
                prop="CaseName"
                label="所在案场">
              </el-table-column>
              <el-table-column
                prop="LocationName"
                label="课程分类">
              </el-table-column>
              <el-table-column
                prop="CourseName"
                label="课程名称">
              </el-table-column>
              <el-table-column
                prop="DetailName"
                label="课时名称">
              </el-table-column>
              <el-table-column
                prop="StartDate"
                label="课程开始时间">
                <template slot-scope="scope">
                  <span>{{scope.row.StartDate === '0001-01-01T00:00:00Z' ? '-' : toolClass.dateFormat(scope.row.StartDate)}}</span>
                </template>
              </el-table-column>
              <el-table-column
                prop="EndDate"
                label="课程结束时间">
                <template slot-scope="scope">
                  <span>{{scope.row.EndDate === '0001-01-01T00:00:00Z' ? '-' : toolClass.dateFormat(scope.row.EndDate)}}</span>
                </template>
              </el-table-column>
              <el-table-column
                label="操作"
                width="200">
                <template slot-scope="scope">
                  <el-button
                    size="mini"
                    type="success"
                    v-if="scope.row.VerifyStatus==='useable'"
                    @click="check(scope.row)">核销</el-button>
                  <el-button
                    size="mini"
                    type="info"
                    v-if="scope.row.VerifyStatus==='late'">逾期核销</el-button>
                  <el-button
                    size="mini"
                    type="info"
                    v-if="scope.row.VerifyStatus==='used'">已完成</el-button>
                </template>
              </el-table-column>
            </el-table>
            <el-pagination
            @current-change="handleCurrentChange"
            :current-page.sync="page"
            :page-size="pagesize"
            layout="prev, pager, next, jumper"
            :total="total">
          </el-pagination>
        </div>
        <span class="noData" v-else>查不到当前课程信息，请核对手机号或课程详情</span>
      </div>
    </div>
    <el-dialog
      title="选择绑定钥匙"
      :visible.sync="centerDialogVisible"
      width="400"
      center>
      <div>
        <el-table
          :data="dialogList"
          stripe
          style="width: 100%">
          <el-table-column
            prop="CustomerName"
            label="当前用户">
          </el-table-column>
          <el-table-column
            prop="LockNo"
            label="锁柜号">
          </el-table-column>
          <el-table-column
            prop="Status"
            label="状态">
            <template slot-scope="scope">
              {{scope.row.Status === 1 ? '有人' : '无人'}}
            </template>
          </el-table-column>
          <el-table-column
            label="操作"
            width="200">
            <template slot-scope="scope">
              <el-button
                v-if="scope.row.Status === 0"
                size="mini"
                type="success"
                @click="toBindKey(scope.row)">绑定</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          @current-change="handleCurrentChangeDialog"
          :current-page.sync="postData.page"
          :page-size="postData.pagesize"
          layout="prev, pager, next, jumper"
          :total="dialogTotal">
        </el-pagination>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="centerDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="centerDialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      width="200">
      <span>确认核销此课程</span>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="sureVerify">确 定</el-button>
        <el-button type="primary" @click="sureAndBind">确定并绑定钥匙</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { mapState, createNamespacedHelpers } from 'vuex'

const { mapState: mapVerifState, mapActions: mapVerifActions } = createNamespacedHelpers('verification')
const { mapActions: mapDeviceActions } = createNamespacedHelpers('device')

export default {
  name: '',
  data () {
    return {
      courses: [],
      dialogVisible: false,
      dialogList: [],
      centerDialogVisible: false,
      customerId: '',
      customerName: '',
      phone: this.$route.query.tel,
      code: '',
      tel: '',
      page: 1,
      pagesize: 10,
      dialogTotal: 0,
      total: 1,
      postData: {
        caseid: '',
        page: 1,
        pagesize: 10
      },
      currentItem: {},
    }
  },
  mounted () {
    this.$nextTick(function () {
      this.init()
    })
  },
  computed: {
    ...mapState({
      cases: x => x.app.cases.list,
      defaultCaseId: x => x.app.cases.default,
      OrgId: x => x.app.user.OrgId,
    }),
    CaseId: {
      get () {
        return this.postData.caseid || this.defaultCaseId
      },
      set (val) {
        this.postData.caseid = val
      }
    },
    ...mapVerifState({
      // courses: x => x.courseVerifs
    }),
  },
  methods: {
    ...mapVerifActions([
      'GetCourseVerList',
      'CourseVerifs',
      'GetCourseVerListByTel',
      'getCustomerName'
    ]),
    ...mapDeviceActions([
      'getKeyList',
      'bindKeyer',
    ]),
    init () {
      this.getCustomerName({
        id: this.phone
      }).then((res) => {
        if (res !== null) {
          // console.log(JSON.stringify(this.courses))
          this.customerId = res.CustomerId
          this.customerName = res.CustomerName
          const { code, tel } = this.$route.query
          this.code = code
          this.tel = tel
          this.getList()
        } else {
          // this.courses = {list: []}
          this.$message({
            type: 'error',
            message: '未查询到用户信息'
          })
        }
      })
    },
    check (item) { // 核销
      this.currentItem = item
      this.dialogVisible = true
    },
    sureVerify () {
      this.CourseVerifs({ id: this.currentItem.CustomerDetailId, callback: this.afterCheck })
      this.dialogVisible = false
    },
    sureAndBind () {
      this.dialogVisible = false
      this.getKeyList({
        ...this.postData,
        caseid: this.currentItem.CaseId,
      }).then((res) => {
        // console.log(JSON.stringify(res))
        this.dialogTotal = res.pagenum
        this.dialogList = res.list
        this.centerDialogVisible = true
      })
    },
    getList () {
      if (this.code && this.code !== '') {
        this.GetCourseVerList({ id: this.code, page: this.page, pagesize: this.pagesize }).then((res) => {
          res.list = res.list || []
          this.page = res.page
          this.total = res.pagenum
          this.courses = res.list
        })
      } else {
        if (this.tel && this.tel !== '') {
          this.GetCourseVerListByTel({ tel: this.tel, page: this.page, pagesize: this.pagesize }).then((res) => {
            res.list = res.list || []
            console.log(JSON.stringify(res))
            this.page = res.page
            this.total = res.pagenum
            this.courses = res.list
          })
        }
      }
    },
    handleCurrentChange (val) { // 跳转到分页
      this.page = val
      this.getList()
    },
    afterCheck () {
      this.$message({
        type: 'success',
        message: '操作成功!'
      })
      this.getList()
    },
    reback () { // 返回
      this.courses = []
      this.$router.push({ name: 'phoneVerification' })
    },
    bindKey (item) { // 绑定钥匙
    },
    handleCurrentChangeDialog (val) {
      this.postData.page = val
      this.getKeyList({
        ...this.postData,
        caseid: this.currentItem.CaseId,
      }).then((res) => {
        // console.log(JSON.stringify(res))
        this.dialogTotal = res.pagenum
        this.dialogList = res.list
        this.centerDialogVisible = true
      })
    },
    toBindKey (item) {
      this.bindKeyer({
        keyid: item.KeyId,
        customerid: this.customerId,
        customername: this.customerName
      }).then((res) => {
        // console.log(JSON.stringify(res))
        this.CourseVerifs({ id: this.currentItem.CustomerDetailId, callback: this.afterCheck })
        this.centerDialogVisible = false
        this.postData.page = 1
        this.dialogList = []
        this.init()
      })
    },
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
.subPage {
  .userInfo {
    white-space: nowrap;
    font-size: 0;
    > * {
      display: inline-block;
      margin-right: 10px;
    }
    > b {
      font-weight: bolder;
      font-size: 15px;
      margin-right: 30px;
    }
  }
  .list {
    > div {
      margin: 0 20px;
      > div {
        width: 100%;
        position: relative;
        overflow: hidden;
        box-sizing: border-box;
        border: 1px solid #eee;
        border-bottom: none;
        margin-top: 20px;
      }
    }
  }
  .noData {
    width: 100%;
    display: block;
    line-height: 40px;
    font-size: 30px;
    color: #ccc;
    text-align: center;
    margin: 40px auto 0;
  }
}
</style>
