<template>
  <div style="box-sizing: border-box; padding: 20px">
    <zj-form-container
      ref="formRef"
      :formData="formData"
      :formRules="formRules"
      :formAttributes="{ 'label-position': 'top' }"
    >
      <zj-form-module title="邮箱配置" :formData="formData" :formItems="formItems" :column="1"> </zj-form-module>
    </zj-form-container>
    <div>
      <el-button size="mini" type="primary" @click="submit">提交</el-button>
      <el-button size="mini" type="success" @click="reset">重置</el-button>
    </div>
  </div>
</template>

<script>
import { insureEmailConfig, insureEmailDetail } from '@/api/InsuranceManagement.js'
import editTable from '@/components/template/editTable.js'
import { getDataDictionary } from '@/api/dataDictionary.js'
export default {
  mixins: [editTable],
  data() {
    return {
      formData: {
        accidentMailbox: '',
        employerMailbox: '',
        receiveMailbox: '',
        appToken: '',
        companyId: '',
        overNum: '',
        sendMailbox: '',
        sendName: '',
        sendPassword: '',
        sendTime: '',
        mailboxReceives: []
      },
      formRules: {
        appToken: [{ required: true, message: '请输入', trigger: 'blur' }],
        companyId: [{ required: true, message: '请输入', trigger: 'blur' }],
        overNum: [{ required: true, message: '请输入', trigger: 'blur' }],
        sendMailbox: [{ required: true, message: '请输入', trigger: 'blur' }],
        sendName: [{ required: true, message: '请输入', trigger: 'blur' }],
        sendMailbox: [{ required: true, message: '请输入', trigger: 'blur' }],
        sendPassword: [{ required: true, message: '请输入', trigger: 'blur' }],
        sendTime: [{ required: true, message: '请输入', trigger: 'blur' }]
      },
      INSURE_STEAD_UNIT: []
    }
  },
  computed: {
    formItems() {
      return [
        {
          name: 'el-input',
          md: 24,
          attributes: {},
          formItemAttributes: { label: '接收邮箱,（意外险专用）,多邮箱以英文逗号隔开', prop: 'accidentMailbox' }
        },
        {
          name: 'el-input',
          md: 24,
          attributes: {},
          formItemAttributes: { label: '接收邮箱,（雇主险专用）,多邮箱以英文逗号隔开', prop: 'employerMailbox' }
        },
        {
          name: 'slot-component',
          md: 24,
          formItemAttributes: {
            label: '',
            'label-width': '0px',
            prop: 'mailboxReceives',
            rules: []
          },
          render: (h, { props, onInput }) => {
            var { value } = props
            return this.convertTableJson(
              value,
              [
                {
                  columnAttributes: {
                    label: '人力资源公司',
                    prop: 'dictId',
                    propName: 'dictName',
                    width: 300
                  },
                  editRender: (h, { row, column, index }) => {
                    return (
                      <div class="redbordererr">
                        <el-form-item
                          label=""
                          label-width="0px"
                          prop={`mailboxReceives.${index}.${column.columnAttributes.prop}`}
                          rules={[{ required: true, message: '请填写', trigger: 'blur' }]}
                        >
                          <el-select
                            filterable={true}
                            value={row[column.columnAttributes.prop]}
                            onInput={val => {
                              var data = this.INSURE_STEAD_UNIT.find(item => item.value === val)
                              row[column.columnAttributes.prop] = val
                              row[column.columnAttributes.propName] = data?.label || ''
                            }}
                            placeholder="请输入内容"
                          >
                            {this.INSURE_STEAD_UNIT.map((item, index_) => (
                              <el-option key={index_} label={item.label} value={item.value}></el-option>
                            ))}
                          </el-select>
                        </el-form-item>
                      </div>
                    )
                  },
                  viewRender: (h, { row, column, index }) => {
                    return (
                      <div class="redbordererr">
                        <el-form-item
                          label=""
                          label-width="0px"
                          prop={`mailboxReceives.${index}.${column.columnAttributes.prop}`}
                          rules={[{ required: true, message: '请填写', trigger: 'blur' }]}
                        >
                          <el-select
                            filterable={true}
                            value={row[column.columnAttributes.prop]}
                            onInput={val => {
                              var data = this.INSURE_STEAD_UNIT.find(item => item.value === val)
                              row[column.columnAttributes.prop] = val
                              row[column.columnAttributes.propName] = data?.label || ''
                            }}
                            placeholder="请输入内容"
                          >
                            {this.INSURE_STEAD_UNIT.map((item, index_) => (
                              <el-option key={index_} label={item.label} value={item.value}></el-option>
                            ))}
                          </el-select>
                        </el-form-item>
                      </div>
                    )
                  }
                },
                {
                  columnAttributes: {
                    label: '接收邮箱',
                    prop: 'receiveMailbox'
                  },
                  editRender: (h, { row, column, index }) => {
                    return (
                      <div class="redbordererr">
                        <el-form-item
                          label=""
                          label-width="0px"
                          prop={`mailboxReceives.${index}.${column.columnAttributes.prop}`}
                          rules={[{ required: true, message: '请填写', trigger: 'blur' }]}
                        >
                          <el-input
                            value={row[column.columnAttributes.prop]}
                            onInput={val => {
                              row[column.columnAttributes.prop] = val
                            }}
                            placeholder="请输入内容"
                          ></el-input>
                        </el-form-item>
                      </div>
                    )
                  },
                  viewRender: (h, { row, column, index }) => {
                    return (
                      <div class="redbordererr">
                        <el-form-item
                          label=""
                          label-width="0px"
                          prop={`mailboxReceives.${index}.${column.columnAttributes.prop}`}
                          rules={[{ required: true, message: '请填写', trigger: 'blur' }]}
                        >
                          <el-input
                            value={row[column.columnAttributes.prop]}
                            onInput={val => {
                              row[column.columnAttributes.prop] = val
                            }}
                            placeholder="请输入内容"
                          ></el-input>
                        </el-form-item>
                      </div>
                    )
                  }
                }
              ],
              {
                isEdit: true,
                isAdd: true,
                isDel: true,
                isUpdate: false,
                isConfirm: false
              },
              {
                add: () => {
                  this.formData.mailboxReceives.push({
                    dictId: '',
                    dictName: '',
                    id: '',
                    mailboxId: '',
                    receiveMailbox: ''
                  })
                  this.isEditTableIndex = this.formData.mailboxReceives.length - 1
                },
                delete: ({ row, column, index }, cb) => {
                  if (this.isEditTableIndex == index) {
                    this.isEditTableIndex = -1
                  } else if (this.isEditTableIndex > index) {
                    this.isEditTableIndex--
                  }
                  cb && cb()
                }
              },
              <span style="margin-right:10px;font-weight: 700;line-height: 28px;float: none;display: inline-block;text-align: left;padding: 0 0 10px;vertical-align: middle;font-size: 14px;color: #606266;box-sizing: border-box;">
                接收邮箱,（工伤险专用）,多邮箱以英文逗号隔开
              </span>
            )
          }
        },
        {
          name: 'el-time-picker',
          md: 8,
          attributes: { style: 'width:100%', format: 'HH:mm', valueFormat: 'HH:mm' },
          formItemAttributes: { label: '每日发送时间', prop: 'sendTime', 'label-position': 'left' }
        },
        {
          name: 'el-input',
          md: 8,
          attributes: {},
          formItemAttributes: { label: '到期提醒时间：保险到期前多少天', prop: 'overNum' }
        },

        {
          name: 'el-input',
          md: 8,
          attributes: {},
          formItemAttributes: { label: '发件人昵称', prop: 'sendName' }
        },
        {
          name: 'el-input',
          md: 8,
          attributes: {},
          formItemAttributes: { label: '发件人邮箱', prop: 'sendMailbox' }
        },
        {
          name: 'el-input',
          md: 8,
          attributes: {},
          formItemAttributes: { label: '发件人密码', prop: 'sendPassword' }
        },
        {
          name: 'el-input',
          md: 8,
          attributes: {},
          formItemAttributes: { label: '企业id', prop: 'companyId' }
        },
        {
          name: 'el-input',
          md: 24,
          attributes: {},
          formItemAttributes: { label: '应用的凭证密钥', prop: 'appToken' }
        }
      ]
    }
  },
  created() {
    // 获取详情
    insureEmailDetail().then(res => {
      this.formData = { ...res.data, mailboxReceives: res?.data?.mailboxReceives || [] }
    })
    getDataDictionary({
      pageNum: 1,
      pageSize: -1,
      params: [
        { param: 'a.status', compare: '=', value: 'ON' },
        { param: 'a.dict_type', compare: '=', value: 'INSURE_STEAD_UNIT' }
      ]
    }).then(res => {
      this.INSURE_STEAD_UNIT = res.data.records.map(item => ({
        value: item.dictCode,
        label: item.dictValue
      }))
    })
  },
  methods: {
    submit() {
      this.$refs['formRef'].validate(valid => {
        if (valid) {
          insureEmailConfig({
            ...this.formData
          }).then(res => {
            this.$message({
              type: 'success',
              message: `保存成功!`
            })
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    reset() {
      Object.assign(this.$data, this.$options.data())
    }
  }
}
</script>

<style lang="scss" scoped></style>
