<template>
    <div class="flex-container">
        <!-- 查询区域 -->
        <div class="table-page-search-wrapper">
            <!-- 搜索区域 -->
            <a-form layout="inline">
                <a-row :gutter="24">
                    <a-col :md="4" :sm="8">
                        <a-form-item  label="活动标题：">
                            <a-input  placeholder="活动标题" v-model="queryParam.title"></a-input>
                        </a-form-item>
                    </a-col>

                    <a-col :md="3" :sm="6">
                        <a-form-item :labelCol="{span: 5}" :wrapperCol="{span: 18, offset: 1}" label="活动类型">
                            <a-select placeholder="请选择" v-model="queryParam.activityType">
                                <a-select-option key="">请选择</a-select-option>
                                <a-select-option key="个人活动">个人活动</a-select-option>
                                <a-select-option key="团队活动">团队活动</a-select-option>
                            </a-select>
                        </a-form-item>
                    </a-col>
                    <a-col :md="3" :sm="6">
                        <a-form-item :labelCol="{span: 5}" :wrapperCol="{span: 18, offset: 1}" label="活动小类">
                            <a-select placeholder="请选择" v-model="queryParam.subclass">
                                <a-select-option key="">请选择</a-select-option>
                                <a-select-option key="部长考核">部长考核</a-select-option>
                                <a-select-option key="前置营销">前置营销</a-select-option>
                                <a-select-option key="线上活动">线上活动</a-select-option>
                                <a-select-option key="线下活动">线下活动</a-select-option>
                            </a-select>
                        </a-form-item>
                    </a-col>

                    <a-col :md="4" :sm="8">
                        <a-form-item  label="参与者：">
                            <a-input  placeholder="活动标题" v-model="queryParam.creator"></a-input>
                        </a-form-item>
                    </a-col>

                    <a-col :md="4" :sm="8">
                        <a-form-item :labelCol="{span: 5}" :wrapperCol="{span: 18, offset: 1}" label="审核状态">
                            <a-select placeholder="请选择" v-model="queryParam.status">
                                <a-select-option key="">请选择</a-select-option>
                                <a-select-option key="1">未审核</a-select-option>
                                <a-select-option key="2">审核通过</a-select-option>
                                <a-select-option key="3">审核不通过</a-select-option>
                            </a-select>
                        </a-form-item>
                    </a-col>

                    <span class="table-page-search-submitButtons" style="float: left; overflow: hidden;">
                        <a-col :md="6" :sm="24">
                            <a-button @click="search()" type="primary">查询</a-button><a-divider type="vertical"/>
                            <a-button type="primary" :disabled="hasSelected" :loading="loading" @click="start()">
                                审核
                            </a-button>
                        </a-col>
                    </span>
                </a-row>
            </a-form>
        </div>

        <!--列表-->
        <s-table  :locale="emptyText" :columns="columns" :data="rowdata" bordered ref="table" size="small" class="flex-filling"
                  :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }">

          <template slot="createTime" slot-scope="text">
            {{ text | dayjs}}
          </template>
            <template slot="imageUrl" slot-scope="text">
              <img style="width: 20%" :src="apis + text" @click="imgClick(text)">
            </template>
            <template slot="status" slot-scope="text">
                <span v-if="text == 1">未审核</span>
                <span v-if="text == 2">审核通过</span>
                <span v-if="text == 3">审核不通过</span>
            </template>

            <template slot="operation" slot-scope="text,record">
<!--              v-if="record.status == 1"-->
              <a @click="modifyfunction(record)">审核</a>
            </template>
        </s-table>

        <!--查看----弹框-->
        <a-modal title="查看" :visible="checkVisible" @cancel="checkCancel" width="840px">

        </a-modal>

      <!--编辑----弹框-->
      <a-modal :title="titleName" :visible="modifyvisible"  @ok="createfunctionOk" @cancel="createfunctionCancel" html-type="submit" width="840px">
        <a-form :form="Formtable">
          <a-form-item :labelCol="{span: 6}" :wrapperCol="{span: 8, offset: 1}" label="审核状态">
            <a-radio-group v-decorator="['status', {rules: [{ required: true, message: '审核状态不能为空！'}]} ]">
              <a-radio value="2">通过</a-radio>
              <a-radio value="3">不通过</a-radio>
            </a-radio-group>
          </a-form-item>

          <a-form-item :labelCol="{span: 6}" :wrapperCol="{span: 8, offset: 1}" label="所得积分">
              <a-input placeholder="所得积分" v-decorator="[ 'integral', {rules: [{ required: true,type:'number', message: '所得积分格式错误！' ,transform:(value)=> {return Number(value)} }]} ]"></a-input>
          </a-form-item>

          <a-form-item :labelCol="{span: 6}" :wrapperCol="{span: 8, offset: 1}" label="审核备注">
              <a-input placeholder="审核备注" v-decorator="[ 'remark', {rules: [{ required: false }]} ]"></a-input>
          </a-form-item>
        </a-form>
      </a-modal>
</div>
</template>

<script>
    import STable from '@/components/table';
    import {getList,audit} from "../../../api/school-center/activityRecordAPI"
    import {cloneObject} from '@/utils/util';
    import moment from "moment";
    export default {
        name: "activityRecord",
        components: {
            STable,moment
        },
        data: function () {
            return {
                emptyText: {emptyText: '暂无数据'},
                previewVisible: false,
                previewImage: '',
                fileList: [
                ],

                fileid:{},
                // form
                Formtable: this.$form.createForm(this, {name: 'Formtable'}),
                titleName:"",
                modifyForm: {
                    id: '',
                    status: '',
                    integral: '',
                    remark: ''
                },
                subNameList: [],
                packageName:[],
                chosePages:[],
                products:[],
                //输入框列表
                queryParam: {
                    title: '',
                    activityType: '',
                    subclass: '',
                    status: '',
                    creator: '',
                },
                modifyvisible: false,
                checkVisible: false,
                columns: [
                    {dataIndex: 'title', width: 80, title: '活动标题', align: "center"},
                    {dataIndex: 'desc', width: 200, title: '活动详情', align: "center"},
                    {dataIndex: 'activityType', width: 80, title: '活动类型', align: "center"},
                    {dataIndex: 'subclass', width: 80, title: '活动大类', align: "center"},
                    {dataIndex: 'integral', width: 80, title: '活动积分', align: "center"},
                    {dataIndex: 'status', width: 80, title: '审核状态', align: "center",
                        scopedSlots: {customRender: 'status'}},
                    {dataIndex: 'remark', width: 100, title: '审核备注', align: "center"},
                    {dataIndex: 'recordIntegral', width: 80, title: '所得积分', align: "center"},
                    {dataIndex: 'creator', width: 100, title: '参与者', align: "center"},
                    {dataIndex: 'message', width: 200, title: '活动留言', align: "center"},
                    {dataIndex: 'imageUrl', width: 100, title: '参与图片', align: "center",scopedSlots: {customRender: 'imageUrl'}},
                    {dataIndex: 'createTime', width: 100, title: '参与时间', align: "center",
                        scopedSlots: {customRender: 'createTime'}},
                    {dataIndex: 'isRepeal', width: 100, title: '是否重复参与', align: "center"},
                    {
                        dataIndex: 'operation',
                        width: 100,
                        title: '操作',
                        align: "center",
                        scopedSlots: {customRender: 'operation'},
                        fixed: "right"
                    }],
                rowdata: parameter => {

                    const env = process.env.NODE_ENV; //获取当前环境

                    let params = {
                        pageNo: parameter.pageNo,
                        pageSize: parameter.pageSize
                    }
                    //表示
                    let obj = cloneObject(this.queryParam)
                    return getList(Object.assign(params, obj)).then(res => {
                        let data = {}
                        if (res.state !== 'success') {
                            this.emptyText.emptyText = '查询失败！'
                            this.$message.error("查询失败！", 5);
                            data = {
                                data: [],
                                pageSize: parameter.pageSize,
                                pageNo: 1,
                                totalCount: 0
                            }
                        } else {
                            if (res.data.records.length==0){
                                return data
                            }
                            data = {
                                data: res.data.records,
                                pageSize: parameter.pageSize,
                                pageNo: parameter.pageNo,
                                totalCount: res.data.total
                            }
                        }
                        return data
                    })
                },
                selectedRowKeys: [],
                hasSelected: true,
            }
        },
        methods:{
            chosePagesfunction(data){
                this.chosePages=data
            },
            search() {
                this.$refs.table.refresh({search: true})
            },
            modifyfunction(data){
                //初始化
                this.titleName="审核"
                this.modifyForm.id = data.id
                this.modifyvisible=true;
                setTimeout(()=>{
                    this.Formtable.setFieldsValue({
                      integral: data.integral
                    })
                },0)
            },
            //提交表单
            createfunctionOk(){
                this.Formtable.validateFields(['status', "integral","remark"], {force: true}, (err, values)=>{
                    if (!err){
                        let params = {
                          ids: this.selectedRowKeys
                        }
                        //表示
                        this.modifyForm.status=values.status
                        this.modifyForm.remark=values.remark == undefined ? '' : values.remark;
                        this.modifyForm.integral=values.integral
                        //表示

                        let obj = cloneObject(this.modifyForm)
                        //修改数据
                        audit(Object.assign(params, obj)).then(res=>{
                            if (res.state=="success") {
                              setTimeout(() => {
                                this.loading = false;
                                this.selectedRowKeys = [];
                              }, 1000);
                              this.hasSelected = true;
                              this.modifyvisible=false
                              this.$message.success(res.data ? res.data : '审核成功！', 5);
                              this.search();
                                return null;
                            }
                            this.$message.error(res.data ? res.data : res.msg, 5);

                        })
                    }
                })
            },
            createfunctionCancel(){
                this.Formtable.setFieldsValue({
                    status: '',
                    remark: '',
                    integral: ''
                })
                this.modifyForm.id=""
                this.modifyvisible=false;
            },
            imgClick(res){
              this.imgInfo=this.apis + res
              this.visiblepicture=true
            },
            pictureOnClose() {
              this.imgInfo=''
              this.visiblepicture = false;
            },
            start() {
              this.modifyForm.id=""
              this.Formtable.setFieldsValue({
                status: '',
                remark: '',
                integral: ''
              });
              if(this.selectedRowKeys.length == 0){
                this.$message.error("请勾选审核项！！！", 5);
                return;
              }
              //初始化
              this.titleName="审核"
              this.modifyvisible=true;
            },
            onSelectChange(selectedRowKeys) {
              this.selectedRowKeys = selectedRowKeys;
              if(this.selectedRowKeys.length > 0){
                this.hasSelected = false;
              }else{
                this.hasSelected = true;
              }
            },
        },
    }

</script>

<style scoped>

</style>
