<!--  -->
<template>
  <div class="fauilbox">
    <div class="baselistbox_top">
      <div class="baselistbox_top_title">
        <p>故障信息</p>
      </div>
      <p class="baselistbox_top_line"></p>
      <div class="baselistbox_top_search">
        <div class="left_search">
          <div class="firstsearch">
            <span class="biaoti">设备ID</span>
            <el-input
              v-model="queryInfo.f_id"
              size="mini"
              placeholder="请输入设备ID或名称"
            ></el-input>
          </div>
          <div class="secsearch">
            <span class="biaoti">设备类型</span>
            <el-select
              v-model="queryInfo.type"
              size="mini"
              filterable
              placeholder="请选择"
            >
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </div>
        </div>
        <div class="right_search">
          <div class="btnbox" @click="searchChange">查询</div>
          <div class="btnbox2" @click="empty">重置</div>
        </div>
      </div>
    </div>
    <div class="baselistbox_table">
      <el-table
        v-loading="loading"
        :data="faultlist"
        stripe
        style="width: 100%"
        height="560px"
        :default-sort="{ prop: 'device_name', order: 'addtime' }"
      >
        <el-table-column
          prop="device_name"
          sortable
          label="设备类型"
          width="120"
        >
          <template slot-scope="scope">{{
            basetype[scope.row.device_type]
          }}</template>
        </el-table-column>
        <el-table-column prop="imei" label="设备ID" width="180">
          <template slot-scope="scope">{{ scope.row.device_id }}</template>
        </el-table-column>
        <el-table-column prop="addr" label="位置" width="350">
        </el-table-column>
        <el-table-column
          prop="user"
          label="联系人"
          width="100"
        ></el-table-column>
        <el-table-column prop="userphone" sortable label="电话" width="150">
        </el-table-column>
        <el-table-column prop="errordesc" label="故障信息" width="350">
        </el-table-column>
        <el-table-column prop="uptime" label="故障时间" width="180">
          <template slot-scope="scope">{{
            (scope.row.uptime * 1000) | formatTime
          }}</template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <span
              :style="{
                color: scope.row.errorimg == '' ? '#BFBFBF' : '#4f71ff',
                marginRight: '15px',
                cursor: scope.row.errorimg == '' ? 'not-allowed' : 'pointer',
              }"
              @click="seeimg(scope.row.errorimg)"
              >故障图片</span
            >
            <span
              :style="{
                color: scope.row.errorvideo == '' ? '#BFBFBF' : '#4f71ff',
                marginRight: '15px',
                cursor: scope.row.errorvideo == '' ? 'not-allowed' : 'pointer',
              }"
              @click="seevideo(scope.row.errorvideo)"
              >故障视频</span
            >
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination">
        <el-pagination
          background
          layout="prev, pager, next,sizes,jumper"
          :total="totalNum"
          :page-sizes="[10, 20, 30, 50]"
          :page-size="page_size"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-size.sync="page"
          :key="pagekey"
        >
        </el-pagination>
      </div>
    </div>
    <viewer v-show="imageListtstatus" :images="imageListtData" @inited="inited">
      <img v-for="(src, index) in imageListtData" :src="src" :key="index" />
    </viewer>
    <el-dialog title="故障视频" :visible.sync="videodialogVisible" width="35%">
      <div>
        <video width="100%" :src="videosrc" controls autoplay></video>
      </div>
    </el-dialog>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）

export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {
      options: [
        {
          value: "3",
          label: "虫情",
        },
        {
          value: "8",
          label: "墒情",
        },
        {
          value: "5",
          label: "气象",
        },
        {
          value: "7",
          label: "病害",
        },
        {
          value: "6",
          label: "监控",
        },
      ],
      basetype: {
        3: "虫情监测",
        8: "墒情监测",
        5: "气象监测",
        7: "病害监测",
        6: "监控设备",
      },
      queryInfo: {
        type: "",
        f_id: "",
      },
      totalNum: 10,
      page: 1,
      page_size: 10,
      pagekey:1,
      faultlist: [],
      loading: false,
      imageListtstatus: false,
      imageListtData: [],
      videodialogVisible: false,
      videosrc: "",
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    searchChange() {
      this.page = 1;
      this.pagekey = Math.random()*10+1;
      this.getfaultlist();
    },
    empty() {
      this.queryInfo = {
        type: "",
        f_id: "",
      };
      this.page = 1;
      this.pagekey = Math.random()*10+1;
      this.getfaultlist();
    },
    handleSizeChange(e) {
      this.page = 1;
      this.pagekey = Math.random()*10+1;
      this.page_size = e;
      this.getfaultlist();
    },
    handleCurrentChange(e) {
      this.page = e;
      this.getfaultlist();
    },
    getfaultlist() {
      this.loading = true;
      this.$axios({
        method: "POST",
        url: "/api/api_gateway?method=after_sale.after_sale_manage.aftersale_info",
        data: this.qs.stringify({
          device_type_id: this.queryInfo.type,
          f_id: this.queryInfo.f_id,
          page: this.page,
          page_size: this.page_size,
        }),
      }).then((res) => {
        this.loading = false;
        console.log(res);
        if (res.data.data) {
          this.faultlist = res.data.data.data;
          this.totalNum = res.data.data.counts;
        }
      });
    },
    seeimg(img) {
      // this.imageListtstatus = true
      if (img!="") {
        this.imageListtData = img.split(",");
        console.log(this.imageListtData);
        this.$viewer.show();
        console.log(img);
      }
    },
    seevideo(videosrc) {
      if (videosrc != "") {
        this.videosrc = videosrc;
        this.videodialogVisible = true;
        console.log(this.videosrc)
      }
    },
    inited(viewer) {
      this.$viewer = viewer;
    },
  },
  beforeCreate() {}, //生命周期 - 创建之前
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this.getfaultlist();
  },
  beforeMount() {}, //生命周期 - 挂载之前
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang="less" scoped>
.fauilbox {
  width: 100%;
  height: 100%;
  .baselistbox_top {
    width: 100%;
    height: 130px;
    background-color: #fff;
    border-radius: 10px;
    .baselistbox_top_title {
      width: 100%;
      height: 65px;
      display: flex;
      padding: 20px;
      box-sizing: border-box;
      line-height: 25px;
      justify-content: space-between;
      p:first-child {
        font-size: 18px;
        font-weight: 700;
      }
    }
    .baselistbox_top_line {
      width: 100%;
      height: 1px;
      background-color: #f2f2f2;
    }
    .baselistbox_top_search {
      width: 100%;
      height: 68px;
      display: flex;
      padding: 20px;
      box-sizing: border-box;
      line-height: 28px;
      justify-content: space-between;
      .left_search {
        display: flex;
        .firstsearch,
        .secsearch {
          display: flex;
          margin-right: 40px;
          /deep/.el-input {
            width: 240px;
          }
          .biaoti {
            font-size: 14px;
            margin-right: 20px;
          }
        }
      }
      .right_search {
        display: flex;
        .btnbox,
        .btnbox2 {
          width: 68px;
          height: 28px;
          border: 1px solid #4f71ff;
          text-align: center;
          border-radius: 3px;
          font-size: 14px;
          margin-left: 20px;
          cursor: pointer;
        }
        .btnbox {
          background-color: #4f71ff;
          color: #fff;
        }
        .btnbox2 {
          color: #4f71ff;
        }
      }
    }
  }
  .baselistbox_table {
    width: 100%;
    // height: calc(100% - 140px);
    background-color: #fff;
    margin-top: 10px;
    padding: 20px;
    box-sizing: border-box;
    position: relative;
    border-radius: 10px;
    /deep/.el-table__header {
      th {
        background-color: #f1f1f3;
      }
    }
    .pagination {
      display: flex;
      justify-content: flex-end;
      margin-top: 20px;
      /deep/.el-pager {
        .active {
          background-color: #4f71ff !important;
        }
      }
      /deep/.el-input__inner:hover {
        border-color: #4f71ff;
      }
    }
  }
}
</style>