<!-- editclassify -->
<template>
  <view class="editclassify">
    <!-- <Header :title="title" />
    <view style="height: 94upx;"></view> -->
    <view class="content">
      <view class="content-warp">
        
				<view class="uni-list-cell">
          <view class="name">所属店铺：</view>
          <view class="uni-list-cell-db">
            <picker
              @change="bindPickerChange"
              :value="storeIndex"
              :range="storeList"
              :disabled="storeDisabled"
              range-key="name"
              class="uni-upd"
            >
              <view class="uni-input">{{ storeList[storeIndex].name }}</view>
            </picker>
            <view class="icon-warp">
              <image
                src="../../static/images/moreicon.png"
                class="iconRight"
              ></image>
            </view>
          </view>
        </view>

				<view class="uni-list-cell">
          <view class="name">一级分类：</view>
          <view class="uni-list-cell-db">
            <picker
              @change="classChange"
              :value="classIndex"
              :range="classList"
              :disabled="classDisabled"
              range-key="name"
              class="uni-upd"
            >
              <view class="uni-input">{{ classList[classIndex].name }}</view>
            </picker>
            <view class="icon-warp">
              <image
                src="../../static/images/moreicon.png"
                class="iconRight"
              ></image>
            </view>
          </view>
        </view>

        <view class="inputnamt">
          <view class="title">分组名称：</view>
          <input
            class="txt"
            v-model="classname"
            type="text"
            placeholder="请输入分组名称"
            placeholder-style="color:#8f8f8f;"
          />
        </view>

        <view class="inputnamt">
          <view class="title">分组标识：</view>
          <input
            class="txt"
            v-model="classcode"
            type="text"
            placeholder="请输入分组标识"
            placeholder-style="color:#8f8f8f;"
          />
        </view>

        <view class="btn-warp">
          <view class="btn" @tap="saveClass">提交</view>
        </view>
      </view>
    </view>
    <rf-loading v-if="loading"></rf-loading>
  </view>
</template>

<script>
import Header from '../components/header';
export default {
  name: 'editclassify',
  components: {
    Header,
  },
  data() {
    //这里存放数据
    return {
      loading: true,
      title: '新增自定义分类',
			classData: '',
			scenicId: '',

			storeList: [{ name: '所属店铺', id: '' }],
			storeIndex: 0,
			storeId: '',
			storeDisabled: true,

			classList: [{name: '请选择', id: ''}],
			classIndex: 0,
			classId: '',
			classDisabled: true,

			classname: '',
			classcode: ''

    };
	},
  onLoad() {
    this.classData = uni.getStorageSync('classData');
    console.log(this.classData);
		this.getShopMessage()
		this.getOneClass()
    if (this.classData === 'add') {
			this.loading = false;
    } else {
      this.title = '编辑自定义分类'
      this.classname = this.classData.name
      this.classcode = this.classData.code
      this.loading = false
    }
  },
  //方法集合
  methods: {
		// 商家信息
    async getShopMessage() {
      await this.$http.get('/getUserInfo').then(async (res) => {
        if (res.data) {
          this.scenicId = res.data.id;
          this.getShopList();
        }
      });
    },
    // 所属店铺
    async getShopList() {
      this.storeList = [{ name: '所属店铺', id: '' }];
      await this.$http
        .get('/shop/getList', {
          mid: this.scenicId,
        })
        .then(async (res) => {
          if (res.data) {
            let arr = [];
            res.data.forEach((element) => {
              arr.push({ name: element.name, id: element.id });
            });
						this.storeList = this.storeList.concat(arr);
            this.storeDisabled = false
            
            // 回显
            if (this.classData.shopId) {
              this.storeList.forEach((element,index) => {
                if (this.classData.shopId === element.id) {
                  this.storeIndex = index
                }
              });
              this.storeId = this.classData.shopId
            }
          }
        });
		},
		// 选择店铺
    bindPickerChange(e) {
      this.storeIndex = e.detail.value;
			this.storeId = this.storeList[this.storeIndex].id;
		},
		// 一级分类
		async getOneClass () {
			await this.$http.get('/type/getParentList',{}).then(async (res)=>{
				if (res.code === 200 && res.msg==='OK') {
					let arr =[]
					res.data.forEach(element => {
						arr.push({name: element.name,id:element.id})
					});
					this.classList = this.classList.concat(arr)
          this.classDisabled = false
          
          // 回显
          if (this.classData.typeId) {
            this.classList.forEach((element,index) => {
              if (this.classData.typeId === element.id) {
                this.classIndex = index
              }
            });
            this.classId = this.classData.typeId
          }
				}
			})
		},
		// 选择一级分类
		classChange (e) {
			this.classIndex = e.detail.value;
			this.classId = this.classList[this.classIndex].id
		},
		// 提交
		async saveClass() {
			this.loading = true
			await this.$http.post('/goods/saveCustomGroup',{
				id: this.classData === 'add' ? '' : this.classData.id,
				name: this.classname,
				code: this.classcode,
				typeId: this.classId,
				shopId: this.storeId
			}).then(async (res)=>{
				if (res.code === 200 && res.msg==='OK') {
					this.$mHelper.toast('提交成功')
					setTimeout(() => {
						this.loading = false
						this.$mRouter.back()
					}, 800);
				}
			}).catch(error=>{
        console.log(error);
        this.loading = false
      })
		},

		// -------------------------------------
	
		
  },
};
</script>
<style lang="scss" scoped>
.editclassify {
  .content {
    padding: 25upx 0;
  }
  .content-warp {
    padding: 0 33upx 100upx;
    background-color: #fff;
    box-sizing: border-box;
  }
  .uni-list-cell {
    border-bottom: 2px solid #f4f4f4;
    .name {
      color: #2f2f2f;
      font-size: 28upx;
    }
    .uni-list-cell-db {
      height: 80upx;
      font-size: 28upx;
      display: flex;
      justify-content: space-between;
      align-items: center;
      background-color: #fff;
      color: #8f8f8f;
      font-size: 30upx;
      .uni-upd {
        width: 100%;
      }
    }
    .uni-input {
      height: 100%;
      line-height: 80upx;
    }
    .icon-warp {
      width: 19upx;
      .iconRight {
        width: 19upx;
        height: 27upx;
      }
    }
  }
  .inputnamt {
    height: 80upx;
    display: flex;
    align-items: center;
    border-bottom: 2px solid #f4f4f4;
    .title {
      color: #2f2f2f;
    }
    .txt {
      flex: 1;
    }
  }
  .btn-warp {
    margin-top: 80upx;
    display: flex;
    justify-content: center;
    .btn {
      width: 600upx;
      height: 90upx;
      border-radius: 20upx;
      text-align: center;
      line-height: 90upx;
      color: #fff;
      font-size: 30upx;
      font-weight: 700;
      letter-spacing: 2upx;
      background-color: #9e5dfc;
    }
  }
}
</style>
