<template>
  <div id="index">
    <list-normal>
      <template v-slot:title>
        宣讲会
      </template>
      <template v-slot:functionBar>
        <el-col :span="6">
          <el-select v-model="searchInfo.status" placeholder="选择审核状态">
            <el-option label="全部类型" :value="undefined"></el-option>
            <el-option label="未审核" value="0"></el-option>
            <el-option label="审核通过" value="1"></el-option>
            <el-option label="审核失败" value="2"></el-option>
          </el-select>
        </el-col>
        <el-col :span="2">
          <el-button type="info" circle icon="el-icon-search icons" @click="search()"></el-button>
        </el-col>
      </template>
      <template v-slot:addBtn>
        <el-button @click="$router.push('/jobs/talk/detail')" type="success" icon="el-icon-plus">申请</el-button>
      </template>
      <template v-slot:main>
        <el-row :span="24" class="Name">
          <el-table :data="list" border style="width: 100%">
            <el-table-column fixed type="index" label="序号" width="50" align="center"> </el-table-column>
            <el-table-column prop="title" align="center" label="宣讲会标题"> </el-table-column>
            <el-table-column prop="date" align="center" label="宣讲日期" sortable> </el-table-column>
            <el-table-column prop="time" align="center" label="宣讲时间" sortable> </el-table-column>
            <el-table-column prop="status" align="center" label="状态" sortable>
              <template v-slot="scoped">
                {{ `${scoped.row.status}` === '0' ? '未审核' : `${scoped.row.status}` === '1' ? '审核通过' : '审核失败' }}
              </template>
            </el-table-column>
            <el-table-column align="center" label="操作" fixed="right">
              <template v-slot="scoped">
                <el-button @click="$router.push({ path: '/jobs/talk/detail', query: { id: scoped.row.id } })" type="text" size="mini">修改</el-button>
                <el-button size="mini" type="text" @click="handleDelete(scoped.$index, scoped.row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-row class="row_pagination">
            <el-col :span="24">
              <el-pagination
                @current-change="search"
                :current-page="currentPage"
                :page-size="$limit"
                layout="total, prev, pager, next, jumper"
                :total="totalRow"
              >
              </el-pagination>
            </el-col>
          </el-row>
        </el-row>
      </template>
    </list-normal>
  </div>
</template>

<script>
import listNormal from '@/layout/list-normal.vue';
import _ from 'lodash';
import { mapActions, mapState } from 'vuex';
export default {
  name: 'index',
  props: {},
  components: {
    listNormal,
  },
  data: () => ({
    currentPage: 1,
    totalRow: 0,
    list: [],
    searchInfo: {},
  }),
  created() {
    // this.totalRow = this.datalist.length;
    this.search();
  },
  computed: {
    ...mapState(['user']),
  },
  methods: {
    ...mapActions(['postTalksInfo']),
    async search(val) {
      let skip = 0;
      if (val) {
        this.currentPage = val;
        skip = (this.currentPage - 1) * this.$limit;
      }
      let result = await this.postTalksInfo({
        type: 'list',
        data: { schid: '福瑞', corpid: this.user.corpid, corpname: '福瑞test', schname: '福瑞', skip: skip, limit: this.$limit, ...this.searchInfo },
      });
      if (`${result.errcode}` === '0') {
        //给this=>vue的实例下在中的list属性，赋予result。data的值
        this.$set(this, 'list', result.data);
        this.$set(this, `totalRow`, result.total);
      } else {
        this.$message.error(result.errmsg ? result.errmsg : 'error');
      }
    },
    async handleDelete(index, item) {
      this.$confirm('是否删除该宣讲会?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          this.toDelete(item.id);
        })
        .catch(() => {});
    },
    async toDelete(id) {
      let result = await this.postTalksInfo({ type: 'delete', data: { id: id } });
      if (`${result.errcode}` === '0') {
        this.$message.success('删除成功');
        this.search();
      } else {
        this.$message.error(result.errmsg ? result.errmsg : '删除失败');
      }
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.search();
    },
  },
};
</script>

<style lang="less" scoped>
li {
  list-style: none;
}
p {
  margin: 0;
  padding: 0;
}
.tit h4 {
  color: #333;
  font-size: 15px;
}
.search {
  width: 100%;
  float: left;
  height: 33px;
  margin-bottom: 10px;
  color: #333;
  font-size: 15px;
  margin-bottom: 10px;
}
/deep/.searchInput .el-input__inner {
  height: 33px;
  line-height: 33px;
  border: 1px solid #ccc;
  border-radius: 0px;
}
/deep/.searchBtn .el-button {
  width: 35px;
  height: 33px;
  border: 1px solid #ccc;
  border-radius: 0px;
  padding: 6px 7px;
  color: #555555;
  font-weight: bold;
  font-size: 15px;
  background-color: #eeeeee;
}
.add {
  float: right;
  width: 69px;
  height: 34px;
}
.add .el-button {
  float: right;
  padding: 0;
  width: 69px;
  height: 34p;
  height: 34px;
  text-align: center;
  background: #44b549;
  color: #fff;
  font-size: 14px;
  font-weight: bold;
}
.talkli {
  float: left;
}
.Name {
  float: left;
  width: 100%;
}
.row_pagination {
  text-align: right;
  margin-top: 1rem;
}
/deep/.el-table--enable-row-transition .el-table__body td {
  text-align: center;
}
</style>
