<script>
import {
  getAllOilListApi,
  getOilNameListApi,
  getOilPresetList,
  insertOilPresePricesApi,
  stopJobApi
} 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: {
        presetOilPrices: []
      }
    }
  },
  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.oilPresetPrices = {}
      // this.selectOilTypeByPrice = this.oilNumberList;
      // 油价预设查询列表
      this.getOilNameList();
    },

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

    // 更改状态
    deleteRow(data1, data2) {
      stopJobApi(data2).then(response => {
        this.$modal.msgSuccess("停止成功");
        this.getOilPresetListin();

      });

    },

    // 新增油价预设
    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 = "dialogFormPricesAdd = true,
        addOilPresePrices()"
        v-hasPermi="['oilConfig:oilPrice:index:addp']"
        >新增预设油价</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-->
        <!--            prop="state"-->
        <!--            label="处理状态"-->
        <!--            >-->

        <el-table-column label="状态" align="center">
          <template slot-scope="scope">
            <!--                <dict-tag :options="dict.type.jobState" :value="scope.row.state"/>-->
            <el-tag v-if="scope.row.state == 'occur'" type="success">已生效</el-tag>
            <el-tag v-else-if="scope.row.state == 'wait'">等待中</el-tag>
            <el-tag v-else type="info">已失效</el-tag>
          </template>
        </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="deleteRow(scope.$index, scope.row)"
                       type="text"
                       size="small">
              停止
            </el-button>
            <span v-else> -- </span>
          </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="500px" :close-on-click-modal="false">
    <el-form ref="priForm" :model="oilPresetPrices" label-width="100px" :rules="oilPresetPricesRules">
      <el-form-item label="预设油号" prop="numberId"  label-width="120px">
        <el-select v-model="oilPresetPrices.numberId" placeholder="请选择油号" @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="当前油品售出价" label-width="120px">
        <el-input v-model="oilPresetPrices.currentPetrolPrices " style="width: 217px" readonly disabled>
          <template slot="append">元{{oilPresetPrices.unit?"/"+oilPresetPrices.unit:oilPresetPrices.unit}}</template>
        </el-input>
      </el-form-item>
      <el-form-item label="预设油站售出价" prop="presetOilPrices" label-width="120px">
        <el-input v-model="oilPresetPrices.presetOilPrices" pattern="^\d+(\.\d+)?$" style="width: 217px">
          <template slot="append">元{{oilPresetPrices.unit?"/"+oilPresetPrices.unit:oilPresetPrices.unit}}</template>
        </el-input>
      </el-form-item>
      <el-form-item label="当前国标价" label-width="120px">
        <el-input v-model="oilPresetPrices.currentGbPrice"  style="width: 217px" readonly disabled>
          <template slot="append">元{{oilPresetPrices.unit?"/"+oilPresetPrices.unit:oilPresetPrices.unit}}</template>
        </el-input>
      </el-form-item>
      <el-form-item label="预设国标价" prop="presetGbPrice" label-width="120px">
        <el-input v-model="oilPresetPrices.presetGbPrice" pattern="^\d+(\.\d+)?$" style="width: 217px">
          <template slot="append">元{{oilPresetPrices.unit?"/"+oilPresetPrices.unit:oilPresetPrices.unit}}</template>
        </el-input>
      </el-form-item>
      <el-form-item label="活动时间" prop="effectiveTime"  label-width="120px">
        <el-date-picker
          v-model="oilPresetPrices.effectiveTime"
          type="datetime"
          placeholder="选择日期时间"
          style="width: 217px"
          :default-value="defaultDateTime"
          :picker-options="pickerOptions"
          value-format="yyyy-MM-dd HH:mm:ss">
        </el-date-picker>
      </el-form-item>
      <!--        <div class="hui-seiz">如生效时间与当前时间间隔小于1分钟,当前油价将立即生效</div>-->
    </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>
