<template>
  <div>
    <xy-dialog ref="dialog" :width="60" :is-show.sync="isShow" :type="'form'" :title="$route.meta.title" :form="form"
      :rules='rules' @submit="submit">
      <template v-slot:name>
        <div class="xy-table-item">
          <div class="xy-table-item-label" style="font-weight: bold">
            <span style="color: red;font-weight: bold;padding-right: 4px;"></span>Sending message type：{{form.name}}
          </div>
          <div class="xy-table-item-content">

          </div>
        </div>
      </template>
      <template v-slot:email>
        <div class="xy-table-item">
          <div class="xy-table-item-label" style="font-weight: bold">
            <span style="color: red;font-weight: bold;padding-right: 4px;"></span>Email：
          </div>
          <div class="xy-table-item-content">
            <el-button type="primary" style="margin-bottom:10px" size="small" @click="addEmail">Add</el-button>
            <xy-table key="1" style="width:850px" :list="form.email" :isPage="false" :height="350"
              :table-item="email_item">
              <template v-slot:title>
                <el-table-column align='left' label="title" width="340">
                  <template slot-scope="scope">
                    <el-input placeholder="Please Input" style="width:100%" v-model="scope.row.title"></el-input>
                  </template>
                </el-table-column>
              </template>
              <template v-slot:value>
                <el-table-column align='left' label="email" width="340">
                  <template slot-scope="scope">
                    <el-input placeholder="Please Input" style="width:100%" v-model="scope.row.value"></el-input>
                  </template>
                </el-table-column>
              </template>
              <template v-slot:btns>
                <el-table-column align='center' label="operate" width="170" header-align="center">
                  <template slot-scope="scope">
                    <el-popconfirm confirm-button-text="confirm" cancel-button-text="cancel" style="margin:0 10px"
                      @confirm="delEmail(scope.$index)" title="Are you sure to delete it?">
                      <el-button type="danger" size="small" slot="reference">delete</el-button>
                    </el-popconfirm>
                  </template>
                </el-table-column>
              </template>
            </xy-table>
          </div>
        </div>
      </template>

    </xy-dialog>

  </div>
</template>

<script>
  import {
    save,
    show
  } from "@/api/config/index.js"
  export default {
    data() {
      return {
        isShow: false,
        id: '',
        type: 'add',
        email_item: [{
          prop: 'title',
          lable: 'Title',
        }, {
          prop: 'value',
          lable: 'Value',
        }],
        form: {
          name: '',
          email: []
        },
        rules: {

        }
      }
    },
    created() {

    },
    methods: {
      addEmail() {
        this.form.email.push({
          value: '',
          title: ''
        })
      },
      delEmail(index) {

        this.form.email.splice(index, 1)
      },
      submit() {
        if (this.id) {
          this.form.id = this.id
        } else {
          this.form.id = ''
        }
        console.log("this.form", this.form)
        // return
        save({
          ...this.form
        }).then(res => {
          this.$message({
            type: 'success',
            message: 'Success'
          })
          this.isShow = false
          this.$emit('refresh')
        })

      },

      getDetail() {
        show({
          id: this.id,
        }).then(res => {
          this.form = this.base.requestToForm(res, this.form)
          this.form.email = res.email ? res.email : []
        })
      }
    },
    watch: {
      isShow(newVal) {
        if (newVal) {
          if (this.type === 'editor') {
            this.getDetail()
          }
        } else {
          this.id = ''
          this.form = {
            name: '',
            email: []
          }
          this.$refs['dialog'].reset()
        }
      },
    }

  }
</script>

<style scoped lang="scss">
  ::v-deep .name,
  ::v-deep .email {
    flex-basis: 100%;
  }
</style>
