<template>
  <el-dialog
    :visible.sync="visible"
    v-bind="modalOptions"
    append-to-body
  >
    <el-form
      ref="formData"
      :model="formData"
      :rules="formRules"
      size="mini"
      label-suffix=":"
      label-width="150px"
    >
      <el-form-item label="平台分类" prop="classifyId">
        <el-cascader
          v-model="formData.classifyId" placeholder="请选择平台分类" :options="categoryList"
          :props="{ checkStrictly: false, expandTrigger: 'hover', label: 'categoryName', value: 'id', children: 'childs' }" clearable
        />
      </el-form-item>
      <el-form-item label="商家分组" prop="shopGroupId">
        <el-cascader
          v-model="formData.shopGroupId" placeholder="请选择分组类型" :options="groupList"
          :props="{ checkStrictly: true, expandTrigger: 'hover', label: 'groupName', value: 'shopGroupId', children: 'childs' }"
          clearable size="mini" class="filter-item" style="width: 200px;margin-left: 10px;"
        />
      </el-form-item>
      <el-form-item label="是否上架" prop="shelveState">
        <el-radio-group v-model="formData.shelveState">
          <el-radio :label="1">是</el-radio>
          <el-radio :label="0">否</el-radio>
        </el-radio-group>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button size="mini" @click="handleClose">取 消</el-button>
      <el-button type="primary" size="mini" @click="handleSubmit">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { getShopId } from '@/utils/auth'
import { shopSelectionSelectShopLibrary } from '@/api/selectionCenter/selectionCenter'
import { getClassify, getGroupSelect } from '@/api/commodity'
import XeUtils from 'xe-utils'

export default {
  name: 'SelectionAddModal',
  components: {
  },
  data() {
    return {
      modalOptions: {
        closeOnClickModal: false,
        width: '820px',
        title: '补充信息'
      },
      visible: false,
      formData: {
        shopId: getShopId(),
        productId: '',
        shopParentId: '',
        classifyId: '',
        shopGroupId: [],
        shelveState: ''
      },
      formRules: {
        classifyId: [
          { required: true, type: 'array', message: '缺少平台分类' }
        ],
        shopGroupId: [
          { required: true, type: 'array', message: '缺少商家分组' }
        ],
        shelveState: [
          { required: true, message: '请选择是否上架' }
        ]
      },
      groupList: [],
      categoryList: []
    }
  },
  methods: {
    handleClose() {
      this.visible = false
    },
    async getCategoryTreeList() {
      const res = await getClassify()
      XeUtils.eachTree(res.data, (item) => {
        if (Array.isArray(item.childs) && item.childs.length === 0) {
          item.childs = undefined
        }
      }, { children: 'childs' })
      this.categoryList = res.data
    },
    async getGroupDataList() {
      const result = await getGroupSelect({})
      XeUtils.eachTree(result.data, (item) => {
        if (Array.isArray(item.childs) && item.childs.length === 0) {
          item.childs = undefined
        }
      }, { children: 'childs' })
      this.groupList = result.data
    },
    handleOpen(params = {}) {
      this.getCategoryTreeList()
      this.getGroupDataList()
      this.formData.productId = params.productId
      this.formData.shopParentId = params.shopId
      this.visible = true
      this.$refs.formData && this.$refs.formData.resetFields()
    },
    handleSubmit() {
      this.$confirm('确定选择加入该选品吗？')
        .then(async () => {
          this.$refs.formData.validate(async (valid) => {
            if (valid) {
              const loading = this.$loading({ text: '提交中，请稍候……' })
              try {
                const { classifyId, shopGroupId, ...otps } = this.formData
                const params = {
                  ...otps,
                  classifyId: classifyId[classifyId.length - 1],
                  shopGroupId: shopGroupId[shopGroupId.length - 1]
                }
                await shopSelectionSelectShopLibrary(params)
                loading.close()
                this.$message({ message: `加入成功!`, type: 'success' })
                this.$emit('success')
                this.visible = false
              } catch (e) {
                loading.close()
              } finally {
                loading.close()
              }
            } else {
              this.$message({ message: '请输入相关信息', type: 'warning' })
              return false
            }
          })
        })
        .catch(() => {})
    }
  }
}
</script>

