<template>
    <div class="app-containers">
<!--      存油卡-->
<!--      <el-card  style="margin-bottom: 20px">-->
<!--        <div style="display: flex;align-items: center;justify-content: space-between">-->
<!--        <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-radio-group v-model="queryParams.type" @input="radiovalue(dict.label)">-->
<!--          <el-radio-button v-for="dict in dict.type.oil_type"-->
<!--                           :key="dict.value"-->
<!--                           :label="dict.label"-->
<!--                           :value="dict.value"-->
<!--          ></el-radio-button>-->
<!--        </el-radio-group>-->
<!--        </div>-->
<!--        <div class="top-sousuo">-->
<!--          <el-select v-model="queryParams.oilType"  clearable placeholder="请选择油号">-->
<!--            <el-option-->
<!--              v-for="dict in oilList"-->
<!--              :key="dict.id"-->
<!--              :label="dict.oilName"-->
<!--              :value="dict.id">-->
<!--            </el-option>-->
<!--          </el-select>-->
<!--          <el-select v-model="queryParams.activeStatus" placeholder="状态" style="margin:0px 20px">-->
<!--            <el-option-->
<!--              v-for="item in option"-->
<!--              :key="item.value"-->
<!--              :label="item.label"-->
<!--              :value="item.value">-->
<!--            </el-option>-->
<!--          </el-select>-->
<!--          <el-button  type="primary" style="margin-left: 20px ;float: right" icon="el-icon-search" @click="getlist">搜索</el-button>-->
<!--          <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>-->
<!--        </div>-->
<!--      </el-card>-->
      <div  class="card-box"  style="margin-bottom: 20px">
        <div class="d-s">
          <div class="gang"></div>
          <div  style="font-weight: bold">电子囤油卡</div>
        </div>
        <div style="display: flex;justify-content: space-between;box-sizing: border-box;align-items: center;padding: 1px">
          <div class="left-c">新型加油卡，以储油为特色，让车主提前锁定油价，享受便捷灵活的加油体验</div>
          <div>

            <el-button type="primary" style="margin-bottom: 10px " @click="addoilBlock()">新增囤油卡活动</el-button>
          </div>

        </div>


        <el-table
          :data="tableData"
          style="width: 100%">
          <el-table-column
            label="序号"
            type="index"
            >
          </el-table-column>

          <el-table-column
            prop="type"
            label="油品信息"
          >
          </el-table-column>
          <el-table-column
            prop="lockPrice"
            label="锁价活动价(元)/L"
          >
          </el-table-column>
          <el-table-column
            prop="oilPrice"
            label="当前挂牌价(元)/L"
          >
          </el-table-column>
          <el-table-column
            prop="gbPrice"
            label="当前国标价(元)/L"
          >
          </el-table-column>
          <el-table-column
            prop="type"
            label="活动时间"
            width="330"
            >
<!--            <template slot-scope="scope" v-if="scope.row.activeTime==='2'">-->
            <template slot-scope="scope">
              <div v-if="scope.row.activeTime==='2'" style="display: flex;align-items: center">
                <div>{{scope.row.createTime}}</div>
                <div> --- </div>
                <div>{{scope.row.endTime}}</div>
              </div>
              <div v-if="scope.row.activeTime==='1'" style="display: flex;align-items: center"><div>不限时间</div></div>
            </template>
          </el-table-column>

          <el-table-column
            prop="activeStatus"
            label="活动状态"
            >
            <template slot-scope="scope">

              <el-switch
                v-model="scope.row.activeStatus"
                active-value="1"
                inactive-value="2"
                active-color="#fe8c4a"
                inactive-color="#909399"
                @change="posteid(scope.row)"
              >
              </el-switch>
            </template>
          </el-table-column>

          <el-table-column
            label="编辑"
            >
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="text"
                @click="handleUpdate(scope.row)"
              >修改</el-button>

              <el-button
              size="mini"
              type="text"
              @click="handleDelete(scope.row)"
            >删除
            </el-button>
              <el-button
                size="mini"
                type="text"
                @click="lookorder()"
              >查看订单记录
              </el-button>
            </template>

          </el-table-column>
        </el-table>
        <pagination
          v-show="total>0"
          :total="total"
          :page.sync="pageNo"
          :limit.sync="pageSize"
          @pagination="getlist"
        />
      </div>
      <el-drawer
        title="订单记录"
        :visible.sync="orderShow"
        size="55%"
        :before-close="handleClose"
        center>
        <div class="box-der">
          <div class="d-b">
            <div class="d-s">
              <el-input v-model="input" style="width: 200px;margin-right: 10px" placeholder="请输入订单号"></el-input>
              <el-select v-model="value" placeholder="请选择" style="width: 200px;margin-right: 10px">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
              <el-date-picker
                v-model="value1"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期">
              </el-date-picker>
            </div>
            <el-button type="primary" icon="el-icon-search">搜索</el-button>
          </div>
        <el-table
          :data="orderData"
          border
          style="width: 100%">
          <el-table-column
            label="序号"
            type="index"
          >
          </el-table-column>
          <el-table-column
            prop="date"
            label="订单号"
            >
          </el-table-column>
          <el-table-column
            prop="date"
            label="会员手机号"
           >
          </el-table-column>
          <el-table-column
            prop="date"
            label="礼品卡面值（元）">
          </el-table-column>
          <el-table-column
            prop="date"
            label="数量">
          </el-table-column>
          <el-table-column
            prop="date"
            label="礼品卡金额">
          </el-table-column>
          <el-table-column
            prop="date"
            label="实收金额">
          </el-table-column>
          <el-table-column
            prop="date"
            label="订单状态">
          </el-table-column>
          <el-table-column
            prop="date"
            label="订单完成时间">
          </el-table-column>
        </el-table>
        </div>
      </el-drawer>
      <el-dialog
        title="囤油卡操作"
        :visible.sync="centerDialogVisible"
        width="36%"
        center>

        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="110px" class="demo-ruleForm">
            <div style="display: flex; align-items: center ">
              <el-form-item label="油品类型" prop="oilType">
                <el-select v-model="ruleForm.oilType" placeholder="请选择"  @change="getoiltype" >
                  <el-option
                    v-for="dict in oilList"
                    :key="dict.id.toString()"
                    :label="dict.oilName"
                    :value="dict.id.toString()">
                  </el-option>
                </el-select>
              </el-form-item>
              <div style="margin-left: 10px" v-if="oilPrice&&gbPrice">今日油价：<span style="color: red">{{oilPrice || ''}}</span> 元/L   国标油价：<span style="color: red">{{gbPrice || ''}}</span>元/L  </div>
            </div>
          <el-form-item label="锁价活动价" prop="lockPrice">
            <div style="width: 217px">
              <el-input v-model="ruleForm.lockPrice" min="1" placeholder="请输入锁价活动价">
                <template slot="append">元/升</template>
              </el-input>
            </div>
          </el-form-item>
          <el-form-item label="锁价满足金额" prop="rechargeBalance">
            <div style="width: 217px">
              <el-input v-model="ruleForm.rechargeBalance" min="1" placeholder="请输入锁价满足金额">
                <template slot="append">元</template>
              </el-input>
            </div>
          </el-form-item>
          <el-form-item label="赠送积分" prop="points">
            <div style="width: 217px">
              <el-input v-model="ruleForm.points">
                <template slot="append">分</template>
              </el-input>
            </div>
          </el-form-item>
          <el-form-item label="活动时间" prop="resource">
              <el-radio-group v-model="ruleForm.activeTime">
                <el-radio label="1">不限时间</el-radio>
                <el-radio label="2">自定义时间</el-radio>
              </el-radio-group>
          </el-form-item>
          <el-form-item label="时间范围" v-if="ruleForm.activeTime == 2" prop="startTime">
            <div style="width: 100%;display: flex;align-items: center ">
              <div style="width: 217px">
                <el-date-picker
                  v-model="ruleForm.startTime"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  type="datetime"
                  placeholder="开始日期">
                </el-date-picker>
              </div>
                <div style="width: 5%">
                  -
                </div>
              <div style="width: 45%">
                <el-date-picker
                  v-model="ruleForm.endTime"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  type="datetime"
                  placeholder="结束日期">
                </el-date-picker>
              </div>
            </div>
          </el-form-item>
          <el-form-item label="活动状态" prop="resource">
            <el-radio-group v-model="ruleForm.activeStatus">
              <el-radio label="1">启用</el-radio>
              <el-radio label="2">禁用</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="centerDialogVisible = false">取 消</el-button>
           <el-button type="primary" @click="postadd(ruleForm)">确 定</el-button>
        </span>
      </el-dialog>
    </div>
</template>

<script>
  import { getList,oilName,addList,eitList,getById,getoilnum,getstatistics,deleteById} from "@/api/EventMarketing/oilBlock";
  import {deletedelById} from "@/api/EventMarketing/SaveBlock";
  export default {
    dicts: ['oil_type'],
    name: 'index',
    data(){
      return{
        gbPrice:null,
        oilPrice:null,
        tjlist:[],
        value:'',
        type:0,
        orderShow:false,
        centerDialogVisible:false,
        value1:'',
        total:0,
        pageNo:1,
        pageSize:10,
        option: [
          {
            value: '',
            label: '全部'
          },
          {
            value: '1',
            label: '正常'
          }, {
            value: '2',
            label: '禁用'
          },],
        orderData: [{
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, ],

        tableData: [],
        oilList:[],
        ruleForm:{
          oilType:2,
          lockupPrice: "" ,
          lockPrice: "" ,
          lockMoney: "" ,
          rechargeBalance:"",
          incomeLitres:0,
          points:'',
          status:'0',
          activeTime:'1',
          activeStatus:'0'
        },
        queryParams:{
          type:'汽油',
          oilType:'',
          activeStatus:'',
          pageNo:1,
          pageSize:10,
        },
        queryParamss:{
          type:'',
          oilType:'',
          activeStatus:'',
          pageNo:1,
          pageSize:10,
        },
        rules:{
          oilType: [
            { required: true, message: '不能为空', trigger: 'blur' },
          ],
          rechargeBalance: [
            { required: true, message: '不能为空', trigger: 'blur' },
          ],
          points: [
            { required: true, message: '不能为空', trigger: 'blur' },
          ],
          lockPrice: [
            { required: true, message: '不能为空', trigger: 'blur' },
          ],
        }
      }

    },
    mounted() {
      this.getlist()
      this.radiovalue()
    },
    watch:{
      'ruleForm.rechargeBalance':{
        handler: function() {
          if(this.ruleForm.rechargeBalance != 0 && this.ruleForm.lockupPrice != 0 ){
            this.ruleForm.incomeLitres = this.ruleForm.rechargeBalance / this.ruleForm.lockupPrice

          }else {
            this.ruleForm.incomeLitres = 0
          }

        },
      },
      'ruleForm.lockupPrice':{
        handler: function() {
          if(this.ruleForm.rechargeBalance != 0 && this.ruleForm.lockupPrice != 0 ){
            this.ruleForm.incomeLitres = this.ruleForm.rechargeBalance / this.ruleForm.lockupPrice

          }else {
            this.ruleForm.incomeLitres = 0
          }
        },
      }
    },
    computed: {
      // 计算属性很重要的特性: 带缓存, 性能极强
      // 在第一次使用该属性时进行计算, 计算后将结果缓存起来, 后面如果还有其他地方用到, 会直接从缓存中取值, 不会再次计算
      // 如果依赖的数据更新, 也会重新计算, 然后重复上述操作
      totalCount () {
        console.log('我是 computed 里的求和属性')
        this.ruleForm.incomeLitres = this.ruleForm.rechargeBalance / this.ruleForm.lockupPrice
        return this.ruleForm.incomeLitres
      }
    },

    methods:{
      lookorder(){
        this.orderShow = !this.orderShow
      },
      getoiltype(e){
        getoilnum(e).then(res=>{
          console.log(res)
          if(res.code == 200){
            this.gbPrice = res.data.gbPrice
            this.oilPrice = res.data.oilPrice
          }

        })
      },

      radiovalue(lable){
        this.oilList = []
        oilName(this.queryParams.type).then(res=>{
          this.oilList = res.data.records
          console.log('我的油站' ,res)
        })
        this.getlist()
      },
      // 重置按钮操作
      resetQuery() {
        this.queryParams = {
          type:'汽油',
            oilType:'',
            activeStatus:'',
            pageNo:1,
            pageSize:10,
        }
        this.getlist();
      },
      getlist(){
        this.queryParams.pageNo=this.pageNo
        this.queryParams.pageSize=this.pageSize
          getList(this.queryParams).then(res=>{
            if(res.code == 200){
              this.tableData = res.data.records
              this.total = res.data.total;
            }
          })
        getstatistics().then(res=>{
          console.log(res)
          this.tjlist = res.data
        })

      },
      addoilBlock(){
        this.gbPrice = null,
          this.oilPrice=null,
        this.ruleForm = {
            type:this.queryParams.type,
            lockupPrice: 0 ,
            rechargeBalance:0,
            incomeLitres:0,

            points:'',
            activeTime:'1',
            activeStatus:'1',
            tatus:'1'
        },
          this.radiovalue()
        this.centerDialogVisible = true
      },
      posteid(data){
        eitList(data).then(res=>{
          if (res.code == 200){
            this.$message.success('修改成功')
          }
        })
      },
      postadd(formName){
        if( this.ruleForm.oilType ==''  || this.ruleForm.rechargeBalance =='' || this.ruleForm.points =='' ){
          this.$message.error("必填项不能为空")
          return
        }
        this.ruleForm.type = this.queryParams.type
        this.ruleForm.status = '1'
        // this.ruleForm.startTime = this.ruleForm.startTime.toLocaleDateString()
        // this.ruleForm.endTime = this.ruleForm.endTime.toLocaleDateString()
        if( this.ruleForm.id ){
          console.log("修改")
          eitList(this.ruleForm).then(res=>{
            if (res.code == 200){
              this.$message.success('修改成功')
              this.getlist()
            }
          })
        }else{
          addList(this.ruleForm).then(res=>{
            if (res.code == 200){
              this.$message.success('新增成功')
              this.getlist()
            }
          })
        }

        this.centerDialogVisible = false
      },
      handleDelete(data){

        this.$modal.confirm('确定删除此条电子囤油卡信息？').then(function() {
          return deleteById(data.id);
        }).then(() => {
          this.getlist()
          this.$modal.msgSuccess("删除成功");
        }).catch(() => {});
      },
      handleUpdate(data){
        getById(data.id).then(res=>{
          if (res.code == 200){
            this.ruleForm = res.data
            this.centerDialogVisible = true
          }
        })
      }

    }
  }
</script>

<style scoped lang="scss">
.d-b{
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin-bottom: 10px;
}
  .top-sousuo{
    margin-top: 10px;
    display: flex;
    align-items: center;
  }
  .tjbox{
    width: 19%;
    background: #f9f9f9;
    margin-right: 1%;
    margin-bottom: 1%;
    box-sizing: border-box;
    padding: 15px;
    border-radius: 6px;
  }
  .cu{
    font-weight: bold;
  }
  .wrap-box{
    width: 100%;
    display: flex;
   flex-wrap: wrap;
    margin-bottom: 20px;
  }
  .card-box{
    width: 100%;
    background: #fff;
    box-sizing: border-box;
    padding: 15px;
    border-radius: 10px;
  }
  .box-der{
    box-sizing: border-box;
    padding: 15px;
  }
  .gang{
    width: 2px;
    height: 13px;
    background: #FF9655;
    margin-right: 5px;
  }
  .d-s{
    display: flex;
    align-items: center;
  }
  .left-c{
    background: rgba(255,150,85,0.15);
    font-size: 12px;
    color: #FF9655;
    box-sizing: border-box;
    padding: 4px 15px ;
  }
</style>
