<template>
  <div>

    <el-form :model="warnStrategyReq" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
      <el-form-item label="车辆类型" prop="carTypeId">
        <el-select v-model="warnStrategyReq.carTypeId" placeholder="请选择车辆类型">
<!--          <el-option-->
<!--            v-for="item in carTypeList"-->
<!--            :key="item.id"-->
<!--            :label="item.typeName"-->
<!--            :value="item.id">-->
<!--          </el-option>-->
          <el-option
            v-for="(item, index) in carTypeList"
            :key="`${item.id}-${index}`"
            :label="item.typeName"
            :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>


      <el-form-item label="报文模版" prop="templateId">
        <el-select v-model="warnStrategyReq.templateId" placeholder="请选择报文模版">
          <el-option
            v-for="(item, index) in templateList"
            :key="`${item.templateId}-${index}`"
            :label="item.templateName"
            :value="item.templateId">
          </el-option>
        </el-select>

      </el-form-item>

      <el-form-item label="策略名称" prop="strategyName">
        <el-input
          v-model="warnStrategyReq.strategyName"
          placeholder="请输入策略名称"
        />
      </el-form-item>

      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="getList">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>



    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
          v-hasPermi="['platform:strategy:add']"
        >新增</el-button>
      </el-col>
    </el-row>

    <el-table v-loading="loading" :data="templateList">
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="策略Id" align="center" prop="id" />
      <el-table-column label="车辆类型" align="center" prop="typeName" />
      <el-table-column label="策略名称" align="center" prop="strategyName" />
      <el-table-column label="报文模版" align="center" prop="templateName" />
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="showRule(scope.row.id)"
            v-hasPermi="['platform:strategy:remove']"
          >查看规则</el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="addRule(scope.row)"
            v-hasPermi="['platform:strategy:remove']"
          >配置规则</el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleUpdate(scope.row)"
            v-hasPermi="['platform:strategy:edit']"
          >修改策略</el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="handleDelete(scope.row.id)"
            v-hasPermi="['platform:strategy:remove']"
          >删除策略</el-button>
        </template>
      </el-table-column>
    </el-table>


    <!-- 查看规则抽屉 -->
    <el-drawer
      title="具体规则"
      :visible.sync="dialogTableVisible"
      direction="rtl"
      size="50%">
      <el-table :data="ruleList">
        <el-table-column property="ruleName" label="规则名称" width="150"></el-table-column>
        <el-table-column property="strategyName" label="策略名称" width="150"></el-table-column>
        <el-table-column property="messageField" label="报文数值" width="150"></el-table-column>
        <el-table-column property="slideTime" label="滑窗时间" width="150"></el-table-column>
        <el-table-column label="滑窗频率" align="center" prop="slideFrequency">
          <template slot-scope="scope">
            <span v-if="scope.row.slideFrequency===1">1分之1</span>
            <span v-if="scope.row.slideFrequency===2">2分之1</span>
            <span v-if="scope.row.slideFrequency===3">3分之1</span>
            <span v-if="scope.row.slideFrequency===4">4分之1</span>
            <span v-if="scope.row.slideFrequency===5">5分之1</span>
          </template>
        </el-table-column>
        <el-table-column property="growthRate" label="增长率" width="150"></el-table-column>
        <el-table-column property="volatilityRate" label="波动率" width="150"></el-table-column>
        <el-table-column property="decreaseRate" label="下降率" width="150"></el-table-column>
      </el-table>
    </el-drawer>

    <!-- 添加或修改预警策略对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="策略名称" prop="strategyName">
          <el-input v-model="form.strategyName" placeholder="请输入策略名称" />
        </el-form-item>

        <el-form-item label="车辆类型" prop="carTypeId">
          <el-select v-model="form.carTypeId" placeholder="请选择车辆类型" @change="changeCarType(form.carTypeId)">
            <el-option
              v-for="item in carTypeList"
              :key="item.id"
              :label="item.typeName"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="报文模版" prop="templateId">
          <el-input v-model="form.templateId" :disabled="disabled"/>
        </el-form-item>


        <el-form-item label="报文模版名称" prop="templateId" v-show="inShow">
          <el-input v-model="templateName" :disabled="disabled"/>
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>






    </el-dialog>


  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）,
//例如：import 《组件名称》 from '《组件路径》,
import {
  addWarnStrategy, deleteStrategy, selectById,
  selectListByStrategyId,
  selectWarnStrategyList,
  updWarnStrategy
} from '@/api/saas/saas'
import { selectCarTypeList, selectCarTypeResp } from '@/api/saas/saas'

export default {
    //import引入的组件需要注入到对象中才能使用"
    components: {},
    props: {},
    data() {
      //这里存放数据"

      return {
        // 遮罩层
        loading: true,
        // 显示搜索条件
        showSearch: true,

        //策略查询条件对象
        warnStrategyReq:{},
        carTypeList:[],
        templateList:[],
        form:{},
        dialogTableVisible:false,
        ruleList:[],
        // 弹出层标题
        title: "",
        // 是否显示弹出层
        open: false,
        // 表单参数
        warnStrategy: {},
        isDisabled:false,
        templateTypeList:[],
        labelPosition: 'right',
        rule:{},
        templateName:'',
        disabled:false,
        rules:{},
        inShow:true
      };
    },
    //计算属性 类似于data概念",
    computed: {},
    //监控data中的数据变化",
    watch: {},
    //方法集合",
    methods: {

      //删除策略
      handleDelete(id){
        this.$confirm('是否确认删除?', "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(function() {
          return deleteStrategy(id)
        }).then(() => {
          this.getList();
          this.msgSuccess("删除成功");
        }).catch(function() {
          this.msgError("删除失败");
        });
      },


      cancel(){
        this.open = false;
      },

      /** 查询预警策略列表 */
      getList() {
        this.loading = true;
          selectWarnStrategyList(this.warnStrategyReq).then(response => {
          this.templateList = response.data;
          this.loading = false;
        });
      },


      // 表单重置
      reset() {
        this.warnStrategyReq = {
          id: null,
          carTypeId: null,
          strategyName: null,
          templateId: null
        };
        this.resetForm("warnStrategyReq");
      },
      /** 重置按钮操作 */
      resetQuery() {
        this.resetForm("warnStrategyReq");
        this.handleQuery();
      },

      /**查询车辆类型列表*/
      selCarType(){
        selectCarTypeList().then(
          res=>{
            this.carTypeList=res.data
          }
        )
      },
      /**查询策略下具体规则*/
      showRule(id){
        selectListByStrategyId(id).then(
          res=>{
            this.dialogTableVisible=true
            this.ruleList=res.data
          }
        )
      },
      /** 新增按钮操作 */
      handleAdd() {
        this.reset();
        this.open = true;
        this.title = "添加预警策略";
      },
      /**根据车辆类型改变,报文模板改变*/
      changeCarType(carTypeId){
        selectCarTypeResp(carTypeId).then(
          res=>{
            this.form.templateId=res.data.templateId
            this.templateName=res.data.templateName
            this.disabled=true
          }
        )
      },


      /** 修改按钮操作 */
      handleUpdate(row) {
        selectById(row.id).then(response => {
          this.open = true;
          this.form = response.data;
          this.templateName=response.data.templateName
          this.title = "修改预警策略";
        });
      },
      /** 提交按钮 */
      submitForm() {
        this.$refs["form"].validate(valid => {
          if (valid) {
            if (this.form.id != null) {
              updWarnStrategy(this.form).then(response => {
                this.$modal.msgSuccess("修改成功");
                this.open = false;
                this.getList();
              });
            } else {
              addWarnStrategy(this.form).then(response => {
                this.$modal.msgSuccess("新增成功");
                this.open = false;
                this.getList();
              });
            }
          }
        });
      },
      /**跳转规则页面 */
      addRule(row){
        const id = row.id
        const templateId = row.templateId
        this.$router.push({
          path: 'warnRule',
          query: {id:id,templateId:templateId}
        })
      },

    },
    //生命周期 - 创建完成（可以访问当前this实例）",
    created() {
      this.getList()
      this.selCarType()
      // this.selTemplate()
    },
    //生命周期 - 挂载完成（可以访问DOM元素）",
    mounted() {
    },
    beforeCreate() {
    }, //生命周期 - 创建之前",
    beforeMount() {
    }, //生命周期 - 挂载之前",
    beforeUpdate() {
    }, //生命周期 - 更新之前",
    updated() {
    }, //生命周期 - 更新之后",
    beforeDestroy() {
    }, //生命周期 - 销毁之前",
    destroyed() {
    }, //生命周期 - 销毁完成",
    activated() {
    } //如果页面有keep-alive缓存功能，这个函数会触发",
  };
</script>
<style scoped>

</style>
