<template>
  <div class="app-container">
    <!--工具栏-->
    <div class="head-container">
      <!--如果想在工具栏加入更多按钮，可以使用插槽方式， slot = 'left' or 'right'-->
      <div>
        <el-form ref="form" :model="form" size="small" label-width="80px">
          <!-- 搜索 -->
          <el-form-item label="路由方案:">
            <el-select
              v-model="route_plan_code"
              clearable
              size="small"
              placeholder="请选择"
              class="filter-item"
              style="width: 190px"
            >
              <el-option v-for="item in taskType" :key="item.plan_code" :label="item.plan_name" :value="item.plan_code" />
            </el-select>
          </el-form-item>
          <el-form-item label="起点设备:">
            <el-select
              v-model="device_code"
              filterable
              clearable
              size="small"
              placeholder="请选择"
              class="filter-item"
              style="width: 190px"
            >
              <el-option v-for="item in deviceList" :key="item.device_code" :label="item.device_code" :value="item.device_code" />
            </el-select>
          </el-form-item>
          <el-form-item label="终点设备:">
            <el-select
              v-model="next_device_code"
              filterable
              clearable
              size="small"
              placeholder="请选择"
              class="filter-item"
              style="width: 190px"
            >
              <el-option
                v-for="item in deviceList"
                :key="item.device_code"
                :label="item.device_code"
                :value="item.device_code"
              />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">搜索</el-button>
          </el-form-item>
        </el-form>

        <div style="color: #67C23A;font-size: 40px">{{ path }}</div>
      </div>
    </div>
  </div>
</template>

<script>
import deviceCrud from '@/views/acs/device/device'
import crudRoutePlan from '@/views/acs/route/routePlan/routePlan'
export default {
  name: 'RouteChart',
  data() {
    return {
      taskType: [],
      deviceList: [],
      path: null,
      route_plan_code: null,
      device_code: null,
      next_device_code: null
    }
  },
  created() {
    deviceCrud.selectDeviceList().then(data => {
      this.deviceList = data
    })
    crudRoutePlan.selectList().then(res => {
      this.taskType = res
    })
  },
  methods: {
    onSubmit() {
      this.path = null
      crudRoutePlan.getRoute(this.device_code, this.next_device_code, this.route_plan_code).then(res => {
        if (res[0] === undefined) {
          this.path = '该路由不通'
        }
        this.path = res[0].path
      })
    }
  }
}
</script>

<style scoped>

</style>
