<template>
  <el-dialog
    class="xt-edit-dialog"
    :title="title"
    :visible.sync="dialogShow"
    @close="close"
  >
    <el-form class="xt-form" ref="form" :model="form" label-width="80px">
      <el-form-item label="活动名称">
        <el-col :span="17">
          <el-input v-model="form.name"></el-input>
        </el-col>
      </el-form-item>
      <el-form-item label="活动区域">
        <el-select v-model="form.region" placeholder="请选择活动区域">
          <el-option label="区域一" value="1"></el-option>
          <el-option label="区域二" value="2"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="活动时间">
        <el-col :span="8">
          <el-date-picker
            type="date"
            placeholder="选择日期"
            v-model="form.date1"
            style="width: 100%"
          ></el-date-picker>
        </el-col>
        <el-col class="line" :span="1">-</el-col>
        <el-col :span="8">
          <el-time-picker
            placeholder="选择时间"
            v-model="form.date2"
            style="width: 100%"
          ></el-time-picker>
        </el-col>
      </el-form-item>
      <el-form-item label="即时配送">
        <el-switch v-model="form.delivery"></el-switch>
      </el-form-item>
      <el-form-item label="活动性质">
        <el-checkbox-group v-model="form.type">
          <el-checkbox label="1" name="type">美食/餐厅线上活动</el-checkbox>
          <el-checkbox label="2" name="type">地推活动</el-checkbox>
          <el-checkbox label="3" name="type">线下主题活动</el-checkbox>
          <el-checkbox label="4" name="type">单纯品牌曝光</el-checkbox>
        </el-checkbox-group>
      </el-form-item>
      <el-form-item label="特殊资源">
        <el-radio-group v-model="form.resource">
          <el-radio label="1">线上品牌商赞助</el-radio>
          <el-radio label="2">线下场地免费</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="活动形式">
        <el-input type="textarea" v-model="form.desc"></el-input>
      </el-form-item>
      <el-form-item label="树形控件">
        <el-tree
          :data="form.treeData.data"
          show-checkbox
          node-key="id"
          ref="tree"
          :default-expanded-keys="form.treeData.defaultExpandKeys"
          :default-checked-keys="form.treeData.defaultCheckedKeys"
          :props="form.treeData.defaultProps"
        >
        </el-tree>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">{{title === '新建' ? '立即创建' : '保存'}}</el-button>
        <el-button @click="close">取消</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<script>
export default {
  name: "El-pagination",
  props: {
    dialogShow: {
      type: Boolean,
      default: false,
    },
    dialogData: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  watch: {
    dialogData: {
      handler(newVal) {
        this.title = newVal.title;
        this.form = newVal.form;
      },
      immediate: true,
      deep: true,
    },
  },
  data() {
    return {
      title: '',
      form: {},
    };
  },
  // 销毁组件时执行
  methods: {
    onSubmit() {
      let checkedData = this.getCheckedData();
      this.form.treeData.checkedData = checkedData;
      this.$emit("submit", this.form);
    },
    getCheckedData() {
      let arr = this.$refs.tree.getCheckedNodes();
      arr = arr.filter((item) => {
        if (!item.children) {
          return true;
        }
      });
      return arr;
    },
    close() {
      this.$emit("update:dialogShow", false);
    },
  },
};
</script>

<style lang="scss" scoped>
.xt-edit-dialog {
  /deep/ .el-dialog__body {
    padding: 10px 20px 30px 20px;
    .xt-form {
      width: 100%;
      .line {
        text-align: center;
      }
    }
  }
}
</style>
