<template>
  <div class="app-container calendar-list-container">
    <div class="filter-container">
      <el-form :model="listQuery" label-width="100px">
        <el-row>
          <el-col :span="4">
            <el-form-item label="峰会名称">
              <el-input v-model.number="listQuery.name" placeholder="请输入手机号"></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="4">
            <el-form-item label="开始时间">
              <el-date-picker v-model="listQuery.time" type="date" placeholder="选择日期"></el-date-picker>
            </el-form-item>
          </el-col>

          <el-col :span="4">
            <el-form-item label="状态">
              <el-select class="filter-item" v-model="listQuery.status" placeholder="请选员工状态">
                <el-option :key="undefined" label="全部" :value="undefined"></el-option>
                <el-option
                  v-for="(item,index) in statusList "
                  :key="index"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-button class="filter-item" type="primary" v-waves icon="search" @click="handleFilter">搜索</el-button>
        <el-button
          class="filter-item"
          type="primary"
          v-waves
          icon="delete"
          @click="cleaningQuery"
        >清除搜索条件</el-button>
        <el-button
          class="filter-item"
          type="primary"
          v-waves
          icon="el-icon-plus"
          @click="creatSummit"
        >创建峰会</el-button>
      </el-form>

      <el-table :data="list" border fit highlight-current-row style="width: 100%">
        <el-table-column prop="name" label="姓名" width="180" align="center"></el-table-column>
        <el-table-column prop="phone" label="手机号" align="center"></el-table-column>
        <el-table-column prop="positionName" label="身份" align="center"></el-table-column>
        <el-table-column align="center" label="操作" width="400" fixed="right">
          <template slot-scope="scope">
            <el-button
              size="small"
              class="el-button el-button--text el-button--small"
              @click="soldOut(scope.row)"
            >下架</el-button>

            <el-button
              size="small"
              class="el-button el-button--text el-button--small"
              @click="information(scope.row)"
            >报名信息</el-button>

            <el-button
              size="small"
              class="el-button el-button--text el-button--small"
              @click="basics(scope.row)"
            >基础信息</el-button>

            <el-button
              size="small"
              class="el-button el-button--text el-button--small"
              @click="applyPage(scope.row)"
            >报名页面</el-button>

            <el-button
              size="small"
              class="el-button el-button--text el-button--small"
              @click="lookPage(scope.row)"
            >回顾页面</el-button>

            <el-button
              size="small"
              class="el-button el-button--text el-button--small"
              @click="deleteMsg(scope.row)"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <el-dialog
        :title="summitTitle"
        :visible.sync="bulkUploadMember"
        class="member"
        @close="closeAdd"
      >
        <el-form
          :model="ruleForm"
          :rules="rules"
          ref="ruleForm"
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-form-item label="标题:" prop="title">
            <el-input v-model="ruleForm.title" style="width:350px" placeholder="请输入峰会标题"></el-input>
          </el-form-item>
          <el-form-item label="封面图:" prop="title">
            <el-upload
              class="avatar-uploader"
              action="https://jsonplaceholder.typicode.com/posts/"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload"
            >
              <img v-if="imageUrl" :src="imageUrl" class="avatar" />
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-form-item>
          <el-form-item label="峰会时间:" prop="title">
            <el-date-picker
              v-model="ruleForm.time"
              type="datetimerange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            ></el-date-picker>
          </el-form-item>

          <el-form-item label="报名截止:" prop="title">
            <el-date-picker
              v-model="ruleForm.value1"
              type="datetime"
              placeholder="请选择日期时间"
              style="width:350px"
            ></el-date-picker>
          </el-form-item>

          <el-form-item label="举办地点:" prop="title">
            <el-input v-model="ruleForm.title" style="width:350px" placeholder="请输入峰会举办地点"></el-input>
            <el-input v-model="ruleForm.title" style="width:100px" placeholder="经度"></el-input>
            <el-input v-model="ruleForm.title" style="width:100px" placeholder="纬度"></el-input>
          </el-form-item>

          <el-form-item label="状态:" prop="title">
            <el-radio-group v-model="ruleForm.radio3">
              <el-radio-button label="默认"></el-radio-button>
              <el-radio-button label="自定义"></el-radio-button>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="活动id:" prop="title">
            <el-input v-model="ruleForm.title" style="width:350px" placeholder="请输入签到/抽奖活动的id"></el-input>
            <el-button type="primary">生成二维码</el-button>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="submitForm('ruleForm')">确定</el-button>
            <el-button @click="bulkUploadMember = false">取消</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>

      <reviewPopup :reviewRow='reviewRow'></reviewPopup>
    </div>
  </div>
</template>
<script>
import reviewPopup from '../model/reviewPopup';
export default {
  components:{
    reviewPopup
  },
  created() {},
  data() {
    return {
      reviewRow:{},
      imageUrl: "",
      //快捷筛选
      listQuery: {
        name: "",
        time: null,
        status: null
      },
      //峰会状态
      statusList: [],
      // 表格数据
      list: [],
      summitTitle: "创建峰会",
      bulkUploadMember: false,
      ruleForm: {
        title: "" //标题
      }, //创建峰会表单
      rules: {
        title: [{ required: true, message: "请输入标题", trigger: "blur" }]
      } //创建峰会表单验证
    };
  },
  methods: {
    //提交峰会
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          alert("submit!");
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    handleAvatarSuccess() {},
    beforeAvatarUpload() {},
    //搜索
    handleFilter() {},
    //清空搜索条件
    cleaningQuery() {},
    //创建峰会
    creatSummit() {
      this.bulkUploadMember = true;
    },
    //下架
    soldOut() {},
    //报名信息
    information() {},
    //基础信息
    basics() {},
    //报名信息
    applyPage() {},
    //回顾页面
    lookPage() {},
    //删除信息
    deleteMsg() {},
    //监听峰会弹窗关闭
    closeAdd() {}
  }
};
</script>
<style>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
