<template>
  <div class="app-container">
    <div class="level-title">
      <h1>{{ this.$parent.AREA_ID == '' ? "新增" : "修改" }}</h1>
    </div>
    <div>
      <el-form v-loading="dialogFormVisible" ref="form" :model="form" :rules="rules" label-width="150px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="区域名称：" prop="AREA_NAME">
              <el-input v-model="form.AREA_NAME" placeholder="请输入内容"/>
            </el-form-item>
          </el-col>
        </el-row>
        <!--        <el-row>-->
        <!--          <el-col :span="10">-->
        <!--            <el-form-item label="绑定设备：" prop="DEVICE_IDS">-->
        <!--              <el-input v-model="DEVICE_NAMES" disabled placeholder="请选择口门进行绑定"/>-->
        <!--            </el-form-item>-->
        <!--          </el-col>-->
        <!--          <el-col :span="2">-->
        <!--            <el-button style="position: relative; left: 10%" type="success" icon="el-icon-price-tag" size="mini" @click="handleOpen()">绑定设备</el-button>-->
        <!--          </el-col>-->
        <!--        </el-row>-->
      </el-form>
    </div>
    <div class="ui-foot">
      <el-button type="success" @click="confirm">保 存</el-button>
      <el-button plain type="info" @click="goBack">返 回</el-button>
    </div>
    <!-- 选择设备-->
    <el-dialog v-if="dialogDevice" :visible.sync="dialogDevice" title="设备" width="1500px">
      <div class="icons-container">
        <el-input
          v-model="deviceFilterText"
          placeholder="输入设备名称"
          style="margin:10px 0;left: 10px;width: 25%"/>
        <el-button type="primary" style="position: relative;left: 10px" @click="getdeviceList">查询</el-button>
        <el-container>
          <el-main>
            <el-table
              ref="deviceMultipleTable"
              :data="deviceList"
              :row-key="getDeviceRowKey"
              :header-cell-style="{
                'font-weight': 'bold',
                'color': '#000'
              }"
              tooltip-effect="dark"
              border
              fit
              highlight-current-row
            >
              <el-table-column
                :reserve-selection="true"
                type="selection"
                width="55"
                align="center"/>
              <el-table-column type="index" label="序号" width="50" align="center" />
              <el-table-column prop="DEVICE_NAME" label="设备名称" align="center" />
              <el-table-column prop="DEVICE_TYPE" label="设备类型" align="center" >
                <template slot-scope="{ row }">
                  {{ row.DEVICE_TYPE == '0' ? '闸机' : '' }}
                </template>
              </el-table-column>
            </el-table>
          </el-main>
        </el-container>
      </div>
      <div slot="footer" class="dialog-footer">
        <div style="position: relative">
          <pagination :total="deviceTotal" :page.sync="deviceListQuery.page" :limit.sync="deviceListQuery.limit" @pagination="getdeviceList"/>
        </div>
        <div style="position: relative; top: 10px">
          <el-button @click="dialogDevice = false">取 消</el-button>
          <el-button type="primary" @click="saveDeviceData">确 定</el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import Pagination from '@/components/Pagination' // 通过 el-pagination二次打包
import { requestFN } from '@/utils/request'
import SelectTree from '@/components/SelectTree'
import waves from '@/directive/waves' // waves directive
export default {

  components: { Pagination, SelectTree },
  directives: { waves },
  data() {
    return {
      dialogDevice: false,
      dialogFormVisible: false,
      dialogTableVisible: false,
      deviceListQuery: {
        page: 1,
        limit: 20
      },
      deviceFilterText: '',
      deviceTotal: 0,
      deviceList: [],
      PERSON_CHARGE: '',
      DEPARTMENT_ID_OLD: '',
      DEVICE_NAMES: '',
      form: {
        AREA_NAME: '',
        AREA_ID: '',
        DEVICE_IDS: ''
      },
      riskForm: {},
      KEYWORDS: '',
      rules: {
        AREA_NAME: [{ required: true, message: '区域名称不为空', trigger: 'blur' }]
      },
      formLabelWidth: '120px',
      fullscreenLoading: false,
      total: 0,
      listQuery: {
        page: 1,
        limit: 20
      },
      multipleSelection: [],
      accidentList: [],
      leaveList: [
        { ID: '1', NAME: '一级' },
        { ID: '2', NAME: '二级' },
        { ID: '3', NAME: '三级' }
      ]
    }
  },
  watch: {
  },
  async created() {
    await this.getdeviceList()
    this.form.AREA_ID = this.$parent.AREA_ID || ''
    this.form.DEVICE_IDS = this.$parent.DEVICE_IDS || ''
    if (this.form.AREA_ID) {
      this.getDataByID()
    }
    if (this.form.DEVICE_IDS && this.form.DEVICE_IDS !== '') {
      this.initDeviceNames()
    }
  },
  methods: {
    initDeviceNames() {
      console.log(666)
      const deviceIdList = this.form.DEVICE_IDS.split(',')
      let devicenames = ''
      this.deviceList.forEach(item => {
        deviceIdList.forEach(i => {
          if (item.DEVICE_ID === i) {
            console.log(777)
            devicenames = devicenames + item.DEVICE_NAME + ','
          }
        })
      })
      this.DEVICE_NAMES = devicenames.replace(/,$/, '')
      this.$forceUpdate()
    },
    saveDeviceData() {
      console.log('修改2')
      const selection = this.$refs.deviceMultipleTable.selection
      let deviceIds = ''
      let devicenames = ''
      for (let i = 0; i < selection.length; i++) {
        deviceIds = deviceIds + selection[i].DEVICE_ID + ','
        devicenames = devicenames + selection[i].DEVICE_NAME + ','
      }
      deviceIds = deviceIds.replace(/,$/, '')
      devicenames = devicenames.replace(/,$/, '')
      this.form.DEVICE_IDS = deviceIds
      this.DEVICE_NAMES = devicenames
      this.dialogDevice = false
    },
    getDeviceRowKey(row) {
      return row.DEVICE_ID
    },
    getdeviceList() {
      this.listLoading = true
      return new Promise(resolve => {
        requestFN(
          '/mkmjDevice/list?showCount=' + this.deviceListQuery.limit + '&currentPage=' + this.deviceListQuery.page,
          { KEYWORDS: this.deviceFilterText }
        ).then((data) => {
          this.listLoading = false
          this.deviceList = data.varList
          this.deviceTotal = data.page.totalResult
          resolve()
        }).catch((e) => {
          this.listLoading = false
          console.log(e)
        })
      })
    },
    async handleOpen() {
      console.log('修改1')
      this.dialogDevice = true
      if (this.form.DEVICE_IDS && this.form.DEVICE_IDS !== '') {
        const selectList = this.form.DEVICE_IDS.split(',')
        this.$nextTick(() => {
          selectList.forEach(data => {
            this.$refs.deviceMultipleTable.toggleRowSelection(this.deviceList.find(item => {
              return data === item.DEVICE_ID
            }), true)
          })
        })
        this.saveDeviceData()
      }
    },
    confirm() {
      this.$refs.form.validate(valid => {
        if (valid) {
          if (this.$parent.AREA_ID == '') {
            this.handleAdd()
          } else {
            if (valid) {
              this.listLoading = true
              requestFN(
                '/doorArea/edit',
                this.form
              ).then((data) => {
                if (data.code != 0) {
                  this.$message.success(data.msg)
                  this.listLoading = false
                  this.dialogFormEdit = false
                  this.goBack()
                }
              }).catch((e) => {
                this.listLoading = false
              })
            }
          }
        }
      })
    },
    handleAdd() {
      requestFN(
        '/doorArea/add',
        this.form
      ).then((data) => {
        if (data.msg === '保存成功') {
          this.$message.success(data.msg)
          this.goBack()
        } else {
          this.$message.warning(data.msg)
        }
      }).catch((e) => {
      })
    },
    getDataByID() {
      this.listLoading = true
      this.dialogFormVisible = true
      requestFN(
        '/doorArea/goEdit',
        { AREA_ID: this.form.AREA_ID }
      ).then((data) => {
        this.form = data.pd
        this.dialogFormVisible = false
      }).catch((e) => {
        this.dialogFormVisible = false
        this.listLoading = false
      })
    },
    // 返回列表
    goBack() {
      this.$parent.activeName = 'List'
    }
  }
}
</script>

<style>
</style>
