<template>
  <div class="content">
    <div class="topSearch">
      <div class="left">
        用户搜索：
        <Input
          v-model="name"
          style="width:150px"
          enter-button
          placeholder="请输入"
        />
        <span style="margin-left:10px">选择日期：</span>
        <DatePicker
          v-model="date"
          format="yyyy/MM/dd"
          type="daterange"
          placement="bottom-end"
          placeholder="Select date"
          style="width: 200px"
        ></DatePicker>
        <span style="margin-left:10px"> 审核状态：</span>
        <Select v-model="checkStatu" style="width: 150px" placeholder="请选择">
          <Option :value="0">待审核</Option>
          <Option :value="1">已通过</Option>
          <Option :value="2">已拒绝</Option>
        </Select>
        <Button type="primary" @click="search">查 询</Button>
        <Button type="primary" ghost>重 置</Button>
      </div>
      <div class="right">
        <Button type="primary">导 出</Button>
      </div>
    </div>
    <Row style="margin:-10px 0 20px 0">
      <Col span="24"
        ><Button type="primary" @click="confirm">批量通过</Button
        ><Button
          style="margin-left:20px"
          type="primary"
          @click="modal1 = true;"
          >批量拒绝</Button
        ></Col
      >
    </Row>
    <Table
      :loading="$store.state.app.isLoading"
      border
      ref="selection"
      :columns="columns"
      @on-select="onSelect"
      @on-select-all="onSelectAll"
      :data="data"
    >
      <template slot-scope="{ row }" slot="activity_date">
        <span>{{ row.activity_date | format }}</span>
      </template>
      <template slot-scope="{ row }" slot="url">
        <Avatar shape="square" :src="row.url" size="large" />
      </template>
      <template slot-scope="{ row }" slot="create_time">
        <span>{{ row.create_time | format }}</span>
      </template>
      <template slot-scope="{ row }" slot="check_status">
        {{
          row.check_status === 0
            ? "待审核"
            : row.check_status === 1
            ? "已通过"
            : "已拒绝"
        }}
      </template>
      <template slot-scope="{ row }" slot="action">
        <a
          @click="
            modal2 = true;
            id = row.id;
          "
          >通过</a
        >
        <a
          style="margin-left:10px"
          @click="
            modal1 = true;
            id = row.id;
          "
          >拒绝</a
        >
      </template>
    </Table>
    <Pager
      class="margin-top-10"
      :config="config"
      @on-change="handlePager"
    ></Pager>
    <Modal
      v-model="modal1"
      title="拒绝"
      @on-ok="checkActivity(2)"
      @on-cancel="cancel"
    >
      <Input v-model="remark" type="textarea" placeholder="请输入退回原因" />
    </Modal>
    <Modal
      v-model="modal2"
      title="通过"
      @on-ok="checkActivity(1)"
      @on-cancel="modal2 = false"
    >
      <Form ref="formCustom" :label-width="70">
        <FormItem label="评论内容" prop="passwd">
          <Input
            v-model="comment"
            type="textarea"
            placeholder="请输入评论内容"
          />
        </FormItem>
        <FormItem label="打赏" prop="passwdCheck">
          <Input v-model="award_amount" type="number"></Input>
        </FormItem>
      </Form>
    </Modal>
  </div>
</template>

<script>
import {
  activityFilesQueryList,
  checkActivityFile
} from "@/api/clock/activityClocks";
import Pager from "@/view/common/Pager.vue";
import { formatDate } from "@/libs/util";
export default {
  name: "categories",
  components: {
    Pager
  },
  filters: {
    format(value) {
      return formatDate(value);
    }
  },
  data() {
    return {
      id: null,
      selectList: [],
      config: { total: 0, size: 10, current: 1 },
      modal1: false,
      modal2: false,
      name: "",
      date: [],
      checkStatu: null,
      award_amount: null,
      comment: "",
      remark: "",
      data: [],
      pageIndex: 1,
      pageSize: 10,
      columns: [
        {
          type: "selection",
          width: 60,
          align: "center"
        },
        {
          title: "活动日期",
          slot: "activity_date"
        },
        {
          title: "姓名",
          key: "nick_name"
        },
        {
          title: "手机号",
          key: "phone"
        },
        {
          title: "图片",
          slot: "url"
        },
        {
          title: "上传时间",
          slot: "create_time"
        },
        {
          title: "审核状态",
          slot: "check_status"
        },
        {
          title: "操作",
          slot: "action"
        }
      ]
    };
  },
  methods: {
    onSelect(val) {
      this.selectList = val.map(p => {
        return p.id;
      });
    },
    onSelectAll(val) {
      this.selectList = val.map(p => {
        return p.id;
      });
    },
    confirm() {
      this.$Modal.confirm({
        title: "批量通过",
        content: "您确认要批量通过吗？",
        onOk: () => {
           this.checkActivity(1)
        },
        onCancel: () => {
          
        }
      });
    },
    search() {
      let params = {
        name: this.name,
        language: "cn",
        objectType: 1,
        startDate: this.date[0],
        endDate: this.date[1],
        pageIndex: this.pageIndex,
        pageSize: this.pageSize
      };
      activityFilesQueryList(params).then(res => {
        this.config.total = res.total;
        this.data = res.data;
      });
    },
    checkActivity(status) {
      if (!this.id && !this.selectList.length) {
        this.$Message.error("至少选择一项");
        return;
      }
      let params = {
        award_amount: this.award_amount,
        check_status: status,
        comment: this.comment,
        ids: this.id ? [this.id] : this.selectList,
        object_type: 1,
        remark: this.remark
      };
      checkActivityFile(params).then(res => {
        console.log(res);
        this.$Message.success("操作成功!");
        this.search();
      });
    },
    handlePager(pager) {
      this.pageIndex = pager.current;
      this.pageSize = pager.size;
      this.search();
    }
  },
  mounted() {
    this.search();
  }
};
</script>

<style lang="less"></style>
