<script>
import {
  deleteOilPresePricesApi,
  getAllOilListApi,
  getOilNameListApi, getOilPresePricesApi,
  getOilPresetList,
  insertOilPresePricesApi,
  stopJobApi, updateOilPresePricesApi
} from "@/api/oilPrice";

export default {
  name: "addprice",
  data() {
    return {
      defaultDateTime: new Date(), // 默认时间
      pickerOptions: {
        disabledDate(time) {
          // 限制选择范围为当前时间之后
          return time.getTime() < Date.now();
        },
      },
      oilPresetPricesList: [],
      AllOilList: [],
      queryParams: {
        pageNo: 1,
        pageSize: 10,
      },
      title: '',
      total: 0,
      dialogFormPricesAdd: false,
      oilPresetPrices: {
        numberId: '',
        presetOilPrices: '',
        presetGbPrice: '',
        effectiveTime: '',
        unit: '',
        oilNameT: '',
        currentPetrolPrices: '',
        currentGbPrice: '',
      },
      selectOilTypeByPrice: [],

      oilPresetPricesRules: {
        numberId: [
          {required: true, message: "预设油品油号不能为空", trigger: "blur"},
        ],
        presetOilPrices: [
          {required: true, message: "预设油品挂牌价不能为空", trigger: "blur"},
        ],
        presetGbPrice: [
          {required: true, message: "预设油品国标价不能为空", trigger: "blur"},
        ],
        effectiveTime: [
          {required: true, message: "预设活动开始时间不能为空", trigger: "blur"},
        ],
      }
    }
  },
  async created() {
    try {
      await this.getAllOilList();

      await this.getOilPresetListin();
    } catch (error) {
      console.error(error);
    }
  },
  methods: {
    async inittt() {
      await this.getAllOilList();

      await this.getOilPresetListin();
    },
    /**
     * 油价预设
     */
    // 查询预设油号
    getOilPresetListin() {
      var this_ = this
      getOilPresetList(this.queryParams).then(response => {
        this.oilPresetPricesList = response.data.records
        this.total = response.data.total
        this.oilPresetPricesList.forEach(oilNumber => {
          this.AllOilList.forEach(oil => {
            if (parseInt(oilNumber.oilType) == oil.id) {
              oilNumber.oilNameT = oil.oilType + ' ' + oil.oilName;
            }
          });
        });
      });
    },
    async getAllOilList() {
      try {
        const response = await getAllOilListApi();
        const oilList = response.data;
        this.AllOilList = oilList
        this.oilNumberList = this.oilNumberList2

        this.oilNumberList.forEach(oilNumber => {
          oilList.forEach(oil => {
            if (parseInt(oilNumber.oilName) === oil.id) {
              oilNumber.allOil = oil.oilType + " " + oil.oilName;
              oilNumber.oilTypeT = oil.oilType;
              oilNumber.oilNameT = oil.oilName;
            }
          });
        });
      } catch (error) {
        // Handle error here if needed
      }
    },
    // 油价预设查询列表
    getOilNameList() {
      var this_ = this
      getOilNameListApi().then(response => {
        var list = response.data
        this_.selectOilTypeByPrice = list
      });
    },
    // 新增油价预设
    addOilPresePrices() {
      this.dialogFormPricesAdd = true
      this.oilPresetPrices = {}
      // this.selectOilTypeByPrice = this.oilNumberList;
      // 油价预设查询列表
      this.getOilNameList();
    },
    // 新增油价预设
    editRow(data) {
      getOilPresePricesApi(data.presetId).then(res => {
        this.dialogFormPricesAdd = true
        this.oilPresetPrices = res.data
        // 油价预设查询列表
        this.getOilNameList();
      })

    },

    // 添加youjia1
    insertOilPresePrices() {
      this.$refs["priForm"].validate(valid => {
        if (valid) {
          this.dialogFormPricesAdd = false
          if (this.oilPresetPrices.presetId) {
            updateOilPresePricesApi(this.oilPresetPrices).then(response => {
              var list = response.data
              this.getOilNameList();
              this.getAllOilList();
              this.getOilPresetListin();
            });
          } else {
            insertOilPresePricesApi(this.oilPresetPrices).then(response => {
              var list = response.data
              this.getOilNameList();
              this.getAllOilList();
              this.getOilPresetListin();
            });
          }

        }
      });
    },

    // 更改状态
    deleteRow(data1, data2) {
      this.$confirm('是否停止本条数据，停止后无法恢复!', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
      }).then(() => {
        stopJobApi(data2).then(response => {
          this.$modal.msgSuccess("停止成功");
          this.getOilPresetListin();

        });
      }).catch(() => {});
    },
    // 更改状态
    deleteOilPresePrices(data) {
      this.$confirm('是否删除本条数据，删除后无法恢复!', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
      }).then(() => {
        deleteOilPresePricesApi(data.presetId).then(response => {
          this.$modal.msgSuccess("删除成功");
          this.getOilPresetListin();

        });
      }).catch(() => {});
    },

    // 新增油价预设
    oilTypeClickByPrice() {
      var count = this.oilPresetPrices.numberId;
      this.selectOilTypeByPrice.forEach((oil) => {
        if (oil.numberId == parseInt(count)) {
          this.oilPresetPrices.currentPetrolPrices = oil.oilPrice;
          this.oilPresetPrices.currentGbPrice = oil.gbPrice;
          this.oilPresetPrices.numberId = oil.numberId;
          this.oilPresetPrices.oilType = oil.id;
          this.oilPresetPrices.unit = oil.unit;
        }
      });
    }
  },
}
</script>

<template>
  <div>
    <div class="card-change-1-search" style="margin-bottom: 20px">
      <div style="display: flex; justify-content: space-between;margin-bottom: 10px">
        <div style="display: flex;">
          <div style="background-color: #FF9655;height: 22px;width: 4px;margin-right: 10px"></div>
          <span>预设油价记录</span>
        </div>
        <div>
          <el-button type="primary" @click="addOilPresePrices()"

          >新增预设油价
          </el-button>
        </div>
      </div>

      <div class="table-box">
        <el-table
          :data="oilPresetPricesList"
          style="width: auto">
          <el-table-column
            type="index"
            label="序号"
            align="center"
            width="100">
          </el-table-column>
          <!--          prop="presetGbPrice"-->

          <el-table-column
            prop="oilNameT"
            align="center"
            label="预设油号"
          >
          </el-table-column>
          <el-table-column label="当前数据" style="width: 100%" align="center"
          >
            <el-table-column
              prop="currentPetrolPrices"
              align="center"
              label="油站价"
            >
            </el-table-column>
            <el-table-column
              prop="currentGbPrice"
              align="center"
              label="国标价"
            >
            </el-table-column>
          </el-table-column>
          <el-table-column label="预设新数据" style="width: 100%" align="center"
          >
            <el-table-column
              prop="presetOilPrices"
              align="center"
              label="挂牌价"
            >
            </el-table-column>
            <el-table-column
              prop="presetGbPrice"
              align="center"
              label="国标价"
            >
            </el-table-column>
          </el-table-column>
          <el-table-column
            prop="effectiveTime"
            align="center"
            label="预设活动开始时间"
          >
          </el-table-column>

          <el-table-column label="状态" align="center">
            <template slot-scope="scope">
              <div style="color: #009946" v-if="scope.row.state == 'occur'">已生效</div>
              <div style="color: #00CAFF" v-else-if="scope.row.state == 'wait'">等待中</div>
              <div style="color: #F44522" v-else>已失效</div>
            </template>
          </el-table-column>
          <el-table-column
            prop="realName"
            align="center"
            label="创建人"
          >
          </el-table-column>
          <el-table-column
            prop="createTime"
            align="center"
            label="创建时间"
          >
          </el-table-column>
          <el-table-column
            fixed="right"
            align="center"
            label="操作"
            width="120">
            <template slot-scope="scope">
              <el-button v-if="scope.row.state == 'wait'"
                         @click.native.prevent="editRow(scope.row)"
                         type="text"
                         size="small">
                修改
              </el-button>
              <el-button v-if="scope.row.state == 'wait'"
                         @click.native.prevent="deleteRow(scope.$index, scope.row)"
                         type="text"
                         size="small">
                停止
              </el-button>
              <el-button v-if="scope.row.state == 'lose'"
                         @click.native.prevent="deleteOilPresePrices(scope.row)"
                         type="text"
                         size="small">
                删除
              </el-button>

            </template>
          </el-table-column>

        </el-table>
        <pagination
          v-show="total>0"
          :total="total"
          :page.sync="queryParams.pageNo"
          :limit.sync="queryParams.pageSize"
          @pagination="inittt"
        />

      </div>

    </div>
    <el-dialog title="新增/修改预设油价" :visible.sync="dialogFormPricesAdd" width="30%" :close-on-click-modal="false">
      <el-form ref="priForm" :model="oilPresetPrices" label-width="140px" :rules="oilPresetPricesRules">
        <el-form-item label="预设油品油号" prop="numberId">
          <el-select v-model="oilPresetPrices.numberId" placeholder="请选择油品名称" style="width: 100%"
                     @change="oilTypeClickByPrice()">
            <el-option
              v-for="option in selectOilTypeByPrice"
              :key="option.numberId"
              :label="option.oilType +' '+option.oilName"
              :value="option.numberId"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="当前油品挂牌价">
          <el-input v-model="oilPresetPrices.currentPetrolPrices " readonly disabled>
            <template slot="append">元{{ oilPresetPrices.unit ? "/" + oilPresetPrices.unit : oilPresetPrices.unit }}
            </template>
          </el-input>
        </el-form-item>
        <el-form-item label="预设油站挂牌价" prop="presetOilPrices">
          <el-input v-model="oilPresetPrices.presetOilPrices" pattern="^\d+(\.\d+)?$">
            <template slot="append">元{{ oilPresetPrices.unit ? "/" + oilPresetPrices.unit : oilPresetPrices.unit }}
            </template>
          </el-input>
        </el-form-item>
        <el-form-item label="当前油品国标价">
          <el-input v-model="oilPresetPrices.currentGbPrice" readonly disabled>
            <template slot="append">元{{ oilPresetPrices.unit ? "/" + oilPresetPrices.unit : oilPresetPrices.unit }}
            </template>
          </el-input>
        </el-form-item>
        <el-form-item label="预设油品国标价" prop="presetGbPrice">
          <el-input v-model="oilPresetPrices.presetGbPrice" pattern="^\d+(\.\d+)?$">
            <template slot="append">元{{ oilPresetPrices.unit ? "/" + oilPresetPrices.unit : oilPresetPrices.unit }}
            </template>
          </el-input>
        </el-form-item>
        <el-form-item label="预设活动开始时间" prop="effectiveTime">
          <el-date-picker
            v-model="oilPresetPrices.effectiveTime"
            type="datetime"
            placeholder="选择日期时间"
            style="width: 100%"
            :default-value="defaultDateTime"
            :picker-options="pickerOptions"
            value-format="yyyy-MM-dd HH:mm:ss">
          </el-date-picker>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormPricesAdd = false">取 消</el-button>
        <el-button type="primary" @click="insertOilPresePrices()">确 定</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<style scoped lang="scss">

</style>
