<template>
  <show-data-table border :columns="productColumns" :sitem="productinfo" v-loading="loading">
    <template slot="packing_spec">
      <el-tag
        v-if="productinfo"
        size="mini"
      >{{ ( options6.find(({id}) => id === productinfo.supply_area) || {}).name || '--' }}</el-tag>
    </template>

    <template slot="is_auth">
      <el-tag
        v-if="productinfo"
        size="mini"
      >{{ ( options3.find(({id}) => id === productinfo.is_auth) || {}).name || '--' }}</el-tag>
    </template>

    <template slot="good_info_img">
      <div style="max-height: 24px; overflow: hidden" v-if="productinfo">
        <el-image
          style="height: 24px; width: 24px"
          :src="productinfo.good_info_img"
          :preview-src-list="[productinfo.good_info_img]"
        />
      </div>
    </template>

    <template slot="cat_info">
      <span v-if="productinfo">
        {{
        productinfo.cat_info
        ? productinfo.cat_info.map(({ name }) => name).join("_")
        : "--"
        }}
      </span>
    </template>

    <template slot="is_combind">
      <span v-if="productinfo">
        {{
        String(productinfo.is_combind) === '1' ? '组合商品' : '非组合商品'
        }}
      </span>
    </template>

    <template slot="good_name">
      <img
        v-if="productinfo.good_thumb_img"
        v-viewer
        style="width: 23px; height: 23px; margin: 0 5px 0 0"
        class="fl"
        :src="productinfo.good_thumb_img"
        alt
      />
      <span>{{ productinfo.good_name }}</span>
      <span v-for="(si, i) in productinfo.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 v-if="newTime !== '' && isDisplayPrivateField('1')">
            <span>商品成本编号：</span>
            <span>{{ productinfo.spuCode }}</span>
          </li>
        </ul>
        <i slot="reference" class="el-icon-warning-outline fr" />
      </el-popover>
    </template>

    <template slot="noble">
      <span v-if="productinfo.noble_metal">
        {{ productinfo.noble_weight ? productinfo.noble_weight : "0" }}g-{{
        productinfo.noble_name
        }}-{{ productinfo.gold_price ? productinfo.gold_price : "0" }}元/g-{{
        productinfo.is_gold_price + "" === "0" ? "不" : ""
        }}启用实时金价-{{ productinfo.is_diff + "" === "1" ? "有" : "无" }}工差-{{
        productinfo.config
        }}-{{ productinfo.other_config }}
      </span>
    </template>

    <template slot="weight">{{ productinfo.weight }}g</template>
    <template slot="tax">{{ productinfo.tax }}%</template>
    <template slot="is_stock">{{ String(productinfo.is_stock) === "0" ? "非库存品" : "库存品" }}</template>
    <template slot="is_exclusive">{{ String(productinfo.is_exclusive) === "0" ? "非泰康" : "泰康" }}</template>
    <template slot="noble_weight">{{ productinfo.noble_weight }}g</template>
    <template slot="is_gold_price">
      {{
      String(productinfo.is_gold_price) === "1" ? "是" : "否"
      }}
    </template>
    <template slot="is_diff">
      {{
      String(productinfo.is_diff) === "1" ? "有公差" : "无工差"
      }}
    </template>

    <template slot="packing_weight">{{ productinfo.packing_weight }}g</template>

    <template slot="delivery_day">{{ productinfo.delivery_day }}天</template>
    <template slot="lead_time">{{ productinfo.lead_time }}天</template>
    <template slot="sample_day">{{ productinfo.sample_day }}天</template>
    <template slot="delivery_place">{{ delivery_place }}</template>
    <template slot="origin_place">{{ origin_place }}</template>
  </show-data-table>
</template>


<script>
import { productColumns } from "./columns";
import asyncRequest from "@/apis/components/details";
import privateField from "@/mixins/privateField";
import { add_sum } from "../../../utils/validate";

export default {
  name: "Product",
  props: ["spuCode"],
  mixins: [privateField],
  data() {
    return {
      productColumns,
      productinfo: {},
      loading: false,
      delivery_place: "",
      origin_place: "",
      ruleForm: {
        usable_stock: ""
      },
      options6: [
        { id: "1", name: "全国" },
        { id: "2", name: "全国除偏远" }
      ],
      options3: [
        { id: "0", name: "无销售权限" },
        { id: "1", name: "有销售权限" }
      ]
    };
  },
  watch: {
    spuCode: {
      handler(spuCode) {
        this.initData(spuCode);
      },
      immediate: true
    }
  },
  methods: {
    async getArea(prop = "delivery_place") {
      const chunks = this.productinfo[prop].split(",");
      let { data: province } = await asyncRequest.province();
      province = province.find(
        ({ province_code }) => province_code === chunks[0]
      );
      let { data: city } = await asyncRequest.city({ code: chunks[0] });
      city = city.find(({ city_code }) => city_code === chunks[1]);
      let { data: area } = await asyncRequest.area({ code: chunks[1] });
      area = area.find(({ area_code }) => area_code === chunks[2]) || {};
      return [province, city, area].map(({ name }) => name).join("");
    },
    async initData(spuCode) {
      this.loading = true;
      const { code, data } = await asyncRequest.productinfo({ spuCode });
      this.loading = false;
      if (code !== 0) return;
      this.productinfo = data;

      (data.combind_list || []).forEach(item => {
        this.ruleForm.usable_stock = add_sum(
          this.ruleForm.usable_stock || 0,
          item.usable_stock || 0
        );
      });

      this.ruleForm.spuCode = spuCode;
      this.delivery_place = await this.getArea("delivery_place");
      this.origin_place = await this.getArea("origin_place");

      console.log();
      this.loading.product = false;
    }
  }
};
</script>
