<template>
  <div class="good_detail">
    <show-data-table
      :newTime="newTime"
      v-if="newTime !== ''"
      :sitem="sitem"
      :columns="public_listCol"
    >
      <template slot="good_name">
        <img
          v-viewer
          style="width: 23px; height: 23px; margin: 0 5px 0 0"
          class="fl"
          v-if="sitem.good_thumb_img"
          :src="sitem.good_thumb_img"
          alt=""
        />
        <span>{{ sitem.good_name }}</span>
        <span v-for="(si, i) in sitem.speclist" :key="si.spec_id + i">
          <span v-if="i !== 0">-</span>
          <span v-else>_</span>
          <span>{{ si.spec_name }}[{{ si.spec_value }}]</span>
        </span>
        <el-popover placement="top" width="300" trigger="hover">
          <ul>
            <li>
              <span>上线商品编号：</span><span>{{ sitem.skuCode }}</span>
            </li>
            <li
              v-if="
                newTime !== '' &&
                private_field &&
                private_field.length > 0 &&
                private_field.some((item) => item == '1')
              "
            >
              <span>成本商品编号：</span><span>{{ sitem.spuCode }}</span>
            </li>
            <li>
              <span>平台商品编码：</span><span>{{ sitem.plat_code }}</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="good_info_img">
        <img
          class="fl"
          style="width: 23px; height: 23px; margin: 0 5px 0 0"
          v-viewer
          v-for="(si, i) in sitem.good_info_img"
          :src="si"
          :key="si + i"
        />
      </template>
      <template slot="exclusive">
        <span v-for="(si, sii) in sitem.exclusive" :key="si.id">
          <span v-if="sii !== 0">/</span> <span>{{ si.name }}</span>
        </span>
      </template>
      <template slot="supply_area">
        <el-tag
          :size="'mini'"
          v-text="
            (options6.find((item) => item.id == sitem.supply_area) || {}).name || '--'
          "
        />
      </template>
      <template slot="is_stock">
        <el-tag
          :size="'mini'"
          v-text="(options4.find((item) => item.id == sitem.is_stock) || {}).name || '--'"
        />
      </template>
      <template slot="exam_status">
        <el-tag
          :size="'mini'"
          v-text="
            (options8.find((item) => item.id == sitem.exam_status) || {}).name || '--'
          "
        />
      </template>
      <template slot="good_type">
        <el-tag
          :size="'mini'"
          v-text="
            (options1.find((item) => item.id == sitem.good_type) || {}).name || '--'
          "
        />
        <span v-if="sitem.good_type === '1'" style="padding: 0 0 0 5px"
          >{{ sitem.moq }}起订/工期{{ sitem.customized }}天</span
        >
      </template>
      <template slot="noble">
        <span v-if="sitem.noble_metal"
          >{{ sitem.noble_weight ? sitem.noble_weight : "0" }}g-{{ sitem.noble_name }}-{{
            sitem.gold_price ? sitem.gold_price : "0"
          }}元/g-{{ sitem.is_gold_price === "0" ? "不" : "" }}启用实时金价-{{
            sitem.is_diff === "1" ? "有" : "无"
          }}工差-{{ sitem.config }}-{{ sitem.other_config }}</span
        >
      </template>
    </show-data-table>
    <show-data-table
      :newTime="newTime"
      v-if="
        newTime !== '' &&
        private_field &&
        private_field.length > 0 &&
        private_field.some((item) => item == '1')
      "
      :sitem="sitem"
      :columns="purchase_listCol"
    >
      <template slot="supplierName">
        <span>{{ sitem.supplierName }}</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="is_auth">
        <el-tag
          :size="'mini'"
          v-text="(options3.find((item) => item.id == sitem.is_auth) || {}).name || '--'"
        />
      </template>

      <template slot="is_step">
        <el-tag
          :size="'mini'"
          v-text="(options7.find((item) => item.id == sitem.is_step) || {}).name || '--'"
        />
      </template>

      <template slot="nakelist">
        <div v-if="nakelist">
          <el-table
            :data="nakelist"
            :size="'mini'"
            border
            stripe
            style="width: 99%; margin: 10px 10px 10px 0"
          >
            <el-table-column prop="min_num" label="起订量(>=)" />
            <el-table-column prop="nake_fee" label="成本单价" />
            <el-table-column prop="cost_fee" label="工艺费" />
            <el-table-column prop="delivery_fee" label="物流费" />
            <el-table-column prop="cert_fee" label="证书费" />
            <el-table-column prop="mark_fee" label="加标费" />
            <el-table-column prop="package_fee" label="包装费" />
            <el-table-column prop="other_fee" label="其他费用" />
            <el-table-column prop="nake_total" label="成本合计" />
          </el-table>
        </div>
        <div v-else>--</div>
      </template>
    </show-data-table>

    <show-data-table
      :newTime="newTime"
      v-if="
        newTime !== '' &&
        private_field &&
        private_field.length > 0 &&
        private_field.some((item) => item == '2') &&
        nakelist &&
        nakelist.length > 0 &&
        status !== '0'
      "
      :sitem="sitem"
      :columns="sale_listCol"
    >
      <template slot="yz_cat_info">
        <span v-for="(si, sii) in sitem.yz_cat_info" :key="si.yz_cat_id">
          <span v-if="sii !== 0">/</span> <span>{{ si.yz_cat_name }}</span>
        </span>
      </template>
      <template slot="is_support_barter">
        <el-tag
          :size="'mini'"
          v-text="
            (
              is_support_barter_list.find(
                (item) => item.value == sitem.is_support_barter
              ) || {}
            ).label || '--'
          "
        />
      </template>
      <template slot="nakelist">
        <el-table
          :data="nakelist"
          :size="'mini'"
          border
          stripe
          style="width: 99%; margin: 10px 10px 10px 0"
        >
          <el-table-column label="系统阶梯" width="80px">
            <template slot-scope="scope">
              <i
                v-if="sitem.good_ladder_id === scope.row.id"
                class="el-icon-check"
                style="color: #1890ff; font-size: 16px; font-weight: bolder"
              /> </template
          ></el-table-column>
          <el-table-column prop="min_num" label="采购起订量" />
          <el-table-column label="销售">
            <el-table-column prop="start_sale_num" label="起订量">
              <template slot-scope="scope">
                <span v-if="sitem.good_ladder_id === scope.row.id">
                  {{ sitem.start_sale_num }}
                </span>
              </template>
            </el-table-column>
            <el-table-column prop="sale_good_price" label="系统售价" />
            <el-table-column prop="sale_cost_fee" label="系统工艺费" />
            <el-table-column prop="final_price" label="最终售价">
              <template slot-scope="scope">
                <span v-if="sitem.good_ladder_id === scope.row.id">
                  {{ sitem.final_price }}
                </span>
              </template></el-table-column
            >
          </el-table-column>
        </el-table>
      </template>
    </show-data-table>
  </div>
</template>

<script>
import asyncRequest from "@/apis/service/youzan/othgoodsOnline";
import resToken from "@/mixins/resToken";
import { mapGetters } from "vuex";
import {
  options1,
  options2,
  options3,
  options4,
  options5,
  options6,
  options7,
  options8,
  public_listCol,
  sale_listCol,
  is_support_barter_list,
  purchase_listCol,
} from "./good_columns";
import { isArray } from "@/utils/validate";
export default {
  name: "othgoodsOnlineDetail",
  mixins: [resToken],
  props: ["id"],
  computed: {
    ...mapGetters(["tablebtnSize", "searchSize", "size", "private_field"]),
    powers() {
      const tran =
        this.$store.getters.btnList.find(
          (item) => item.menu_route == "othgoodsOnlineDetail"
        ) || {};
      const { action } = tran ?? {};
      return action ?? [];
    },
  },

  data() {
    return {
      platform_id: "",
      public_listCol,
      sale_listCol,
      is_support_barter_list,
      options1,
      options2,
      options3,
      options4,
      options5,
      options6,
      options7,
      options8,
      purchase_listCol,
      ladderlist: [],
      nakelist: [],
      spuCode: "",
      size: "small",
      activeTabs: "1",
      activeNames: ["0", "1", "2", "3", "4", "5", "6", "7"],
      newTime: "",
      loading: false,
      queryType: "",
      status: "",
      sitem: null,
    };
  },
  mounted() {
    this.initForm();
  },
  methods: {
    async initForm() {
      await this.initData();

      this.loading = false;
    },
    // 点击业务审核的按钮
    async examForm(e) {
      console.log(e);
      if (!this.loading) {
        let model = {
          skuCode: this.queryId,
          exam_status: e.numStatus,
          online_time: e.online_time,
          remark: e.remark,
        };

        if ((e.numStatus ?? "") == "") {
          //驳回重新审核
          await this.setstatus("提交产品部门审核结果", model);
        } else if (e.numStatus == "3") {
          //点击保存
          // return;
          await this.setstatus("提交产品部门审核结果", model);
        } else {
          //驳回下线
          await this.setstatus("驳回下线吗", model);
        }
      }
    },
    // 点击财务定价的驳回按钮
    async examForm1(e) {
      if ((e.numStatus ?? "") == "") {
        if (!this.loading) {
          let model = {
            skuCode: this.queryId,
            exam_status: e.numStatus,
            remark: e.remark,
          };
          await this.setstatus("驳回重新审核吗", model);
        }
      } else {
        // return;
        if (!this.loading) {
          let model = {
            skuCode: this.queryId,
            exam_status: e.numStatus,
            remark: e.remark,
          };
          await this.setstatus("驳回下线吗", model);
        }
      }
    },
    // 财务审核的保存按钮
    async examForm2(e) {
      console.log(e);
      if (!this.loading) {
        let model = {
          skuCode: this.queryId,
          exam_status: e.numStatus,
          remark: e.remark,
        };

        if ((e.numStatus ?? "") == "") {
          //驳回重新审核
          await this.setstatus("驳回重新审核吗", model);
        } else if (e.numStatus == "5") {
          //点击保存
          // return;
          await this.setstatus("提交财务审核结果", model);
        } else {
          //驳回下线
          await this.setstatus("驳回下线吗", model);
        }
      }
    },
    // 操作上线的保存按钮
    async examForm3(e) {
      console.log(e);
      if (!this.loading) {
        let model = {
          skuCode: this.queryId,
          exam_status: e.numStatus,
          plat_code: e.plat_code,
          remark: e.remark || "",
        };

        if ((e.numStatus ?? "") == "") {
          //驳回重新审核
          await this.setstatus("驳回重新审核吗", model);
        } else if (e.numStatus == "6") {
          //点击保存
          // return;
          await this.setstatus("提交商品上线结果", model);
        } else {
          //驳回下线
          await this.setstatus("驳回下线吗", model);
        }
      }
    },

    async setstatus(detail, model) {
      await this.$confirm(`确定要${detail}？`, {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          let res = null;
          if (model.exam_status == "") {
            res = await asyncRequest.goodupreject(model);
          } else {
            res = await asyncRequest.status(model);
          }
          if (res && res.code === 0) {
            this.$notify.success({
              title: "提交成功！",
              message: "",
            });
            await this.initForm();
          } else if (res && res.code >= 100 && res.code <= 104) {
            await this.logout();
          } else {
            this.$message.warning(res.message);
          }
        })
        .catch(() => {
          console.log("取消");
        });
    },

    refresh(e) {
      const { spuCode } = e;
      let model = {
        id: this.queryType === "add" ? spuCode : this.queryId,
        type: "view",
      };
      this.routeReGoto("othgoodsOnlineDetail", model);
    },
    async initData() {
      this.loading = true;
      const { code, message, data } = await asyncRequest.detail({
        skuCode: this.id,
      });
      this.loading = false;
      if (code === 0) {
        this.sitem = JSON.parse(JSON.stringify(data));
        const {
          exam_status,
          cat_info,
          ladderlist,
          nakelist,
          spuCode,
          platform_id,
        } = this.sitem;
        this.spuCode = spuCode;
        this.platform_id = platform_id;
        // this.ladderlist = JSON.parse(JSON.stringify(ladderlist));
        this.nakelist = JSON.parse(JSON.stringify(nakelist));
        // console.log(this.ladderlist);
        let cat = "";
        if (cat_info && cat_info.length > 0) {
          cat_info.forEach((e, i) => {
            cat += i === 0 ? e.name : "/" + e.name;
          });
        }
        this.sitem.cat = cat;
        this.sitem.platform_youzan_id = this.queryId;

        if (!isArray(this.sitem.good_info_img)) {
          this.sitem.good_info_img = this.sitem.good_info_img.split(",");
        }
        this.nakelist.forEach(async (si, sii) => {
          si.start_sale_num = si.min_num;
          let { isok, price, sale_cost_fee } = await this.get_new(sii);
          if (isok === 0) {
            this.nakelist[sii].sale_good_price = price;
            this.nakelist[sii].sale_cost_fee = sale_cost_fee;
            this.nakelist[sii].newTime = new Date().valueOf() + "";
          } else if (isok >= 100 && isok <= 104) {
            await this.logout();
          } else {
            this.nakelist[sii].sale_good_price = price;
            this.nakelist[sii].sale_cost_fee = sale_cost_fee;
            this.nakelist[sii].newTime = new Date().valueOf() + "";
          }
          this.$set(this.nakelist, sii, this.nakelist[sii]);
        });

        this.status = exam_status;
        this.getNewTime();
      } else if (code >= 100 && code <= 104) {
        await this.logout();
      } else {
        this.$message.warning(message);
      }
    },
    async get_new(index) {
      const { min_num } = this.nakelist[index];
      const { code, data, message } = await asyncRequest.goodupprice({
        min_num: min_num,
        platform_id: this.platform_id,
        spuCode: this.spuCode,
      });
      const { sale_price, new_cost_fee } = data || {};
      const resModel = {
        isok: code,
        price: code === 0 ? sale_price : "0",
        sale_cost_fee: code === 0 ? new_cost_fee : "0",
        message: message,
      };
      return resModel;
    },
    getNewTime() {
      this.newTime = new Date().valueOf();
    },
  },
};
</script>
<style lang="scss" scoped>
.othgoodsOnlineDetail {
  width: 100%;
  box-sizing: border-box;
  .othgoodsOnlineDetail-main {
    padding: 10px 16px 200px 16px;
    width: 100%;
  }
  .othgoodsOnlineDetail-title {
    border-top: 1px solid #ebeef5;
    span {
      height: 50px;
      line-height: 50px;
      font-family: "微软雅黑", sans-serif;
      font-weight: 400;
      font-style: normal;
      font-size: 16fpx;
      text-align: left;
    }
  }
  /deep/ .ddiv {
    border-top: 1px solid #dcdfe6;
  }
  /deep/ .dtitle {
    width: 40px;
    text-align: center;
    height: 100%;
    min-height: 100%;
    ul {
      padding: 12px 0 0 0;
    }
  }
  /deep/ .dmain {
    padding: 20px 0 0 0;
    width: calc(100% - 40px);
    border-left: 1px solid #dcdfe6;
  }
}
</style>
