<template>
  <div class="app-container">
    <div class="filter-container">
      <el-form ref="query" :model="deviceSearch" style="display: inline-block;">
        <el-input v-model="deviceSearch.deviceName" placeholder="用户名称" style="width: 200px;" class="filter-item" name="userskk" />
        <el-button v-waves class="filter-item" type="primary" icon="el-icon-search" @click="handleSubmit">
          {{ $t('table.search') }}
        </el-button>
      </el-form>
      <el-button v-if="device != '' " v-waves :loading="downloadLoading" class="filter-item" type="primary" icon="el-icon-download" @click="handleDownload">
        {{ $t('table.export') }}
      </el-button>
    </div>
    <el-tabs v-model="activeName" stretch @tab-click="handleClick">
      <el-tab-pane v-for="item in list" :key="item.tid" :label="item.tname" :tid="item.tid" :name="item.tid==1 ? 'second' : list.tid"></el-tab-pane>
    </el-tabs>
    <el-table :key="tableKey" v-loading="loading" :data="device" border fit highlight-current-rows>
      <el-table-column align="center" label="id" width="80">
        <template slot-scope="scope">
          <span style="color: #409EFF;" @click="deviceinfo(scope.row.id)">{{ scope.row.id }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="设备编号" width="150">
        <template slot-scope="scope">
          <span @click="handleCopy(scope.row.devicenum,$event)">{{ scope.row.devicenum }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="设备类型" width="150">
        <template slot-scope="scope">
          <span>{{ scope.row.tname }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="介质状态" width="170">
        <template slot-scope="scope">
          <span>{{ scope.row.gas }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="设备名称" width="170">
        <template slot-scope="scope">
          <span>{{ scope.row.username }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="浓度" width="170">
        <template slot-scope="scope">
          <span>{{ scope.row.nd }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="是否已删除设备" width="170">
        <template slot-scope="scope">
          <span :style="{color:( scope.row.state==1 ? '#F56C6C' : '#67C23A' )}">{{ scope.row.delete ==1 ? '设备已删除' : '设备正常' }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="设备备注" width="170">
        <template slot-scope="scope">
          <span>{{ scope.row.deviceremark }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="设备详情" width="170">
        <template slot-scope="scope">
          <span>{{ scope.row.deviceinfo }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="创建时间" width="170">
        <template slot-scope="scope">
          <span>{{ scope.row.deviceaddtime | parseTime('{y}-{m}-{d} {h}:{i}') }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="设备实时状态" width="170">
        <template slot-scope="scope">
          <span>
            <el-tag :type=" scope.row.status_name=='正常' ? 'success' : 'warning' " effect="dark">{{ scope.row.status_name }}</el-tag>
          </span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="状态" width="170">
        <template slot-scope="scope">
          <span :style="{color:( scope.row.devicestatus==1 ? '#67C23A' : '#F56C6C' )}">{{ scope.row.devicestatus==1 ? '正常' : '设备错误' }}</span>
        </template>
      </el-table-column>
    </el-table>
    <pagination v-show="total>0" :total="total" :page.sync="page" :limit.sync="limit" @pagination="getList" />

    <el-dialog :visible.sync="dialogPvVisible" title="设备详情信息" width="50%">
      <el-table :data="devicefistr">
        <el-table-column type="expand">
          <template>
            <el-form v-for="item in deviceDataInfo" :key="item.id" label-position="left" inline class="demo-table-expand">
              <el-form-item label="姓名">
                <span>{{ item.contacts_name }}</span>
              </el-form-item>
              <el-form-item label="手机号">
                <span @click="handleCopyphone(item.contacts_phone,$event)">{{ item.contacts_phone }}</span>
              </el-form-item>
              <el-form-item label="添加用户">
                <span>{{ item.isadmin==1 ? '管理员' : '用户' }}</span>
              </el-form-item>
              <el-form-item label="状态">
                <span :style="{color:( item.isstatus==1 ? '#67C23A' : '#F56C6C' )}">{{ item.isstatus==1 ? '开启' : '禁用' }}</span>
              </el-form-item>
            </el-form>
          </template>
        </el-table-column>
        <el-table-column label="设备uuid" prop="deviceuuid"></el-table-column>
        <el-table-column label="设备联系人" prop="devicelinkman"></el-table-column>
        <el-table-column label="设备手机号" prop="devicephone"></el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>

<script>
import { deviceTypeList, deviceList, deviceDataInfo, deviceDataSearch } from '@/api/device';
import Pagination from '@/components/Pagination'; // 分页
import waves from '@/directive/waves'; // 水波纹效果
import clip from '@/utils/clipboard';
import { parseTime } from '@/utils';
export default {
  name: 'Devicetype',
  components: { Pagination },
  directives: { waves },
  data() {
    return {
      tableKey: 0,
      downloadLoading: false,
      pvData: [],
      dialogPvVisible: false,
      activeName: 'second',
      list: [],
      loading: true,
      device: [],
      deviceDataInfo: [],
      devicefistr: [],
      page: 1,
      deviceSearch: {
        deviceName: '',
        limit: 10,
        page: 1,
      },
      limit: 10,
      type: '',
      total: 0,
    };
  },
  created() {
    this.getList(); // 设备状态
    this.devicelist();
  },

  methods: {
    getList() {
      deviceTypeList()
        .then(response => {
          var devicetype = response.data;
          this.list = devicetype['devicetype'];
        })
        .catch(err => {
          console.log(err);
        });
    },
    devicelist() {
      const limit = this.limit;
      const page = this.page;
      this.loading = true;
      deviceList(page, limit, this.type)
        .then(response => {
          var devicetype = response.data['devicelist'];
          this.device = devicetype;
          this.device.forEach((element, index) => {
            element['index'] = (page - 1) * limit + index + 1;
          });
          this.total = response.data.count;
          this.loading = false;
        })
        .catch(err => {
          console.log(err);
        });
    },
    handleClick(tab) {
      this.type = tab.$attrs.tid;
      this.devicelist();
    },
    handleCopy(text, event) {
      clip(text, event);
    },
    deviceinfo(row) {
      this.dialogPvVisible = true;
      this.deviceData(row);
    },
    deviceData(id){
      deviceDataInfo(id)
        .then(response => {
          var deviceData = response.data['devicedata'];
          this.deviceDataInfo = deviceData;
          this.devicefistr = response.data['devicedatainfo'];
        })
        .catch(err => {
          console.log(err);
        });
    },
    handleCopyphone(text, event){
      clip(text, event);
    },
    handleDownload() {
      this.downloadLoading = true;
      import('@/vendor/Export2Excel').then(excel => {
        const tHeader = ['id', '设备编号', '设备名称', '设备类型', '介质状态', '设备备注', '添加时间', '设备实时状态', '是否已删除设备'];
        const filterVal = ['id', 'devicenum', 'username', 'tname', 'gas', 'deviceremark', 'deviceaddtime', 'status_name', 'delete'];
        const data = this.formatJson(filterVal, this.device);
        excel.export_json_to_excel({
          header: tHeader,
          data,
          filename: '设备列表',
        });
        this.downloadLoading = false;
      });
    },
    formatJson(filterVal, jsonData) {
      return jsonData.map(v => filterVal.map(j => {
        if (j === 'deviceaddtime') {
          return parseTime(v[j]);
        } else if (j === 'delete') {
          return v[j] === 1 ? '已删除' : '正常';
        } else {
          return v[j];
        }
      }));
    },
    handleSubmit() {
      deviceDataSearch(this.deviceSearch)
        .then(response => {
          if (response.code === 105) {
            this.$message({
              message: response.msg,
              type: 'warning',
            });
            this.devicelist();
          }
          var deviceData = response.data['devicelist'];
          this.device.forEach((element, index) => {
            element['index'] = (this.deviceSearch.page - 1) * this.deviceSearch.limit + index + 1;
          });
          this.device = deviceData;
          this.total = response.data.count;
        })
        .catch(err => {
          console.log(err);
        });
    },
  },
};
</script>

<style>
  .demo-table-expand {
    font-size: 0;
  }
  .demo-table-expand label {
    width: 90px;
    color: #99a9bf;
  }
  .demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
  }
</style>
