<template>
  <div class="app-container">
    <el-form :inline="true" class="demo-form-inline">
      <el-form-item>
        <el-select v-model="pagerDto._Eq_EmailType" placeholder="邮件类型" clearable filterable>
          <el-option
            v-for="item in emailTypes"
            :key="item.Value"
            :label="item.Name"
            :value="item.Value"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button icon="el-icon-search" size="small" type="primary" :loading="serachLadding" @click="getNoticeEmailPageResult">搜索</el-button>
        <el-button size="small" type="" icon="el-icon-plus" @click="addNoticeEmailAddress">设置</el-button>
      </el-form-item>
    </el-form>
    <el-table :data="sData" border>
      <el-table-column label="邮件类型" prop="StrEmailType" />
      <el-table-column label="邮件标题" prop="NoticeTitle" />
      <el-table-column label="抄送地址" prop="NoticeEmails" />
      <el-table-column label="邮件时间" prop="NoticeTime" />
      <el-table-column>
        <template scope="r">
          <el-button size="small" type="" @click="setSendConifg(r.row)">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      :hide-on-single-page="true"
      :page-sizes="[20, 50, 100, 200]"
      :current-page="pagerDto.PageIndex"
      :page-size="pagerDto.PageSize"
      background
      layout="prev, pager, next ,total ,jumper,sizes,slot "
      :total="pagerDto.total"
      @current-change="getNoticeEmailPageResult"
    />
    <el-dialog
      title="发件配置"
      :visible.sync="dialogCustomerConfig"
    >
      <el-form label-width="80px">

        <el-form-item label="类型">
          <span v-if="editDto.Id>0">{{ editDto.StrEmailType }}</span>
          <el-select v-if="!(editDto.Id>0)" v-model="editDto.EmailType" placeholder="类型" clearable filterable>
            <el-option
              v-for="item in emailTypes"
              :key="item.Value"
              :label="item.Name"
              :value="item.Value"
            />
          </el-select>
        </el-form-item>

        <el-form-item label="抄送地址">
          <el-input v-model="editDto.NoticeEmails" min="0" autocomplete="off" />
        </el-form-item>

        <el-form-item label="执行时间">
          <el-input v-model="editDto.NoticeTime" min="0" autocomplete="off">
            <i slot="suffix" class="el-input__icon el-icon-s-promotion" @click="showHelp" />
          </el-input>
        </el-form-item>

        <el-form-item label="邮件标题">
          <el-input v-model="editDto.NoticeTitle" min="0" autocomplete="off" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogCustomerConfig = false">取 消</el-button>
        <el-button type="primary" @click="postSendConifg">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { _setSendConifg, _getNoticeEmailPageResult } from '@/api/notice'
import { _getCustomers, _getEmailType } from '@/api/baseInfo'
export default {
  name: 'SendJobConifg',
  data() {
    return {
      dialogCustomerConfig: false,
      createData: {},
      sData: [],
      sendConifgs: [],
      emailTypes: [],
      Customers: [],
      serachLadding: false,
      pagerDto:
            {
              PageIndex: 1,
              PageSize: 20,
              total: 0,
              _Eq_CustomerId: '',
              _Eq_EmailType: '',
              QuerySort: [{ Field: 'Id', IsDesc: true }]
            },
      editDto:
            {
              Id: 0,
              CustomerId: '',
              EmailType: '',
              NoticeEmails: ''
            }
    }
  },
  created() {
    _getCustomers().then(response => {
      this.Customers = response
      _getEmailType().then(response => {
        this.emailTypes = response
        this.getNoticeEmailPageResult()
      })
    })
  },
  methods: {
    showHelp() {
      window.open('https://cron.qqe2.com/')
    },
    getNoticeEmailPageResult(pageIndex) {
      if (pageIndex && pageIndex > 0) { this.pagerDto.PageIndex = pageIndex } else { this.pagerDto.PageIndex = 1 }
      this.serachLadding = true

      _getNoticeEmailPageResult(this.pagerDto).then(
        response => {
          for (var i = 0; i < response.Result.length; i++) {
            for (var j = 0; j < this.Customers.length; j++) {
              if (this.Customers[j].Id == response.Result[i].CustomerId) {
                response.Result[i].CustomerName = this.Customers[j].CompanyName
              }
            }
          }

          for (var i = 0; i < response.Result.length; i++) {
            for (var j = 0; j < this.emailTypes.length; j++) {
              if (this.emailTypes[j].Value == response.Result[i].EmailType) {
                response.Result[i].StrEmailType = this.emailTypes[j].Name
              }
            }
          }
          this.pagerDto.total = response.TotalCount
          this.sData = response.Result
          this.serachLadding = false
        }
      ).catch(error => {
        this.serachLadding = false
      }
      )
    },
    setSendConifg(row) {
      this.editDto = row
      this.dialogCustomerConfig = true
    },
    addNoticeEmailAddress() {
      this.editDto.Id = 0
      this.editDto.EmailType = ''
      this.editDto.NoticeEmails = ''
      this.editDto.CustomerId = ''
      this.dialogCustomerConfig = true
    },
    postSendConifg() {
      _setSendConifg(this.editDto).then(
        response => {
          this.getNoticeEmailPageResult()
          this.dialogCustomerConfig = false
        }
      ).catch(error => {
      })
    }
  }
}
</script>
