<template>
  <el-dialog title="企微任务" :visible.sync="show" width="630px" @closed="close">
    <dm-steps class="step-inner" :active="step" finish-status="success">
      <dm-step title="编辑基本信息"></dm-step>
      <dm-step title="配置任务完成方式"></dm-step>
    </dm-steps>
    <el-form v-show="step == 0">
      <el-form-item label="选择企业"></el-form-item>
      <el-form-item label="任务标题"></el-form-item>
      <el-form-item label="任务描述"></el-form-item>
      <el-form-item label="任务发放规则"></el-form-item>
      <el-form-item label="任务逾期判定"></el-form-item>
    </el-form>
    <div v-show="step == 1"></div>
    <template slot="footer" v-if="step == 0">
      <el-button @click="close">取消</el-button>
      <el-button type="primary" @click="step = 1">下一步</el-button>
    </template>
    <template slot="footer" v-else-if="step == 1">
      <el-button type="primary" @click="step = 0">上一步</el-button>
      <el-button type="primary" @click="addItem">确定</el-button>
    </template>
  </el-dialog>
</template>

<script>
export default {
  name: 'lib-qywx',
  props: {
    item: {
      type: Object,
      default() {
        return {};
      }
    },
    show: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      cardLevelList: [],
      cardLevel: '',
      step: 0
    };
  },
  mounted() {
    console.log(1);
  },
  watch: {
    show(val) {
      if (val) {
        this.cardLevel = this.item.relationId || '';
      } else {
        this.cardLevel = '';
      }
    }
  },
  methods: {
    close() {
      this.$emit('update:show', false);
    },
    addItem() {
      if (!this.cardLevel) {
        return this.$message({ type: 'warning', message: '未选择会员卡等级' });
      }
      let title = this.cardLevelList.find(item => item.key === this.cardLevel).value;
      this.$emit('sendItem', { title, relationId: this.cardLevel, comName: 'grade' });
      this.close();
    }
  }
};
</script>

<style lang="scss" scoped>
.step-wrap {
  // width: calc(100% + 48px);
  // height: 100px;
  // margin-left: -24px;
  // border-bottom: 1px solid #dcdfe6;
  .step {
    // width: 100%;
    .step-inner {
      // width: 750px;
      margin: 0 auto;
    }
  }
}
</style>
