<template>
  <el-dialog
    title="编辑商品"
    :visible.sync="visible"
    width="1100px"
    :close-on-click-modal="false"
    :show-close="false"
  >
    <div class="edit-container">
      <el-form ref="goodsFrom" :model="product" label-width="150px">
        <el-form-item label="商品ID:" prop="product" style="margin-bottom: 10px;">
          <el-input v-model="product.productId" :disabled="true" style="width: 400px;" />
        </el-form-item>
        <el-form-item label="商品名称:" prop="product" style="margin-bottom: 10px;">
          <el-input v-model="product.productName" :disabled="true" style="width: 400px;" />
        </el-form-item>
        <el-form-item label="供应商:" prop="product" style="margin-bottom: 10px;">
          <el-input v-model="product.shopName" :disabled="true" style="width: 400px;" />
        </el-form-item>
        <el-form-item label="是否含税:" prop="product" style="margin-bottom: 10px;">
          <el-input v-model="ncludedTaxtEXT" :disabled="true" style="width: 400px;" />
        </el-form-item>
        <el-form-item label="机构税率:" prop="product" style="margin-bottom: 10px;">
          <el-input v-model="product.taxPoint" :disabled="true" style="width: 400px;" />
        </el-form-item>
        <el-form-item label="供应商税率:" prop="product" style="margin-bottom: 10px;">
          <el-input v-model="product.supplierTaxPoint" :disabled="true" style="width: 400px;" />
        </el-form-item>
        <el-form-item label="排序:" style="margin-bottom: 10px;">
          <el-input v-model="product.sort" style="width: 400px;" />
        </el-form-item>
        <el-form-item label="优惠状态:" style="margin-bottom: 10px;">
          <el-select v-model="product.status" style="width:120px;" clearable>
            <el-option :value="0" label="已上架" />
            <el-option :value="1" label="已下架" />
          </el-select>
        </el-form-item>
        <el-form-item label="商品信息:" prop="product">
          <el-table row-key="title" :data="product.skus" border>
            <el-table-column label="商品规格" prop="title" align="center">
              <template slot-scope="{row}">
                <span>{{ row.unit }}</span>
              </template>
            </el-table-column>
            <el-table-column label="机构价" prop="name" align="center">
              <template slot-scope="{row}">
                <span>{{ row.price | NumFormat }}</span>
              </template>
            </el-table-column>
            <el-table-column label="成本类型" prop="name" align="center">
              <template slot-scope="{row}">
                <span>{{ row.costCheckFlag === 1 ? '固定成本' : '比例成本' }}</span>
              </template>
            </el-table-column>
            <el-table-column label="成本价/成本比例" prop="name" align="center">
              <template slot-scope="{row}">
                <span>{{ row.costCheckFlag === 1 ? row.costPrice : row.costProportional }}</span>
              </template>
            </el-table-column>
            <el-table-column label="会员折扣（%）" prop="name" align="center">
              <template slot-scope="{row}">
                <el-input v-model="row.discount" :disabled="row.discountPrice ? true : false">
                  <template slot="append">%</template>
                </el-input>
              </template>
            </el-table-column>
            <el-table-column label="会员价" prop="name" align="center">
              <template slot-scope="{row}">
                <el-input v-model="row.discountPrice" :disabled="row.discount ? true : false" />
              </template>
            </el-table-column>
          </el-table>
        </el-form-item>
      </el-form>
    </div>
    <div slot="footer">
      <el-button @click="handleCanle">取 消</el-button>
      <el-button type="primary" @click="handleConfirm">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { editSvipProduct } from '@/api/member/member'

export default {
  name: 'ProEdit',
  filters: {
    NumFormat(value) {
      // 处理金额
      return Number(value).toFixed(2)
    }
  },
  props: {
    proId: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      visible: false,
      product: {},
      productRadio: null
    }
  },
  computed: {
    ncludedTaxtEXT() {
      // 是否含税文案
      const taxMap = {
        '0': '不含税',
        '1': '含税',
        '2': '未知'
      }
      const typrMap = {
        '1': '开增值税专用发票',
        '2': '开增值税普通发票',
        '3': ''
      }
      let text = ''
      if (typrMap) {
        text = `${this.product.invoiceType ? typrMap[this.product.invoiceType] : '不能开票'}`
      }
      return `${taxMap[this.product.includedTax]}-${text}`
    }
  },
  created() {
    this.editSvipProduct(this.proId)
  },
  methods: {
    async editSvipProduct(id) {
      const res = await editSvipProduct(id)
      this.product = res.data
      this.visible = true
    },
    handleConfirm() {
      // 确认选择商品
      this.$emit('confirm', this.product)
    },
    handleCanle() {
      // 取消弹窗
      this.$emit('cancel')
    }
  }
}
</script>
<style lang="scss" scoped>
  .edit-container{
    width: 100%;
    height: 500px;
    overflow-y: scroll;
  }
</style>
