<template>
  <div class="divBox">
    <el-form :inline="true" :model="tableFrom" @keyup.enter.native="getDataList()">
      <el-form-item>
        <el-input v-model="tableFrom.keywords" placeholder="查询参数" clearable></el-input>
      </el-form-item>
      <el-form-item>
        <el-button @click="getDataList()">查询</el-button>
        <el-button v-hasPermi="['admin:activity:save']" type="primary" @click="addOrUpdateHandle()">新增活动</el-button>


        <!--        <el-button v-hasPermi="['autogencode:ebactivity:delete']" type="danger" @click="deleteHandle()" :disabled="dataListSelections.length <= 0">批量删除</el-button>-->
      </el-form-item>
    </el-form>
    <el-table
        :data="dataList"
        v-loading="dataListLoading"

        style="width: 100%;">
      <el-table-column
          prop="cid"
          header-align="center"
          align="center"
          label="活动类型">
        <template slot-scope="scope">
          <div class="demo-image__preview">
            <span v-if="scope.row.cid == 746">活动预约</span>
            <span v-else-if="scope.row.cid ==752">采茶预约</span>
            <span v-else-if="scope.row.cid == 753">其他预约</span>
            <span v-else>类型错误</span>
          </div>
        </template>

      </el-table-column>
      <el-table-column
          width="150"
          prop="title"
          header-align="center"
          align="center"
          label="标题">
      </el-table-column>

      <el-table-column
          prop="imageInput"
          header-align="center"
          align="center"
          label="图片">
        <template slot-scope="scope">
          <div class="demo-image__preview">
            <el-image
                style="width: 36px; height: 36px"
                :src="scope.row.imageInput"
                :preview-src-list="[scope.row.imageInput]"
            />
          </div>
        </template>
      </el-table-column>
      <el-table-column
          prop="activityAddr"
          header-align="center"
          align="center"
          label="地址">
      </el-table-column>
      <el-table-column
          prop="activityNum"
          header-align="center"
          align="center"
          label="活动人数">
      </el-table-column>
      <el-table-column
          prop="activityPrice"
          header-align="center"
          align="center"
          label="费用">
      </el-table-column>
      <el-table-column
          prop="content"
          header-align="center"
          align="center"
          label="活动内容">
      </el-table-column>
      <el-table-column
          width="300"
          prop="beginTime"
          header-align="center"
          align="center"
          label="开始时间 - 结束时间">
        <template slot-scope="scope">
          {{ scope.row.beginTime }} - {{ scope.row.endTime }}
        </template>
      </el-table-column>
      <el-table-column
          header-align="center"
          align="center"
          label="是否热门">
        <template slot-scope="scope">
          <el-switch
              @change='changeStatus($event,scope.row,"hot")'
              v-model="scope.row.isHot"
              active-color="#13ce66"
              inactive-color="#ff4949">
          </el-switch>

        </template>
      </el-table-column>
      <el-table-column
          header-align="center"
          align="center"
          label="是否轮播">
        <template slot-scope="scope">
          <el-switch
              @change='changeStatus($event,scope.row,"banner")'
              v-model="scope.row.isBanner"
              active-color="#13ce66"
              inactive-color="#ff4949">
          </el-switch>
        </template>
      </el-table-column>
      <el-table-column
          prop="sort"
          header-align="center"
          align="center"
          label="排序">
      </el-table-column>
      <el-table-column
          fixed="right"
          header-align="center"
          align="center"
          width="150"
          label="操作">
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="addOrUpdateHandle(scope.row.id)">修改</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>
    <!--     表单弹窗, 新增数据和修改数据-->
    <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>


    <el-dialog
        title="活动预约记录"
        :close-on-click-modal="false"
        :visible.sync="logVisible"
        width="80%"
      >
      <el-table
          :data="logList"
          style="width: 100%;">
        <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
            prop="createDate"
            header-align="center"
            align="center"
            label="报名时间">
        </el-table-column>
        <el-table-column
            prop="registerDate"
            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.registerStatus == 1">报名成功</el-tag>
              <el-tag type="warning" v-else-if="scope.row.registerStatus ==4">已取消</el-tag>
              <el-tag v-else>类型错误</el-tag>
            </div>
          </template>

        </el-table-column>
        <el-table-column
            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 type="text" size="small" @click="addOrUpdateHandle(scope.row.id)">修改</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
          background
          layout="prev, pager, next"
          @current-change="handleCurrentChange"
          :total="this.logParams.total">
      </el-pagination>


      <span slot="footer" class="dialog-footer">
    <el-button type="primary" @click="logVisibles = false">确 定</el-button>
  </span>
    </el-dialog>
  </div>
</template>


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

export default {
  data() {
    return {
      dataListLoading: false,
      logVisible: false,
      dataList: [],
      logList: [],
      logParams: {
        activityId:"",
        limit:10,
        page:1,
        total:1,
      },
      tableFrom: {
        page: 1,
        limit: 20,
        name: '',
        keywords: '',
      },
      totalPage: 0,
      addOrUpdateVisible: false
    }
  },
  components: {
    AddOrUpdate
  },
  mounted() {
    this.getDataList()
  },
  methods: {
    //活动记录
    activityLog(id){
      this.logParams.activityId = id
      this.logVisible = true
      activityLogListApi(this.logParams).then(res =>{
        this.logParams.limit = res.limit
        this.logParams.page = res.page
        this.logParams.total = res.total
        this.logList = res.list
      })
    },
    handleCurrentChange(val) {
      this.logParams.page =  val
      activityLogListApi(this.logParams).then(res =>{
        this.logParams.limit = res.limit
        this.logParams.page = res.page
        this.logParams.total = res.total
        this.logList = res.list
      })
    },
    changeStatus($event, val, type) {
      if (type === 'banner') {
        val.isBanner = $event
      }
      if (type === 'hot') {
        val.isHot = $event
      }
      ebactivityUpdateApi(val).then(res => {
        this.$message.success("修改成功！");
        this.getDataList()
      })
    },
    addOrUpdateHandle(id) {
      this.addOrUpdateVisible = true
      this.$nextTick(() => {
        this.$refs.addOrUpdate.init(id)
      })
    },
    deleteHandle(id) {
      this.$confirm('确定删除当前数据?').then(() => {
        activityDeleteApi({id: id}).then(data => {
          this.$message.success('删除成功')
          this.getDataList()
        })
      })
    },
    sizeChangeHandle(val) {
      this.tableFrom.limit = val
      this.getDataList()
    },
    currentChangeHandle(page) {
      this.tableFrom.page = page
      this.getDataList()
    },
    // 多选
    selectionChangeHandle(val) {
      // this.dataListSelections = val
    },
    // 获取数据列表
    getDataList() {
      this.dataListLoading = true
      activityListApi(this.tableFrom).then(res => {
        // TODO 获取数据列表
        this.dataList = res.list
        this.totalPage = res.total
        this.tableFrom.limit = res.total
        this.tableFrom.page = res.page

        this.dataListLoading = false
      })
    }

  }

}
</script>

<style lang="sass" scoped>

</style>
