<template>
  <div style="width: 100%; overflow: hidden">
    <el-table ref="multipleTable" :data="dataList.state" style="width: 100%;border: 1px solid #E8E8E8;" >
      <el-table-column label="场景标题" prop="sceneName"></el-table-column>
      <el-table-column label="拍摄日期" prop="createTime"></el-table-column>
      <el-table-column label="状态"  v-slot:default="{ row }">
        <span>{{row.hasSynchronized ? '已同步' : '未同步'}}</span>
      </el-table-column>
      <el-table-column label="操作" prop="auditRemark"  v-slot:default="{ row }">
        <span class="oper-span" :class="{disable: row.hasSynchronized}" @click="row.hasSynchronized || async(row)">同步</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"
      :hide-sizes="true"
      :csizes="[8]"
      layout="total, prev, pager, next, jumper"
      :total="pag.state.total"/>
  </div>
  <p class="remak">注：同步场景是指将拍摄的场景手动同步到火调平台</p>
</template>

<script>
import getTableState from '@/state/tableRef'
import { getSceneListByCamera, asyncScene } from '@/request/config'
import comPagination from "@/components/pagination";
import axios from 'axios'

export default {
  props: ['show', 'data'],
  setup(props) {
    console.log(props.data)
    const state = getTableState({
      getUrl: getSceneListByCamera,
      searchAttr: { cameraSn: props.data }
    })
    state.pag.value.sizeChange(8)
    return { ...state }
  },
  methods: {
    async async(data) {
      try {
        await axios.post(asyncScene, {sceneNums: data.num})

        this.$message({
          message: data.sceneName + '同步成功',
          type: 'success'
        });
        data.hasSynchronized = true
      } catch {
        this.$message.error(data.sceneName + '同步失败');
      }
    }
  },
  components: {
    "com-pagination": comPagination
  }
}
</script>

<style lang="scss" scoped>
.remark {
  max-height: 100px;
  overflow-y: auto;
}

.async {
  color: #26559B;
  cursor: pointer;
}

.remak {
  font-size: 14px;
  color: #969799;
  line-height: 19px;
  margin-top: 17px;
}
</style>