<template>
  <div>
    <el-row>
      <el-col :span="8"> 数据编码：{{ code }}</el-col>
      <el-col :span="5">
        数据类型：
        <el-tag
          :size="tablebtnSize"
          v-text="(typeOptions.find((item) => item.value == type) || {}).label || '--'"
        ></el-tag>
      </el-col>
      <el-col :span="5"> 修改账户：{{ creater }}</el-col>
      <el-col :span="6"> 修改时间：{{ addtime }}</el-col>
    </el-row>

    <el-table
      :data="tableData"
      :size="searchSize"
      border
      stripe
      max-height="750px"
      style="width: 100%; margin: 10px 0 0 0"
    >
      <el-table-column
        prop="key_name"
        label="修改字段名称"
        width="130px"
        show-overflow-tooltip
      />
      <el-table-column prop="key" label="修改字段" width="130px" show-overflow-tooltip />
      <el-table-column prop="before" label="修改前" show-overflow-tooltip>
        <template slot-scope="scope">
          <div v-if="scope.row.key === 'good_img'">
            <img
              v-for="(si, sii) in scope.row.before"
              :key="si + sii"
              :src="si"
              alt=""
              class="fl"
              v-viewer
              style="width: 30px; height: 30px"
            />
          </div>
          <div v-else-if="scope.row.key === 'good_info_img'">
            <img
              v-for="(si, sii) in scope.row.after"
              :key="si + sii"
              :src="si"
              alt=""
              v-viewer
              class="fl"
              style="width: 30px; height: 30px"
            />
          </div>
          <div v-else-if="scope.row.key === 'good_thumb_img'">
            <img
              v-for="(si, sii) in scope.row.after"
              :key="si + sii"
              :src="si"
              alt=""
              v-viewer
              class="fl"
              style="width: 30px; height: 30px"
            />
          </div>
          <div v-else>{{ scope.row.before }}</div>
        </template>
      </el-table-column>
      <el-table-column prop="after" label="修改后" show-overflow-tooltip>
        <template slot-scope="scope">
          <div v-if="scope.row.key === 'good_img'">
            <img
              v-for="(si, sii) in scope.row.after"
              :key="si + sii"
              :src="si"
              alt=""
              v-viewer
              class="fl"
              style="width: 30px; height: 30px"
            />
          </div>
          <div v-else-if="scope.row.key === 'good_info_img'">
            <img
              v-for="(si, sii) in scope.row.after"
              :key="si + sii"
              :src="si"
              alt=""
              v-viewer
              class="fl"
              style="width: 30px; height: 30px"
            />
          </div>
          <div v-else-if="scope.row.key === 'good_thumb_img'">
            <img
              v-for="(si, sii) in scope.row.after"
              :key="si + sii"
              :src="si"
              alt=""
              v-viewer
              class="fl"
              style="width: 30px; height: 30px"
            />
          </div>
          <div v-else>{{ scope.row.after }}</div>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import resToken from "@/mixins/resToken";
import asyncRequest from "@/apis/components/type-change-item";
export default {
  name: "typeChangeItem",
  mixins: [resToken],
  props: ["type", "code"],
  computed: {
    ...mapGetters(["tablebtnSize", "searchSize", "size"]),
  },
  data() {
    return {
      loading: false,
      tableData: [],
      showItem: null,
      creater: "",
      addtime: "",
      typeOptions: [
        {
          value: "1",
          label: "供应商信息",
        },
        {
          value: "2",
          label: "客户信息",
        },
        {
          value: "3",
          label: "商品成本信息",
        },
        {
          value: "4",
          label: "单位信息",
        },
        {
          value: "5",
          label: "规格信息",
        },
        {
          value: "6",
          label: "品牌信息",
        },
        {
          value: "7",
          label: "分类信息",
        },
        {
          value: "8",
          label: "平台信息",
        },
      ],
      editTable13: [
        {
          prop: "infoNo",
          label: "阶梯编号",
          minWidth: "200px",
        },

        {
          prop: "good_name",
          label: "商品名称",
          minWidth: "200px",
        },
        {
          prop: "brandid",
          label: "商品品牌",
          minWidth: "200px",
        },

        {
          prop: "cat_id",
          label: "商品分类",
          minWidth: "200px",
        },
        {
          prop: "specinfo",
          label: "规格集合",
          minWidth: "200px",
        },

        {
          prop: "cost_desc",
          label: "工艺描述",
          minWidth: "200px",
        },
        {
          prop: "work_day",
          label: "工期",
          minWidth: "200px",
        },
        {
          prop: "delivery_day",
          label: "物流时间",
          minWidth: "200px",
        },
        {
          prop: "good_img",
          label: "商品主图",
          minWidth: "200px",
        },
        {
          prop: "expire_day",
          label: "有效时间",
          minWidth: "200px",
        },
        {
          prop: "origin_place",
          label: "产地",
          minWidth: "200px",
        },
        {
          prop: "supplierNo",
          label: "供应商",
          minWidth: "200px",
        },
        {
          prop: "pay_way",
          label: "支付方式",
          minWidth: "200px",
        },

        {
          prop: "send_way",
          label: "发货方式",
          minWidth: "200px",
        },
        {
          prop: "metal_id",
          label: "金属种类",
          minWidth: "200px",
        },
        {
          prop: "is_gold_price",
          label: "是否启用实时金价",
          minWidth: "200px",
        },
        {
          prop: "config",
          label: "配置要求",
          minWidth: "200px",
        },
        {
          prop: "weight",
          label: "商品总重量",
          minWidth: "200px",
        },
        {
          prop: "is_diff",
          label: "有无工差",
          minWidth: "200px",
        },

        {
          prop: "demo_fee",
          label: "打样费",
          minWidth: "200px",
        },
        {
          prop: "delivery_fee",
          label: "物流费",
          minWidth: "200px",
        },
        {
          prop: "open_fee",
          label: "开模费",
          minWidth: "200px",
        },
        {
          prop: "pakge_fee",
          label: "打包费",
          minWidth: "200px",
        },
        {
          prop: "nake_fee",
          label: "裸价",
          minWidth: "200px",
        },
        {
          prop: "mark_fee",
          label: "加标费",
          minWidth: "200px",
        },
        {
          prop: "cert_fee",
          label: "证书费",
          minWidth: "200px",
        },
        {
          prop: "cost_fee",
          label: "工艺费",
          minWidth: "200px",
        },
        {
          prop: "total_fee",
          label: "成本总计",
          minWidth: "200px",
        },
        {
          prop: "supply_area",
          label: "供货区域",
          minWidth: "200px",
        },
        {
          prop: "remark",
          label: "备注",
          minWidth: "200px",
        },
        // {
        //   prop: "sale_price",
        //   label: "最终售价",
        //   minWidth: "200px",
        // },
        // {
        //   prop: "createrid",
        //   label: "创建人id",
        //   minWidth: "200px",
        // },
        {
          prop: "creater",
          label: "创建人",
          minWidth: "200px",
        },
        // {
        //   prop: "status",
        //   label: "状态",
        //   minWidth: "200px",
        // },

        {
          prop: "unit",
          label: "单位",
          minWidth: "200px",
        },
        {
          prop: "cat_info",
          label: "分类",
          minWidth: "200px",
        },

        {
          prop: "supplierName",
          label: "供应商名称",
          minWidth: "200px",
        },
        {
          prop: "brand_name",
          label: "品牌名称",
          minWidth: "200px",
        },
        {
          prop: "metal_name",
          label: "贵金属名称",
          minWidth: "200px",
        },
        {
          prop: "delivery_place",
          label: "发货地",
          minWidth: "200px",
        },

        {
          prop: "good_code",
          label: "商品code",
          minWidth: "200px",
        },
        {
          prop: "good_unit",
          label: "商品单位",
          minWidth: "200px",
        },

        {
          prop: "good_type",
          label: "是否定制",
          minWidth: "200px",
        },
        {
          prop: "companyNo",
          label: "业务企业",
          minWidth: "200px",
        },
        {
          prop: "company_id",
          label: "业务公司",
          minWidth: "200px",
        },
        {
          prop: "moq",
          label: "定制起订量",
          minWidth: "200px",
        },
        {
          prop: "customized",
          label: "定制工期",
          minWidth: "200px",
        },
        {
          prop: "tax",
          label: "税点",
          minWidth: "200px",
        },

        {
          prop: "is_auth",
          label: "销售权限",
          minWidth: "200px",
        },
        {
          prop: "is_stock",
          label: "是否库存品",
          minWidth: "200px",
        },
        {
          prop: "auth_img",
          label: "销售授权图片",
          minWidth: "200px",
        },

        {
          prop: "after_sales",
          label: "售后说明",
          minWidth: "200px",
        },
        {
          prop: "craft_desc",
          label: "工艺说明",
          minWidth: "200px",
        },
        {
          prop: "good_remark",
          label: "商品备注",
          minWidth: "200px",
        },
        {
          prop: "good_size",
          label: "商品尺寸",
          minWidth: "200px",
        },
        {
          prop: "packing_way",
          label: "包装方式",
          minWidth: "200px",
        },

        {
          prop: "packing_size",
          label: "装箱尺寸",
          minWidth: "200px",
        },
        {
          prop: "packing_spec",
          label: "装箱规格",
          minWidth: "200px",
        },
        {
          prop: "packing_list",
          label: "包装清单",
          minWidth: "200px",
        },
        {
          prop: "packing_weight",
          label: "装箱重量",
          minWidth: "200px",
        },
        {
          prop: "good_bar",
          label: "商品条形码",
          minWidth: "200px",
        },

        {
          prop: "lead_time",
          label: "供货周期",
          minWidth: "200px",
        },
        {
          prop: "sample_day",
          label: "调样周期",
          minWidth: "200px",
        },
        {
          prop: "sample_fee",
          label: "调样费",
          minWidth: "200px",
        },

        {
          prop: "good_thumb_img",
          label: "商品缩略图",
          minWidth: "200px",
        },
        {
          prop: "good_info_img",
          label: "详情介绍",
          minWidth: "200px",
        },

        // {
        //   prop: "is_del",
        //   label: "是否删除",
        //   minWidth: "200px",
        // },
        // {
        //   prop: "addtime",
        //   label: "创建时间",
        //   minWidth: "200px",
        // },
        {
          prop: "updatetime",
          label: "更新时间",
          minWidth: "200px",
        },
        {
          prop: "is_exclusive",
          label: "专属类型",
          minWidth: "200px",
        },
        {
          prop: "noble_weight",
          label: "贵金属重量",
          minWidth: "200px",
        },
        {
          prop: "noble_metal",
          label: "贵金属种类",
          minWidth: "200px",
        },
        {
          prop: "other_config",
          label: "其他配置要求",
          minWidth: "200px",
        },
        {
          prop: "spec_value",
          label: "规格类型",
          minWidth: "200px",
        },
        {
          prop: "spec_value_value",
          label: "规格值",
          minWidth: "200px",
        },
        {
          prop: "market_price",
          label: "市场价",
          minWidth: "200px",
        },
        {
          prop: "cgd_gold_price",
          label: "供应商采购金价",
          minWidth: "200px",
        },
        {
          prop: "noble_price",
          label: "当前金价",
          minWidth: "200px",
        },
        {
          prop: "min_num",
          label: "起订量(>=)",
          minWidth: "200px",
        },
        {
          prop: "package_fee",
          label: "包装费",
          minWidth: "200px",
        },
        {
          prop: "other_fee",
          label: "其他费用",
          minWidth: "200px",
        },
        {
          prop: "nake_total",
          label: "成本合计",
          minWidth: "200px",
        },
      ],
    };
  },
  mounted() {
    this.searchList();
  },
  methods: {
    async searchList() {
      this.loading = true;
      this.tableData = [];
      this.showItem = null;
      const { code, data, message } = await asyncRequest.changeItem({
        type: this.type,
        code: this.code,
      });

      if (code === 0) {
        const { creater, addtime, before_info, after_info } = data;

        this.creater = creater;
        this.addtime = addtime;
        let keyList = [];
        for (let key in after_info) {
          keyList.push(key);
        }

        for (let i = 0; i < keyList.length; i++) {
          let index = this.editTable13.findIndex((s) => s.prop === keyList[i]);
          if (index != -1) {
            let model = {
              key: keyList[i],
              key_name:
                (this.editTable13.find((s) => s.prop === keyList[i]) || {}).label || "--",
              before: this.get_key_value(keyList[i], before_info),
              after: this.get_key_value(keyList[i], after_info),
            };
            // console.log(model.key_name)
            this.tableData.push(model);
          }
        }
      } else if (code >= 100 && code <= 104) {
        await this.logout();
      } else {
        this.$message.warning(message);
      }

      this.loading = false;
    },
    get_key_value(key, info) {
      if (key === "good_img") {
        return info[key] ? (info[key] || "").split(",") : [];
      } else if (key === "good_info_img") {
        return info[key] ? (info[key] || "").split(",") : [];
      } else if (key === "good_thumb_img") {
        return info[key] ? (info[key] || "").split(",") : [];
      }
      // else if(key === "cat_id") {
      //   return info[key] ? (info[key] || "").split(",") : [];
      // }
      return info[key];
    },
  },
};
</script>
<style lang="scss" scoped></style>
