<template>
  <div class="view-dataEnvironment">
    <div class="common-box">
      <div class="common-box-button">
        <el-button type="success" @click="handleAdd">新增</el-button>
        <el-button type="warning" @click="handleDelete(tableCheckItems)" :disabled="tableCheckItems.length == 0">删除</el-button>
      </div>
      <div class="common-box-select">
        <label>状态 : </label>
        <el-select v-model="envStatus" placeholder="请选择" @change="statusChange">
          <el-option label="全部" value=""></el-option>
          <el-option v-for="item in statusOptions" :key="item.value" :label="item.label" :value="item.value"> </el-option>
        </el-select>
      </div>
      <div class="common-box-search">
        <el-input placeholder="请输入环境因子名称" v-model="keyword" class="input-with-select" @keyup.enter.native="fetchTableData">
          <el-button slot="append" icon="el-icon-search" @click="fetchTableData(1)"></el-button>
        </el-input>
      </div>
    </div>
    <LTable ref="table" @selection-change="selection" :defaultFetch="true" :columns="columns" :dataSource="tableData" :options="options" :fetch="fetchTableData" :pagination="pagination" />
    <CrudDialog v-bind="modalConfig" ref="NewDialogRef" @crudDialogSubmit="crudDialogSubmit"></CrudDialog>
  </div>
</template>

<script>
import { addITEnvFactor, deleteAircaftComponents, queryAircaftComponents, updateAircaftComponents } from '@/api/basicData/dataEnvironment'
import { debounce } from '@/utils/index'
import { columns, options, modalConfig } from './index'
export default {
  name: 'dataEnvironment',
  components: {},
  data() {
    // 这里存放数据
    return {
      envStatus: '',
      keyword: '',
      removeArr: [],
      columns: columns(this),
      modalConfig: modalConfig(this),
      options,
      // 分页
      pagination: {
        total: 0,
        pageIndex: 1,
        pageSize: 20
      },
      tableCheckItems: [],
      tableData: [],
      statusOptions: [
        { label: '启用', value: 0 },
        { label: '禁用', value: 1 }
      ],
      debounceFn: debounce(this.fetchTableData, 500)
    }
  },
  watch: {
    keyword() {
      this.pagination.pageIndex = 1
      this.debounceFn()
    }
  },
  methods: {
    async fetchTableData(pageIndex) {
      if (this.$refs.table) this.$refs.table.clearSelection()
      const { envStatus, keyword } = this
      const { pageIndex: pageNum, pageSize } = this.pagination
      const {
        data: { list, total }
      } = await queryAircaftComponents({ pageNum: pageIndex ? pageIndex : pageNum, pageSize, envStatus, keyword })
      this.tableData = list
      this.pagination.total = total
    },

    async deleteAircaftComponentsAPI(params) {
      const { success } = await deleteAircaftComponents(params)
      if (success) {
        this.$message({
          type: 'success',
          message: '操作成功!'
        })
        this.fetchTableData()
      }
    },

    async addITEnvFactorAPI(params) {
      const { success } = await addITEnvFactor(params)
      if (success) {
        this.$message({
          type: 'success',
          message: '操作成功!'
        })
        this.fetchTableData()
      }
    },

    async updateAircaftComponentsAPI(params) {
      const { env, factor, envStatus, remark, envFactorId } = params
      const { success } = await updateAircaftComponents({
        env,
        factor,
        envStatus,
        remark,
        envFactorId
      })
      if (success) {
        this.$message({
          type: 'success',
          message: '操作成功!'
        })
        this.fetchTableData()
      }
    },

    handleAdd() {
      let config = {
        type: 'add',
        // 回填的值（字段对应上）
        dataShow: {
          envStatus: '0'
        },
        title: '新增'
      }
      this.$refs.NewDialogRef.open(config)
    },

    handUpdate(row) {
      let config = {
        type: 'update',
        dataShow: row, // 回填的值（字段对应上）
        title: '编辑'
      }
      this.$refs.NewDialogRef.open(config)
    },

    handleDelete(row) {
      this.$confirm('是否确认删除选中数据', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this.deleteAircaftComponentsAPI(row.map((e) => e.envFactorId))
        })
        .catch(() => {})
    },

    selection(val) {
      this.tableCheckItems = val
    },

    crudDialogSubmit(data) {
      const { dialogData, type } = data
      switch (type) {
        case 'add':
          this.addITEnvFactorAPI(dialogData)
          break
        case 'update':
          this.updateAircaftComponentsAPI(dialogData)
          break
      }
    },

    operation(row, statu) {
      const { envFactorId } = row
      this.updateAircaftComponentsAPI({ envFactorId, envStatus: String(statu) })
    },

    statusChange() {},

    handparts(row) {
      this.$router.push(`/basicData/dataEnvironment/${row.envFactorId}/${row.env}/${row.factor}`)
    }
  }
}
</script>

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