<template>
  <el-dialog
    v-loading="loading"
    :title="'商品详情'"
    :center="true"
    align="left"
    top="8vh"
    width="1040px"
    :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)"
    append-to-body
    @close="showModelThis = false"
  >
    <el-card style="margin-top: -20px" class="modal-form-style">
      <show-data-table
        v-if="newTime !== ''"
        style="margin: 0; padding: 0"
        :new-time="newTime"
        :sitem="sitem"
        :columns="ShowDataTableColumns"
      >
        <template slot="good_name">
          <img
            v-if="sitem.good_thumb_img"
            v-viewer
            style="width: 23px; height: 23px; margin: 0 5px 0 0"
            class="fl"
            :src="sitem.good_thumb_img"
            alt=""
          >
          <div>{{ sitem.good_name }}</div>
        </template>
        <template slot="speclist">
          <span v-for="(si, i) in sitem.speclist" :key="si.spec_id + i">
            <span v-if="i !== 0">-</span><span>{{ si.spec_value }}</span>
          </span>
        </template>
        <template slot="good_info_img">
          <img
            v-for="(si, i) in sitem.good_info_img"
            :key="si + i"
            v-viewer
            class="fl"
            style="width: 23px; height: 23px; margin: 0 5px 0 0"
            :src="si"
          >
        </template>
        <template slot="is_auth">
          <el-tag
            :size="'mini'"
            v-text="
              (options3.find((item) => item.id == sitem.is_auth) || {}).name ||
                '--'
            "
          />
        </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="is_stock">
          <el-tag
            :size="'mini'"
            v-text="
              (options4.find((item) => item.id == sitem.is_stock) || {}).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'"
          >起订量:{{ sitem.moq }}，工期：{{ sitem.customized }}天</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_step">
          <el-tag
            :size="'mini'"
            v-text="
              (options7.find((item) => item.id == sitem.is_step) || {}).name ||
                '--'
            "
          />
        </template>
        <template slot="exam_status">
          <el-tag
            :size="'mini'"
            v-text="
              (options8.find((item) => item.id == sitem.exam_status) || {})
                .name || '--'
            "
          />
        </template>
      </show-data-table>
    </el-card>
  </el-dialog>
</template>

<script>
import asyncRequest from '@/apis/components/show-good-data-modal'
import resToken from '@/mixins/resToken'
import mixinPage from '@/mixins/elPaginationHandle'
import { mapGetters } from 'vuex'
import ShowDataTableColumns from './ShowDataTableColumns'
import {
  options1,
  options2,
  options3,
  options4,
  options5,
  options6,
  options7,
  options8
  // columns,
} from './columns'
export default {
  name: 'ShowGoodDataModal',
  mixins: [resToken, mixinPage],
  computed: {
    ...mapGetters(['tablebtnSize', 'searchSize', 'size'])
  },
  props: ['showModel', 'spuCode', 'skuCode'],

  /**
   * 属性集合
   * @param {Boolean}       showModel             : 是否弹出弹窗        必填
   * @param {Boolean}       once                  : 是否只选一条        非必填
   */
  /**
   * 事件集合
   * @resultList             : 选中值变化调用   抛出选中数据
   */
  data() {
    return {
      ShowDataTableColumns: ShowDataTableColumns,
      options1: options1,
      options2: options2,
      options3: options3,
      options4: options4,
      options5: options5,
      options6: options6,
      options7: options7,
      options8: options8,
      loading: true,
      showModelThis: false,
      sitem: null,
      // 表格 - 列参数
      // columns: columns,
      newTime: ''
    }
  },
  watch: {
    showModel: function(val) {
      this.showModelThis = val
      if (val) {
        this.supplierCode = []
        this.initData()
      }
    },
    showModelThis(val) {
      if (!val) {
        this.$emit('cancel')
      }
    }
  },

  methods: {
    async initData() {
      this.loading = true
      const { code, message, data } = await asyncRequest.detail({
        skuCode: this.skuCode
      })
      this.loading = false
      if (code === 0) {
        this.sitem = JSON.parse(JSON.stringify(data))
        const { exam_status, cat_info } = this.sitem
        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.good_info_img = this.sitem.good_info_img.split(',')
        this.status = exam_status
        this.getNewTime()
      } else if (code >= 100 && code <= 104) {
        await this.logout()
      } else {
        this.$message.warning(message)
      }
    },
    getNewTime() {
      this.newTime = new Date().valueOf()
    }
  }
}
</script>

<style>
</style>
