<template>
  <div class="cgMessage pagePadding">
    <div class="box" v-if="powers.some((i) => i == '001')">
      <el-collapse v-model="activeNames" style="margin: -18px 0 0 0">
        <el-collapse-item title="采购单信息" name="1" v-if="sitem">
          <show-data-table
            :newTime="newTime"
            v-if="newTime !== ''"
            :sitem="sitem"
            :columns="ShowDataTableColumns"
          >
            <template slot="supplier_name">
              <span>{{ sitem.supplier_name }}</span>
              <el-popover placement="top" width="300" trigger="hover">
                <ul>
                  <li>
                    <span>销售方公司编号：</span><span>{{ sitem.supplierNo }}</span>
                  </li>
                </ul>
                <i class="el-icon-warning-outline fr" slot="reference"></i>
              </el-popover>
            </template>
            <template slot="company">
              <span>{{ sitem.company }}</span>
              <el-popover placement="top" width="300" trigger="hover">
                <ul>
                  <li>
                    <span>购买方公司编号：</span><span>{{ sitem.companyNo }}</span>
                  </li>
                </ul>
                <i class="el-icon-warning-outline fr" slot="reference"></i>
              </el-popover>
            </template>

            <template slot="status">
              <el-tag
                :size="'mini'"
                :type="sitem.status == '0' ? 'warning' : ''"
                v-text="
                  (statusOptions.find((i) => i.value == sitem.status) || {}).label || '--'
                "
              ></el-tag>
            </template>
            <template slot="order_type">
              <el-tag
                :size="'mini'"
                v-text="
                  (cg_order_type_options.find((i) => i.id == sitem.order_type) || {})
                    .label || '--'
                "
              ></el-tag>
              <el-popover
                placement="top"
                width="300"
                v-if="sitem.order_type === '1'"
                trigger="hover"
              >
                <ul>
                  <li>
                    <span>备库单编号：</span><span>{{ sitem.bkcode }}</span>
                  </li>
                </ul>
                <i class="el-icon-warning-outline fr" slot="reference"></i>
              </el-popover>
            </template>

            <template slot="wsm">
              <span>{{ sitem.wsm_supplier }}/{{ sitem.wsm_name }}</span>
              <el-popover placement="top" width="300" trigger="hover">
                <ul>
                  <li>
                    <span>仓库公司编号：</span><span>{{ sitem.wsm_supplierNo }}</span>
                  </li>
                  <li>
                    <span>仓库名称编号：</span><span>{{ sitem.wsm_code }}</span>
                  </li>
                </ul>
                <i class="el-icon-warning-outline fr" slot="reference"></i>
              </el-popover>
            </template>
          </show-data-table>
        </el-collapse-item>
        <el-collapse-item title="商品信息" name="2" v-if="sitem">
          <show-goods-data-table
            :newTime="newTime"
            v-if="newTime !== ''"
            :type="sitem.order_type"
            :skucode="sitem.skuCode"
            :spucode="sitem.spuCode"
            :iscgd="true"
          />
        </el-collapse-item>
        <el-collapse-item title="修改信息" name="3">
          <el-row>
            <el-col :span="19">
              <el-form
                ref="ruleForm"
                :model="ruleForm"
                status-icon
                :size="'mini'"
                :rules="rulesThis"
                label-width="130px"
                class="demo-ruleForm"
              >
                <el-row>
                  <el-col :span="10">
                    <el-form-item label="采购单编号: " prop="cgdNo">
                      <el-input
                        v-model="ruleForm.cgdNo"
                        readonly
                        placeholder="请选择采购单"
                        @click.native="centerDialogVisible = true"
                      ></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="14">
                    <el-form-item
                      label="采购单销售方公司: "
                      prop="supplierNo"
                      label-width="150px"
                    >
                      <search-supplier
                        :size="searchSize"
                        :value="ruleForm.supplierNo"
                        :placeholder="'采购单销售方公司'"
                        :disabled="ruleForm.cgdNo === ''"
                        :names="supplier_name"
                        :isDetail="true"
                        @searchChange="supplierChange"
                      />
                    </el-form-item>
                  </el-col>

                  <el-col :span="14" v-show="order_type + '' == '1'">
                    <el-form-item label="采购单仓库信息: " prop="wsm_supplierNo">
                      <search-supplier
                        :size="searchSize"
                        :value="ruleForm.wsm_supplierNo"
                        :placeholder="'仓库供应商公司'"
                        :disabled="false"
                        :names="wsm_supplier"
                        :isDetail="true"
                        @searchChange="wsm_supplierChange"
                      />
                    </el-form-item>
                  </el-col>
                  <el-col :span="10" v-show="order_type + '' == '1'">
                    <el-form-item prop="wsm_code" label-width="10px">
                      <search-stock
                        :size="'mini'"
                        :disabled="ruleForm.wsm_supplierNo.length === 0"
                        :value="ruleForm.wsm_code"
                        :placeholder="'仓库名称'"
                        :isRelation="true"
                        :isDetail="true"
                        :wsmtype="'5'"
                        :companyNo="sitem && sitem.companyNo ? sitem.companyNo : ''"
                        :companyCode="wsm_supplierNo"
                        :names="wsm_name"
                        @searchChange="stockChange"
                      />
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-form>
            </el-col>
            <el-col :span="5" class="tr">
              <el-button
                type="primary"
                size="mini"
                class="fr"
                style="margin: 0 0 0 15px"
                @click="editSubmit"
                >提交修改</el-button
              >
            </el-col>
          </el-row>
        </el-collapse-item>
      </el-collapse>
      <add-edit
        :showModel="centerDialogVisible"
        @refresh="refresh"
        @cancel="centerDialogVisible = false"
      />
    </div>
    <div v-else>
      <no-auth></no-auth>
    </div>
  </div>
</template>

<script>
import asyncRequest from "@/apis/service/dataCorrection/cgMessage";
import { mapGetters } from "vuex";
import resToken from "@/mixins/resToken";
import addEdit from "./addEdit.vue";
import { statusOptions, ShowDataTableColumns } from "./columns";
import { cg_order_type_options } from "@/assets/js/statusList";
export default {
  mixins: [resToken],
  components: {
    addEdit,
  },
  computed: {
    ...mapGetters(["tablebtnSize", "searchSize", "size"]),
    powers() {
      const tran =
        this.$store.getters.btnList.find((i) => i.menu_route == "cgMessage") || {};
      const { action } = tran ?? {};
      return action ?? [];
    },
  },
  data() {
    return {
      //弹窗显隐
      centerDialogVisible: false,
      ruleForm: {
        cgdNo: "",
        supplierNo: [],
        wsm_supplierNo: [],
        wsm_code: [],
      },
      rules: {
        cgdNo: [{ required: true, message: "请选择采购单", trigger: "blur" }],
        supplierNo: [
          {
            message: "请选择采购单销售方公司",
            required: true,
            type: "array",
            trigger: "blur",
          },
        ],
        wsm_supplierNo: [
          {
            message: "请选择仓库供应商公司",
            required: true,
            type: "array",
            trigger: "blur",
          },
        ],
        wsm_code: [
          {
            message: "请选择仓库",
            required: true,
            type: "array",
            trigger: "blur",
          },
        ],
      },
      rulesThis: this.rules,

      wsm_supplier: "",
      wsm_supplierNo: "",
      wsm_name: "",
      wsm_code: "",
      supplierNo: "",
      supplier_name: "",
      order_type: "",
      activeNames: ["0", "1", "2", "3", "4", "5", "10"],
      sitem: null,
      select: "1",
      input: "",
      timeOBJ: {
        start: "", //起始时间
        end: "", // 结束时间
      },
      options: ["创建时间", "最晚入库时间"],
      sselect: "创建时间",
      // 状态
      statusOptions: statusOptions,
      ShowDataTableColumns: ShowDataTableColumns,
      cg_order_type_options,

      loading: false,
      showModel: false,
    };
  },
  mounted() {
    this.initForm();
  },

  methods: {
    async initForm() {
      this.loading = true;
      this.rulesThis = this.rules;
      await this.resetForm();
      this.loading = false;
    },
    async resetForm() {
      // 重置
      await this.$nextTick(() => {
        if (this.$refs.ruleForm) {
          this.$refs.ruleForm.resetFields();
          this.$refs.ruleForm.clearValidate();
          this.sitem = null;
          this.order_type = "";
          this.ruleForm = {
            cgdNo: "",
            supplierNo: [],
            wsm_supplierNo: [],
            wsm_code: [],
          };
        }
      });
    },

    //确认修改提交
    async editSubmit() {
      await this.$refs.ruleForm.validate(async (valid) => {
        if (valid) {
          if (!this.loading) {
            this.loading = true;
            let model = JSON.parse(JSON.stringify(this.ruleForm));
            model.supplierNo = model.supplierNo.toString();
            model.wsm_supplierNo = model.wsm_supplierNo.toString();
            model.wsm_code = model.wsm_code.toString();
            const { code, data, message } = await asyncRequest.cgdeditnew(model);

            if (code === 0) {
              this.$notify.success({
                title: "提交成功！",
                message: "",
              });
              this.loading = false;
              await this.routeReGoto("cgMessageList", {});
            } else if (code >= 100 && code <= 104) {
              await this.logout();
            } else {
              this.$message.warning(message);
            }
            this.loading = false;
          }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },

    async supplierChange(e) {
      const { code, label } = e;
      this.supplier_name = label || "";
      this.supplierNo = code || "";
      this.ruleForm.supplierNo = code ? [code] : [];
      this.$refs.ruleForm.validateField("supplierNo");
    },
    async wsm_supplierChange(e) {
      const { code, label } = e;
      this.wsm_supplier = label || "";
      this.wsm_supplierNo = code || "";
      this.ruleForm.wsm_supplierNo = code ? [code] : [];
      this.$refs.ruleForm.validateField("wsm_supplierNo");
      this.wsm_name = "";
      this.wsm_code = "";
      this.ruleForm.wsm_code = [];
      this.$refs.ruleForm.validateField("wsm_code");
    },
    async stockChange(e) {
      const { code, label } = e;
      this.wsm_name = label || "";
      this.wsm_code = code || "";
      this.ruleForm.wsm_code = code ? [code] : [];
      this.$refs.ruleForm.validateField("wsm_code");
    },

    async initData() {
      const { cgdNo } = this.ruleForm;
      if (cgdNo) {
        this.loading = true;

        const { code, data, message } = await asyncRequest.detail({
          cgdNo: cgdNo,
        });
        if (code === 0) {
          this.sitem = data;
          const { can } = this.sitem;
          if (can && can.length > 0) {
            this.sitem.class_cat = "";
            can.forEach((x, i) => {
              this.sitem.class_cat += i === 0 ? x.name : "/" + x.name;
            });
          }
          const {
            wsm_supplier,
            wsm_supplierNo,
            wsm_name,
            wsm_code,
            supplierNo,
            supplier_name,
            order_type,
          } = this.sitem;
          this.order_type = order_type || "";

          this.supplierNo = supplierNo || "";
          this.supplier_name = supplier_name || "";
          this.ruleForm.supplierNo = supplierNo ? [supplierNo] : [];
          if (this.order_type === "1") {
            this.wsm_supplier = wsm_supplier || "";
            this.wsm_supplierNo = wsm_supplierNo || "";
            this.ruleForm.wsm_supplierNo = wsm_supplierNo ? [wsm_supplierNo] : [];
            this.wsm_name = wsm_name || "";
            this.wsm_code = wsm_code || "";
            this.ruleForm.wsm_code = wsm_code ? [wsm_code] : [];
          }
          this.rulesThis.wsm_supplierNo[0].required = this.order_type + "" === "1";
          this.rulesThis.wsm_code[0].required = this.order_type + "" === "1";
          this.getNewTime();
        } else if (code >= 100 && code <= 104) {
          await this.logout();
        } else {
          this.$message.warning(message);
        }
        this.loading = false;
      }
    },
    refresh(e) {
      this.centerDialogVisible = false;
      this.ruleForm.cgdNo = e;
      this.$refs.ruleForm.validateField("cgdNo");
      this.initData();
    },
    getNewTime() {
      this.newTime = new Date().valueOf();
    },
  },
};
</script>

<style lang="scss" scoped></style>
