<!-- 所属行业 操作弹框 -->
<template>
  <el-dialog
    :title="type | titleFilter"
    :visible.sync="dataFormVisible"
    v-el-drag-dialog
    :close-on-click-modal="false"
    width='527px'
    @close="closeHandle">
    <div class="view-body">
      <div class="view-form">
        <div class="form-cnt">
          <el-row :gutter="10">
            <el-col :span="24">
              <el-form label-position="right" label-width="140px" :model="formData" :disabled="type === 2 || type === 3">
                <el-form-item :label="$t('fundspurpose.chineseName')+'：'" :class="{'unabled is-disabled': type === 2 || type === 3, 'require': type === 0 || type === 1}">
                  <el-input v-model="formData.chineseName" ></el-input>
                </el-form-item>
                <el-form-item :label="$t('fundspurpose.englishName')+'：'" :class="{'unabled is-disabled': type === 2 || type === 3, 'require': type === 0 || type === 1}">
                  <el-input v-model="formData.englishName" ></el-input>
                </el-form-item>
              </el-form>
            </el-col>
          </el-row>
        </div>
      </div>
      <div class="dialog-footer but_icon" v-if="type !== 2">
        <template v-if="type === 0 || type === 1">
          <el-button v-waves class="filter-item flex_align" type="primary" icon="el-icon-my-tijiao" @click="submitHandle">
              {{ $t('table.sbumit') }}
          </el-button>
        </template>
        <template v-else-if="type === 3">
          <el-button v-waves class="filter-item flex_align" type="primary" icon="el-icon-my-delete" @click="submitHandle">
              {{ $t('table.delete') }}
          </el-button>
        </template>
        <el-button v-waves class="filter-item flex_align" type="primary" icon="el-icon-my-quxiao" @click="dataFormVisible = false">
            {{ $t('table.cancel') }}
        </el-button>
      </div>
    </div>
  </el-dialog>
</template>

<script>
import elDragDialog from '@/directive/el-drag-dialog'
import waves from '@/directive/waves';
import http from '@/api/http';
import { validatenull } from '@/utils/validate.js'
export default {
  data() {
    return {
      dataFormVisible: false,
      type: undefined,
      formData: {
        chineseName: undefined, // 资金用途
        englishName: undefined // 资金用途英文名称
      }
    }
  },
  directives: { waves, elDragDialog },
  filters: {
    titleFilter(title) {
      const tilteMap = {
        0: '新增',
        1: '修改',
        2: '详情',
        3: '删除'
      }
      return tilteMap[title]
    }
  },
  methods: {
    init(type, row) {
      this.dataFormVisible = true
      this.type = type
      this.$nextTick(() => {
        if (type === 0) {
          this.id = undefined
        } else if (type === 1 || type === 2 || type === 3) {
          this.id = row.id
          this.queryById(this.id)
        }
      })
    },

    // 通过id查询资金用途
    queryById(id) {
      http.post('/share/fundingPurpose/get', { id: id }).then((res) => {
        Object.keys(this.formData).forEach((v) => {
          this.formData[v] = res.data[v] ? res.data[v] : undefined
        })
      }).catch(() => {})
    },

    // 提交
    submitHandle() {
      let { ...params } = this.formData
      params = Object.assign(params, { status: 1 })
      if (this.type !== 2) {
        let { chineseName, englishName } = this.formData
        if (validatenull(chineseName)) {
          this.$message.error('资金用途不能为空')
          return
        }
        if (validatenull(englishName)) {
          this.$message.error('资金用途英文名称不能为空')
          return
        }
      }
      switch(this.type) {
        case 0: {
          // 新增资金用途
          http.post('/share/fundingPurpose/create', params).then((res) => {
            this.$message.success('新增成功')
            this.$emit('update:visible', false)
            this.$emit('refreshData')
          }).catch(() => {})
          break;
        }
        case 1: {
          // 新增资金用途
          params =  Object.assign(params, { id: this.id })
          http.post('/share/fundingPurpose/update', params).then((res) => {
            this.$message.success('修改成功')
            this.$emit('update:visible', false)
            this.$emit('refreshData')
          }).catch(() => {})
          break;
        }
        case 3: {
          // 通过id查询资金用途
          http.post('/share/fundingPurpose/delete', { id: this.id }).then((res) => {
            this.$message.success('删除成功')
            this.$emit('update:visible', false)
            this.$emit('refreshData')
          }).catch(() => {})
          break;
        }
        default:
          break;
      }
    },

    closeHandle() {
      this.dataFormVisible = false
      if (this.type === 1 || this.type === 2 || this.type === 3) { // 编辑或者删除 清除表单数据 新增保留
        Object.keys(this.formData).forEach((v) => { this.formData[v] = undefined })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
@import '~@/styles/mixin.scss';
.view-body {
  padding: 10px 31px;
  .view-form {
    display: flex;
    .form-title {
      font-size: 13px;
      font-weight: 500;
      color: #616E9C;
      background: url('~@/assets/images/ffrers.png') no-repeat;
      background-size: 100% 100%;
      text-align: center;
      padding: 20px 10px;
      line-height: 22px;
      @include flex-center;
    }
    .base {
      width: 38px;
      height: 290px;
    }
    .run {
      width: 38px;
      height: 132px;
    }
    .form-cnt {
      flex: 1;
      padding: 15px 0;
    }
  }
}

.el-form .el-form-item {
  margin-bottom: 8px !important;
}
</style>
