<template>
  <div>
    <!-- 查询 -->
    <div class='tabox'>
      <div class="headBox3">
        <div>
          <el-input placeholder="请输入条件查询" v-model="pageData.listQuery.keyword"
            style='width:250px;margin-right:10px;'></el-input>
          <el-button type="primary" @click="getzblist" class="ml6">
            <el-icon>
              <Search />
            </el-icon>
            <span>查询</span>
          </el-button>
        </div>
        <el-button type="primary" @click="showdialogjzw = true; type = ''" v-if='props.obj.saveBtnShow'>
          <el-icon>
            <Plus />
          </el-icon>
          <span>新增</span>
        </el-button>
      </div>
      <MOSTY.Table :table-columns="pageData.tableColumns" :tableData="pageData.tableData" :tableloading="tableloading"
        :tableHeight="'40vh'">
        <template #zstype="{ row }">
          <dict-tag :options="D_TB_ZSLB" :value="row.zstype" :tag="false" />
        </template>
        <template #files="{ row }">
          <span class="operedown" v-if="row.files" @click="doPreviewqd(row)"><el-icon>
              <Search />
            </el-icon>预览</span>
        </template>
        <template #actions="{ row }">
          <el-popconfirm v-if='props.obj.saveBtnShow' confirm-button-text="是" cancel-button-text="否" icon-color="red"
            title="确定要删除?" @confirm="handledelete(row)">
            <template #reference>
              <span class="operdel" size="small">
                <el-icon>
                  <Delete />
                </el-icon>
                删除</span>
            </template>
          </el-popconfirm>
          <span class="operesee" @click="handleSee(row)">
            <el-icon>
              <View />
            </el-icon>查看</span>
        </template>
        <template #fenye>
          <div class="fenye" :style="{ top: tableHeight + 'px' }">
            <el-pagination class="pagination" @size-change="handleSizeChange" @current-change="handleCurrentChange"
              :current-page="pageData.listQuery.pageCurrent" background :page-sizes="[10, 20, 50, 100]"
              :page-size="pageData.listQuery.pageSize" layout="total,  prev, pager, next, sizes, jumper"
              :total="total"></el-pagination>
          </div>
        </template>
      </MOSTY.Table>
    </div>
  </div>
  <!-- 预览 -->
  <el-dialog v-model="flyldialog" :close-on-click-modal="false" :close-on-press-escape="false" :show-close="false"
    top="10px" bottom="10px" width="1120px">
    <div style="height: 84vh; text-align: center">
      <Kkfile :files="fileid" @changedialog="changedialog" />
    </div>
  </el-dialog>
  <!--特种设备操作人员-->
  <TzsbUserList v-if="showdialogjzw" @changeClose="showdialogjzw = false" :obj="props.obj" :type="type"
    @changeSelectData="changeSelectData" />
</template>
<script setup>
import * as MOSTY from "@/components/MyComponents/index";
import TzsbUserList from "@/components/MyComponents/TabList/TzsbUserList.vue";
import { reactive, ref, onMounted, getCurrentInstance } from "vue"
import Kkfile from "@/components/MyComponents/kkfile/index.vue";
import { getApi, postApi } from "@/api/tobAcco_api.js";
import { ElMessage } from "element-plus";
const emits = defineEmits(["handleChange", 'searchChange']);
const { proxy } = getCurrentInstance();
// 数据
const { D_TB_ZSLB } = proxy.$dict("D_TB_ZSLB");
const props = defineProps({
  obj: {
    default: null,
    type: Object
  },

});
const tableloading = ref(false);
const showdialogjzw = ref(false);
const fileid = ref('')
const flyldialog = ref(false)
const total = ref(0)
const type = ref('')
const formData = ref({
  title: ""
});
const pageData = reactive({

  listQuery: {
    pageCurrent: 1,
    pageSize: 10,
    tzsbid: ''
  },
  tableColumns: [
    {
      title: "姓名",
      prop: "tcperson"
    },
    {
      title: "操作类型名称",
      prop: "zstype",
    },
    {
      title: "操作证编号",
      prop: "tcno",
    },
    {
      title: "证件附件",
      prop: "responsibilitypersonname",
      slot: true
    },
    {
      title: "操作",
      prop: "actions",
      slot: true
    }
  ],
  tableData: []
})
onMounted(() => {
  pageData.listQuery.tzsbid = props.obj.id
  //获取子表
  getzblist()
});
//   预览
const doPreviewqd = (row) => {
  fileid.value = row.files;
  flyldialog.value = true
}
//获取子表
function getzblist() {
  getApi(pageData.listQuery, '/mosty-jcgl/TzsbOperator/queryCertificateByTzsbId').then(res => {
    pageData.tableData = res ? res : [];
  })
}
// 获取选择的类型
const changeSelectData = () => {
  getzblist()
}
//新增
function addUserHander() {
  showdialogjzw.value = true
  tableloading.value = false
}
//修改
function handlexg(row) {
  showdialogjzw.value = true
}
//查看
function handleSee(row) {
  showdialogjzw.value = true
  type.value = 'view'
}
//删除
function handledelete(row) {
  postApi({ certificateIds: [row.id], tzsbId: props.obj.id }, `/mosty-jcgl/TzsbOperator/delTzsbOperator`).then(res => {
    ElMessage.success("删除成功");
    getzblist()
  })
}

const saveSuccess = async (val, obj) => {
  formData.value = {}
  showdialogjzw.value = false
  if (obj) {
    //新增成功不刷新表格直接追加
    pageData.tableData.unshift(obj);
    total.value + 1
  } else {
    //修改不追加，直接刷新
    getzblist()
  }
  emits("searchChange", 'aqzz');
}
//查询
function Searchdata() {
  getzblist()
}
//页码发生变化
const handleCurrentChange = (val) => {
  pageData.listQuery.pageCurrent = val;
  getzblist()
};
//查询条数发生变化
const handleSizeChange = (val) => {
  pageData.listQuery.pageSize = val;
  getzblist()
};
</script>

<style lang="scss" scoped>
.headBox3 {
  display: flex;
  justify-content: flex-end;
  width: 100%;
  margin-bottom: 10px;
}

.top_ul {
  display: flex;
  justify-content: start;
  flex-wrap: wrap;

  >li {
    width: 15%;
    height: 83px;
    margin: 6px 32px;
  }
}
</style>
