<template>
  <el-dialog
    :title="title"
    :visible.sync="visible"
    width="640px"
    @close="handleClose">
    <el-form
      inline
      :model="form"
      v-loading="loading"
      ref="form"
      class="form-wrap"
      label-width="200px">
      <div class="dialog-info">
        <el-form-item
          class="is-required"
          verify
          label="升级会员类型"
          prop="memberTypeIds">
          <el-select
            v-model="form.memberTypeIds"
            multiple
            filterable
            placeholder="请选择">
            <el-option
              v-for="item in memberTypeList"
              :key="item.id"
              :label="item.name"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
      </div>
      <div
        class="table-box"
      >
        <el-table
          border
          stripe
          :data="form.memberUpgrades">
          <el-table-column
            prop="upgradeName"
            label="会员类型">
          </el-table-column>
          <el-table-column
            label="价格"
            min-width="90">
            <template slot-scope="scope">
              <el-input-number
                controls-position="right"
                v-model="scope.row.upgrade_price"
                :min="0"
                :step="0.01"
                :precision="2"
              ></el-input-number>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-form>

    <div slot="footer">
      <el-button @click="handleClose">
        取 消
      </el-button>
      <el-button
        type="primary"
        @click="handleSubmit">
        确 定
      </el-button>
    </div>
  </el-dialog>
</template>

<script>
import { apiMember } from '@/api/member'

export default {
  props: {
    allMemberTypeList: {
      type: Array,
      default: () => []
    }
  },

  data () {
    return {
      title: '',
      visible: false,
      loading: false,
      memberTypeList: [],
      form: {
        memberUpgrades: [],
        memberTypeIds: []
      }
    }
  },
  watch: {
    'form.memberTypeIds': {
      handler: function (newVal, oldVal) {
        // 根据会员类型选择增加or删除
        if (newVal.length > oldVal.length) {
          const addMemberTypeId = newVal[newVal.length - 1]
          const addMemberType = this.memberTypeList.find(i => i.id === addMemberTypeId)
          addMemberType.upgrade_id = addMemberType.id
          addMemberType.upgradeName = addMemberType.name
          if (newVal.length !== this.form.memberUpgrades.length) {
            this.form.memberUpgrades.push(addMemberType)
          }
        } else {
          const removeMemberTypeId = oldVal.find(i => !newVal.includes(i))
          if (this.form.memberUpgrades) {
            this.form.memberUpgrades = this.form.memberUpgrades.filter(i => i.upgrade_id !== removeMemberTypeId)
          }
        }
      }
    }
  },
  methods: {
    show (data) {
      this.visible = true
      this.memberTypeList = this.allMemberTypeList.filter(i => i.id !== data.id)
      this.$nextTick(() => {
        this.reset()
        this.form = Object.assign({}, this.form, JSON.parse(JSON.stringify(data)))
        this.form.memberUpgrades = this.form.memberUpgrades || []
        this.form.memberTypeIds = this.form.memberUpgrades ? this.form.memberUpgrades.map(i => { return i.upgrade_id }) : []
        this.title = '【' + data.name + '】 ' + '会员升级设置'
      })
    },
    reset () {
      this.$refs.form.resetFields()
    },
    handleClose () {
      this.visible = false
    },

    handleSubmit () {
      this.$refs.form.validate(valid => {
        if (valid) {
          this.loading = true
          let params = JSON.parse(JSON.stringify(this.form))
          console.log('params', params)
          apiMember('updateMemberType', params).then(res => {
            this.$message.success('操作成功。')
            this.handleClose()
            this.$emit('update')
            this.loading = false
          }).finally(() => {
            this.loading = false
          })
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
