<template>
  <!-- 订阅配置 -->
  <a-form-model ref="ruleSubscribeForm" :model="subscribeForm" :label-col="labelCol" :wrapper-col="wrapperCol">
    <a-form-model-item ref="subscribe" label="订阅配置:" prop="subscribe">
      <a-switch v-model="subscribeForm.subscribe" @change="onChange" />
    </a-form-model-item>
    <a-form-model-item v-if="this.checkState" ref="noticeState" label="通知方式:" prop="noticeState">
      <a-radio-group v-model="subscribeForm.noticeState">
        <a-radio value="1">
          邮件
        </a-radio>
      </a-radio-group>
    </a-form-model-item>

    <a-form-model-item v-if="this.checkState" ref="noticeContent" label="通知内容:" prop="noticeContent">
      <a-checkbox-group v-model="subscribeForm.noticeContent" @change="onCheckChange">
        <a-checkbox value="1">
          告警信息
        </a-checkbox>
        <a-checkbox value="2">
          质量报告
        </a-checkbox>
      </a-checkbox-group>
    </a-form-model-item>
    <a-form-model-item v-if="this.checkState" ref="subscribes" label="订阅用户:" prop="subscribes">
      <a-button type="primary" @click="getAddUser">
        编辑用户
      </a-button>
      <div class="table-content">
        <FilterTable
          ref="table"
          :columns="columns"
          v-model="subscribeForm.subscribes"
          :dataSource="subscribeForm.subscribes"
          :total="total"
          @changeParams="changeParams" />
      </div>

      <a-modal
        width="800px"
        v-model="modalVisible"
        title="质量任务配置"
        :footer="null"
        :destroyOnClose="true"
        @ok="handleOk">
        <AddUser
          ref="model"
          @handleOk="handleOk"
          @getAddedUserData="getAddedUserData"
          :addedUserDataSource="subscribeForm.subscribes"
        />

      </a-modal>

    </a-form-model-item>
  </a-form-model>
</template>

<script type="text/ecmascript-6">
import FilterTable from '@/components/filterTable'
import AddUser from './AddUser'

export default {
  components: {
    FilterTable,
    AddUser
  },
  data() {
    return {
      labelCol: { span: 4 },
      wrapperCol: { span: 18 },
      columns: [
        {
          title: '姓名',
          dataIndex: 'subscribersName',
          key: 'subscribersName',
          align: 'center',
          width: 200
        },
        {
          title: '邮箱',
          dataIndex: 'subscribersEmail',
          key: 'subscribersEmail',
          align: 'center'
        }
      ],
      subscribeForm: {
        subscribe: false,
        noticeState: '1',
        subscribes: []
      },
      checkState: false,
      total: 0,
      selectedRowsId: [],
      params: {
        pageSize: 10,
        pageNum: 1
      },
      modalVisible: false
    }
  },
  mounted() {
  },
  methods: {
    onCheckChange(checkedValues) {
      console.log('subscribeForm', this.subscribeForm)
    },
    onChange(checked) {
      this.checkState = checked
      // console.log('checked', checked)
    },
    changeParams(key, value) {
      this.$set(this.params, key, value)
    },
    handleOk() {
      this.modalVisible = false
    },
    getAddUser() {
      this.modalVisible = true
      // console.log('mmmmmmmm: ', this.$refs.model)
    },
    // 获得编辑用户结果
    getAddedUserData(data) {
      this.modalVisible = false
      this.subscribeForm.subscribes = data
      // console.log('data', data)
    }
  }
}
</script>

<style scoped lang='less'>
.tips {
  color: #f5222d;
  line-height: 22px;
}
.table-content {
  margin: 10px 0;
  /deep/table tr th:first-child {
    display: none !important;
  }
  /deep/table tr td:first-child {
    display: none !important;
  }
}
</style>
