<template>
  <main class="m-16">
    <div class="wrap bg_white">
      <div class="p-16">
        <el-row class="top-box">
          <el-col :span="4">
            <el-button type="primary" class="m-r-16" size="small" @click="addAgv">
              <i class="el-icon-circle-plus" style="margin-right:5px; font-size:14px;"></i>新增</el-button>
            <el-button type="primary" plain size="small" @click="exportHandle"><i class="Files"></i>导出</el-button>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form ref="form" :model="filter" label-width="80px" label-position="left" class="m-t-20">
              <el-row :gutter="10">
                <el-col :span="4">
                  <el-form-item label="AGV类型" prop="">
                    <el-select v-model="filter.type" placeholder="请选择AGV类型" @change="changeType">
                      <el-option label="全部" value="-1">全部</el-option>
                      <el-option v-for="(item, index) in types" :key="index" :label="item.name" :value="item.id"></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="4">
                  <el-form-item label="AGV状态" prop="">
                    <el-select v-model="filter.status" placeholder="请选择AGV状态" @change="changeAGVStatus">
                      <el-option label="全部" value="-1">全部</el-option>
                      <el-option v-for="(item, index) in statusData" :key="index" :label="item.name" :value="item.id"></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="4">
                  <el-form-item label="AGV编码" prop="">
                    <el-input v-model="filter.agv_code"  v-on:keyup.enter="changeCode" clearable @clear="clearInput('agv_code')" placeholder="请输入AGV编码"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="4">
                  <el-form-item label="AGV名称" prop="">
                    <el-input v-model="filter.agv_title" v-on:keyup.enter="changeName" clearable @clear="clearInput('agv_title')" placeholder="请输入AGV名称"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="4">
                  <el-checkbox v-model="is_status" @change="changeCheckbox" label="仅显示启用的AGV"></el-checkbox>
                </el-col>
                <el-col :span="4">
                  <el-button type="primary" size="small" class="m-r-16" plain @click="resetData()">重置</el-button>
                  <el-button type="primary" size="small" @click="searchClick">搜索</el-button>
                </el-col>
              </el-row>
            </el-form>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-table :data="tableData" style="width: auto;" border :header-cell-style="header_style">
              <el-table-column prop="agv_title" label="AGV名称" width="200" align="center" />
              <el-table-column prop="agv_code" label="AGV编码" width="120" align="center" />
              <el-table-column prop="type_name" label="AGV类型" width="310" align="center" />
              <el-table-column prop="status" label="AGV状态" width="80" align="center">
                <template #default="scope">
                  <span class="isGreen" v-if="scope.row.status == '0'">空闲</span>
                  <span class="isYellow" v-else-if="scope.row.status == '1'">任务中</span>
                  <span class="isRed" v-else>充电中</span>
                </template>
              </el-table-column>
              <el-table-column prop="address_title" label="当前所在位置" width="200" align="center" />
              <el-table-column prop="cart_name" label="当前承载料车" width="240" align="center" />
              <el-table-column prop="task_code" label="当前任务" width="240" align="center" />
              <el-table-column prop="is_status" label="是否启用" width="80" align="center">
                <template #default="scope">
                  <el-switch v-model="scope.row.is_status" @change="changeStatus($event, scope.row.id)" :active-value="0" :inactive-value="1" active-color="#13ce66" inactive-color="#EDEFF4" />
                </template>
              </el-table-column>
              <el-table-column prop="" label="操作" align="center">
                <template #default="scope">
                  <span class="isBlue Cursor m-r-16" @click="editClick(scope.row.id)">编辑</span>
                  <span class="Cursor" @click="deleteClick(scope.row)">删除</span>
                </template>
              </el-table-column>
            </el-table>
            <el-pagination
              class="pagination m-t-16"
              :current-page="filter.page"
              :page-sizes="[10, 20, 30, 40]"
              :page-size="filter.size"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total"
              @size-change="changePageSize"
              @current-change="changePage"
            >
            </el-pagination>
          </el-col>
        </el-row>
      </div>
    </div>
    <!--新增弹窗-->
    <el-dialog
      class="addDialog"
      v-model="dialogAdd"
      :title="dialogTitle"
      width="348px"
      :before-close="handleClose"
    >
      <el-form :model="addForm" label-width="80px" label-position="left">
        <el-form-item label="AGV编码">
          <el-input v-model="addForm.agv_code" placeholder="新增后自动生成" disabled></el-input>
        </el-form-item>
        <el-form-item label="AGV名称">
          <el-input v-model="addForm.agv_title" placeholder="请输入AGV名称"></el-input>
        </el-form-item>
        <el-form-item label="AGV类型">
          <el-select v-model="addForm.type" placeholder="请选择AGV状态">
            <el-option v-for="(item, index) in types" :key="index" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button class="m-r-16" size="small" @click="handleClose">取消</el-button>
          <el-button type="primary" size="small" @click="comfirm">确认</el-button>
        </span>
      </template>
    </el-dialog>
  </main>
</template>

<script>
import { exportExcel } from '/src/utils/exportExcel.js'
import { ElMessageBox } from 'element-plus'
import axios from 'axios'
export default {
  name: '',
  data() {
    return {
      dialogAdd: false,
      dialogTitle: '添加AGV',
      header_style: {
				'background-color': '#F5F7FA',
				'color': '#606266',
				'fontSize': '14px',
				'fontWeight': '600',
				'textAlign':'center',
			},
      is_status: true,
      filter: {
        type: '-1',
        status: '-1',
        agv_code: '',
        agv_title: '',
        is_status: '0',
        size: 10,
        page: 1,
        export: 0
      },
      total: 0,
      currentPage: 1,
      types: [
        {
          id: '0',
          name: '潜伏式AGV'
        }
      ],
      statusData: [
        {
          id: '0',
          name: '空闲'
        },
        {
          id: '1',
          name: '任务中'
        },
        {
          id: '2',
          name: '充电中'
        }
      ],
      tableData: [],
      addForm: {
        type: '',
        agv_code: '',
        agv_title: '',
        dotype: ''
      }
    }
  },
  created() {
    this.filter.is_status = this.is_status == true ? '0' : '-1'
  },
  activated() {
    this.getDataList()
  },
  methods: {
    // 列表数据
    getDataList() {
      this.$http.post('Agv/vehicleList', this.filter).then(res => {
        if (res.status == 200) {
          this.tableData = res.data.results
          this.total = res.data.count_limit
        }
      })
    },
    clearInput(key) {  //清空输入框
      this.filter[`${key}`] = ''
      this.getDataList()
    },
    // 搜索
    searchClick() {
      this.getDataList()
    },
    // 重置搜索条件
    resetData() {
      this.filter = {
        type: '-1',
        status: '-1',
        agv_code: '',
        agv_title: '',
        is_status: '0',
        size: 10,
        page: 1
      }
      this.getDataList()
    },
    clearData() {
      this.addForm = {
        type: '',
        agv_code: '',
        agv_title: '',
        dotype: ''
      }
    },
    // 选择料车类型
    changeType(val) {
      this.filter.type = val
      this.getDataList()
    },
    // 选择agv状态
    changeAGVStatus(val) {
      this.filter.status = val
      this.getDataList()
    },
    // 搜索编码
    changeCode() {
      this.getDataList()
    },
    // 搜索名称
    changeName() {
      this.getDataList()
    },
    // 显示启用料车
    changeCheckbox(val) {
      this.filter.is_status = val == true ? '0' : '-1'
      this.getDataList()
    },
    // 每页条数
    changePageSize(val) {
      this.filter.size = val
      this.getDataList()
    },
    // 翻页
    changePage(val) {
      this.filter.page = val
      this.getDataList()
    },
    // 添加
    addAgv() {
      this.dialogAdd = true
      this.dialogTitle = '添加AGV'
      this.addForm.dotype = 'add'
      //生成编码
      this.$http.post('Agv/addCode', { type: 'AGV' }).then(res => {
        if (res.status == 200) {
          this.addForm.agv_code = res.data.str_num
        }
      })
    },
    // 确认
    comfirm() {
      this.$http.post('Agv/editVehicle', this.addForm).then(res => {
        if (res.status == 200) {
          this.$message({
            type: 'success',
            message: res.message
          })
          this.dialogAdd = false
          this.clearData()
          this.getDataList()
        } else {
          this.$message({
            type: 'error',
            message: res.message
          })
        }
      })
    },
    // 修改禁用/启用状态
    changeStatus(status, id) {
      this.$http.post('Agv/editStatus', {type: 3, id: id, is_status: status}).then(res => {
        if (res.status == 200) {
          this.getDataList()
          this.$message({
            type: 'success',
            message: res.message
          })
        } else {
          this.$message({
            type: 'error',
            message: res.message
          })
        }
      })
    },
    // 编辑
    editClick(id) {
      this.dialogAdd = true
      this.dialogTitle = '编辑AGV'
      this.$http.post('Agv/detailInfo', {type: 3, id: id}).then(res => {
        if (res.status == 200) {
          let data = res.data.result
          this.addForm = data
          this.addForm = {
            dotype : 'edit',
            id: data.id,
            agv_code: data.agv_code,
            agv_title: data.agv_title,
            type: data.type + ''  //转为字符类型
          }
        }
      })
    },
    handleClose() {
      this.dialogAdd = false
      this.clearData()
    },
    //删除
    deleteClick(row) {
      ElMessageBox.confirm('您确定要直接删除所选AGV吗？该操作不可恢复，请谨慎操作！', '提示', {
        type: 'warning',
        confirmButtonText: '确定删除',
        cancelButtonText: '我点错了',
        beforeClose: (action, instance, done) => {
          if (action === 'confirm') {
            this.$http.post('Agv/doDel', {id: row.id, type: 3}).then(res => {
              if (res.status == 200) {
                this.$message({
                  type: 'success',
                  message: res.message
                })
                this.getDataList()
              } else {
                this.$message({
                  type: 'error',
                  message: res.message
                })
              }
            })
          }
          done()
        }
      })
    },
    //导出
    exportHandle() {
      this.filter.export = 1
      let url = '/Agv/vehicleList'
      exportExcel(url, this.filter)
    }
  }
}
</script>

<style lang="scss" scoped>
@import '@/views/agv/agv.scss';
</style>