<template>
  <div>
    <div>
      <label>单据号</label>
      <a-input v-model:value="searchParams.documentNo" class="common" @press-enter="searchChange" />
      <label class="common">单据名称</label>
      <a-input v-model:value="searchParams.documentName" class="common" @press-enter="searchChange" />
      <a-button class="common" type="primary" @click="searchChange">
        查询
      </a-button>
    </div>
    <CommonTable
      :columns="columns"
      :data-source="dataSource"
      :total="total"
      @get-page="getPageParams"
    >
      <template #bodyCell="{ column, record }">
        <template v-if="column.key === 'processed'">
          <span>
            {{
              record.processed === null || record.processed === false
                ? "打开"
                : "关闭"
            }}</span>
        </template>
        <template v-if="column.key === 'operation'">
          <a-button
            v-if="
              record.processed === undefined ||
                record.processed === null ||
                record.processed === false
            "
            type="danger"
            @click="operate(record)"
          >
            关闭
          </a-button>
          <a-button v-if="record.processed === true" type="primary" @click="operate(record)">
            打开
          </a-button>
        </template>
      </template>
    </CommonTable>
    <a-button style="margin-top: 20px" type="primary" @click="previous">
      上一步
    </a-button>
  </div>
</template>
<script setup>
import Common from '../../common/Common';
import { SqlApi, Notify } from 'pc-component-v3';
import { ref, reactive, defineEmits, onMounted, createVNode } from 'vue';
import CommonTable from './CommonTable.vue';
import { Modal } from 'ant-design-vue';
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
import AssetInventoryResource from '../../api/asset/AssetInventoryResource.js';

// 查询参数
const searchParams = reactive({
  documentNo: '',
  documentName: '',
  offset: 0,
  limit: 20,
});

// 表格数据
const columns = reactive(
  [
    {
      title: '单位名称',
      key: 'cname',
      dataIndex: 'cname',
    },
    {
      title: '单据号',
      key: 'documentNo',
      dataIndex: 'documentNo',
      width:200,
    },
    {
      title: '单据名称',
      key: 'name',
      dataIndex: 'name',
      width:200,
    },
    {
      title: '盘点状态',
      key: 'inventoryStatus',
      dataIndex: 'inventoryStatus',
    },
    {
      title: '盘点总数',
      key: 'totalCount',
      dataIndex: 'totalCount',
    },
    {
      title: '已盘点数量',
      key: 'countedQuantity',
      dataIndex: 'countedQuantity',
    },
    {
      title: '状态',
      key: 'processed',
      dataIndex: 'processed',
    },
    {
      title: '操作',
      key: 'operation',
      dataIndex: 'operation',
      fixed:'right',
    },
  ].map(item => ({ ...item, align: 'center' })),
);
const dataSource = ref([]);
const total = ref(0); // 数据总数

// 打开关闭盘点单操作
const operate = record => {
  Modal.confirm({
    title:
      record.processed === null || record.processed === false
        ? '关闭盘点单'
        : '打开盘点单',
    icon: createVNode(ExclamationCircleOutlined),
    content: createVNode(
      'div',
      {
        style: 'color:red;',
      },
      record.processed === null || record.processed === false
        ? `您确定要关闭盘点单：${record.documentNo} 吗？`
        : `您确定要打开盘点单：${record.documentNo} 吗？`,
    ),
    onOk() {
      if (record.processed === null || record.processed === false) {
        AssetInventoryResource.setProcessed(record.id, true);
      } else {
        AssetInventoryResource.setProcessed(record.id, false);
      }
      queryAssetDiscovery();
    },
    class: 'setProcessed',
  });
};

// 查询按钮功能
const searchChange = () => {
  searchParams.offset = 0;
  queryAssetDiscovery();
};

const emits = defineEmits(['previous']);
// const amisWindowNo = '20220516_164216';

// 从子组件获取的分页参数
const getPageParams = (start, length) => {
  searchParams.offset = (start - 1) * length;
  searchParams.limit = length;
  queryAssetDiscovery();
};

onMounted(() => {
  queryAssetDiscovery();
});
// 资产盘点单查询，用于界面设置盘点单状态
const queryAssetDiscovery = () => {
  SqlApi.execute('20220520_145516', searchParams).then(
    successData => {
      if (successData.errorCode === 0) {
        dataSource.value = successData.items;
        total.value = successData.total;
      }
    },
    errorData => {
      Common.processException(errorData);
    },
  );
};

const previous = () => {
  var data = {
    currentStep: 0,
    showPage: 0,
  };
  emits('previous', data);
};
</script>
<style scoped>
input {
  width: 200px;
}
.common {
  margin-left: 8px;
}
</style>