<template>
  <el-drawer
    :title="getTitle"
    :visible.sync="visible"
    :append-to-body="true"
    :direction="direction"
    class="allotTasks"
    :size="drawerWidth"
    :before-close="handleClose">
    <el-form v-if="addType==1||addType==2" :inline="true" ref="dialogForm" :model="searchForm"
             size="small"
             class="form">
      <el-form-item label="无人机类型">
        <el-select filterable clearable v-model="searchForm.type" size="small"
                   placeholder="请选择无人机类型">
          <el-option v-for="(value,key,index) in equipmentTypeList" :key="index" :label="value" :value="key"/>
        </el-select>
      </el-form-item>
      <el-form-item label="设备型号">
        <el-input
          clearable
          v-model="searchForm.model"
          placeholder="请输入设备型号"
          style="width: 150px"
        />
      </el-form-item>
      <el-form-item>
        <el-button
          :loading="tableLoading"
          @click="searchTable"
          icon="el-icon-search"
          type="primary"
        >搜索
        </el-button>
        <el-button
          @click="initSearchParam(),searchTable()"
          icon="el-icon-refresh-right"
          type="primary"
          style="background-color: #fff; border: 1px solid #ccc ; color: #666"
        >重置
        </el-button>
      </el-form-item>
    </el-form>
    <el-table stripe style="margin-top: 10px;margin-bottom: 15px" v-loading="tableLoading"
              ref="dialogAddTable" size="medium" border row-key="id"
              :max-height="tableHeight"
              @selection-change="handleMultipleChange"
              :data="dataList">
      <el-table-column :reserve-selection="true" type="selection" width="55"></el-table-column>
      <el-table-column :index="indexMethod" label="序号" type="index" width="80" align="center"/>
      <el-table-column v-if="addType==1||addType==2" min-width="120" show-overflow-tooltip prop="typeName" label="无人机类型"
                       align="center"/>
      <el-table-column v-if="addType==1||addType==2" min-width="100" show-overflow-tooltip prop="equipmentSn"
                       label="设备编号" align="center"/>
      <el-table-column v-if="addType==1||addType==2" min-width="100" show-overflow-tooltip prop="name" label="设备名称"
                       align="center"/>
      <el-table-column v-if="addType==1||addType==2" min-width="100" show-overflow-tooltip prop="brand" label="设备品牌"
                       align="center"/>
      <el-table-column v-if="addType==1||addType==2" min-width="100" show-overflow-tooltip prop="model" label="设备型号"
                       align="center"/>
      <el-table-column v-if="addType==3" width="150" show-overflow-tooltip prop="realname" label="姓名" align="center"/>
      <el-table-column v-if="addType==3" width="150" show-overflow-tooltip prop="username" label="用户名" align="center"/>
    </el-table>
    <div class="foot-page">
      <el-pagination
        @current-change="currentChange"
        background
        :current-page.sync="page"
        :page-size="pageSize"
        layout="total,prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </div>
    <div style="width: 100%;text-align: center;margin-top: 20px">
      <el-button icon="el-icon-document-add" type="primary" size="medium"
                 @click="submit">确定
      </el-button>
      <el-button icon="el-icon-back" size="medium" class="back"
                 @click="$emit('close')">返回
      </el-button>
    </div>
  </el-drawer>
</template>

<script>

  import inspectApi from '@/api/business/inspect'

  export default {
    name: "allotTasksAdd",
    data() {
      return {
        searchForm: {
          type: '',
          model: ''
        },
        typeList: [
          {id: 1, name: '多旋翼'},
          {id: 2, name: '固定翼'},
          {id: 3, name: '垂直起降'}
        ],
        page: 1,
        pageSize: parseInt((document.body.clientHeight - 250 - 43) / 43),
        total: 0,
        multipleSelection: [],
        dataList: [],
        tableLoading: false,
        drawerWidth: (document.body.clientWidth - 280) + 'px',
        direction: 'rtl',
        tableHeight: document.body.clientHeight - 250,
      }
    },
    computed: {
      getTitle() {
        if (this.addType == 1) {
          return '添加无人机设备'
        } else if (this.addType == 2) {
          return '添加挂载'
        } else if (this.addType == 3) {
          return '添加飞手'
        }
      }
    },
    mounted() {
      // this.getList()
    },
    watch: {
      dataTime() {
        this.searchForm = {
          type: '',
          model: ''
        }
        this.page = 1
        this.total = 0
        if (this.$refs.dialogAddTable) {
          this.$refs.dialogAddTable.clearSelection()
        }
        this.multipleSelection = []
        this.dataList = []
        this.$nextTick(function () {
          this.getList()
        })
      }
    },
    props: {
      visible: {
        type: Boolean,
        default() {
          return false;
        }
      },
      addType: {
        type: Number,
        default() {
          return -1;
        }
      },
      equipmentTypeList: {
        type: Object,
        default() {
          return {};
        }
      },
      dataTime: {
        type: Number,
        default() {
          return -1;
        }
      }
    },
    methods: {
      initSearchParam() {
        this.searchForm = {
          type: '',
          model: ''
        }
      },
      indexMethod(index) {
        return (index + 1) + ((this.page - 1) * this.pageSize);
      },
      submit() {
        this.$emit('submit', this.multipleSelection, this.addType)
      },
      handleClose(hide) {
        if (hide) {
          hide()
        }
        this.$emit('close')
      },
      handleMultipleChange(val) {
        this.multipleSelection = val
      },

      searchTable() {
        this.page = 1;
        this.multipleSelection = []
        this.$refs.dialogAddTable.clearSelection()
        this.getList();
      },
      currentChange(val) {
        this.page = val
        this.getList();
      },
      getList() {
        this.tableLoading = true
        let method = ''
        let param = {
          page: this.page,
          pageSize: this.pageSize,
        }
        if (this.addType == 1 || this.addType == 2) {
          if (this.addType == 1) {
            method = 'getEquipmentList'
          } else {
            method = 'getMountEquipmentList'
          }
          param.type = this.searchForm.type
          param.model = this.searchForm.model
        } else {
          method = 'getFlyHandList'
        }
        inspectApi[method](param).then(res => {
          const {records, total} = res.data
          this.dataList = records ? records : []
          this.total = total ? total : 0
          this.tableLoading = false
        }).catch(e => {
          this.dataList = []
          this.total = 0
          this.tableLoading = false
        })
      }
    }
  }
</script>

<style lang="less">
  .allotTasksAdd {
  }
</style>
