<template>
  <dialog-edit :visible.sync="dialogVisible" :title="$t('complianceCheck.pushSet')" width="800px" :autoSave="false" :loading="loading"
               :form="form" :footerVisible="true" :api="api" :editModel="editModel" @onSaved="onSaved" :append-to-body="true">
    <el-form :model="form" ref="dateForm">
      <div class="pushDayItem">
        <el-row>
          <el-col :span="12">
            <el-form-item :rules="formRules.pushDate" prop="pushDate">
              <label>{{$t('complianceCheck.aMonth')}}</label>
              <el-input v-model.trim="form.pushDate" class="pushDay"></el-input>
              <label>{{$t('complianceCheck.push')}}</label>
            </el-form-item>
          </el-col>
        </el-row>
      </div>
    </el-form>
    <data-table :handleFlag.sync="handleFlag" :showPage="false" :showSelection="true" operateBtnLayout="" :columns="columns"
                :queryParas="queryParas" :sourceData.sync="sourceData" @selectRowChange="selectRowChange" ref="pushTable">
      <template slot="headButton">
        <span>{{$t('complianceCheck.pushSetTitle')}}</span>
      </template>
      <!-- 姓名 -->
      <template slot="name" slot-scope="scope">
        <span>{{scope.data.row.pushUserName}}</span>
      </template>

      <!-- 推送方式 -->
      <template slot="pushWay" slot-scope="scope">
        <el-checkbox-group v-model="scope.data.row.pushTypeList">
          <el-checkbox :label="1">{{$t('complianceCheck.email')}}</el-checkbox>
          <el-checkbox :label="2">{{$t('complianceCheck.weChat')}}</el-checkbox>
        </el-checkbox-group>
      </template>

      <template slot="paginationLeft">
        <span>{{$t('common.viewTip1')}}{{startNum}}{{$t('common.viewTip2')}}{{endNum}}{{$t('common.viewTip3')}}{{endNum}}{{$t('common.viewTip4')}}</span>
      </template>
    </data-table>
  </dialog-edit>
</template>
<script>
import BaseEdit from '@/pages/baseEditPage.js'
import { DialogEdit, DataTable } from 'newepoch-components'
// import * as format from '@/filters/index'
import complianceApi from '@/api/dataAudit/complianceApi.js'
import { regExp } from '@/validator/index'
export default {
  name: 'auditHistoryEdit',
  extends: new BaseEdit(),
  components: {
    DialogEdit,
    DataTable
  },
  data () {
    return {
      handleFlag: false,
      loading: false,
      startNum: 0,
      endNum: 0,
      // pushDate: '',
      selectedRows: [],
      sourceData: [],
      pushRuleDto: {},
      queryParas: {},
      formRules: {
        pushDate: [{ required: true, validator: this.dayCheck, trigger: 'blur' }]
      },
      columns: [
        // 姓名
        {
          prop: 'name',
          align: 'center',
          label: this.$i18n.messages[this.$i18n.locale].complianceCheck.name,
          width: '150px',
          slot: true
        },
        // 推送方式
        {
          prop: 'pushWay',
          align: 'center',
          label: this.$i18n.messages[this.$i18n.locale].complianceCheck.pushWay,
          width: '300px',
          slot: true
        }
      ]
    }
  },
  computed: {
    api () {
      return complianceApi.pushSettingApi
    }
  },
  methods: {
    dayCheck (rule, value, callback) {
      if (!this.UtilJs.isEmpty(value)) {
        if (regExp.monthDay.test(value)) {
          callback()
        } else {
          callback(new Error('推送日期只能是数字,且范围在1~31之间！'))
        }
      } else {
        callback(new Error('推送日期不能为空！'))
      }
    },
    selectRowChange (val) {
      this.selectedRows = val
      console.log(val)
    },
    loadTableData () {
      let _this = this
      _this.api.getList().then(res => {
        if (res && res.data) {
          _this.pushRuleDto = Object.assign({}, res.data[0])
          _this.sourceData = res.data[0].detailDtos
          _this.sourceData.forEach(it => {
            if (it.pushType === 3) {
              _this.$set(it, 'pushTypeList', [1, 2])
            } else if (it.pushType === 0) {
              _this.$set(it, 'pushTypeList', [])
            } else {
              _this.$set(it, 'pushTypeList', [it.pushType])
            }

            if (it.selected === 1) {
              _this.$nextTick(() => {
                _this.$refs.pushTable.$refs.vueTable.toggleRowSelection(it)
              })
            }
          })
          // _this.pushDate = res.data[0].pushDay
          _this.$set(_this.form, 'pushDate', res.data[0].pushDay)
          if (res.data[0].detailDtos.length > 0) {
            _this.startNum = 1
            _this.endNum = res.data[0].detailDtos.length
          } else {
            _this.startNum = 0
            _this.endNum = 0
          }
        }
      })
    },
    onSaved () {
      let _this = this
      _this.$refs.dateForm.validate((valid) => {
        if (valid) {
          if (_this.selectedRows.length === 0) {
            _this.warning('请选择需要推送的人员再提交！')
            return
          }
          let validateArr = []
          _this.selectedRows.forEach(it => {
            if (it.pushTypeList.length === 2) {
              it.pushType = 3
            } else if (it.pushTypeList.length === 1) {
              it.pushType = it.pushTypeList[0]
            } else {
              validateArr.push(it.pushUserName)
            }
          })
          if (validateArr.length > 0) {
            let msg = validateArr.join('，')
            _this.warning('推送人员为：' + msg + ' 的推送方式未勾选！不可提交！')
            return
          }
          _this.pushRuleDto.pushDay = _this.form.pushDate
          _this.pushRuleDto.detailDtos = _this.selectedRows
          _this.loading = true
          _this.api.save(_this.pushRuleDto).then(res => {
            if (res && res.data) {
              _this.success(_this.$i18n.messages[_this.$i18n.locale].complianceCheck.pushSucMsg)
              _this.dialogVisible = false
            } else {
              _this.error(_this.$i18n.messages[_this.$i18n.locale].complianceCheck.pushFailMsg)
            }
            _this.loading = false
          }).catch(() => {
            _this.loading = false
          })
        } else {
          _this.error('推送日期填写有误，请检查！')
        }
      })
    }
  },
  watch: {
    visible (val) {
      let _this = this
      if (val) {
        _this.loadTableData()
      }
    }
  }
}
</script>
<style scoped lang="scss" src="@/styles/dataAudit/compliance/dealDetailEdit.scss">
</style>
