<template>
  <div class="link-config">
    <div v-if="linkType === 1">
      <span class="name">{{ value.name }}</span>
      <el-button v-if="value.name" type="text" @click="editProduct">修改</el-button>
      <el-button
        v-else
        size="mini"
        type="primary"
        @click="addProduct"
      >
        添加商品
      </el-button>
      <product-table ref="productTable" @doSubmit="proSubmit" />
    </div>
    <div v-if="linkType === 2">
      <el-cascader
        ref="cascader"
        v-model="value.id"
        :options="categoryList"
        :props="{ checkStrictly: true,label: 'categoryName',value: 'id',children: 'childs' }"
        clearable
        @change="categoryChange"
      />
    </div>
    <div v-if="linkType === 3">
      <ul v-if="value && value.items && value.items.length > 0" class="coupon-list">
        <li v-for="(item,index) in value.items" :key="index">
          <span class="name">{{ item.activityName }}</span>
          <el-button v-if="item.activityId" type="text" @click="editCoupon">修改</el-button>
        </li>
      </ul>
      <el-button
        v-else
        size="mini"
        type="primary"
        @click="addCoupon"
      >
        添加平台券
      </el-button>
      <coupon-table ref="couponTable" :is-multiple="true" @doSubmit="couponSubmit" />
    </div>
    <div v-if="linkType === 4">
      <el-form class="link-form" :model="value" label-width="100px">
        <el-form-item label="小程序app id">
          <el-input v-model="value.appId" class="input-sub" />
        </el-form-item>
        <el-form-item label="页面路径">
          <el-input v-model="value.link" class="input-sub" />
        </el-form-item>
      </el-form>
    </div>
    <div v-if="linkType === 5">
      <el-form :model="value" label-width="100px">
        <el-form-item label="页面路径">
          <el-input v-model="value.link" class="input-sub" />
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import ProductTable from '../basics/productTable'
import CouponTable from '../basics/couponTable'
import {
  getClassify
} from '@/api/public'
import { checkEmptyChild } from '@@/config/common'
export default {
  name: 'LinkConfig',
  components: { CouponTable, ProductTable },
  props: {
    value: {
      type: Object,
      default: () => {}
    },
    linkType: {
      type: Number,
      default: 0
    }
  },
  data () {
    return {
      categoryList: []
    }
  },
  mounted () {
    this.getCategoryList()
  },
  methods: {
    addProduct () {
      this.$refs.productTable.visible = true
    },
    editProduct () {
      this.$refs.productTable.visible = true
    },
    proSubmit (val) {
      this.$set(this.value, 'id', val.productId)
      this.$set(this.value, 'shopId', val.shopId)
      this.$set(this.value, 'skuId', val.skuId)
      this.$set(this.value, 'name', val.productName)
    },
    addCoupon () {
      this.$refs.couponTable.visible = true
    },
    editCoupon () {
      this.$refs.couponTable.visible = true
    },
    couponSubmit (items) {
      this.$set(this.value, 'items', items)
    },
    // 获取前端分类
    getCategoryList () {
      getClassify().then(res => {
        this.categoryList = res.data
        checkEmptyChild(this.categoryList)
      }).catch(res => {
        console.log('err:' + res)
        return this.$message({
          message: res.msg,
          type: 'error'
        })
      })
    },
    // 类别改变
    categoryChange (val) {
      const nodesObj = this.$refs['cascader'].getCheckedNodes(); const pathLabels = nodesObj[0].pathLabels.join('/')
      this.$set(this.value, 'name', pathLabels)
    }
  }
}
</script>

<style scoped lang="scss">
.link-config{
  .radio{
    padding: 5px 0;
  }
  .coupon-list{
    margin: 0;
    padding: 0;
    li{
      list-style: none;
    }
    .el-button{
      margin-left: 10px;
      font-size: 14px;
    }
  }
  .input-sub{
    width: 300px;
    ::v-deep .el-input__inner{
      height: 32px;
      line-height: 32px;
    }
  }
  .link-form{
    .el-form-item{
      margin-top: 10px;
      &:first-child{
        margin-top: 0px;
      }
    }
  }
  .el-button--text{
    font-size: 14px;
    margin-left: 10px;
  }
}
</style>
