<template>
    <div class="app-container">
<!--      礼品卡-->
      <el-card  style="margin-bottom: 20px">
        <div class="top-hang">
          <el-breadcrumb separator="/" style="margin-right: 35px">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item :to="{ path: '/EventMarketing/CardHolder/index' }" >电子卡券管理</el-breadcrumb-item>
            <el-breadcrumb-item>电子礼品卡</el-breadcrumb-item>
          </el-breadcrumb>

          <el-select v-model="queryParams.cardAmount"  clearable style="margin-right: 10px" placeholder="请选择面值">
            <el-option
              v-for="item in jglist"
              :key="item.cardAmount"
              :label="item.cardAmount"
              :value="item.cardAmount">
            </el-option>
          </el-select>
        <el-select v-model="queryParams.activateStatus" clearable style="margin-right: 10px" placeholder="请选择激活状态">
          <el-option
            v-for="item in option"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
        <el-select v-model="queryParams.sailStatus" clearable style="margin-right: 10px" placeholder="请选择出售状态">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
        <el-button type="primary" icon="el-icon-search" @click="getlist">查询</el-button>
          <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
         <div class="butoon">
           <a style=";color: #00afff"
              href="/fuint-application/business/marketingActivity/cardGift/export"> 下载模板 </a >
         </div>
          <div >
            <el-upload

              class=""
              v-loading="uploading"
              action="/fuint-application/business/marketingActivity/cardGift/exchangeImport"
              :headers="headers"
              :limit="1"
              :on-change="handleChange"
              style="margin-left: 15px"
              :file-list="fileList">
              <el-button size="small" type="primary" icon="el-icon-upload">点击上传</el-button>
            </el-upload>
          </div>


        </div>
      </el-card>
      <div class="tjaocuo">

        <div class="sshi">
          <div class="tj-text">总发卡量</div>
          <el-divider></el-divider>
            <div class="tj-num" v-if="onelist&&onelist.length == 0 ">暂无数据...</div>
          <div>
          </div>
          <div class="ds"v-for="(item,index) in onelist" :key="index"  >

            <div class="tj-num">
              <div class="one-size">
                {{item.cardAmount || 0}}
              </div>
              <div >
                面值
              </div>

            </div>
            <div class="tj-num">
              <div class="two-size">
                {{item.total || 0}}
              </div>
              <div>
                总发卡金额
              </div>

            </div>
            <div class="tj-num">
              <div class="three-size">{{item.count || 0}}</div>
              <div>
                总数量
              </div>

            </div>
          </div>

        </div>
        <div class="sshi">
          <div class="tj-text">未使用卡量</div>
          <el-divider></el-divider>
          <div class="tj-num" v-if="threelist&&threelist.length == 0 ">暂无数据...</div>
          <div>
          </div>
          <div class="ds"v-for="(item,index) in threelist" :key="index"  >

            <div class="tj-num">
              <div class="one-size">
                {{item.cardAmount || 0}}
              </div>
              <div >
                面值
              </div>

            </div>
            <div class="tj-num">
              <div class="two-size">
                {{item.total || 0}}
              </div>
              <div>
                总发卡金额
              </div>

            </div>
            <div class="tj-num">
              <div class="three-size">{{item.count || 0}}</div>
              <div>
                总数量
              </div>

            </div>
          </div>

        </div>
        <div class="sshi">
          <div class="tj-text">已使用卡量</div>
          <el-divider></el-divider>
          <div class="tj-num" v-if="twolist&&twolist.length == 0 ">暂无数据...</div>
          <div>
          </div>
          <div class="ds"v-for="(item,index) in twolist" :key="index"  >

            <div class="tj-num">
              <div class="one-size">
                {{item.cardAmount || 0}}
              </div>
              <div >
                面值
              </div>

            </div>
            <div class="tj-num">
              <div class="two-size">
                {{item.total || 0}}
              </div>
              <div>
                总发卡金额
              </div>

            </div>
            <div class="tj-num">
              <div class="three-size">{{item.count || 0}}</div>
              <div>
                总数量
              </div>

            </div>
          </div>

        </div>


      </div>

      <el-card  style="margin-bottom: 20px">
<!--        <div>
          <el-button type="primary" icon="el-icon-plus" @click="daking()" >新增礼品卡</el-button>
        </div>-->
        <div class="title_">
          电子礼品卡列表
        </div>
        <el-table
          :data="tableData"
          style="width: 100%">
          <el-table-column
            label="序号"
            type="index"
          >
          </el-table-column>
          <el-table-column
            prop="number"
            label="电子礼品卡号"
           >
          </el-table-column>
          <el-table-column
            prop="cardAmount"
            label="面值"
            >
          </el-table-column>
          <el-table-column
            prop="useTime"
            label="使用时间"
           >
          </el-table-column>
          <el-table-column
            prop="sailTime"
            label="售出时间"
           >
          </el-table-column>
          <el-table-column
            prop="status"
            label="礼品卡激活状态"
         >
            <template slot-scope="scope">

              <el-switch
                v-model="scope.row.activateStatus"
                :active-value="'0'"
                :inactive-value="'1'"
                active-color="#409EFF"
                inactive-color="#909399"
                @change="posteid(scope.row)"
              >
              </el-switch>
            </template>
          </el-table-column>
          <el-table-column
            prop="sailStatus"
            label="出售状态"
          >
            <template slot-scope="scope">

              <span v-if="scope.row.sailStatus  == 1">已售</span>
              <span v-if="scope.row.sailStatus  != 1">未售</span>
            </template>
          </el-table-column>



          <el-table-column
            prop="createTime"
            label="创建时间"

          >
          </el-table-column>


          <el-table-column
            prop="createBy"
            label="操作员"

          >
          </el-table-column>
          <el-table-column
            prop="address"
            label="操作">
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="text"
                @click="getwysk(scope.row)"
              >售卡</el-button>


            </template>
          </el-table-column>
<!--          <el-table-column
            prop="remark"
            label="备注信息"
            width="280">
          </el-table-column>-->
        </el-table>
        <pagination
          v-show="total>0"
          :total="total"
          :page.sync="pageNo"
          :limit.sync="pageSize"
          @pagination="getlist"
        />
      </el-card>

      <el-dialog
        title="生产礼品卡"
        :visible.sync="centerDialogVisible"
        width="30%"
        >
<!--          表-->
        <el-form :model="ruleForm" :rules="rules" :label-position="labelPosition" ref="ruleForm" label-width="100px" class="demo-ruleForm">
          <el-form-item label="生成数量" prop="quantity">
            <el-input-number v-model="ruleForm.quantity" controls-position="right" :min="1" :max="10"></el-input-number>
          </el-form-item>
          <el-form-item label="礼品卡金额" prop="cardAmount">
            <el-input v-model="ruleForm.cardAmount">
              <template slot="append">元</template>
            </el-input>
          </el-form-item>
          <el-form-item label="礼品卡状态" prop="status">
            <el-radio-group v-model="ruleForm.status">
              <el-radio label="1">启用</el-radio>
              <el-radio label="2">禁用</el-radio>
            </el-radio-group>
          </el-form-item>
<!--          <el-form-item label="卡描述" >
            <el-input type="textarea" v-model="ruleForm.remark"></el-input>
          </el-form-item>-->
        </el-form>
          <span slot="footer" class="dialog-footer">
            <el-button @click="centerDialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="addBlock()">创建</el-button>
          </span>
      </el-dialog>

    </div>
</template>

<script>
import {
  getList,
  getListtj,
  addList,
  eitList,
  deleteList,
  oilDepotConfiguration,
  getdownload,
  getselectGiftValue,
  getyi,
  getwei,
  getqb,
  getsk
} from "@/api/EventMarketing/giftBlock";
  import {getToken} from "@/utils/auth";
  export default {
    name: 'index',
    data() {
      return {
        jglist:[],
        onelist:[],
        twolist:[],
        threelist:[],
        headers: {
          'Access-Token': getToken(),
        },
        uploading: false,
        fileList: [],
        labelPosition:'left',
        queryParams: {
          number:'',
          remark:'',
          activateStatus:null,
          status:'',
          pageNo:1,
          pageSize:10
        },
        centerDialogVisible:false,
        input:'',
        total:0,
        pageNo:1,
        pageSize:10,
        option: [
          {
          value: '0',
          label: '已激活'
        }, {
          value: '1',
          label: '未激活'
        },],
        options: [
          {
            value: '1',
            label: '已售'
          }, {
            value: '0',
            label: '未售'
          },],
        value: '',
        tjdata:{},
        tableData: [
          {
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄'
        }, {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄'
        }],
        ruleForm: {
          status:'1',
          quantity:'1',
          cardAmount:'1',
          remark:''

        },
        rules: {
          status: [
            { required: true, message: '此为必填项', trigger: 'blur' },
          ],
          quantity: [
            { required: true, message: '此为必填项', trigger: 'blur' },
          ],
          cardAmount: [
            { required: true, message: '此为必填项', trigger: 'blur' },
          ],

        }

      }
    },
    mounted() {
      this.getlist()
      this.gettj()
    },
    methods:{
      getwysk(row){
        if(row.sailStatus == 1){
          this.$message.error("此卡已经售出过了呦")
          return
        }
        if(row.activateStatus == 1){
          this.$message.error("此卡还未激活呦")
          return
        }
        let data = {
          id:row.id,
          sailStatus :1
        }
        getsk(data).then(res=>{
          this.getlist()
          console.log(res)
          this.$message.success("售卡成功")
        })
      },

      // 下载
      handleChange(file, fileList) {
        this.uploading = true;
        console.log(file)
        if(file.status === 'success'){
          this.uploading = false;
          this.openUpload = false;
          this.openUser = false;

          this.fileList.splice(0,1)
          this.result = file.response.data
          this.getlist()
        }
      },
      putStatus(id){
        let data = {
          id:1,
          exchangeStatus:id,
        }
        oilDepotConfiguration(data).then(res =>{
         if(res.code == 200){
           this.$message.success("操作成功")
           this.gettj()
         }
        })

      },
      // 重置按钮操作
      resetQuery() {
        this.queryParams = {
          number:'',
          remark:'',
          activateStatus:null,
          status:'',
          pageNo:1,
          pageSize:10
        }
        this.getlist();
      },
      getlist(){
        getselectGiftValue().then(res=>{
          console.log(res)
          this.jglist = res.data
        })
        getqb().then(res=>{

          this.onelist = res.data
          console.log(this.onelist)
        })
        getyi().then(res=>{
          this.twolist = res.data
        })
        getwei().then(res=>{
          this.threelist = res.data
        })
        this.queryParams.pageNo=this.pageNo
        this.queryParams.pageSize=this.pageSize
        getList(this.queryParams).then(res=>{
          this.tableData = res.data.records
          this.total = res.data.total;
        })
      },

      posteid(data){
        eitList(data).then(res=>{
          if(res.code == 200){
            this.$message.success('操作成功！');
          }else {
            this.$message.error('修改失败请稍后再试');
          }
        })
      },
      gettj(){
        getListtj().then(res=>{
          this.tjdata = res.data
        })
      },
      daking(){
        this.centerDialogVisible = true
        this.ruleForm = {
                          activateStatus:'0',
                          quantity:'1',
                          cardAmount:'1',
                          remark:''
                          }
      },
      addBlock(){
        if(this.ruleForm.quantity == '' ||this.ruleForm.cardAmount == '' ||this.ruleForm.status == '' ){
          this.$message.error('必填项不能有空')
          return
        }
        let data = this.ruleForm
        addList(data).then(res=>{
          if(res.code == 200){
            this.$message.success('添加成功');
            this.gettj()
            this.getlist()
          }else {
            this.$message.error('操作失败请稍后再试');
          }
        })
        this.centerDialogVisible = false
      }
    }
  }
</script>

<style scoped lang="scss">
.tj{
  width: 100%;
  display: flex;
  justify-content: space-between;

}
  .kar{
    width: 100%;
    background: #FFFFFF;
    margin-bottom: 10px;

  }
  .one-size{
    font-size: 20px;
    font-weight: bold;
    color: #000;
  }
.two-size{
  font-size: 20px;
  font-weight: bold;
  color: #78b0fb;
}
.three-size{
  font-size: 20px;
  font-weight: bold;
  color: #f73f3f;
}
  .ds{
    width: 100%;
    display: flex;
    align-items: center;
    background: #f4f4f4;
    border-radius: 6px;
   margin-bottom: 15px;
    box-sizing: border-box;
    padding: 15px 5px;
  }
  .tj-text{
    font-size: 18px;
    font-weight: bold;
  }
  .tj-num{
      margin: 5px auto;
      //font-size: 28px;
      color: #666;
    text-align: center;
  }
  .tj-siez{
    margin: 5px auto;
    color: #909399;
    font-size: 14px;
    text-align: center;
  }
  .top-hang{
    width: 100%;
    display: flex;
    align-items: center;
  }
  .butoon{
    box-sizing: border-box;
    padding: 6px 10px;
    border: 1px solid #409eff;
    border-radius: 6px;
    font-size: 16px;
    margin-left: 15px;
  }
  .sshi{
    width: 33%;
  background: #FFFFFF;
  box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
    box-sizing: border-box;
    padding: 15px;
    border-radius: 6px;
    //background: #f9f9f9;
  }
  .tjaocuo{
    width: 100%;
    margin-bottom: 15px;
    display: flex;
    justify-content: space-between;
  }
.title_{
  width: 100%;
  display: flex;
  align-items: center;
  font-size: 20px;
  font-weight: bold;
  justify-content: center;
  margin-bottom: 20px;
}
</style>
