<template>
  <div class="bodyBoxs">
    <div style="margin-bottom: 15px;width: 640px">
      <el-input :placeholder="placeholder" v-model="search" class="input-with-select">
        <el-select @change="changes" style="width: 140px;" v-model="type" slot="prepend" placeholder="请选择">
<!--          <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 @change="changes" style="width: 140px;margin-left: 20px;border-left: rgb(220,223,230) 1px solid" v-model="state" slot="prepend" placeholder="请选择">
                    <el-option label="全部" value="4"></el-option>
                    <el-option label="待发货" value="0"></el-option>
                    <el-option label="已发货" value="2"></el-option>
                    <el-option label="已收货" value="3"></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"
        :row-class-name="tableRowClassName"
        stripe
        style="width: 100%">
        <el-table-column
          prop="id"
          label="编号"
          width="80">
        </el-table-column>
        <el-table-column
          prop="shopName"
          label="商品名称"
          width="120">
        </el-table-column>
        <el-table-column
          prop="name"
          label="姓名"
          width="80">
        </el-table-column>
        <el-table-column
          prop="phone"
          label="电话"
          width="120">
        </el-table-column>
        <el-table-column
          prop="address"
          label="地址">
        </el-table-column>
        <el-table-column
          prop="createdAt"
          label="兑奖时间"
          width="180">
        </el-table-column>
        <el-table-column
          prop="state"
          label="当前状态"
          width="180">
          <template slot-scope="scope">
            <div slot="reference" class="name-wrapper">
              <el-tag :type="scope.row.state == 0 ? 'danger' : (scope.row.state == 1 ? 'warning' : scope.row.state == 2 ? 'primary' : 'success')">{{ scope.row.state == 0 ? '未发货' : (scope.row.state == 1 ? '已发货' : scope.row.state == 2 ? '已发货' : '已收货')}}</el-tag>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          fixed="right"
          label="操作">
          <template slot-scope="scope">
            <el-button @click="editAward(scope.row)" type="warning" size="small">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-dialog title="编辑状态" :visible.sync="dialogFormVisible">
        <el-form :model="form">
          <el-input type="hidden" v-model="form.id" autocomplete="off"></el-input>
          <el-form-item label="状态">
            <el-select v-model="form.state" placeholder="请选订单状态">
              <el-option label="待发货" value="0"></el-option>
<!--              <el-option label="已发送" value="1"></el-option>-->
              <el-option label="已发货" value="2"></el-option>
              <el-option label="已收货" value="3"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="setAward">确 定</el-button>
        </div>
      </el-dialog>
      <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>
    </div>
  </div>
</template>
<script>
  import { getToken } from "@/utils/auth";
  import ElImageViewer from 'element-ui/packages/image/src/image-viewer'
  import {requestPost} from "@/utils/util";
  export default {
    components: { ElImageViewer },
    data(){
      return{
        state:'4',
        placeholder:'请输入商品名称',
        dialogFormVisible:false,
        formLabelWidth:'120px',
        tableData: [],
        total:0,
        type:'1',
        currentPage4:0,
        loading:false,
        pageSize:10,
        pages:1,
        form:{
          id:0,
          state:''
        },
        search:''
      }
    },
    created(){
      this.getData();
    },
    methods:{
      changes(res){
        console.log(res)
        this.placeholder = res == 1 ? '请输入商品名称' : '请输入地址丶姓名或者电话'
      },
      tableRowClassName({row, rowIndex}) {
        if (rowIndex === 1) {
          return 'warning-row';
        } else if (rowIndex === 3) {
          return 'success-row';
        }
        return '';
      },
      getData(){
        this.loading = true;
        this.$api.award({
          page: this.pages,
          size: this.pageSize,
          type:this.type,
          search:this.search,
          state:this.state
        }).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;
        });
      },
      handleSizeChange(val){
        this.pageSize = val;
        this.getData()
      },
      handleCurrentChange(val){
        console.log('点击了');
        this.pages= val;
        this.getData();
      },
      editAward(row){
        this.dialogFormVisible = true;
        this.form.id = row.id
        this.form.state = row.state == 0 ? '未发货' : (row.state == 1 ? '已发货' : (row.state == 2 ? '已发货' : '已收货'))
      },
      setAward(){
        this.dialogFormVisible = false;
        this.loading = true;
        this.$api.setAward({
          id: this.form.id,
          type: this.form.state,
        }).then((res) => {
          this.loading = false;
          this.$message({
            message: res.message,
            type: 'success'
          });

          this.getData()
        }).catch((res) => {
          this.loading = false;
        });
      }
    }
  }
</script>
<style scoped>
  .bodyBoxs{
    padding: 40px;
  }
  .boxs{
    width: 100%;
    background: #fff;
    border-radius: 15px;
  }
</style>
