<template>
  <div class="app-container">


    <!-- 评论回复 -->
    <el-dialog :visible.sync="isShow"  width='1450px' title="SKU详情">
      <el-table  :data="list"  >
        <el-table-column property="id" width="100" label="SKUID" />
        <el-table-column property="price" width="100" label="实际售卖价" />
        <el-table-column property="counterPrice" width="100" label="市场售价" />
        <el-table-column property="newCusPrice" width="100" label="新客价" />
        <el-table-column property="attribute" width="200" label="规格属性" >
          <template slot-scope="scope">
              <div style="text-align: left;">
                <span style="font-weight: 600;">规格名称:</span>
                {{  scope.row.specifications }}
                <br />
                <span style="font-weight: 600;">属性:</span>
                {{  scope.row.attribute }}
                <br />
                <span style="font-weight: 600;">类型:</span>
                {{  scope.row.type }}
                <br />
                <span style="font-weight: 600;">是否新客价:</span>
                {{  scope.row.isNew==true?'是':'否' }}
                <br />
                <span style="font-weight: 600;">限购数:</span>
                {{  scope.row.limit }}
                <br />
                </div>
          </template>
        </el-table-column>
        <!-- <el-table-column property="type" width="100" label="商品类型" /> -->
        <el-table-column property="price" label="服务设置" width="150">
            <template slot-scope="scope">
              <div style="text-align: left;">
                <span style="font-weight: 600;">是否支持加购:</span>
                {{ scope.row.isSupportAddbuy==1?'是':'否' }}
                <br />
                <span style="font-weight: 600;">是否同步给抖音:</span>
                {{ scope.row.isSyncDy==1?'是':'否' }}
                <br />
                <span style="font-weight: 600;">最大加购数量:</span>
                {{ scope.row.unitMaximum }}
                <br />
                <span style="font-weight: 600;">加购单位:</span>
                {{ scope.row.unitArea }}
                <br />
                <span style="font-weight: 600;">加购内容:</span>
                {{ scope.row.unitDescribe }}
                <br />
                 <span style="font-weight: 600;">加购单价:</span>
                {{ scope.row.unitPrice }}
                <br /> 
                  <span style="font-weight: 600;">计提金额:</span>
                {{ scope.row.serviceFee }}
                <br />
                  <span style="font-weight: 600;">服务时长:</span>
                {{ scope.row.serviceDuration }}
                <br />
                 <span style="font-weight: 600;">服务次数:</span>
                {{ scope.row.serviceTimes }}
                <br />
              </div>
            </template>
          </el-table-column>
          <el-table-column  label="预约设置" width="300">
            <template slot-scope="scope">
              <div style="text-align: left;">
                <span style="font-weight: 600;">所需技能:</span>
                {{ scope.row.serviceSkill }}
                <br />
                 <span style="font-weight: 600;">预约时段类型:</span>
                {{ scope.row.timeRangeType==1?'指定时间段可约':'固定时间段可约(默认半小时)' }}
                <br />
    <span style="font-weight: 600;">延迟几小时可约:</span>
                {{ scope.row.bookDelayTime}}
                <br />
                    <!-- <span style="font-weight: 600;">商品可服务时间:</span>
                {{ scope.row.startTime+'-'+scope.row.endTime}}
                <br /> -->
                  <span style="font-weight: 600;">可约期限多少天:</span>
                {{ scope.row.bookIntervalDay}}
                <br />
                <span style="font-weight: 600;">服务时段:</span>
                <!-- <div style="margin:-22px 0 0 65px;"> -->
                  <span v-for="(item, index) in scope.row.timeRange" :key="index">{{ item }}</span>
                <!-- </div> -->
                <br />
              </div>
            </template>
          </el-table-column>
             <el-table-column  label="不可约设置" width="170">
            <template slot-scope="scope">
              <div style="text-align: left;">
                <div v-for="(item,index) in scope.row.noServiceTimeRange" :key="index">
                 <!-- <span style="font-weight: 600;margin-left:10px;">开始-结束:</span> -->
                 {{ item.startTime }}至 {{ item.endTime }}
                 <!-- <span style="font-weight: 600;margin-left:10px;">结束时间:</span> -->
               
                          <span style="font-weight: 600;margin-left:10px;">不可约标签:</span>
                {{ item.tagName }}
                   <span style="font-weight: 600;margin-left:10px;">提醒内容:</span>
                {{ item.comment }}
               </div>
                  </div>
            </template>
          </el-table-column>
          <el-table-column
            width="80"
            property="url"
            label="货品图片"
            :key="Math.random()"
           
          >
            <template slot-scope="scope">
              <img v-if="scope.row.url" :src="scope.row.url" width="40" />
            </template>
          </el-table-column>
        <!-- <el-table-column property="value" label="货品规格">
          <template slot-scope="scope1">

            <el-tag>
              {{ scope1.row.specifications[0] }}
            </el-tag>
          </template>
        </el-table-column> 
        <el-table-column property="number" width="100" label="货品数量" />
 
 
        <el-table-column property="salesNumber" label="已售库存" />
        <el-table-column property="serviceTimes" label="服务次数" />
        <el-table-column property="serviceDuration" label="服务时长" />
        <el-table-column property="timeRange" label="服务时段" width="130px">
          <template slot-scope="scope1">
            <div v-for="(item, index) in scope1.row.timeRange" :key="index">
              {{ item }}</div>
          </template>
        </el-table-column> -->
      
        <el-table-column property="disType" label="是否显示">
          <template slot-scope="scope1">
            <el-tag>{{ scope1.row.deleted ? '否' : '是' }}</el-tag>
          </template>
        </el-table-column>
      </el-table>
      <div slot="footer" class="dialog-footer">
        <el-button @click="isShow = false">关闭</el-button> 
      </div>
    </el-dialog>

  </div>
</template>

<script>
import { getProduct } from '@/api/goods'
import Pagination from '@/components/Pagination' // Secondary package based on el-pagination

export default {
  name: 'Comment',
  components: { Pagination },
  data() {
    return {
      list: [],
      isShow: false
    }
  },
  created() {

  },
  methods: {
    showDetail(goodsId) { 
      this.isShow=true;
      getProduct({ goodsId: goodsId }).then(response => {
        this.list = response.data.data; 
        // console.log("114444",this.list);
        const productAttributes ={"1": "单次", "2": "品类","3":"周期","4":"保姆钟点工","5":"收纳","6":"其他"}
        const productType = {"0": "服务类(买约一体)", "2": "中介","3":"服务类(买约分离)","5":"代金券","6":"实物商品"}
        this.list.forEach(item => {
          item.type = productType[item.type]
          item.attribute = productAttributes[item.attribute]
        })
      }).catch(() => {
        this.list = []
        this.total = 0

      })
    },


  }
}
</script>
