<template>
  <div>
    <MOSTY.PageTree :pageTitle="'安全建议列表'" :searchType="'03'" @getDeptId="getdeptId">
      <template #serach>
        <el-divider />
        <MOSTY.Search :searchArr="searchArr" @submit="onSearch" />
      </template>
      <template #table>
        <section class="eltab7">
          <MOSTY.Table :table-columns="tableColumn" :tableData="tableData" :tableloading="tableloading"
            :isSelect="false" :isSort="true" @SortChange="SortChange" style="width: 100%;" :actionsW="300">
            <template #status="{ row }">
              <span v-if="row.status == '0'">--</span>
              <span v-else-if="row.status == '1'" style="color: green">采用</span>
              <span v-else style="color: red">弃用</span>
            </template>
            <template #actions="{ row }">
              <span class="operesee" size="small" @click="onClickBut(row, 'edit')"><el-icon>
                  <EditPen />
                </el-icon>修改</span>
              <el-popconfirm 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" size="small" @click="handlestate(row, '1')">
                <el-icon> <Select /> </el-icon>
                采用
              </span>
              <span class="operesee" size="small" @click="handlestate(row, '2')">
                <el-icon>
                  <CloseBold />
                </el-icon>
                弃用
              </span>
              <!-- <el-popconfirm v-if="['0', '2'].includes(row.status)" confirm-button-text="是" cancel-button-text="否"
                icon-color="red" title="确定要采用?" @confirm="handlestate(row, '1')">
                <template #reference>
                  <span class="operesee" size="small" @click="handlestate(row, '1')">
                    <el-icon> <Select /> </el-icon>
                    采用
                  </span>
                </template>
              </el-popconfirm>
              <el-popconfirm v-if="['0', '1'].includes(row.status)" confirm-button-text="是" cancel-button-text="否"
                icon-color="red" title="确定要弃用?" @confirm="handlestate(row, '2')">
                <template #reference>
                  <span class="operesee" size="small" @click="handlestate(row, '2')">
                    <el-icon>
                      <CloseBold />
                    </el-icon>
                    弃用
                  </span>
                </template>
              </el-popconfirm> -->
            </template>
          </MOSTY.Table>
        </section>
        <div class="fenye">
          <MOSTY.Pages :pageConfiger="pageConfiger" @changeSize="handleSizeChange" @changeNo="handleCurrentChange" />

        </div>
      </template>
    </MOSTY.PageTree>
    <div v-if="showDetail" class="dialog-box">
      <SafetySuggestDetail :title="detailTitle" :detail="aqxyDetail" :type="types" v-model="showDetail" />
    </div>
  </div>
</template>

<script setup>
// 引入
import { getImgUrl } from "@/utils/tools.js"
import SafetySuggestDetail from "./component/safetySuggestDetail";
import { reactive, onMounted, ref, getCurrentInstance } from "vue";
import * as MOSTY from "@/components/MyComponents/index";
import { deleteApi, postApi } from "@/api/tobAcco_api.js";
import { ElMessage, ElMessageBox } from "element-plus";
const { proxy } = getCurrentInstance();
const showDetail = ref(false);//展示详情
const searchArr = reactive([
  {
    showType: "input",
    prop: "jycontent",
    width: '250px',
    placeholder: '请输入建议内容'
  }
]);
const tableloading = ref(false);
const rowid = ref(null);
const types = ref(null)
const bigHeight = ref(); //整个高度
const tableData = ref([]);
// 树的展开与折叠
const iconChange = ref(true);
const lfBoxWid = ref("300px");
const rgBoxWid = ref("calc(100% - 300px)");
const detailTitle = ref("修改安全建议"); //详情标题
const aqxyDetail = ref({});
const listQuery = reactive({
  pageCurrent: 1,
  pageSize: 20,
  jycontent: ""
});
const tableColumn = ref([
  {
    title: "建议内容",
    prop: "jycontent",
    sortable: true
  },
  {
    title: "部门",
    prop: "depname",
    sortable: true
  },
  {
    title: "人员",
    prop: "username",
    sortable: true
  },
  {
    title: "添加时间",
    prop: "addtime",
    sortable: true
  },
  {
    title: "建议回复",
    prop: "pjcontent",
    sortable: true
  },
  {
    title: "状态",
    prop: "status",
    slot: true,
    sortable: true
  },
  {
    title: "操作",
    prop: "actions",
    slot: true
  }
])
const pageConfiger = reactive({
  pageSize: 20,
  pageCurrent: 1,
  total: 0
})
const getdeptId = (val) => {
  listQuery.orgcode = val.id;
  listQuery.pageCurrent = 1;
  pageConfiger.pageCurrent = 1;
  getDataList();
};
//查询
function onSearch(obj) {
  listQuery.pageCurrent = 1;
  pageConfiger.pageCurrent = 1;
  listQuery.jycontent = obj.jycontent;
  getDataList();
}
//刷新
function resetTable(val) {
  rowid.value = null;
  listQuery.orgid = null;
  listQuery.pageSize = 20;
  listQuery.pageCurrent = 1;
  pageConfiger.pageCurrent = 1;
  listQuery.years = new Date().getFullYear().toString();
  getDataList();
}


onMounted(() => {
});
/**
 * 操作点击
 * @param {*} val 对象数据
 * @param {*} type 操作类型
 */
const onClickBut = (val, type) => {
  detailTitle.value = "修改安全建议";
  types.value = '0'
  aqxyDetail.value = val;
  showDetail.value = true
};
function handlestate(params, val) {
  ElMessageBox.prompt('请输入回复内容', val == '1' ? '采用提示' : '弃用提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    inputPattern: /\S/,
    inputErrorMessage: '请输入回复内容',
  }).then(({ value }) => {
    console.log('value: ', value);
    postApi({ id: params.id, status: val, pjcontent: value }, "/mosty-jcgl/suggest/updateSuggestOne").then(res => {
      proxy.$message.success("成功")
      getDataList()
    })
  })
}

//查询安全建议列表
function getDataList() {
  tableloading.value = true;
  postApi(listQuery, "/mosty-jcgl/suggest/querySuggestList")
    .then((res) => {
      if (res.records) {
        tableData.value = res.records;
        pageConfiger.total = res.total;
      }
    })
    .finally(() => {
      tableloading.value = false;
    });
}

//删除
function handledelete(val) {
  postApi({}, `/mosty-jcgl/suggest/removeSuggest/${val.id}`).then((res) => {
    ElMessage.success("删除成功");
    resetTable();
  });
}


//分页
const handleSizeChange = (currentSize) => {
  listQuery.pageSize = currentSize;
  pageConfiger.pageSize = currentSize;
  getDataList();
};
const handleCurrentChange = (currentPage) => {
  listQuery.pageCurrent = currentPage;
  pageConfiger.pageCurrent = currentPage;
  getDataList();
};
</script>

<style lang="scss" scoped>
.btnBox {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-bottom: 12px;
}
</style>
