<template>
  <div class="app-container">
    <div class="rightCont">
      <el-form label-width="100px">
        <el-row :gutter="24">
          <el-col :span="5">
            <el-form-item label="关键字：" >
              <el-input v-model="form.VIDEONAME" style="width:206px" placeholder="输入视频名称或者摄像头编码"/>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="所属相关方：" >
              <el-select v-model="form.UNITS_ID" filterable clearable placeholder="请选择施工相关方">
                <el-option v-for="item in unitsList" :key="item.UNITS_ID" :label="item.UNITS_NAME" :value="item.UNITS_ID" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="使用单位：" >
              <el-input v-model="form.UNIT_USE" style="width:206px" placeholder="请输入内容"/>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="负责人：" >
              <el-input v-model="form.UNITS_USER_ID" style="width:206px" placeholder="请输入内容"/>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label-width="50px">
              <el-button v-waves class="filter-item" type="primary" icon="el-icon-search" @click="getQuery">
                搜索
              </el-button>
              <el-button v-waves class="filter-item" type="success" icon="el-icon-refresh" @click="goKeyReset">
                重置
              </el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div>
        <el-table
          v-loading="listLoading"
          ref="multipleTable"
          :data="varList"
          :row-key="getRowKey"
          border
          tooltip-effect="dark"
          style="width: 100%">
          <el-table-column :selectable="selectable" type="selection" reserve-selection width="55" align="center"/>
          <el-table-column type="index" label="序号" width="55" align="center"/>
          <el-table-column :formatter="getUnitName" prop="UNITS_ID" label="所属相关方"/>
          <el-table-column prop="UNIT_USE" label="使用单位"/>
          <el-table-column prop="MODEL" label="视频型号"/>
          <el-table-column prop="VIDEONAME" label="视频名称"/>
          <el-table-column prop="VIDEOURL" label="播放地址"/>
          <el-table-column prop="CODE" label="摄像头编号"/>
          <el-table-column prop="PERSON" label="负责人"/>
          <el-table-column prop="PHONE" label="手机号"/>
          <el-table-column prop="ITEM_COUNT" label="视频监控中使用数" width="auto" align="center">
            <template slot-scope="{row}">
              <span v-if="row.ITEM_COUNT != 0">
                <a style="color: #1e9fff;text-decoration:underline" @click="clickItemCount(row)">{{ row.ITEM_COUNT }}</a>
              </span>
              <span v-else>{{ row.ITEM_COUNT }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="CORP_NAME" label="创建人单位"/>
          <el-table-column prop="CREATOR_NAME" label="创建人"/>
          <el-table-column label="操作" width="300px">
            <template slot-scope="{row}">
              <el-button type="success" icon="el-icon-caret-right" size="mini" @click="showVideo(row)">播放</el-button>
              <el-button
                type="primary"
                icon="el-icon-edit"
                size="mini"
                @click="handleEdit(row)">修改
              </el-button>
              <el-button
                :disabled="row.ITEM_COUNT != 0"
                type="danger"
                icon="el-icon-delete"
                size="mini"
                @click="handleBatchDel(row)">删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="page-btn-group">
          <div>
            <el-button type="primary" icon="el-icon-plus" @click="handleAdd">新增</el-button>
            <el-button type="danger" icon="el-icon-delete" @click="handleBatchDel">批量删除</el-button>
          </div>
          <pagination
            :total="total"
            :page.sync="listQuery.page"
            :limit.sync="listQuery.limit"
            @pagination="getList()"/>
        </div>
      </div>
    </div>
    <el-dialog
      :visible.sync="addForm.dialogVisible"
      :title="addForm.dialogType === 'add' ? '新增' : '编辑'"
      width="40%">
      <el-form
        ref="addForm"
        :rules="addForm.rules"
        :model="addForm.info"
        label-position="right"
        label-width="150px"
        style="padding:10px 10px">
        <el-row>
          <el-form-item label="所属相关方：" prop="UNITS_ID">
            <el-select v-model="addForm.info.UNITS_ID" filterable placeholder="请选择施工相关方" style="width: 100%;">
              <el-option v-for="item in unitsList" :key="item.UNITS_ID" :label="item.UNITS_NAME" :value="item.UNITS_ID" />
            </el-select>
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item label="使用单位：" prop="UNIT_USE">
            <el-input v-model="addForm.info.UNIT_USE" style="width: 100%" placeholder="请输入内容"/>
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item label="规格型号：" prop="MODEL">
            <el-input v-model="addForm.info.MODEL" style="width: 100%" placeholder="请输入内容"/>
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item label="视频名称：" prop="VIDEONAME">
            <el-input v-model="addForm.info.VIDEONAME" style="width: 100%" placeholder="请输入内容"/>
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item label="播放路径：" prop="VIDEOURL">
            <el-input v-model="addForm.info.VIDEOURL" style="width: 100%" placeholder="请输入内容"/>
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item label="摄像头编号：" prop="CODE">
            <el-input v-model="addForm.info.CODE" style="width: 100%" placeholder="请输入内容"/>
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item label="负责人：" prop="PERSON">
            <el-input v-model="addForm.info.PERSON" style="width: 100%" placeholder="请输入内容" />
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item label="联系电话：" prop="PHONE">
            <el-input v-model="addForm.info.PHONE" style="width: 100%" placeholder="请输入内容" />
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item label="在线情况：" prop="REMAKE">
            <el-input v-model="addForm.info.REMAKE" style="width: 100%" placeholder="请输入内容"/>
          </el-form-item>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addForm.dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="confirm">提 交</el-button>
      </div>
    </el-dialog>
    <el-drawer
      :visible.sync="visible"
      title="重点工程"
      direction="rtl"
      size="40%">
      <el-table :data="gridData">
        <el-table-column type="index" label="序号" width="50" align="center" />
        <el-table-column prop="OUTSOURCED_NAME" label="重点工程名称" show-overflow-tooltip />
        <el-table-column prop="UNITS_NAME" label="施工相关方" show-overflow-tooltip />
        <!--        <el-table-column prop="INVOLVING_CORPS_NAME" label="辖区单位" show-overflow-tooltip />-->
        <el-table-column prop="MANAGE_CORPS_NAME" label="监理单位" show-overflow-tooltip />
      </el-table>
      <pagination
        :total="zdtotal"
        :page.sync="zdlistQuery.page"
        :limit.sync="zdlistQuery.limit"
        @pagination="zdgetList()"/>
    </el-drawer>
    <el-dialog v-if="dialogVideo" :visible.sync="dialogVideo" :show-close="false" title="视频2" width="600px">
      <iframe :src="VIDEOURL" width="100%" height="380" allowfullscreen allow="autoplay; fullscreen;microphone" style="position: relative;border:none"/>
      <div slot="footer" class="dialog-footer">
        <el-button @click="back">取 消</el-button>
      </div>
    </el-dialog>
    <el-dialog v-if="dialogVideoHLS" :visible.sync="dialogVideoHLS" :before-close="handleBack" :show-close="false" title="视频" width="600px">
      <div id="aLiVideoPlayer" class="prism-player"/>
      <div slot="footer" class="dialog-footer">
        <el-button @click="back">取 消</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import Pagination from '@/components/Pagination'
import { requestFN } from '@/utils/request'
import waves from '@/directive/waves' // waves directive
import SelectTree from '@/components/SelectTree'
import TiandiMap from '../../../../components/TianMap/TiandiMap'

export default {
  components: { Pagination, SelectTree, TiandiMap },
  directives: { waves },
  data() {
    return {
      // 播放
      dialogVideo: false,
      dialogVideoHLS: false,
      dialogVideoBack: false,
      dialogVideoAll: false,
      VIDEOURL: '',
      player: {},
      //
      dialogFormMap: false,
      listLoading: true,
      VIDEO_RESOURCES_ID: '',
      add: false,
      del: false,
      edit: false,
      timer: '',
      form: {
        VIDEONAME: '',
        UNITS_USER_ID: '',
        UNIT_USE: '',
        UNITS_ID: ''
      },
      unitsList: [],
      addForm: {
        dialogType: 'add', // 增or改
        dialogVisible: false,
        rules: {
          VIDEONAME: [{ required: true, message: '不可为空', trigger: 'blur' }],
          UNITS_ID: [{ required: true, message: '不可为空', trigger: 'blur' }],
          MODEL: [{ required: true, message: '不可为空', trigger: 'blur' }],
          UNIT_USE: [{ required: true, message: '不可为空', trigger: 'blur' }],
          PERSON: [{ required: true, message: '不可为空', trigger: 'blur' }],
          PHONE: [{ required: true, message: '不可为空', trigger: 'blur' }],
          VIDEOURL: [{ required: true, message: '不可为空', trigger: 'blur' }],
          CODE: [{ required: true, message: '不可为空', trigger: 'blur' }]
        },
        info: {
          VIDEO_RESOURCES_ID: '', // 主键
          UNITS_ID: '', // 所属相关方
          UNIT_USE: '', // 使用单位
          MODEL: '', // 规格型号
          VIDEONAME: '', // 视频名称
          VIDEOURL: '', // 播放路径
          CODE: '', // 摄像头编号
          PHONE: '', // 手机号码
          REMAKE: '', // 在线情况
          PERSON: '' // 负责人
        }
      },
      typeData: [],
      stateData: [
        {
          NAME: '正常',
          BIANMA: 0
        }, {
          NAME: '异常',
          BIANMA: 1
        }
      ],
      varRegionList: [],
      listQuery: {
        page: 1,
        limit: 10
      },
      zdlistQuery: {
        page: 1,
        limit: 10
      },
      ls: [],
      unitsUserList: [],
      dates: [],
      total: 0,
      zdtotal: 0,
      // 树形菜单
      filterText: '',
      visible: false,
      gridData: [],
      varList: [],
      pd: [],
      defaultProps: {
        value: 'id',
        children: 'children',
        label: 'name'
      }
    }
  },
  computed: {

  },
  watch: {
    filterText(val) {
      console.log(val)
      this.$refs.tree.filter(val)
    }
  },
  async created() {
    await this.getUnitsList()
    await this.getList()
  },
  beforeDestroy() {
    console.log('定时器关闭')
    clearInterval(this.timer)
  },
  methods: {
    // 五分钟关闭视频播放页面定时任务
    start() {
      console.log('定时器开启')
      this.timer = setInterval(this.closeVideoStart, (5 * 60 * 1000)) // 5分钟
    },
    over() {
      // 定时器手动关闭
      console.log('定时器自动关闭')
      this.$message.warning('单次播放时长已到5分钟自动关闭')
      clearInterval(this.timer)
    },
    closeVideoStart() {
      this.dialogVideo = false
      this.dialogVideoHLS = false
      this.dialogVideoBack = false
      this.dialogVideoAll = false
      this.over()
    },
    changeSelUid(event) {
      this.unitsUserList = []
      this.form.UNITS_USER_ID = ''
      if (event) {
        // 查询相关方单位的负责人
        this.getUnitUser(event)
      }
    },
    getUnitUser(event) {
      requestFN(
        '/personnelmanagement/listAll',
        {
          UNITS_ID: event
        }
      ).then((data) => {
        this.unitsUserList = data.varList
        this.$forceUpdate()
      }).catch((e) => {
      })
    },
    // 播放
    handleBack() {
      if (this.dialogVideoAll) {
        for (let i = 0; i < this.playerList.length; i++) {
          this.playerList[i].dispose()
        }
        this.dialogVideoAll = false
      }
      if (this.dialogVideoHLS) {
        this.player.dispose()
        this.dialogVideoHLS = false
      }
    },
    back() {
      console.log('手动关闭定时器')
      clearInterval(this.timer)
      if (this.dialogVideo) this.dialogVideo = false
      if (this.dialogVideoBack) this.dialogVideoBack = false
      if (this.dialogVideoAll) {
        this.dialogVideoAll = false
        for (let i = 0; i < this.playerList.length; i++) {
          this.playerList[i].dispose()
        }
      }
      if (this.dialogForm) this.dialogForm = false
      if (this.dialogVideoHLS) {
        this.dialogVideoHLS = false
        this.player.dispose()
      }
    },
    showVideo(row) {
      this.$message.warning('单次播放最多五分钟')
      this.start()
      if (!row.PLATFORMVIDEOMANAGEMENT_ID) {
        this.VIDEOURL = row.VIDEOURL
        this.dialogVideo = true
      } else {
        requestFN(
          '/platformvideomanagement/getHlsPath',
          {
            INDEXCODE: row.INDEXCODE
          }
        ).then((res) => {
          this.dialogVideoHLS = true
          this.$nextTick(() => {
            // eslint-disable-next-line no-undef
            this.player = new Aliplayer({
              'id': 'aLiVideoPlayer',
              'source': res.data.url,
              'width': '100%',
              'height': '500px',
              'autoplay': true,
              'isLive': true,
              'rePlay': false,
              'playsinline': true,
              'preload': true,
              'controlBarVisibility': 'hover',
              'useH5Prism': true
            }, function(player) {
              console.log('The player is created')
            })
          })
        }).catch((e) => {
          this.over()
          this.listLoading = false
        })
      }
    },
    // 播放 end-------------
    getUnitName(e) {
      const unit = this.unitsList.filter(t => {
        return t.UNITS_ID == e.UNITS_ID
      })
      if (unit.length > 0) {
        return unit[0].UNITS_NAME
      } else {
        return ''
      }
    },
    getUnitsList() {
      requestFN(
        '/units/listAll'
      ).then((data) => {
        this.unitsList = data.varList
      }).catch((e) => {
      })
    },
    confirm() {
      this.$refs.addForm.validate(valid => {
        if (valid) {
          requestFN(
            '/videoResources/' + this.addForm.dialogType,
            {
              ...this.addForm.info
            }
          ).then((data) => {
            this.$message.success('保存成功')
            this.getList()
            this.addForm.dialogVisible = false
          }).catch((e) => {
          })
        } else {
          return false
        }
      })
    },
    clickItemCount(row) {
      this.VIDEO_RESOURCES_ID = row.VIDEO_RESOURCES_ID
      this.zdgetList()
    },
    selectable(row, index) {
      return row.ITEM_COUNT == 0
    },
    handleEdit(row) {
      this.resetAddForm()
      this.addForm.info.VIDEO_RESOURCES_ID = row.VIDEO_RESOURCES_ID
      this.addForm.info.CODE = row.CODE
      this.addForm.info.VIDEOURL = row.VIDEOURL
      this.addForm.info.VIDEONAME = row.VIDEONAME
      this.addForm.info.UNITS_ID = row.UNITS_ID
      this.addForm.info.MODEL = row.MODEL
      this.addForm.info.UNIT_USE = row.UNIT_USE
      this.addForm.info.PHONE = row.PHONE
      this.addForm.info.PERSON = row.PERSON
      this.addForm.info.REMAKE = row.REMAKE
      this.addForm.dialogType = 'edit'
      this.addForm.dialogVisible = true
    },
    getRowKey(row) {
      return row.VIDEO_RESOURCES_ID
    },
    // 批量删除
    handleBatchDel(row) {
      const DATA_IDS = []
      if (row.VIDEO_RESOURCES_ID) {
        DATA_IDS.push(row.VIDEO_RESOURCES_ID)
      } else {
        const _selectData = this.$refs.multipleTable.selection
        if (_selectData == null || _selectData.length == 0) {
          this.$message({
            message: '请选中要删除的项...',
            type: 'error'
          })
          return false
        }
        _selectData.forEach(item => {
          DATA_IDS.push(item.VIDEO_RESOURCES_ID)
        })
      }
      this.$confirm('确定要删除吗?', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.listLoading = true
        requestFN(
          '/videoResources/deleteAll',
          {
            DATA_IDS: DATA_IDS.join(',')
          }
        ).then(() => {
          this.$message({
            message: '删除成功',
            type: 'success'
          })
          this.listLoading = false
          this.varList = []
          this.listQuery.page = 1
          this.$refs.multipleTable.clearSelection()
          this.getList()
        }).catch((e) => {
          this.listLoading = false
          this.$refs.multipleTable.clearSelection()
        })
      }).catch(() => {
      })
    },
    // 添加
    handleAdd() {
      this.resetAddForm()
      this.addForm.dialogType = 'add'
      this.addForm.dialogVisible = true
    },
    resetAddForm() {
      this.addForm.info = {
        VIDEO_RESOURCES_ID: '', // 主键
        UNITS_ID: '', // 所属相关方
        MODEL: '', // 规格型号
        UNIT_USE: '', // 使用单位
        VIDEONAME: '', // 视频名称
        VIDEOURL: '', // 播放路径
        CODE: '', // 摄像头编号
        REMAKE: '', // 在线情况
        PHONE: '', // 手机号码
        PERSON: '' // 负责人
      }
    },
    // 搜索
    getQuery() {
      this.getList()
    },
    zdgetList() {
      this.gridData = []
      requestFN(
        '/videoResources/getPageOutSourceBySid?showCount=' + this.zdlistQuery.limit + '&currentPage=' + this.zdlistQuery.page,
        {
          VIDEO_RESOURCES_ID: this.VIDEO_RESOURCES_ID
        }
      ).then((data) => {
        this.listLoading = false
        this.gridData = data.varList
        this.zdtotal = data.page.totalResult
        if (!this.visible) {
          this.visible = true
        }
      }).catch((e) => {
      })
    },
    // 获取列表
    getList() {
      this.listLoading = true
      this.varList = []
      requestFN(
        '/videoResources/list?showCount=' + this.listQuery.limit + '&currentPage=' + this.listQuery.page,
        {
          VIDEONAME: this.form.VIDEONAME,
          PERSONNELMANAGEMENT_ID: this.form.UNITS_USER_ID,
          UNIT_USE: this.form.UNIT_USE,
          UNITS_ID: this.form.UNITS_ID
        }
      ).then((data) => {
        this.listLoading = false
        this.varList = data.varList
        this.total = data.page.totalResult
      }).catch((e) => {
        this.listLoading = false
      })
    },
    goKeyReset() {
      this.form.VIDEONAME = ''
      this.form.UNITS_USER_ID = ''
      this.form.UNIT_USE = ''
      this.form.UNITS_ID = ''
      this.getList()
    }
  }
}
</script>

<style scoped>
.returnBtn {
  float: right;
}

.app-container {
  display: flex; /**/
  align-items: baseline;
}

.rightCont {
  width: 100%
}

#map {
  width: 1000px;
  height: 500px;
}
</style>