<template>
  <div>
    <!--查询-->
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item label="车辆VIN">
        <el-input v-model="selectInformation.carVin" placeholder="请输入车辆VIN"></el-input>
      </el-form-item>
      <el-form-item label="车辆类型">
        <el-input v-model="selectInformation.carType" placeholder="请输入车辆类型"></el-input>
      </el-form-item>
      <el-form-item label="围栏组编码">
        <el-input v-model="selectInformation.groupCode" placeholder="请输入围栏组编码"></el-input>
      </el-form-item>
      <el-form-item label="车辆状态">
        <el-select

          idv-model="selectInformation.state" placeholder="请选择车辆状态">
          <el-option label="在线" value="1"></el-option>
          <el-option label="离线" value="0"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="车辆电机厂商">
        <el-input v-model="selectInformation.carMotorManufacturer" placeholder="请输入车辆电机厂商"></el-input>
      </el-form-item>
      <el-form-item label="车辆电池厂商">
        <el-input v-model="selectInformation.carBatteryManufacturer" placeholder="请输入车辆电池厂商"></el-input>
      </el-form-item>

      <el-form-item>
        <el-button type="success" @click="onSubmit" plain>查询</el-button>
        <el-button type="warning"  @click="chongzhi" plain>重置</el-button>
      </el-form-item>
    </el-form>
    <div style="height: 40px;width: 700px">
      <el-button type="danger" plain @click="handleAdd">添加</el-button>
    </div>
    <!--列表-->
    <template>
      <el-table
        :data="tableData"
        style="width: 100%">
        <el-table-column
          label="自增主键"
          prop="id">
        </el-table-column>
        <el-table-column
          label="车辆VIn马"
          prop="carVin">
        </el-table-column>
        <el-table-column
          label="车辆品牌"
          prop="carBrand">
        </el-table-column>
        <el-table-column
          label="车辆类型外键"
          prop="typeName">
        </el-table-column>
        <el-table-column
          label="是否绑定围栏">
          <template slot-scope="scope">
            <dict-tag :options="dict.type.sys_car_group" :value="scope.row.groupId"/>
          </template>
        </el-table-column>
        <el-table-column
          label="车辆电机厂商"
          prop="carMotorManufacturer">
        </el-table-column>
        <el-table-column
          label="电机型号"
          prop="carMotorModel">
        </el-table-column>
        <el-table-column
          label="车辆电池厂商"
          prop="carBatteryManufacturer">
        </el-table-column>
        <el-table-column
          label="电池型号"
          prop="carBatteryModel">
        </el-table-column>
        <el-table-column
          label="围栏组编码"
          prop="groupCode">
        </el-table-column>
        <el-table-column
          label="启用状态"
          prop="state">
        </el-table-column>
        <el-table-column
          label="车辆策略"
          prop="strategyId">
        </el-table-column>

        <el-table-column
          align="right">
          <template slot-scope="scope">
            <el-button type="text"  @click="handleEdit(scope.row)">修改</el-button>
            <el-button type="text"  @click="handleDelete(scope.row)">删除</el-button>
            <el-button type="text" @click="configurationStrategy(scope.row)">配置策略</el-button>
            <el-button type="primary" class="el-icon-connection" @click="boundFenceGroup(scope.row)" v-show="scope.row.groupId==0">绑定围栏组</el-button>
            <el-button type="success" class="el-icon-link" @click="lookboundGroup(scope.row)" v-show="scope.row.groupId==1">查看围栏组</el-button>
          </template>
        </el-table-column>
      </el-table>
    </template>
    <el-dialog
      title="请为你的汽车配置预警策略"
      :visible.sync="dialogVisible"
      width="30%">
          <span>
                      <el-select v-model="strategyId" placeholder="请选择策略">
                    <el-option
                      v-for="item in strategyList"
                      :key="item.id"
                      :label="item.strategyName"
                      :value="item.id">
                    </el-option>
                  </el-select>

          </span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="updCarStrategyId">确 定</el-button>
      </span>
    </el-dialog>

    <el-drawer
      title="绑定围栏组"
      :visible.sync="drawer"
      :direction="direction"
      :before-close="handleClose">

      <el-table
        ref="multipleTable"
        :data="groupList"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange">
        <el-table-column
          type="selection"
          width="55">
        </el-table-column>
        <el-table-column
          label="id"
          prop="id"
          width="120">
        </el-table-column>
        <el-table-column
          prop="groupName"
          label="围栏组名称"
          width="120">
        </el-table-column>
        <el-table-column
          prop="priority"
          label="优先级"
          show-overflow-tooltip>
        </el-table-column>
      </el-table>

      <el-button @click="drawer = false">取 消</el-button>
      <el-button type="primary" @click="dobound()">确 定</el-button>


    </el-drawer>

    <el-dialog
      title="添加"
      :visible.sync="dialogVisibleAdd"
      width="30%"
      :before-close="handleClose">
      <div style="margin: 20px;"></div>
      <el-form label-width="80px" :model="insertForm">
        <el-form-item label="车辆VIn马">
          <el-input v-model="insertForm.carVin"></el-input>
        </el-form-item>
        <el-form-item label="车辆品牌">
          <el-input v-model="insertForm.carBrand"></el-input>
        </el-form-item>
        <el-form-item label="车辆类型外键">
          <el-input v-model="insertForm.typeId"></el-input>
        </el-form-item>
        <el-form-item label="车辆电机厂商">
          <el-input v-model="insertForm.carMotorManufacturer"></el-input>
        </el-form-item>
        <el-form-item label="电机型号">
          <el-input v-model="insertForm.carMotorModel"></el-input>
        </el-form-item>
        <el-form-item label="车辆电池厂商">
          <el-input v-model="insertForm.carBatteryManufacturer"></el-input>
        </el-form-item>
        <el-form-item label="电池型号">
          <el-input v-model="insertForm.carBatteryModel"></el-input>
        </el-form-item>
        <el-form-item label="围栏组编码">
          <el-input v-model="insertForm.groupCode"></el-input>
        </el-form-item>
        <el-form-item label="启用状态">
          <el-input v-model="insertForm.state"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
    <el-button type="primary" @click=doAdd()>确 定</el-button>
  </span>
    </el-dialog>
    <!--    修改-->
    <el-dialog
      title="修改"
      :visible.sync="dialogVisibleUpd"
      width="30%"
      :before-close="handleClose">
      <div style="margin: 20px;"></div>
      <el-form label-width="80px" :model="updateForm">
        <el-form-item label="车辆VIn马">
          <el-input v-model="updateForm.carVin"></el-input>
        </el-form-item>
        <el-form-item label="车辆品牌">
          <el-input v-model="updateForm.carBrand"></el-input>
        </el-form-item>
        <el-form-item label="车辆类型外键">
          <el-input v-model="updateForm.typeId"></el-input>
        </el-form-item>
        <el-form-item label="车辆电机厂商">
          <el-input v-model="updateForm.carMotorManufacturer"></el-input>
        </el-form-item>
        <el-form-item label="电机型号">
          <el-input v-model="updateForm.carMotorModel"></el-input>
        </el-form-item>
        <el-form-item label="车辆电池厂商">
          <el-input v-model="updateForm.carBatteryManufacturer"></el-input>
        </el-form-item>
        <el-form-item label="电池型号">
          <el-input v-model="updateForm.carBatteryModel"></el-input>
        </el-form-item>
        <el-form-item label="围栏组编码">
          <el-input v-model="updateForm.groupCode"></el-input>
        </el-form-item>
        <el-form-item label="启用状态">
          <el-input v-model="updateForm.state"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
    <el-button type="primary" @click=doUpd()>修 改</el-button>
  </span>
    </el-dialog>


  </div>


</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）,
//例如：import 《组件名称》 from '《组件路径》,
import {
  deleteInformationById, findInformationByid,
  findInformationList,
  insertInformation, updateInformationById,
  updCarStrategyId
} from '@/api/system/manage/carInformation'
import { findStrategyListByCarTypeId, updateStrategy } from '@/api/warning/strategy'
import { boundGroupAndCar, getGroupListResp, selectAllGroup } from '@/api/fence/group'

export default {
  dicts: ['sys_car_group'],
  //import引入的组件需要注入到对象中才能使用"
  components: {},
  props: {},
  data() {
    //这里存放数据"
    return {
      GroupAndCarBound:{
        vin:null,
        //多选框选中内容
        groupListResp: [],
      },

      //围栏组列表
      groupList:[],
      //抽屉属性
      drawer:false,
      //抽屉呼出方向   从右到左
      direction:'rtl',

      strategyId:null,
      carId:null,
      dialogVisible: false,
      tableData: [],

      // 查询参数
      selectInformation: {
        pageNum: 1,
        pageSize: 10,
        carVin:'',
        carType:'',
        groupCode:'',
        state:'1',
        carMotorManufacturer:'',
        carBatteryManufacturer:''
      },
      zt:{
        status: ""
      },
      strategyList:[],
      queryParams:{},

      insertForm: {},
      updateForm: {},
      dialogVisibleAdd: false,
      dialogVisibleUpd: false,
    };
  },
  //计算属性 类似于data概念",
  computed: {},
  //监控data中的数据变化",
  watch: {},
  //方法集合",
  methods: {

    lookboundGroup(row){
      selectAllGroup().then(res=>{
        this.groupList = res.data;
      })
      this.drawer=true;

      getGroupListResp(row).then(res=>{

        let rows = res.data;
        console.log(rows)
        if (rows!=null&&rows!=undefined&&rows!=''){
          rows.forEach(row => {
            console.log(this.groupList[row.id-1]);
            console.log(row);
            this.$refs.multipleTable.toggleRowSelection(this.groupList[row.id-1]);
          });
        }


      })
    },
    dobound(){

      boundGroupAndCar(this.GroupAndCarBound).then(res=>{

        this.$modal.msgSuccess("绑定成功");
        this.drawer=false;
      })


    },
    handleSelectionChange(val) {
      this.GroupAndCarBound.groupListResp = val;
    },


    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done();
        })
        .catch(_ => {});
    },

    boundFenceGroup(row){
      this.GroupAndCarBound.vin=row.carVin;
      selectAllGroup().then(res=>{

        this.groupList = res.data;

        console.log(this.groupList);
        this.drawer =true;
      })

    },
    updCarStrategyId(){
      updCarStrategyId(this.carId,this.strategyId).then((res)=>{
        this.$modal.msgSuccess("修改成功");
        this.dialogVisible = false;
        this.getList();
      })
    },
    /** 给车辆配置策略*/
    configurationStrategy(row){
      this.dialogVisible = true
      this.carId=row.id
      this.getStrategyList(row.typeId);
    },

    getStrategyList(typeId) {
      this.loading = true;
      findStrategyListByCarTypeId(typeId).then(response => {
        this.strategyList = response.data.rows;
        this.total = response.data.total;
        this.loading = false;
        console.log(response)
      });
    },

    /** 列表 */
    getList() {
      findInformationList(this.selectInformation).then(res => {
          this.tableData = res.data;
        }
      );
    },
    // 状态修改
    handleStatusChange(row) {
      let text = row.state === "0" ? "上线" : "下线";
      this.$modal.confirm('确认要"' + text + '""' + row.carBrand + '"车辆吗？').then(function () {
        return gaiZhuangTai(row.id, row.state);
      }).then(() => {
        this.$modal.msgSuccess(text + "成功");
      }).catch(function () {
        row.state = row.state === "0" ? "1" : "0";
      });
    },
    // 提交
    onSubmit(){
      this.getList(this.selectInformation);
    },
    // 重置
    chongzhi(){
      this.selectInformation={
        carVin:'',
        carType:'',
        groupCode:'',
        state:'',
        carMotorManufacturer:'',
        carBatteryManufacturer:''
      }
      this.getList();
    },
    // 修改
    handleEdit(row){
      this.dialogVisibleUpd = true
      // 回显
      findInformationByid(row.id).then(res=>{
        this.updateForm = res.data;
      })
    },
    /** 删除 */
    handleDelete(row){
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteInformationById(row.id).then(res=>{
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
          this.getList();
        })
      })
    },

    //添加
    handleAdd(){
      this.dialogVisibleAdd = true
    },
    doAdd(){
      insertInformation(this.insertForm).then(res=>{
        alert(res.msg)
        if(res.code == 200){
          alert("添加成功")
          this.getList();
        }

      })
    },
    doUpd(){
      updateInformationById(this.updateForm).then(res=>{
        alert(res.msg)
        if(res.code == 200){
          alert("修改成功")
          this.getList();
        }

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

</style>
