<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"
  >
    <show-data-table
      v-if="infoSitem && infoSitem.id"
      style="margin: -20px 0 0 0"
      :sitem="infoSitem"
      :columns="infoColumns"
    >
      <template slot="status">
        <el-tag
          :size="'mini'"
          v-text="
            (options0.find((item) => item.id == infoSitem.status) || {}).label || '--'
          "
        />
      </template>

      <template slot="company">
        <span>{{ infoSitem.company }}</span>
        <el-popover placement="top" width="300" trigger="hover">
          <ul>
            <li>
              <span>销售方公司编号：</span><span>{{ infoSitem.companyNo }}</span>
            </li>
          </ul>
          <i slot="reference" class="el-icon-warning-outline fr" />
        </el-popover>
      </template>
      <template slot="khName">
        <span>{{ infoSitem.khname }}</span>
        <el-popover placement="top" width="300" trigger="hover">
          <ul>
            <li>
              <span>购买方公司编号：</span><span>{{ infoSitem.khNo }}</span>
            </li>
          </ul>
          <i slot="reference" class="el-icon-warning-outline fr" />
        </el-popover>
      </template>
      <template slot="is_addrs">
        <el-tag
          :size="'mini'"
          v-text="
            (is_addrs_options.find((item) => item.value == infoSitem.is_addrs) || {})
              .label || '--'
          "
        />
      </template>
    </show-data-table>
    <show-data-table
      v-if="sitem && sitem.id"
      :sitem="sitem"
      :columns="costColumns"
      :border="true"
    >
      <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 slot="reference" class="el-icon-warning-outline fr" />
        </el-popover>
      </template>
      <template slot="good_name">
        <span>{{ sitem.good_name }}</span>
        <span v-for="(si, i) in sitem.specinfo" :key="si.spec_id + i">
          <span v-if="i !== 0">-</span>
          <span v-else>_</span>
          <span>{{ si.spec_name }}[{{ si.spec_value_name }}]</span>
        </span>
        <el-popover placement="top" width="300" trigger="hover">
          <ul>
            <li>
              <span>商品编号：</span><span>{{ sitem.spuCode }}</span>
            </li>
          </ul>
          <i slot="reference" class="el-icon-warning-outline fr" />
        </el-popover>
      </template>
      <template slot="cat">
        <span v-for="(si, i) in sitem.cat_info" :key="si.id + i">
          {{ i === 0 ? "" : "_" }}{{ si.name }}
        </span>
      </template>
      <template slot="send_way">
        <span>{{ sitem.send_way + "" === "1" ? "供应商包邮" : "公司自提" }}</span>
      </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="pay_way">
        <el-tag
          :size="'mini'"
          v-text="(options9.find((item) => item.id == sitem.pay_way) || {}).name || '--'"
        />
      </template>
      <template slot="supply_area">
        <el-tag
          :size="'mini'"
          v-text="
            (options6.find((item) => item.id == sitem.supply_area) || {}).name || '--'
          "
        />
      </template>

      <template slot="noble">
        <span
          v-if="sitem.noble_name"
        >{{ 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>
        <span v-else>--</span>
      </template>
      <template slot="good_img">
        <img
          v-for="(si, sii) in sitem.good_img"
          :key="si + sii"
          v-viewer
          style="width: 23px; height: 23px; margin: 0 5px 0 0"
          class="fl"
          :src="si"
          alt=""
        >
      </template>
    </show-data-table>
  </el-dialog>
</template>

<script>
import {
  options1,
  options2,
  options3,
  options4,
  options5,
  options6,
  options7,
  options8,
  options9,
  costColumns,
  infoColumns,
  is_addrs_options,
  options0
} from './columns'
import resToken from '@/mixins/resToken'
import asyncRequest from '@/apis/service/supplierPurchaseIn/supplierRecovery'
export default {
  name: 'ShowData',
  mixins: [resToken],
  props: ['showModel', 'bidNo', 'infoNo'],
  data() {
    return {
      newTime: '',
      loading: true,
      showModelThis: this.showModel,
      sitem: null,
      infoSitem: null,
      options1,
      options2,
      options3,
      options4,
      options5,
      options6,
      options7,
      options8,
      options9,
      costColumns,
      infoColumns,
      is_addrs_options,
      options0
    }
  },
  watch: {
    showModel: function(val) {
      this.showModelThis = val
      if (val) {
        this.initInfoData()
      }
    },
    showModelThis(val) {
      if (!val) {
        this.$emit('cancel')
      }
    }
  },

  methods: {
    async initInfoData() {
      this.loading = true
      const { code, message, data } = await asyncRequest.info_detail({
        infoNo: this.infoNo
      })
      if (code === 0) {
        this.infoSitem = data
        console.log(this.infoSitem)
        await this.initData()
      } else if (code >= 100 && code <= 104) {
        await this.logout()
      } else {
        this.$message.warning(message)
        this.loading = false
      }
    },
    //

    async initData() {
      this.loading = true
      const { code, message, data } = await asyncRequest.good_detail({
        bidNo: this.bidNo
      })
      if (code === 0) {
        this.sitem = data
        this.loading = false
      } else if (code >= 100 && code <= 104) {
        await this.logout()
      } else {
        this.$message.warning(message)
        this.loading = false
      }
    }
  }
}
</script>

<style></style>
