<template>
  <el-dialog
    v-loading="loading"
    :title="title"
    :center="true"
    align="left"
    top="10vh"
    width="750px"
    :close-on-click-modal="false"
    :visible.sync="showModelThis"
    element-loading-text="拼命加载中"
    element-loading-spinner="el-icon-loading"
    element-loading-background="rgba(0, 0, 0, 0.8)"
    @close="showModelThis = false"
  >
    <el-card style="margin-top: -20px">
      <el-row :gutter="10">
        <el-col :span="24">
          <el-row>
            <el-col :span="12" style="padding: 0 0 10px 0">
              上线商品编号:{{ sitem.skuCode }}</el-col
            >
            <el-col :span="12" style="padding: 0 0 10px 0" class="tr">
              有赞商品id:{{ sitem.item_id }}
            </el-col>
            <el-col :span="24">
              <el-table
                :data="sitem.value"
                style="width: 100%"
                :size="'mini'"
                border
                script
              >
                <el-table-column prop="change_field" label="字段名称" />
                <el-table-column prop="before_value" label="修改前" />
                <el-table-column prop="after_value" label="修改后" />
              </el-table>
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="24" class="tr" style="padding: 10px 0 0 0">
          <el-button @click="showModelThis = false" :size="'mini'">关 闭</el-button>
        </el-col>
      </el-row>
    </el-card>
  </el-dialog>
</template>
<script>
export default {
  props: ["showModel", "sitem"],
  data() {
    return {
      loading: false,
      nacklist: [],
      title: "商品字段修改展示",
      showModelThis: this.showModel,
    };
  },
  watch: {
    showModel: function (val) {
      this.showModelThis = val;
      if (val) {
        this.initForm();
      }
    },
    showModelThis(val) {
      if (!val) {
        this.$emit("cancel");
      }
    },
  },
  mounted() {},
  methods: {
    async initForm() {
      this.loading = true;
      this.nacklist = [];
      const { value } = this.sitem;
      this.nacklist = value;
      // let vallist=value? value:[];
      // vallist.forEach((si)=>{

      // })

      this.loading = false;
    },
  },
};
</script>

<style lang="scss" scoped>
.account {
  .bottom-btn {
    position: absolute;
    bottom: 0px;
    right: 0;
    text-align: right;
    z-index: 2;
  }
}
</style>
