<template>
  <div class="form" style="padding-bottom: 60px">
    <van-nav-bar
      :title="$t('forward.name')"
      :left-text="$t('common.back')"
      left-arrow
      @click-left="onClickLeft"
    >
    </van-nav-bar>
    <testForm
      v-model="formData.data"
      :formOption="formOption"
      :formConfig="formConfig"
      :rules="rules"
      @onSubmit="onSubmit"
      @otherBtnClick="otherBtnClick"
      ref="formDom"
    >
      <!-- <template #file>
        <div>aa</div>
      </template> -->
    </testForm>
  </div>
</template>

<script setup>
import { ref, reactive, getCurrentInstance, onMounted } from "vue";
import { showSuccessToast, showFailToast } from "vant";
import { useRoute } from "vue-router";
import testForm from "@/components/testForm/index.vue";
const proxy = getCurrentInstance().proxy;
const route = useRoute();
const formDom = ref(null);
const formData = reactive({
  data: {
    list: [],
  },
});
const rules = {
  receivedUserId: [
    {
      required: true,
      message: proxy.t("forward.pleaseSelectThePersonInCharge"),
    },
  ],
};
const formOption = reactive({
  readonly: false, //用于控制整个表单是否只读
  disabled: false,
  labelAlign: "top",
  scroll: true,
  labelWidth: "62pk",
  submitBtnText: proxy.t("common.submit"),
  otherBtn: true,
  otherBtnText: "退回",
  btnConfig: {
    isNeed: false,
    prop: "list",
    plain: true,
    listTitle: "",
    listConfig: [],
    clickFn: () => {},
  },
});
const formConfig = ref([]);
const getDict = () => {
  proxy.get("/system/user/list?pageNum=1&pageSize=9999").then((res) => {
    formConfig.value[6].data = res.rows.map((item) => {
      return {
        label: item.userName,
        value: item.userId,
      };
    });
  });
};

const onClickLeft = () => history.back();
const onSubmit = () => {
  if (route.query.type === "10") {
    const data = {
      id: formData.data.id,
      receivedUserId: formData.data.receivedUserId,
    };
    proxy.post("/productionTaskDetail/circulation", data).then(
      (res) => {
        setTimeout(() => {
          showSuccessToast(proxy.t("common.operationSuccessful"));
          proxy.$router.push("/main/jxskForward");
        }, 500);
      },
      (err) => {
        return showFailToast(err.message);
      }
    );
  } else {
    proxy
      .post("/productionTaskDetail/productStorage", { id: formData.data.id })
      .then(
        (res) => {
          setTimeout(() => {
            showSuccessToast(proxy.t("common.operationSuccessful"));
            proxy.$router.push("/main/jxskForward");
          }, 500);
        },
        (err) => {
          return showFailToast(err.message);
        }
      );
  }
};

const otherBtnClick = () => {
  showConfirmDialog({
    title: "提示",
    message: "你确定退回当前任务吗？",
  })
    .then(() => {
      proxy
        .post("/productionTaskDetail/revokeTask", { id: formData.data.id })
        .then(
          (res) => {
            proxy.$router.push("/main/jxskReceive");
          },
          (err) => {
            return showFailToast(err.message);
          }
        );
    })
    .catch(() => {
      return;
    });
};

const getDetails = () => {
  proxy.post("/productionTask/detail", { id: route.query.id }).then(
    (res) => {
      console.log(res, "ada");
    },
    (err) => {
      return showFailToast(err.message);
    }
  );
};
const configData = [
  [
    {
      type: "input",
      itemType: "text",
      label: proxy.t("forward.productName"),
      prop: "productName",
      readonly: true,
    },
    {
      type: "input",
      itemType: "text",
      label: proxy.t("forward.productSN"),
      prop: "productSn",
      readonly: true,
    },
    {
      type: "input",
      itemType: "text",
      label: proxy.t("forward.currentProcess"),
      prop: "productionProcessesName",
      readonly: true,
    },
    {
      type: "slot",
      label: proxy.t("forward.processDrawing"),
      slotName: "file",
    },
    {
      type: "title",
      title: proxy.t("forward.name"),
    },
    {
      type: "input",
      itemType: "text",
      label: proxy.t("forward.targetProcess"),
      prop: "nextProductionProcessesName",
      readonly: true,
    },
    // {
    //   type: "picker",
    //   label: proxy.t('forward.personInCharge'),
    //   prop: "receivedUserId",
    //   itemType: "onePicker",
    //   showPicker: false,
    //   fieldNames: {
    //     text: "label",
    //     value: "value",
    //   },
    //   data: [],
    // },
  ],
  [
    {
      type: "input",
      itemType: "text",
      label: proxy.t("forward.productName"),
      prop: "productName",
      readonly: true,
    },
    {
      type: "input",
      itemType: "text",
      label: proxy.t("forward.productSN"),
      prop: "productSn",
      readonly: true,
    },
    {
      type: "input",
      itemType: "text",
      label: proxy.t("forward.currentProcess"),
      prop: "productionProcessesName",
      readonly: true,
    },
    {
      type: "slot",
      label: proxy.t("forward.processDrawing"),
      slotName: "file",
    },
  ],
];
onMounted(() => {
  if (route.query.type === "10") {
    formConfig.value = configData[0];
    formOption.submitBtnText = proxy.t("common.submit");
    // getDict();
  } else {
    formConfig.value = configData[1];
    formOption.submitBtnText = proxy.t("forward.submitStorage");
  }
  formData.data = { ...route.query };
});
</script>
<style lang="scss" scoped>
.row {
  display: flex;
  padding: 5px 10px 0 10px;
  justify-content: space-between;
  align-items: center;
  .title {
    flex: 1;
  }
  .delete {
    width: 20px;
    cursor: pointer;
    text-align: center;
  }
}
</style>