<template>
  <div class="bodyBoxs">
          <div style="margin-bottom: 15px;width: 640px">
            <el-input readonly placeholder="请输入标题" v-model="search" class="input-with-select">
              <el-select style="width: 120px;" v-model="state" slot="prepend" placeholder="请选择">
                <el-option label="全部" value="3"></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-select style="margin-left:30px;width: 120px;border-left: rgb(220,223,230) solid 1px" v-model="type" slot="prepend" placeholder="请选择">
                <el-option label="全部" value="5"></el-option>
                <el-option label="数字创新" value="1"></el-option>
                <el-option label="产品创新" value="2"></el-option>
                <el-option label="流程创新" value="3"></el-option>
                <el-option label="集思广益" value="4"></el-option>
              </el-select>
              <el-button slot="append" icon="el-icon-search"  @click="getData"></el-button>
            </el-input>

          </div>
    <div class="boxs">
      <el-table
        :data="tableData"
        border
        v-loading="loading"
        :cell-style="rowStyle"
        :header-cell-style="headerStyle"
        :row-class-name="tableRowClassName"
        stripe
        style="width: 100%">
        <el-table-column
          prop="id"
          label="编号"
          width="80">
        </el-table-column>
        <el-table-column
          prop="title"
          label="标题">
          </el-table-column>
        <el-table-column
          prop="type"
          label="类型">
        </el-table-column>
        <el-table-column
          prop="votes"
          label="票数">
          </el-table-column>
        <el-table-column
          prop="isUsed"
          label="是否领取奖励">
          <template slot-scope="scope">
            <el-tag :type="scope.row.isUsed ? 'success' : 'danger'">{{scope.row.isUsed ? '已领取' : '未领取'}}</el-tag>
          </template>
          </el-table-column>
        <el-table-column
          prop="state"
          label="审核状态">
          <template slot-scope="scope">
          <el-tag :type="scope.row.state === 0 ? 'info' : (scope.row.state === 1 ? 'success' : 'danger')">{{scope.row.state === 0 ? '待审核' : (scope.row.state === 1 ? '审核通过' : '审核未通过')}}</el-tag>
          </template>
        </el-table-column>
        <el-table-column
          prop="examineTime"
          label="审核时间">
        </el-table-column>
        <el-table-column
          prop="updatedBy"
          label="审核管理员">
          </el-table-column>
        <el-table-column
          prop="createdAt"
          label="提交时间"
        ></el-table-column>
        <el-table-column
          fixed="right"
          label="操作">
          <template slot-scope="scope">
            <el-button @click="exitData(scope.row)" type="primary" size="mini">查看详细</el-button>
            <el-button @click="exp(scope.row)" type="warning" size="mini">审核</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage4"
        :page-sizes="[10, 20, 30, 50]"
        :page-size=pageSize
        layout="total, sizes, prev, pager, next, jumper"
        :total=total>
      </el-pagination>
      <el-dialog
        :title="title"
        :visible.sync="showExitState"
        width="40%"
        :before-close="handleClose">
        <el-form ref="form" :model="form" label-width="100px">
          <el-form-item label="类别">
            <el-input readonly  v-model="form.type"></el-input>
          </el-form-item>
          <el-form-item label="标题">
            <el-input readonly  v-model="form.title"></el-input>
          </el-form-item>
          <el-form-item label="背景">
            <el-input readonly type="textarea" v-model="form.background_text"></el-input>
          </el-form-item>
          <el-form-item label="发起目的">
            <el-input readonly type="textarea" v-model="form.objective"></el-input>
          </el-form-item>
          <el-form-item label="实现路径">
            <el-input readonly type="textarea" v-model="form.realization"></el-input>
          </el-form-item>
          <el-form-item label="具体措施">
            <el-input readonly type="textarea" v-model="form.measures"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
                  <el-button @click="showExitState = false">取 消</el-button>
                  <el-button type="primary" @click="showExitState = false">确 定</el-button>
                </span>
      </el-dialog>
      <el-dialog
        :title="title"
        :visible.sync="showExitStates"
        width="40%"
        :before-close="handleCloses">
        <el-form ref="form" :model="forms" label-width="100px">
          <el-form-item label="标题">
            <el-input readonly  v-model="forms.title"></el-input>
          </el-form-item>
          <el-form-item label="审核状态">
            <el-select v-model="forms.state" clearable placeholder="请选择">
              <el-option
                label="通过审核"
                value="1">
              </el-option>
              <el-option
                label="不通过审核"
                value="2">
              </el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
                  <el-button @click="showExitStates = false">取 消</el-button>
                  <el-button type="primary" @click="submitExitData">确 定</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>
<script>
  import { getToken } from "@/utils/auth";
  export default {
    data(){
      return{
        tableData : [],
        loading:false,
        srcLists:[],
        page:1,
        pageSize:10,
        total:0,
        currentPage4:1,
        type:'5',
        state:'3',
        search:'',
        showExitState:false,
        showExitStates:false,
        title:'',
        srcList:[],
        fileList2:[],
        fileList:[],
        form:{
          id:0,
          title:'',
          background_text:'',
          objective:'',
          realization:'',
          measures:'',
          type:''
        },
        forms:{
          id:0,
          title:'',
          state:'1'
        }
      }
    },
    created(){
      this.getData()
    },
    methods:{
      rowStyle() {
        return "text-align:center;border:none;color:#727272";
      },
      headerStyle(){
        return "text-align:center;background:#3f88bb;font-weight:blod;color:#fff"
      },
      handleSizeChange(val) {
        this.pageSize = val;
        this.getData()
      },
      handleCurrentChange(val) {
        console.log('点击了');
        this.page = val;
        this.getData();
      },
      tableRowClassName({row, rowIndex}) {
        if (rowIndex === 1) {
          return 'warning-row';
        } else if (rowIndex === 3) {
          return 'success-row';
        }
        return '';
      },
      getData(){
        this.loading = true;
        this.$api.getThinkList({
          page: this.page,
          size: this.pageSize,
          search:this.search,
          state:this.state,
          type:this.type
        }).then((res) => {
          this.loading = false;
          if(res.code==0){
            this.tableData = res.data.data;
            this.total = res.data.total;
            this.currentPage4 = res.data.current_page;
          }else{
            this.$message({
              message: res.message,
              type: 'success'
            });
          }
        }).catch((res) => {
          this.loading = false;
        });
      },
      exitData(row){
        this.showExitState = true;
        this.title = '查看'+row.title+'详细信息'
        this.form.id = row.id;
        this.form.title = row.title;
        this.form.background_text = row.backgroundText;
        this.form.objective = row.objective;
        this.form.realization = row.realization;
        this.form.measures = row.measures;
        this.form.type = row.type;
      },
      exp(row){
        this.showExitStates = true;
        this.title = '审核'+row.title;
        this.forms.id = row.id;
        this.forms.title = row.title;
        this.forms.state = '1';
      },
      handleClose(){
        this.showExitState = false;
      },
      handleCloses(){
        this.showExitStates = false;
      },
      submitExitData(){
        this.loading = true;
        this.$api.setThink({
          id: this.forms.id,
          state: this.forms.state,
        }).then((res) => {
          this.loading = false;
          if(res.code==0){
            this.$message({
              message: res.message,
              type: 'success'
            });
            this.showExitStates = false;
            this.getData();
          }else{
            this.$message({
              message: res.message,
              type: 'warning'
            });
          }
        }).catch((res) => {
          this.loading = false;
        });
      }
    }
  }
</script>
<style scoped>
  .bodyBoxs{
    padding: 40px;
  }
  .boxs{
    width: 100%;
    background: #fff;
    border-radius: 15px;
  }

</style>
