<template>
  <t-table
    size="small"
    row-key="id"
    :columns="columns"
    :data="tableData"
    bordered
    class="mt-10px"
  >
    <template #deviceStatus="{ row }">
      {{ RUNNING_STATUS[row.deviceStatus] }}
    </template>
    <template #status="{ row }">
      {{ DEVICE_SIGN_STATUS[row.status] }}
    </template>
    <template #operate="{ row }">
      <div class="table-operations" @click.stop>
        <t-link
          theme="primary"
          :disabled="row.status != 'DELIVER'"
          hover="color"
          @click="sign(row)"
          >签收</t-link
        >
        <t-link
          theme="primary"
          :disabled="row.status !== 'USING'"
          hover="color"
          @click="notSign(row)"
          >未签收</t-link
        >
        <t-link theme="primary" hover="color" @click="editStatus(row)"
          >设备状态</t-link
        >
      </div>
    </template>
  </t-table>
  <my-dialog
    :visible="showStatusDialog"
    :header="`编辑状态`"
    :width="400"
    :closeOnOverlayClick="false"
    attach="body"
    @close="showStatusDialog = false"
    @confirm="statusConfirm"
  >
    <SearchForm
      :params="statusParams"
      :fields="statusFields"
      :rules="statusRules"
      noBorder
      ref="statusForm"
    ></SearchForm>
  </my-dialog>
</template>
<script name="DeviceManageNewTab1" setup>
import { ref, reactive, onMounted } from 'vue';
import { RUNNING_STATUS, DEVICE_SIGN_STATUS } from '@/config/constants';
import { dictToOptionList } from '@/utils/tool';
import {
  deviceSignListApi,
  deviceSignHandleApi,
  deviceNotSignHandleApi,
  deviceSignStatusEdit,
} from '@/api/sop';
import { useRequest } from 'vue-request';

const props = defineProps({
  sop: {
    type: Object,
    default() {
      return {};
    },
  },
});

const { data: tableData, run, loading } = useRequest(deviceSignListApi);
const fetchData = () => {
  run({ crmNo: props.sop.crmNo });
};
onMounted(() => {
  fetchData();
});

const curRow = ref(null);

const statusForm = ref();
const showStatusDialog = ref(false);
const statusParams = reactive({ deviceStatus: '' });
const statusFields = ref([
  {
    prop: 'deviceStatus',
    label: '选择状态：',
    type: 'select',
    labelWidth: 100,
    colSpan: 24,
    options: dictToOptionList(RUNNING_STATUS),
  },
]);
const statusRules = ref({
  deviceStatus: [{ required: true, message: '请选择设备状态' }],
});
const statusConfirm = async () => {
  const formRef = statusForm.value.formRef;
  const valid = await formRef?.validate();
  if (valid !== true) return;
  //todo
  deviceSignStatusEdit({
    id: curRow.value.id,
    deviceStatus: statusParams.deviceStatus,
  }).then(() => {
    showStatusDialog.value = false;
    fetchData();
  });
};

const sign = (row) => {
  deviceSignHandleApi({ id: row.id }).then(() => {
    fetchData();
  });
};

const notSign = (row) => {
  deviceNotSignHandleApi({ id: row.id }).then(() => {
    fetchData();
  });
};

const editStatus = (row) => {
  curRow.value = row;
  showStatusDialog.value = true;
};
const columns = [
  {
    colKey: 'serial-number',
    title: '序号',
    width: 48,
  },
  { colKey: 'crmNo', title: '派单号' },
  { colKey: 'serialNo', title: '设备序列号' },
  { colKey: 'model', title: '设备型号' },
  { colKey: 'deviceStatus', title: '状态', cell: 'deviceStatus' },
  { colKey: 'supplierName', title: '设备归属' },
  { colKey: 'expressNo', title: '出库快递单号' },
  { colKey: 'status', title: '签收状态', cell: 'status' },
  {
    title: '管理',
    colKey: 'operate',
    fixed: 'right',
    width: 180,
  },
];
</script>
<style lang="less" scoped></style>
