<template>
  <info-con title="基本信息：" class="base-info-con">
    <div class="item">
      <label class="label">商品名称：</label>
      <Input
        placeholder="请填写商品名称"
        v-model="data.name"
        :readonly="isDetail || isEdit || isDraft|| isAgain"
        :maxlength="30"
      />
    </div>
    <div class="item">
      <label class="label">商品类型：</label>
      <RadioGroup v-model="data.type" @on-change="changeType" :readonly="isDetail || isEdit || isDraft|| isAgain">
        <Radio label="1" :disabled="isDetail || isEdit || isDraft|| isAgain" class="ivu-radio">普通</Radio>
        <Radio label="2" :disabled="isDetail || isEdit || isDraft|| isAgain" class="ivu-radio">虚拟(不支持提货)</Radio>
        <!-- <Radio label="3" :disabled="isDetail || isEdit || isDraft|| isAgain" class="ivu-radio">打包</Radio> -->
        <Radio label="4" :disabled="isDetail || isEdit || isDraft|| isAgain" class="ivu-radio">NFT</Radio>
    </RadioGroup>
    </div>
    <div class="item">
      <label class="label">商品描述：</label>
      <Input
        type="textarea"
        :rows="5"
        placeholder="请填写商品描述"
        v-model="data.description"
        :readonly="isDetail"
        :maxlength="250"
      />
    </div>
    <div class="item">
      <label class="label">商品标签：</label>
      <div class="property-con">
        <div
          class="property-item"
          v-for="(item, index) of data.prop"
          :key="'prop-item-' + index"
        >
          <Input
            class="prop-name"
            placeholder="属性名(非必填)"
            v-model="item.name"
            :readonly="isDetail"
            :maxlength="30"
          />
          <label class="split">:</label>
          <Input
            class="prop-val"
            placeholder="属性值(非必填)"
            v-model="item.val"
            :readonly="isDetail"
            :maxlength="30"
          />
          <Icon
            class="del-con"
            type="md-close-circle"
            color="#ed4014"
            :size="20"
            @click="delProp(index)"
            v-if="!isDetail"
          />
        </div>
        <div class="add-btn">
          <Button
            type="info"
            shape="circle"
            size="small"
            @click="addProp"
            v-if="!isDetail "
            >+ 添加属性值(非必填)</Button
          >
        </div>
      </div>
    </div>
    <div class="item">
      <label class="label">所属类目：</label>
      <Input
        v-if="isDetail"
        v-model="data.categoryId"
        :readonly="isDetail|| isEdit"
        style="width:400px;"
      />
      <Cascader v-else style="width:400px;" :disabled="isEdit" :data="categoryList"  v-model="data.categoryId" @on-change="handleChange"></Cascader>
    </div>
    <!-- <div class="item">
      <label class="label">应用NFT：</label>
      <RadioGroup v-model="data.useNft">
        <Radio label="0" :disabled="isDetail || isEdit || isDraft|| isAgain" class="ivu-radio">否</Radio>
        <Radio label="1" :disabled="isDetail || isEdit || isDraft|| isAgain" class="ivu-radio">是</Radio>
      </RadioGroup>
    </div> -->
    <!-- <div class="item">
      <label class="label">正品认证：</label>
      <RadioGroup v-model="data.type">
        <Radio label="1" :disabled="isDetail || isEdit || isDraft|| isAgain" class="ivu-radio">申请</Radio>
        <Radio label="2" :disabled="isDetail || isEdit || isDraft|| isAgain" class="ivu-radio">不申请</Radio>
      </RadioGroup>
    </div> -->
  </info-con>
</template>

<script>
import InfoCon from './info-con'
export default {
  props: {
    data: {
      type: Object,
      default: {
        name: '',
        description: '',
        prop: [],
        // rate: '',
        // typeCode: '',
        type: '',
        useNft: '',
        categoryId: []
      }
    },
    isDetail: {
      type: Boolean,
      default: false
    },
    isEdit: {
      type: Boolean,
      default: false
    },
    isAgain: {
      type: Boolean,
      default: false
    },
    isDraft: {
      type: Boolean,
      default: false
    },
    clearForm: Function
  },
  data () {
    return {
      categoryList: []
    }
  },
  // watch: {
  //   'data.type' (newVal, oldVal) {
  //     console.log('oldVal', oldVal)
  //     console.log('newVal', newVal)
  //     if (oldVal != newVal) {
  //       this.data = {
  //         description: '',
  //         prop: [],
  //         useNft: '',
  //         categoryId: []
  //       }
  //     }
  //   }
  // },
  components: {
    InfoCon
  },
  created () {
    this.getCategory()
  },
  methods: {
    addProp () {
      this.data.prop.push({ name: '', val: '' })
    },
    delProp (index) {
      this.data.prop.splice(index, 1)
    },
    handleChange (value, selectedData) {
      // this.text = selectedData.map(o => o.label).join(', ')
      // console.log('value', value)
    },
    changeType () {
      // console.log(this.$parent)
      this.clearForm()
      // this.$parent.clearForm()
    },
    getCategory () {
      // 获取商品类目
      this.api({
        apiName: 'categoryList',
        success: (res) => {
          // console.log('res',res.data)
          let value = this.formatRes(res.data)
          value.forEach(item => {
            this.categoryList = item.children
          })
        }
      })
    },
    formatRes (res) {
      const arr = []
      let obj = {}
      res.forEach(item => {
        const tmp = { ...item }
        if (item.name) {
          if (tmp.childList) {
            tmp.children = this.formatRes(tmp.childList)
            obj = {
              value: tmp.categoryId,
              label: tmp.name,
              children: tmp.children,
              level: tmp.level,
              clazzId: tmp.clazzId,
              thumb: tmp.thumb,
              updateTime: tmp.updateTime
            }
          }
          arr.push(obj)
        }
      })
      // this.categoryList = arr
      // console.log('this.categoryList', this.categoryList)
      return arr
    }
  }
}
</script>

<style lang="less" scoped>
.base-info-con {
  .item {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    .ivu-radio{
      width: 200px;
    }
  }
  .item .label {
    display: block;
    width: 150px;
    text-align: right;
  }
  .item > .ivu-input-wrapper {
    flex: 1;
  }
  .item .property-con {
    flex: 1;
    padding: 20px;
    border: 1px solid #dcdee2;
    border-radius: 5px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
  }
  .item .property-con .add-btn {
    width: 100%;
  }
  .item .property-item {
    width: 50%;
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    padding-right: 30px;
    .prop-name {
      flex: 1;
    }
    .prop-val {
      flex: 2;
    }
    .split {
      margin: 0 5px;
      font-weight: bold;
    }
    .del-con {
      margin-left: 5px;
      cursor: pointer;
    }
  }
}
</style>
