<template>
  <div class="center_">
    <div class="bai-box">
      <div class="d-a">
        <div class="top-title">
          <div class="d-s">
            <div class="bigNum">1</div>
            <div class="smtitle">创建分时优惠</div>
          </div>
          <div class="hui-text">
            不同的商品可以分别创建多个营销价格，分别设置多个
            不同的价格优惠
          </div>
        </div>
        <div class="gang_"></div>
        <div class="top-title">
          <div class="d-s">
            <div class="bigNum">2</div>
            <div class="smtitle">添加活动规则</div>
          </div>
          <div class="hui-text">
            同一个分时优惠可以根据支付方式、会员等级以及活动
            时间添加多个不同的活动规则;同一个商品，同一时间段
            内，同一个会员，同一个支付方式不能添加多个活动规则
          </div>
        </div>
        <div class="gang_"></div>
        <div class="top-title">
          <div class="d-s">
            <div class="bigNum">3</div>
            <div class="smtitle">开始使用分时优惠</div>
          </div>
          <div class="hui-text">
            分时优惠和活动规则创建后，商城会根据后台设置的
            使用时间、支付方式、会员等级来显示不同的会员价
          </div>
        </div>
      </div>
      <!--      -->
      <div class="d-b" style="margin-bottom: 15px">
        <div class="d-s">
          <div class="gang"></div>
          <div class="g-title">分时优惠</div>
        </div>
        <el-button type="primary" @click="Timeshare()">新增分时优惠</el-button>
      </div>
      <el-table
        :data="tableData"
        border
        style="width: 100%">
        <el-table-column
          type="index"
          align="center"
          label="序号"
          width="50">
        </el-table-column>
        <el-table-column
          align="center"
          prop="title"
          label="分时优惠名称"
        >
        </el-table-column>
        <el-table-column
          align="center"
          prop="countCom"
          label="适用商品数量"
        >
        </el-table-column>
        <el-table-column
          align="center"
          prop="createName"
          label="创建人"
        >
        </el-table-column>
        <el-table-column
          align="center"
          prop="createTime"
          label="创建时间">
        </el-table-column>
        <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="text"
              @click="modifySeparateList(scope.row.id)"
            >修改
            </el-button>
            <el-button
              size="mini"
              type="text"
              @click="deleteOil(scope.row.id)"
            >删除
            </el-button>

          </template>
        </el-table-column>
      </el-table>
      <!--        -->
      <div class="d-b" style="margin-bottom: 15px;margin-top: 20px">
        <div class="d-s">
          <div class="gang"></div>
          <div class="g-title">活动规则</div>
        </div>
        <el-button type="primary" @click="showDialogVisible =! showDialogVisible">新增活动规则</el-button>
      </div>
      <el-table
        :data="tableData"
        border
        style="width: 100%">
        <el-table-column
          type="index"
          align="center"
          label="序号"
          width="50">
        </el-table-column>
        <el-table-column
          align="center"
          prop="name"
          label="分时优惠名称"
        >
        </el-table-column>
        <el-table-column
          align="center"
          prop="name"
          label="活动规则名称"
        >
        </el-table-column>
        <el-table-column
          align="center"
          prop="name"
          label="会员等级"
        >
        </el-table-column>
        <el-table-column
          align="center"
          prop="name"
          label="支付方式"
        >
        </el-table-column>
        <el-table-column
          align="center"
          prop="name"
          label="会员标签"
        >
        </el-table-column>
        <el-table-column
          align="date"
          prop="address"
          label="生效时间">
        </el-table-column>
        <el-table-column
          align="date"
          prop="address"
          label="适用时间段">
        </el-table-column>
        <el-table-column
          align="center"
          prop="name"
          label="每人每天参与限制"
        >
        </el-table-column>
        <el-table-column
          align="center"
          prop="name"
          label="每人累计参与限制"
        >
        </el-table-column>
        <el-table-column
          align="center"
          prop="name"
          label="状态"
        >
        </el-table-column>
        <el-table-column
          align="center"
          prop="name"
          label="创建人"
        >
        </el-table-column>
        <el-table-column
          align="center"
          prop="name"
          label="创建时间"
        >
        </el-table-column>

        <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="text"
              @click="showDialogVisible =! showDialogVisible"
            >修改
            </el-button>

            <el-button
              size="mini"
              type="text"
            >删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-dialog
      title="新增/修改分时优惠"
      :visible.sync="centerDialogVisible"
      width="48%"
      center>
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="120px" class="demo-ruleForm">
        <el-form-item label="分时优惠名称" prop="title">
          <el-input v-model="ruleForm.title" style="width: 217px"></el-input>
        </el-form-item>
        <el-form-item label="类型" prop="category">
          <el-select v-model="ruleForm.category" placeholder="请选择类型">
            <el-option label="固定价格" value="1"></el-option>
            <el-option label="折扣" value="2"></el-option>
            <el-option label="减价" value="3"></el-option>
          </el-select>
          <div>当手动/自动调整商品价格后，若调整后的售价低于规则设置时的会员
            价，则该规则不生效。
          </div>
        </el-form-item>
        <el-form-item label="折扣" prop="disValue" v-if="ruleForm.category == '2' ">
          <el-input v-model="ruleForm.disValue" style="width: 217px"></el-input>
          <div>折扣请填写0~1的数字。例如输入0.8，表示打8折</div>
        </el-form-item>
        <el-form-item label="减价金额" prop="disValue" v-if="ruleForm.category == '3' ">
          <el-input v-model="ruleForm.disValue" style="width: 217px"></el-input>
          <div>减价金额不能小于 0.01</div>
        </el-form-item>

        <el-table
          :data="ruleForm.oilList"
          border
          style="width: 100%">

          <el-table-column
            align="center"
            prop="oilNames"
            label="油品油号"
          >
            <template slot-scope="scope">
              <span>{{scope.row.oilType}}{{scope.row.oilName}}</span>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            prop="oilPrice"
            label="当前挂牌价（元/L)"
          >
          </el-table-column>
          <el-table-column
            align="center"
            prop="price"
            label="优惠价（元/L）"
          >
            <template slot-scope="scope">
              <el-input-number v-model="scope.row.price" controls-position="right" :min="0.1"
                               :max="999"></el-input-number>
              <!--                scope.row-->
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
            <template slot-scope="scope">

              <el-button
                v-if="scope.row.type == '0'"
                size="mini"
                type="text"
                @click="deleteType(scope.row)"
              >删除
              </el-button>
              <el-button
                v-if="scope.row.type == '1'"
                size="mini"
                type="text"
                @click="addType(scope.row)"
              >添加
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-form>
      <span slot="footer" class="dialog-footer">
            <el-button @click="centerDialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="addSeparateList()">确 定</el-button>
        </span>
    </el-dialog>
    <el-dialog
      title="新增/修改活动规则"
      :visible.sync="showDialogVisible"
      width="30%"
      center>
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="120px" class="demo-ruleForm">
        <el-form-item label="活动规则名称" prop="name">
          <el-input v-model="ruleForm.name"></el-input>
        </el-form-item>
        <el-form-item label="分时优惠名称" prop="region">
          <el-select v-model="ruleForm.region" placeholder="请选择优惠名称">
            <el-option label="区域一" value="shanghai"></el-option>
            <el-option label="区域二" value="beijing"></el-option>
          </el-select>
        </el-form-item>


        <el-form-item label="适用会员等级" prop="region">
          <el-select v-model="ruleForm.region" placeholder="请选择会员等级">
            <el-option label="区域一" value="shanghai"></el-option>
            <el-option label="区域二" value="beijing"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label=" 会员标签" prop="region">
          <el-select v-model="ruleForm.region" placeholder="请选择会员标签">
            <el-option label="区域一" value="shanghai"></el-option>
            <el-option label="区域二" value="beijing"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="可使用支付方式" prop="type">
          <el-checkbox-group v-model="ruleForm.type">
            <el-checkbox label="美食/餐厅线上活动" name="type"></el-checkbox>
            <el-checkbox label="地推活动" name="type"></el-checkbox>
            <el-checkbox label="线下主题活动" name="type"></el-checkbox>
            <el-checkbox label="单纯品牌曝光" name="type"></el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="生效时间" required>

          <el-form-item prop="date1">
            <el-date-picker type="date" placeholder="选择日期" v-model="ruleForm.date1"
                            style="width: 100%;"></el-date-picker>
          </el-form-item>


        </el-form-item>

        <el-form-item label="适用实收金额" required>
          <el-col :span="11">
            <el-form-item prop="name">
              <el-input v-model="ruleForm.name"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="2">
            <div style="margin-left: 5px">到</div>
          </el-col>
          <el-col :span="11">
            <el-form-item prop="name">
              <el-input v-model="ruleForm.name"></el-input>
            </el-form-item>
          </el-col>
        </el-form-item>
        <el-form-item label="适用加油升数" required>
          <el-col :span="11">
            <el-form-item prop="name">
              <el-input v-model="ruleForm.name"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="2">
            <div style="margin-left: 5px">到</div>
          </el-col>
          <el-col :span="11">
            <el-form-item prop="name">
              <el-input v-model="ruleForm.name"></el-input>
            </el-form-item>
          </el-col>
        </el-form-item>

        <el-form-item label="最大优惠金额" prop="name">
          <el-input v-model="ruleForm.name"></el-input>
        </el-form-item>
        <el-form-item label="每人每日参与限制" label-width="140px" prop="name">
          <el-input v-model="ruleForm.name"></el-input>
        </el-form-item>
        <el-form-item label="每人累计参与限制" label-width="140px" prop="name">
          <el-input v-model="ruleForm.name"></el-input>
        </el-form-item>
        <el-form-item label="适用时间段" prop="name">
          <div class="d-s" style="margin-bottom: 5px">
            每周：
            <el-select v-model="ruleForm.region" placeholder="请选择适用时间">
              <el-option label="周一" value="shanghai"></el-option>
              <el-option label="周二" value="beijing"></el-option>
            </el-select>
          </div>
          <div class="d-s" style="margin-bottom: 5px">
            每月：
            <el-select v-model="ruleForm.region" placeholder="请选择适用时间">
              <el-option label="周一" value="shanghai"></el-option>
              <el-option label="周二" value="beijing"></el-option>
            </el-select>
          </div>
          <div class="d-s">
            时间段：
            <el-date-picker type="date" placeholder="选择日期" v-model="ruleForm.date1"></el-date-picker>
          </div>
        </el-form-item>

        <!--          -->

        <el-form-item>
          <el-button type="primary">立即创建</el-button>
          <el-button>重置</el-button>
        </el-form-item>
      </el-form>

    </el-dialog>
  </div>
</template>
<script>
import {getoilList, getRequestList, postaddList, getID, updateActivePrice, deleteList} from "./api/separate";
import {oilNumberList1} from "@/api/order/oilnumgun";

export default {
  data() {
    return {
      // 分时
      queryParams: {
        pageNum: 1,
        pageSize: 5,
        activeType: 1
      },
      ruleForm: {
        activeType: 1,
        title: '',
        name: '',
        region: '',
        category: '',
        disValue: '',
        type: [],
        oilList: []
      },
      rules: {
        title: [
          {required: true, message: '请输入名称', trigger: 'blur'},

        ],
        category: [
          {required: true, message: '请选择类型', trigger: 'change'}
        ],
      },
      centerDialogVisible: false,
      showDialogVisible: false,
      // 分时列表
      tableData: [],
      // 油品列表
      oilList: [],
      // 活动规则列表
      ruleList:[],
    }
  },
  created() {
    this.getList()
    this.getRuleList()
  },
  methods: {
    // 查询活动规则列表
    getRuleList(){

    },
    // 删除
    deleteOil(id){
      deleteList(id).then(res=>{
        console.log(res)
        if(res.code == 200){
          this.$message({
            message: '删除成功',
            type: 'success'
          })
          this.getList()
        }

      })
    },
    // 分时优惠制空
    Blank(){
      this.ruleForm ={
        activeType: 1,
        title: '',
        name: '',
        region: '',
        category: '',
        disValue: '',
        type: [],
        oilList: []
      }
    },
    // 修改
    modifySeparateList(id) {
      getID(id).then(res => {
        console.log(res)
        if (res.code == 200) {
          this.ruleForm = res.data
          this.centerDialogVisible = true
        }
      })
    },
    // 新增/修改
    addSeparateList() {

      this.centerDialogVisible = false
      if(this.ruleForm.id){
        updateActivePrice(this.ruleForm).then(res => {
          console.log(res)
          if (res.code == 200) {
            this.$message({
              message: '添加成功',
              type: 'success'
            })
            this.getList()
          }
        })
      }else{
        postaddList(this.ruleForm).then(res => {
          console.log(res)
          if (res.code == 200) {
            this.$message({
              message: '添加成功',
              type: 'success'
            })
            this.getList()
          }
        })
      }


    },
    //列表查询
    getList() {
      getRequestList(this.queryParams).then(res => {
        console.log(res)
        this.tableData = res.data.records
      })
    },
    // 新增分时
    Timeshare() {
      this.Blank()
      oilNumberList1().then(res => {
        this.ruleForm.oilList = res.data.records
        for (let i = 0; i < this.ruleForm.oilList.length; i++) {
          this.ruleForm.oilList[i].type = 0
        }
      })
      this.centerDialogVisible = !this.centerDialogVisible
    },
    deleteType(data) {

      data.type = '1'
      this.$forceUpdate()
      console.log('1', this.ruleForm.oilList)
      let tempList = JSON.stringify(this.ruleForm.oilList)
      this.ruleForm.oilList = []
      this.ruleForm.oilList = JSON.parse(tempList)
    },
    addType(data) {
      data.type = '0'
      this.$forceUpdate()
      console.log('0', this.ruleForm.oilList)
      let tempList = JSON.stringify(this.ruleForm.oilList)
      this.ruleForm.oilList = []
      this.ruleForm.oilList = JSON.parse(tempList)
    }


  }
}
</script>

<style scoped lang="scss">
.center_ {
  width: 100%;
  border-radius: 8px;
  background: #f9f9f9;
  box-sizing: border-box;
  padding: 20px;
  margin: 0 auto;
}

.bai-box {
  border-radius: 10px;
  background: #fff;
  box-sizing: border-box;
  padding: 15px;
}

.d-b {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.d-a {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-around;
}

.d-s {
  display: flex;
  align-items: center;
}

.top-title {

}

.hui-text {
  font-weight: 400;
  font-size: 16px;
  color: #999999;
  line-height: 30px;
  width: 380px;
  height: 120px;
  overflow: hidden;
}

.bigNum {
  font-size: 60px;
  font-weight: bold;
  color: #333333;
  margin-right: 15px;
}

.smtitle {
  font-size: 28px;
  color: #333333;
  font-weight: bold;
}

.gang_ {
  width: 1px;
  height: 75px;
  border: 1px solid #FF9655;
}

.gang {
  width: 2px;
  height: 13px;
  background: #FF9655;
  margin-right: 10px;
}

.g-title {
  font-size: 14px;
  color: #333333;
}
</style>
