<template>
  <div>
    <div style="padding: 20px;">
      <el-form
        :model="productInfo"
        label-width="110px"
        class="product-info-form">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="创建时间">
              <span>{{ productInfo.createTime }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="分销商id">
              <span>{{ productInfo.otaSourceId }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="OTA编码">
              <span>{{ productInfo.otaSourceCode }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="OTA名称">
              <span>{{ productInfo.otaSourceName }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="票种id">
              <span>{{ productInfo.ticketTypeId }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="票种名称">
              <span>{{ productInfo.ticketTypeName }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="在售状态">
              <span>{{ productInfo.isSale === 1 ? '在售' : '禁售' }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="市场价">
              <span>{{ productInfo.marketPrice }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="结算价">
              <span>{{ productInfo.settlementPrice }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="售卖价">
              <span>{{ productInfo.salePrice }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="实名制购票">
              <span>
                <template v-if="productInfo.realNameType === 1">一证一人</template>
                <template v-else-if="productInfo.realNameType === 2">一证多人</template>
                <template v-else>不限</template>
              </span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="售卖时间开始">
              <span>{{ productInfo.saleDateStart }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="售卖时间结束">
              <span>{{ productInfo.saleDateEnd }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="使用日期开始">
              <span>{{ productInfo.useDateStart }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="使用日期结束">
              <span>{{ productInfo.useDateEnd }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="产品总库存">
              <span>{{ productInfo.totalStock === -1 ? '不限库存' : productInfo.totalStock }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="携程出行人模板">
              <span>
                <template v-if="productInfo.xcRealNameType === 1">一张一人需要证件</template>
                <template v-else-if="productInfo.xcRealNameType === 2">一张一人不需要证件</template>
                <template v-else-if="productInfo.xcRealNameType === 3">一单一人需要证件</template>
                <template v-else-if="productInfo.xcRealNameType === 4">一单一人不需要证件</template>
                <template v-else>--</template>
              </span>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div class="dialog-btn-wrap">
      <el-button @click="handleClose">关闭</el-button>
    </div>
  </div>
</template>

<script>
import { getOtaProductById } from '@/api/platform'

export default {
  props: {
    productItem: {
      type: Object,
      default: () => ({})
    }
  },
  data () {
    return {
      visible: false,
      total: 0,
      loading: false,
      productInfo: {},
      pageSize: 10,
      pageNum: 1
    }
  },
  methods: {
    handleClose () {
      this.$parent.handleClose()
    },
    async getInfo () {
      const { productItem } = this
      const { otaProductId, projectName } = productItem
      if (!otaProductId) return
      this.productInfo = []
      this.loading = true
      const res = await getOtaProductById({ productId: otaProductId, projectName })
      this.productInfo = res.data || {}
      this.loading = false
    }
  },
  watch: {
    async visible (val) {
      this.getInfo()
    }
  }
}
</script>

<style scoped>
.btn-wrap{
  padding-right: 20px;
}
</style>
