<template>
  <el-dialog :append-to-body="true" :close-on-click-modal="false" :before-close="cancel" :visible.sync="waydialog" :title="'在线控制'" width="30%">
    <!--表格渲染-->
    <el-table v-loading="loading" v-show="data.length === 16" :data="data" size="small" style="width: 100%;padding: 20px;">
      <!--<el-table-column prop="deviceid" label="设备ID" min-width="130%"/>-->
      <el-table-column prop="wayname" label="支路名称" min-width="130%"/>
      <el-table-column prop="way" label="支路"/>
      <el-table-column prop="status" label="状态">
        <template slot-scope="scope">
          <el-switch v-loading.fullscreen.lock="fullscreenLoading" v-model="scope.row.status" :disabled="getStatus()" active-value="1" inactive-value="0" @change="changeStatus($event, scope.row)"/>
        </template>
      </el-table-column>
      <!--<el-table-column prop="msg" label="信息"/>-->
      <el-table-column v-if="checkPermission(['ADMIN','SDEVICEWAY_ALL','SDEVICEWAY_EDIT','SDEVICEWAY_DELETE'])" label="操作" width="150px" align="center">
        <template slot-scope="scope">
          <el-button v-permission="['ADMIN','SDEVICEWAY_ALL','SDEVICEWAY_EDIT']" size="mini" type="primary" icon="el-icon-edit" @click="createDialog(scope.row)"/>
        </template>
      </el-table-column>
    </el-table>
    <!-- 走马灯渲染 -->
    <el-carousel v-show="data.length !==16" ref="myswip" :autoplay="false" trigger="click" arrow="never" style="height:700px">
      <el-carousel-item v-for="(item, index) in groupdata" :key="index">
        <el-table v-loading="loading" :data="item" size="small" style="width: 100%;padding: 20px;">
          <el-table-column prop="wayname" label="支路名称" min-width="130%" />
          <el-table-column prop="way" label="支路" />
          <el-table-column prop="status" label="状态">
            <template slot-scope="scope">
              <el-switch v-loading.fullscreen.lock="fullscreenLoading" v-model="scope.row.status" :disabled="getStatus()" active-value="1" inactive-value="0" @change="changeStatus($event, scope.row)" />
            </template>
          </el-table-column>
          <el-table-column v-if="checkPermission(['ADMIN', 'SDEVICEWAY_ALL', 'SDEVICEWAY_EDIT','SDEVICEWAY_DELETE'])" label="操作" width="150px" align="center">
            <template slot-scope="scope">
              <el-button v-permission="['ADMIN','SDEVICEWAY_ALL','SDEVICEWAY_EDIT']" size="mini" type="primary" icon="el-icon-edit" @click="createDialog(scope.row)"/>
            </template>
          </el-table-column>
        </el-table>
      </el-carousel-item>
    </el-carousel>
    <!--<div slot="footer" class="dialog-footer">
      <el-button type="text" @click="cancel">取消</el-button>
      <el-button :loading="loading" type="primary" @click="doSubmit">确认</el-button>
    </div>-->
    <div v-show="data.length !==16" class="pagination-total"><span v-for="(item, index) in groupdata" :key="index" :class="{active: curPagination===index}" class="pagina" @click="toPagiPage(index)">{{ item[0].wayname.split('-')[0] === '长 '? '长廊' : item[0].wayname.split('-')[0] }}</span></div>
    <el-dialog :visible.sync="editDialog" width="40%" title="修改支路名称" center append-to-body>
      <el-form ref="form" :model="editForm" :rules="rules" size="small" label-width="80px">
        <el-form-item label="项目名">
          <el-input v-model="editForm.wayname" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="text" @click="editDialog = false">取消</el-button>
        <el-button :loading="loading" type="primary" @click="submitWay">确认</el-button>
      </div>
    </el-dialog>
  </el-dialog>
</template>

<script>
import checkPermission from '@/utils/permission'
import { add, edit, loadByDeviceid, controlWay } from '@/api/sDeviceWay'
import initData from '@/mixins/initData'
export default {
  mixins: [initData],
  props: {
  },
  data() {
    return {
      loading: false, waydialog: false, deviceStatus: '', editDialog: false, workmode: '',
      fullscreenLoading: false,
      form: {
        id: '',
        deviceid: '',
        wayname: '',
        way: '',
        status: '',
        msg: '',
        createTime: '',
        updateTime: ''
      },
      editForm: {
        id: '',
        deviceid: '',
        wayname: '',
        way: '',
        status: '',
        msg: '',
        createTime: '',
        updateTime: ''
      },
      rules: {
      },
      groupdata: [],
      curPagination: 0
    }
  },
  /* created() {
    loadByDeviceid()
  },*/
  methods: {
    checkPermission,
    beforeInit() {
      this.url = 'api/sDeviceWay'
      const sort = 'id'
      this.params = { page: this.page, size: this.size, sort: sort }
      const query = this.query
      const type = query.type
      const value = query.value
      if (type && value) { this.params[type] = value }
      return true
    },
    cancel() {
      this.resetForm()
    },
    getStatus() {
      // deviceStatus==='在线' ? false:true
      // workmode 工作模式 0远程 1本地
      if (this.deviceStatus === '在线') {
        if (this.workmode === '0') {
          return false
        } else {
          return true
        }
      } else {
        return true
      }
    },
    changeStatus(val, data) {
      this.loading = true
      controlWay(data).then(response => {
        if (response === 'success') {
          this.initdeviceWay()
          this.loading = false
          this.$notify({
            title: '操作成功',
            type: 'success',
            duration: 2500
          })
        }
      }).catch(err => {
        this.initdeviceWay()
        this.loading = false
        // this.loading = false
        /* this.$notify({
          title: '操作失败',
          type: 'warning',
          duration: 2500
        })*/
        if (data.status === '0') {
          data.status = '1'
        } else {
          data.status = '0'
        }
        console.log(err.response.data.message)
      })
    },
    submitWay() {
      // console.log(this.editForm)
      // this.editDialog = false
      this.editForm.msg = null
      edit(this.editForm).then(res => {
        // this.reseteditForm()
        this.editDialog = false
        this.$notify({
          title: '修改成功',
          type: 'success',
          duration: 2500
        })
        this.loading = false
        this.initdeviceWay()
      }).catch(err => {
        this.loading = false
        console.log(err.response.data.message)
      })
    },
    createDialog(data) {
      this.editDialog = true
      // const _this = this.wayForm
      this.editForm = {
        id: data.id,
        deviceid: data.deviceid,
        wayname: data.wayname,
        way: data.way,
        status: data.status,
        msg: data.msg,
        createTime: data.createTime,
        updateTime: data.updateTime
      }
    },
    doSubmit() {
      this.loading = true
      if (this.isAdd) {
        this.doAdd()
      } else this.doEdit()
    },
    doAdd() {
      add(this.form).then(res => {
        this.resetForm()
        this.$notify({
          title: '添加成功',
          type: 'success',
          duration: 2500
        })
        this.loading = false
        this.$parent.init()
      }).catch(err => {
        this.loading = false
        console.log(err.response.data.message)
      })
    },
    doEdit() {
      edit(this.form).then(res => {
        this.resetForm()
        this.$notify({
          title: '修改成功',
          type: 'success',
          duration: 2500
        })
        this.loading = false
        this.$parent.init()
      }).catch(err => {
        this.loading = false
        console.log(err.response.data.message)
      })
    },
    resetForm() {
      this.waydialog = false
      // this.$refs['form'].resetFields()
      this.form = {
        id: '',
        deviceid: '',
        wayname: '',
        way: '',
        status: '',
        msg: '',
        createTime: '',
        updateTime: ''
      }
    },
    reseteditForm() {
      this.editDialog = false
      // this.$refs['form'].resetFields()
      this.form = {
        id: '',
        deviceid: '',
        wayname: '',
        way: '',
        status: '',
        msg: '',
        createTime: '',
        updateTime: ''
      }
    },
    initdeviceWay() {
      loadByDeviceid(this.form).then(response => {
        this.data = response
        this.groupdata = []
        this.data.forEach((item, index, array) => {
          let isFind = false
          if (this.groupdata.length === 0) {
            this.groupdata.push([item])
          }
          this.groupdata.forEach(item1 => {
            if (item1[0].wayname.split('-')[0] === item.wayname.split('-')[0]) {
              isFind = true
            }
            if (isFind) {
              item1.push(item)
              // isFind = false
            }
          })
          if (isFind === false) {
            this.groupdata.push([item])
          }
        })
      })
    },
    toPagiPage(index) {
      this.$refs.myswip.setActiveItem(index)
      this.curPagination = index
    }
  }
}
</script>

<style lang="scss">
  .el-dialog__body {
    padding: 0 10px 50px 10px;
  }
  .el-carousel__item {
    overflow-y: scroll;
  }
  .pagination-total {
    margin-top: 20px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    .pagina {
      color: #ccc;
      margin: 0 20px;
      cursor: pointer;
      &.active {
        color: #000;
      }
    }
  }
</style>
