<template>
  <div class="divBox">
    <el-card class="box-card">
      <div  class="clearfix">
        <div class="container">
          <el-form size="small" label-width="100px" >
<!--            <el-form-item label="预约状态：">-->
<!--              <el-radio-group v-model="tableFrom.status" type="button" @change="seachList">-->
<!--                <el-radio-button label="all">全部</el-radio-button>-->
<!--                <el-radio-button label="unPaid">待确认 </el-radio-button>-->
<!--                <el-radio-button label="unPaid">预约成功 </el-radio-button>-->
<!--                <el-radio-button label="unPaid">预约取消 </el-radio-button>-->
<!--              </el-radio-group>-->
<!--            </el-form-item>-->
            <el-form-item label="预约人：" class="width100">
              <el-input v-model="tableFrom.keywords" placeholder="请输入预约人" class="selWidth" size="small" clearable>
                <el-button slot="append" icon="el-icon-search" size="small" @click="seachList" />
              </el-input>
            </el-form-item>

            <el-form-item label="手机号：" class="width100">
              <el-input v-model="tableFrom.keywords" placeholder="请输入订单号" class="selWidth" size="small" clearable>
                <el-button slot="append" icon="el-icon-search" size="small" @click="seachList" />
              </el-input>
            </el-form-item>

          </el-form>
        </div>
      </div>
    </el-card>
    <div class="mt20">
      <!-- <cards-data :cardLists="cardLists" v-if="checkPermi(['admin:order:list:data'])"></cards-data> -->
    </div>
    <el-table
      v-loading="dataListLoading"
      :data="dataList"
      style="width: 100%;">
      <el-table-column
        width="80"
        prop="id"
        header-align="center"
        align="center"
        label="预约编号">
      </el-table-column>  <el-table-column
        width="150"
        prop="userName"
        header-align="center"
        align="center"
        label="预约人">
      </el-table-column>
      <el-table-column
        prop="cellPhone"
        header-align="center"
        align="center"
        label="预约手机号">
      </el-table-column>
      <el-table-column
        width="180"
        prop="createDate"
        header-align="center"
        align="center"
        label="报名时间">
      </el-table-column>
      <el-table-column
        prop="attendNum"
        header-align="center"
        align="center"
        label="参与人数">
      </el-table-column>
      <el-table-column
        width="180"
        prop="subscribeDate"
        header-align="center"
        align="center"
        label="预约指定日期">
      </el-table-column>

      <el-table-column
        prop="remark"
        header-align="center"
        align="center"
        label="备注">
      </el-table-column>
      <el-table-column
        prop="registerStatus"
        header-align="center"
        align="center"
        label="预约状态">

        <template slot-scope="scope">
          <div class="demo-image__preview">
            <el-tag v-if="scope.row.status == 0">待确认</el-tag>
            <el-tag type="success"  v-else-if="scope.row.status ==1">预约成功</el-tag>
            <el-tag type="danger" v-else-if="scope.row.status ==2">预约取消</el-tag>
            <el-tag v-else>类型错误</el-tag>
          </div>
        </template>

      </el-table-column>
      <el-table-column
        width="180"
        prop="cancelData"
        header-align="center"
        align="center"
        label="取消时间">

        <template slot-scope="scope">
          <div class="demo-image__preview">
            <span v-if="scope.row.cancelData  === null"> - </span>
            <span v-else>{{ scope.row.cancelData }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column
        prop="cancelReason"
        header-align="center"
        align="center"
        label="取消原因">
        <template slot-scope="scope">
          <div class="demo-image__preview">
            <span v-if="scope.row.cancelReason === null"> - </span>
            <span v-else>{{ scope.row.cancelReason }}</span>
          </div>
        </template>
      </el-table-column>

      <el-table-column
        fixed="right"
        header-align="center"
        align="center"
        width="150"
        label="操作">
        <template slot-scope="scope">
                      <el-button v-if="scope.row.status == 0" type="text" size="small" @click="mobile(scope.row)">电话联系</el-button>
          <!--            <el-button v-hasPermi="['admin:activity:update']" type="text" size="small"-->
          <!--                       @click="activityLog(scope.row.id)">预约记录-->
          <!--            </el-button>-->
          <!--            <el-button v-hasPermi="['admin:activity:delete']" type="text" size="small"-->
          <!--                       @click="deleteHandle(scope.row.id)">删除-->
          <!--            </el-button>-->
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="sizeChangeHandle"
      @current-change="currentChangeHandle"
      :current-page="tableFrom.page"
      :page-sizes="[10, 20, 50, 100]"
      :page-size="tableFrom.limit"
      :total="totalPage"
      layout="total, sizes, prev, pager, next, jumper">
    </el-pagination>

<!--    <el-dialog-->
<!--      title="电话联系"-->
<!--      :close-on-click-modal="false"-->
<!--      :visible.sync="mobileVisible"-->
<!--      width="30%"-->
<!--      center-->
<!--    >-->

<!--     <div style="width: 100%">-->
<!--       <div style="text-align: center;font-size: 26px;font-weight: 700">预约人：{{this.mobileFrom.userName}}</div>-->
<!--       <div style="text-align: center;font-size: 26px;font-weight: 700">联系方式：{{this.mobileFrom.cellPhone}}</div>-->
<!--     </div>-->
<!--      <span slot="footer" class="dialog-footer">-->
<!--    <el-button type="primary" @click="userok" >确认预约</el-button>-->
<!--    <el-button type="primary"  @click="usererror">取消预约</el-button>-->
<!--  </span>-->
<!--    </el-dialog>-->

    <el-dialog title="电话联系" :visible.sync="mobileVisible" center>
      <div style="width: 100%">
        <div style="text-align: center;font-size: 26px;font-weight: 700">预约人：{{this.mobileFrom.userName}}</div>
        <div style="text-align: center;font-size: 26px;font-weight: 700">联系方式：{{this.mobileFrom.cellPhone}}</div>
      </div>

      <el-dialog
        width="30%"
        title="取消原因"
        :visible.sync="innerVisible"
        append-to-body>
        <el-input
          type="textarea"
          placeholder="请输入内容"
          v-model="mobileFrom.cancelReason"
          maxlength="30"
          show-word-limit
        >
        </el-input>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="usererror">确定取消</el-button>
        </div>

      </el-dialog>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="userok" >确认预约</el-button>
        <el-button type="primary" @click="innerVisible = true">取消预约</el-button>
      </div>
    </el-dialog>


  </div>
</template>
<script>
import {
  activityDeleteApi,
  activityListApi,
  activityLogListApi,
  activityPlaceListApi, activityPlaceUpdateApi,
  ebactivityUpdateApi
} from "@/api/activity"
import AddOrUpdate from "@/views/marketing/activity/activityList/activity-add-and-update"

export default {
  data() {
    return {
      dataListLoading: false,
      innerVisible: false,
      mobileVisible: false,
      dataList:[],
      mobileFrom:{},
      tableFrom:{
        page: 1,
        limit: 20,
        keywords: '',
      }
    }
  },
  components: {

  },
  mounted() {
    this.getDataList()
  },



  methods: {
    seachList() {
      this.tableFrom.page = 1
      this.getDataList()

    },
    userok(){
      this.mobileFrom.status = 1
      activityPlaceUpdateApi(this.mobileFrom).then(res =>{
        this.$message.success('预约成功！')
        this.mobileVisible = false
        this.getDataList()
      })
    },
    usererror(){
      this.mobileFrom.status = 2
      activityPlaceUpdateApi(this.mobileFrom).then(res =>{
        this.$message.success('取消成功！')
        this.mobileVisible = false
        this.innerVisible = false
        this.getDataList()
      })
    },
    mobile(row){
      this.mobileVisible = true
      this.mobileFrom = row
    },

    getDataList(){
      this.dataListLoading = true
      activityPlaceListApi(this.tableFrom).then(res =>{
        console.log(res)
        this.dataList = res.list
        this.totalPage = res.total
        this.tableFrom.limit = res.total
        this.tableFrom.page = res.page


        this.dataListLoading = false
      })
    },
    sizeChangeHandle(val) {
      this.tableFrom.limit = val
      this.getDataList()
    },
    currentChangeHandle(page) {
      this.tableFrom.page = page
      this.getDataList()
    },

  }

}
</script>

<style lang="sass" scoped>

</style>
