<template>
  <div>
    <MOSTY.PageTree :pageTitle="'食堂留样记录列表'" :searchType="'01'" @getDeptId="getdeptId">
      <template #serach>
        <el-divider />
        <Search :searchArr="searchArr" @submit="onSearch">
        </Search>
        <el-divider />
        <div class="btnBox">
          <el-button type="primary" @click="export2Excel" v-loading="loadingShow">
            <el-icon>
              <Download />
            </el-icon>
            <span>导出表格</span>
          </el-button>
        </div>
      </template>
      <template #table>

        <section class="eltab9">
          <MOSTY.Table :table-columns="tableColumn" :tableData="tableData" :tableloading="tableloading"
            :isSelect="false" :isSort="false" @SortChange="SortChange" style="width: 100%;">
            <template #type="{ row }">
              <dict-tag :options="D_TB_STLYLB" :value="row.type" :tag="false" />
            </template>
            <template #sfxh="{ row }">
              <dict-tag :options="D_BZ_SF" :value="row.sfxh" :tag="false" />
            </template>
            <template #actions="{ row }">
              <span class="operesee" @click="handleSee(row)" size="small"><el-icon>
                  <View />
                </el-icon>查看</span>
            </template>
          </MOSTY.Table>
        </section>
        <div class="fenye">
          <Pages :pageConfiger="pageConfiger" @changeSize="handleSizeChange" @changeNo="handleCurrentChange">
          </Pages>
        </div>
      </template>
    </MOSTY.PageTree>
    <!-- 新增 -->
    <div v-if="comprehensiveShow" class="dialog-box">
      <Stlyxq v-if="comprehensiveShow" :saveBtnShow="saveBtnShow" :editObj="editObj" @close="close"
        :title="editObj.title" />
    </div>

  </div>
</template>

<script setup>
// 引入
import { reactive, onMounted, ref, getCurrentInstance } from "vue";
import { filterYear } from "@/utils/auth.js";
import { getItem } from "@/utils/storage";
import { ElMessage } from "element-plus";
import Search from "@/components/aboutTable/Search/index.vue";
import Pages from "@/components/aboutTable/Pages/index.vue";
import { postApi } from "@/api/tobAcco_api.js";
import * as MOSTY from "@/components/MyComponents/index";
import Stlyxq from "./commonds/stlyxq.vue";
const { proxy } = getCurrentInstance();
import { exportXlsx } from "@/excel/Export2Excel.js";
// 数据
const { D_TB_STLYLB, D_BZ_SF } = proxy.$dict("D_TB_STLYLB", "D_BZ_SF");
const comprehensiveShow = ref(false);
const loadingShow = ref(false);
const editObj = reactive({
  deptname: "",
  id: null,
  title: "",
  savebtn: true,
  editObj: {}
});
const searchArr = reactive([
  {
    showType: "input",
    prop: "sampleusername",
    width: '250px',
    placeholder: '请输入留样人名称进行查询'
  },
  {
    showType: "select",
    prop: "year",
    width: '250px',
    defaultVal: new Date().getFullYear(),
    options: filterYear(7),
  }
]);
const tableColumn = ref([
  {
    title: "场所名称",
    prop: "placename",
  },
  {
    title: "监督人",
    prop: "jdrxm"
  },
  {
    title: "餐次",
    prop: "type",
    slot: true
  },
  {
    title: "留样人",
    prop: "sampleusername"
  },
  {
    title: "留样时间",
    prop: "sampletime",
  },
  {
    title: "所属单位",
    prop: "orgname"
  },
  {
    title: "是否销毁",
    prop: "sfxh",
    slot: true
  },
  {
    title: "操作",
    prop: "actions",
    slot: true
  }
])
const pageConfiger = reactive({
  pageSize: 20,
  pageCurrent: 1,
  total: 0
})
const tableData = ref([]);
// 分页查询条件
const listQuery = reactive({
  pageCurrent: 1,
  pageSize: 20,
  orgcode: "",
  year: new Date().getFullYear(),
  pxxm: ""
});
const total = ref(0);
//获取部门数据
const getdeptId = (val) => {
  listQuery.orgcode = val.id;
  listQuery.pageCurrent = 1;
  pageConfiger.pageCurrent = 1;
  getListData();
};
onMounted(() => {

});
// 选择框
const onSearch = (obj) => {
  listQuery.pageCurrent = 1;
  pageConfiger.pageCurrent = 1;
  listQuery.sampleusername = obj.sampleusername;
  listQuery.year = obj.year;
  getListData();
};

//导出表格
const export2Excel = () => {
  loadingShow.value = true
  let title = {
    placename: '场所名称',
    jdrxm: '监督人',
    type: '餐次',
    sampleusername: '留样人',
    sampletime: '留样时间',
    orgname: '所属单位',
    sfxh: '是否销毁',
  }
  const params = {
    pageCurrent: 1,
    pageSize: 10999,
    orgcode: listQuery.orgcode
  };
  postApi(params, '/mosty-jcgl/canteenSample/exportData').then((res) => {
    if (res) {
      let data = res
      if (data) {
        for (let i = 0; i < data.length; i++) {
          data[i].type = proxy.$getDictVal(data[i].type, D_TB_STLYLB);
          data[i].sfxh = data[i].sfxh == '0' ? '未销毁' : '已销毁'
        }
        let tablename = '食堂留样清单.xlsx'
        exportXlsx(title, data, '食堂留样清单', tablename);
      }
    }
  }).finally(() => {
    loadingShow.value = false
  })
};
// 获取表格数据
const tableloading = ref(false);
function getListData() {
  tableloading.value = true;
  editObj.deptname = getItem("deptId").ssbmid;
  postApi(listQuery, `/mosty-jcgl/canteenSample/queryCanteenSample`).then(
    (res) => {
      if (res.records) {
        tableloading.value = false;
        tableData.value = res.records;
        pageConfiger.total = res.total;
      } else {
        tableData.value = [];
        tableloading.value = false;
      }
    }
  ).finally(() => {
    tableloading.value = false;
  });
}

//弹窗关闭
const close = () => {
  comprehensiveShow.value = false;
  getListData();
};

const saveBtnShow = ref(true);
//详情
function handleSee(row) {
  editObj.title = "食堂留样详情";
  editObj.id = row.id;
  saveBtnShow.value = false;
  comprehensiveShow.value = true;

}

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

</script>

<style lang="scss" scoped>
.from_box {
  display: flex;
  justify-content: space-between;

  .from_left {
    width: 25%;
  }
}

.el-form {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}

.bigBox {
  display: flex;

  .zy-right {
    margin-left: 14px;
    background: #fff;


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