<template>
  <com-head :options="headList" showCtrl>
    <el-form label-width="84px" inline="true">
      <el-form-item label="项目编号：">
        <el-input v-model="search.state.snCode" placeholder="请输入"></el-input>
      </el-form-item>
      <el-form-item label="起火对象：">
        <el-input v-model="search.state.searchKey" placeholder="请输入"></el-input>
      </el-form-item>
      <el-form-item label="起火场所：">
        <el-select v-model="search.state.snCode" placeholder="起火场所：">
          <el-option label="区域一" value="shanghai"></el-option>
          <el-option label="区域二" value="beijing"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="承办单位：">
        <el-select v-model="search.state.searchKey" placeholder="承办单位：">
          <el-option label="区域一" value="shanghai"></el-option>
          <el-option label="区域二" value="beijing"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="事故日期：">
        <el-date-picker type="date" v-model="search.state.snCode" style="width: 100%"></el-date-picker>
      </el-form-item>
      <el-form-item class="searh-btns" style="grid-area:1/4/2/5">
        <el-button type="primary" @click="search.submit">查询</el-button>
        <el-button type="primary" plain @click="search.reset">重置</el-button>
      </el-form-item>
    </el-form>
  </com-head>
  <div class="body-layer">
    <div class="body-head">
      <h3>项目列表</h3>
      <div class="table-ctrl-right">
        <el-button
          type="primary"
          @click="revokeTeaching"
          >撤销教学</el-button>
      </div>
    </div>
    <el-table
      ref="multipleTable"
      :data="dataList.state"
      tooltip-effect="dark"
      style="width: 100%;max-height:500px;"
      @row-click="dataList.selectRow"
    >
      <el-table-column type="selection" width="50"></el-table-column>
      <el-table-column label="序号" width="50" v-slot:default="{ $index }">
        <div style="text-align: center">{{ $index + 1 }}</div>
      </el-table-column>
      <el-table-column label="项目编号" prop="snCode"></el-table-column>
      <el-table-column label="起火对象" prop="departmentName"></el-table-column>
      <el-table-column label="起火地址" prop="departmentName"></el-table-column>
      <el-table-column label="起火场所" prop="sceneCount"></el-table-column>
      <el-table-column label="承办单位" prop="sceneCount"></el-table-column>
      <el-table-column label="事故日期" prop="lastTime"></el-table-column>
      <el-table-column label="火灾原因" prop="sceneCount"></el-table-column>
      <el-table-column label="项目状态" prop="sceneCount"></el-table-column>
      <el-table-column label="操作" v-slot:default="{ row }" width="250">
        <span class="oper-span" @click="oper.readyUpdate(row)" v-power="'view'">详情</span>
        <span class="oper-span" @click="archivesHandle(row)" v-power="'readFile'">档案</span>
        <span class="oper-span" @click="queryScene(row)">场景</span>
        <span class="oper-span disable" @click="leaveMsgHandle(row)">留言</span>
        <span class="oper-span" 
          @click="revokeTeaching(row)" 
          style="color: var(--primaryColor)">
         撤销
        </span>
      </el-table-column>
    </el-table>

    <com-pagination
      @size-change="pag.sizeChange"
      @current-change="pag.currentChange"
      :current-page="pag.state.currPage"
      :page-size="pag.state.size"
      layout="total, sizes, prev, pager, next, jumper"
      :total="pag.state.total"/>
  </div>
  
  <com-archives v-if="showArchives.show" v-model:show="showArchives.show" :data="showArchives.id" />
  <com-leave-msg v-if="showLeaveMsg.show" v-model:show="showLeaveMsg.show" :data="showLeaveMsg.id" />
  
</template>

<script>
import { ref, watch } from "vue";
import getTableState from "@/state/tableRef";
import auth from "@/state/viewAuth";
import comPagination from "@/components/pagination";
import comHead from "@/components/head";
import comArchives from "../dispatch/archives";
import comLeaveMsg from "./leaveMsg";
import { dateFormat } from '@/util'
import {
  getCameraList,
  insertCamera,
  updateCamera,
  deleteCamera,
} from '@/request/config'

export default {
  name: 'camera',
  setup() {
    const state = getTableState({
      updateUrl: updateCamera,
      insertUrl: insertCamera,
      getUrl: getCameraList,
      delUrl: deleteCamera,
      searchAttr: { startTime: "", endTime: '', deptId: '', snCode: '' },
      operAttr: {
        wifiName: '',
        snCode: '',
        childName: '',
        deptId: '',
      },
      pagAttr: {totalNum: 'total'},
      delMsg: '解绑相机，该相机拍摄的场景也将一并解绑（场景在云端存储，不会删除）确定要解绑吗？'
    });
    const headList = ref([{ name: "教学平台", value: 2 }]);
    const types = ref([{ name: "我的相机", value: 2 }])
    const time = ref(null)
    const showArchives = ref({show: false, data: 0})
    const showLeaveMsg = ref({show: false, data: 0})
    
    const share = ref({show: false, data: 0})
    

    watch(time, () => {
      if (time.value) {
        state.search.value.state.startTime = dateFormat(new Date(time.value[0]), 'yyyy-MM-dd hh:mm:ss')
        state.search.value.state.endTime = dateFormat(new Date(time.value[1]), 'yyyy-MM-dd 23:59:59')
      } else {
        state.search.value.state.startTime = state.search.value.state.endTime = ''
      }
    })
    watch(
      [() => state.search.value.state.startTime, () => state.search.value.state.endTime],
      () => {
        if (!state.search.value.state.startTime || !state.search.value.state.endTime) {
          time.value = null
        }
      }
    )

    return { ...state, headList, time, auth, types, showArchives, share, showLeaveMsg };
  },
  methods: {
    archivesHandle(row) {
      this.showArchives.data = row.id
      this.showArchives.show = true
    },
    leaveMsgHandle(row) {
      this.showLeaveMsg.data = row.id
      this.showLeaveMsg.show = true
    },
    async revokeTeaching() {
      if (await this.$confirm('撤销教学，火调项目将不再显示在教学平台。（火调项目不会删除）', '撤销教学')) {
        console.log('yes')
      }
    },
    queryScene(item) {
      if (!item.scene) {
        return this.$message.error('当前火调项目暂未录入场景链接', '提示')
      }
    },
    shareHandle(item) {
      this.share.show = true
      this.share.data = item
    }
  },
  components: {
    "com-leave-msg": comLeaveMsg,
    "com-head": comHead,
    "com-pagination": comPagination,
    "com-archives": comArchives,
  },
};
</script>

<style lang="scss" scoped>
.table-ctrl-right {
  .search-scene {
    margin: 0 20px 0 26px;
  }
  i {
    margin-left: 20px;
    font-size: 1.7rem;
    vertical-align: middle;
    cursor: pointer;

    &.active {
      color: var(--primaryColor);
    }
  }
}

.camera-from {
  margin: 0 50px;
}
.share-from {
  width: 500px;
  margin: 0 auto;
}
.maker {
  font-weight: 400;
  color: #969799;
  line-height: 20px;
}

</style>

<style>
.dispatch-file-from .el-select {
  width: 100%;
}
</style>