<template>
  <a-modal
    title="维护邮件发送通知"
    v-model="emailMsgModVis"
    :confirmLoading="confirmLoading"
    @ok="onSubmit"
    @cancel="handleCancel"
    width="60%"
    style="top:330px;left:100px;"
  >
    <!-- tabel 加载 -->
    <a-spin :spinning="confirmLoading">
      <a-form-model ref="tableformRef" :model="form">
        <a-table
          :loading="loading"
          bordered
          :row-key="record => record.id"
          :pagination="ipagination"
          @change="handleTableChange"
          :columns="emailMsgColumns"
          :data-source="form.emailMsgData"
        >

          <!-- 是否启用 -->
          <template slot="isEnable" slot-scope="text, record, index">
            <a-form-model-item prop="isEnable" :rules="rules.isEnable">
              <a-select v-model="record.isEnable">
                <a-select-option :value="1">是</a-select-option>
                <a-select-option :value="2">否</a-select-option>
              </a-select>
            </a-form-model-item>
          </template>

          <!-- 每周 -->
          <template slot="weekly" slot-scope="text, record, index">
            <a-form-model-item prop="weekly" :rules="rules.weekly">
              <a-select v-model="record.weekly">
                <a-select-option :value="1">周一</a-select-option>
                <a-select-option :value="2">周二</a-select-option>
                <a-select-option :value="3">周三</a-select-option>
                <a-select-option :value="4">周四</a-select-option>
                <a-select-option :value="5">周五</a-select-option>
                <a-select-option :value="6">周六</a-select-option>
                <a-select-option :value="7">周日</a-select-option>
              </a-select>
            </a-form-model-item>
          </template>

          <!-- 每月 -->
          <template slot="monthly" slot-scope="text, record, index">
            <a-form-model-item prop="monthly" :rules="rules.monthly">
              <a-input style="width:100%" type="number" :min="1" :max="31" v-model="record.monthly" />
            </a-form-model-item>
          </template>

          <!--状态 slot-scope="text, record" -->
          <span slot="state">
            <!-- v-if="record.isRelease == '0'" -->
            <a-tag color="orange">已发送</a-tag>
            <!-- <a-tag color="#87d068" v-else>仅保存</a-tag> -->
          </span>

          <!-- 操作按钮 保存 发送 -->
          <span slot="operationSlot" slot-scope="text, record">
            <a @click="send(record)" style="color:green;">发送</a>
            <a-divider type="vertical" />
            <a @click="save(record)">保存</a>
          </span>
        </a-table>
      </a-form-model>
    </a-spin>
  </a-modal>
</template>

<script>
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import JEllipsis from '@/components/jeecg/JEllipsis'
import moment from 'moment'

export default {
  name: 'EmailMsgModal', // 维护邮件发送通知
  mixins: [JeecgListMixin],
  components: { JEllipsis, moment },

  data() {
    return {
      loading: false, // 表格加载
      // 表头
      emailMsgColumns: [
        {
          title: '接收方',
          dataIndex: 'acceptor',
          width: 160,
          className: 'replacecolor'
        },
        {
          title: '是否启用',
          dataIndex: 'isEnable',
          width: 90,
          scopedSlots: { customRender: 'isEnable' },
          className: 'replacecolor'
        },
        // {
        //   title: '创建时间',
        //   dataIndex: 'createTime',
        //   align: 'center',
        //   sorter: true,
        //   customRender: text => {
        //     return moment(text).format('YYYY-MM-DD')
        //   }
        // },

        {
          title: '每周',
          dataIndex: 'weekly',
          width: 100,
          scopedSlots: { customRender: 'weekly' },
          className: 'replacecolor'
        },

        {
          title: '每月',
          dataIndex: 'monthly',
          width: 90,
          scopedSlots: { customRender: 'monthly' },
          className: 'replacecolor'
        },
        {
          title: '状态',
          dataIndex: 'state',
          width: 60,
          scopedSlots: { customRender: 'state' },
          className: 'replacecolor'
        },
        {
          title: '操作',
          dataIndex: 'operation',
          scopedSlots: { customRender: 'operationSlot' },
          width: 90,
          className: 'replacecolor'
        }
      ],
      form: {
        emailMsgData: [{ acceptor: '销售部' }, { acceptor: '财务部门' }]
      },

      // orderDataform: this.$form.createForm(this),
      confirmLoading: false,
      emailMsgModVis: false,
      // 三个选项
      rules: {
        isEnable: { required: true, message: '请选择', trigger: 'blur' },
        weekly: { required: true, message: '请选择周几', trigger: 'blur' },
        monthly: { required: true, message: '请输日期', trigger: 'blur' }
      }
    }
  },
  // 接收父组件 方法
  props: {
    father: {
      type: Function,
      default: null
    }
  },
  created() {},
  methods: {
    // 操作按钮  发送
    send(record) {
      // 验证是否为空
      this.$refs.tableformRef.validate(async valid => {
        if (valid) {
          console.log('发送')
          console.log('record')
          this.$message.success('保存成功')
        }
      })
    },
    // 操作按钮 保存
    save(record) {
      // 验证是否为空
      this.$refs.tableformRef.validate(async valid => {
        if (valid) {
          console.log('保存')
          console.log('record')
          this.$message.success('保存成功')
        }
      })
    },

    // 弹框确定
    onSubmit() {
      console.log('弹框确定')
      this.emailMsgModVis = false
      this.record.isEnable = '' // 清空
      console.log('清空输入、选择')
      this.record.weekly = ''
      console.log('eeee')
      this.record.monthly = ''
    },

    // 弹框取消
    handleCancel() {
      this.emailMsgModVis = false
      this.record.isEnable = '' // 清空
      console.log('清空输入、选择')
      this.record.weekly = ''
      this.record.monthly = ''
    }

    // 选中行
    // onSelectChange(keys, rows) {
    //   this.selectedRowKeys = keys
    //   this.selectedRows = rows
    // },
  },
  computed: {}
}
</script>
<style lang="less" scoped>
@import '~@assets/less/common.less';
/deep/ .ant-table-thead > tr > th {
  text-align: center;
  // font-weight: 700;
}
/deep/ .ant-table-tbody {
  text-align: center;
}
// th.replacecolor {
// background-color:  #ccc;
// }
</style>
