<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>
      <ProductTable 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>
      <CouponTable 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" maxlength="20" class="input-sub" />
        </el-form-item>
        <el-form-item label="页面路径">
          <el-input v-model="value.link" maxlength="40" 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" maxlength="40" 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>
