<!-- 所属行业 操作弹框 -->
<template>
  <el-dialog
    :title="dialogStu | titleFilter(level)"
    :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">
              <template v-if="level === 1">
                <el-form label-position="right" label-width="130px" :model="formData" :disabled="dialogStu === 'del'">
                  <el-form-item :label="$t('industry.level1Code')+'：'" :class="{'unabled is-disabled': dialogStu === 'del', 'require': dialogStu !== 'del'}">
                    <el-input v-model="formData.indCode" maxlength="10" :disabled="dialogStu === 'del'"></el-input>
                  </el-form-item>
                  <el-form-item :label="$t('industry.level1Name')+'：'" :class="{'unabled is-disabled': dialogStu === 'del', 'require': dialogStu !== 'del'}">
                    <el-input v-model="formData.indName" maxlength="30" :disabled="dialogStu === 'del'"></el-input>
                  </el-form-item>
                </el-form>
              </template>

              <template v-else-if="level === 2">
                <el-form label-position="right" label-width="130px" :model="formData" :disabled="dialogStu === 'del'">
                  <el-form-item :label="$t('industry.level1PCode')+'：'" class="unabled is-disabled">
                    <el-input v-model="levelPtitle" disabled></el-input>
                  </el-form-item>
                  <el-form-item :label="$t('industry.level2Code')+'：'" :class="{'unabled is-disabled': dialogStu === 'del', 'require': dialogStu !== 'del'}">
                    <el-input v-model="formData.indCode" maxlength="10" :disabled="dialogStu === 'del'"></el-input>
                  </el-form-item>
                  <el-form-item :label="$t('industry.level2Name')+'：'" :class="{'unabled is-disabled': dialogStu === 'del', 'require': dialogStu !== 'del'}">
                    <el-input v-model="formData.indName" maxlength="30" :disabled="dialogStu === 'del'"></el-input>
                  </el-form-item>
                </el-form>
              </template>

              <template v-else-if="level === 3">
                <el-form label-position="right" label-width="130px" :model="formData" :disabled="dialogStu === 'del'">
                  <el-form-item :label="$t('industry.level2PCode')+'：'" class="unabled is-disabled">
                    <el-input v-model="levelPtitle" disabled></el-input>
                  </el-form-item>
                  <el-form-item :label="$t('industry.level3Code')+'：'" :class="{'unabled is-disabled': dialogStu === 'del', 'require': dialogStu !== 'del'}">
                    <el-input v-model="formData.indCode" maxlength="10" :disabled="dialogStu === 'del'"></el-input>
                  </el-form-item>
                  <el-form-item :label="$t('industry.level3Name')+'：'" :class="{'unabled is-disabled': dialogStu === 'del', 'require': dialogStu !== 'del'}">
                    <el-input v-model="formData.indName" maxlength="30" :disabled="dialogStu === 'del'"></el-input>
                  </el-form-item>
                </el-form>
              </template>
              <template v-else-if="level === 4">
                <el-form label-position="right" label-width="130px" :model="formData" :disabled="dialogStu === 'del'">
                  <el-form-item :label="$t('industry.level3PCode')+'：'" class="unabled is-disabled">
                    <el-input v-model="levelPtitle" disabled></el-input>
                  </el-form-item>
                  <el-form-item :label="$t('industry.level4Code')+'：'" :class="{'unabled is-disabled': dialogStu === 'del', 'require': dialogStu !== 'del'}">
                    <el-input v-model="formData.indCode" maxlength="10" :disabled="dialogStu === 'del'"></el-input>
                  </el-form-item>
                  <el-form-item :label="$t('industry.level4Name')+'：'" :class="{'unabled is-disabled': dialogStu === 'del', 'require': dialogStu !== 'del'}">
                    <el-input v-model="formData.indName" maxlength="30" :disabled="dialogStu === 'del'"></el-input>
                  </el-form-item>
                </el-form>
              </template>
            </el-col>
          </el-row>
        </div>
      </div>
      <div class="dialog-footer but_icon" v-if="type !== 2">
        <template v-if="dialogStu !== 'del'">
          <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="dialogStu === 'del'">
          <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 { Level } from 'chalk';
export default {
  data() {
    return {
      dataFormVisible: false,
      type: undefined,
      dialogStu: undefined,
      level: 1,
      parentRow: {},
      levelPtitle: undefined,
      countryCode: undefined,
      formData: {
        indCode: undefined,
        indName: undefined,
        indLevel: undefined,
        indPcode: undefined
      }
    }
  },
  directives: { waves, elDragDialog },
  filters: {
    titleFilter(title, level) {
      const tilteMap = {
        'add': '新增',
        'edit': '修改',
        'del': '删除'
      }
      const levelMap = {
        1: '一级行业',
        2: '二级行业',
        3: '三级行业',
        4: '四级行业',
      }
      return tilteMap[title] + levelMap[level]
    }
  },
  methods: {
    init(dialogStu, level, parentRow, countryCode, row) {
      // console.log(dialogStu, level, parentRow, countryCode, row);
      this.dataFormVisible = true
      this.dialogStu = dialogStu
      this.level = level
      this.parentRow = parentRow
      this.countryCode = countryCode
      this.$nextTick(() => {
        if (JSON.stringify(parentRow) !== '{}') {
          let { indCode, indName } = parentRow
          this.levelPtitle = indCode + '-' + indName
        }
        if (dialogStu === 'add') {
          this.id = undefined
        } else if (dialogStu === 'edit' || dialogStu === 'del') {
          this.id = row.id
          this.queryById(this.id)
        }
      })
    },

    // 通过id查询企业行业信息
    queryById(id) {
      http.post('/cust/industry/findByid', { id: id }).then((res) => {
        Object.keys(this.formData).forEach((v) => {
          this.formData[v] = res.data[v] ? res.data[v] : undefined
        })
      }).catch(() => {})
    },

    // 提交
    submitHandle() {
      if (!this.countryCode) {
        this.$message.error('请选择国家地区')
        return
      }
      let { ...params } = this.formData
      params = Object.assign(params, { status: 1, countryCode: this.countryCode, indLevel: this.level })
      // console.log(params);
      switch(this.dialogStu) {
        case 'add': {
          if (this.level === 1) {
            params = Object.assign(params, { indPcode: '0' })
          } else {
            params = Object.assign(params, { indPcode: this.parentRow.indCode })
          }
          // 新增企业行业信息
          http.post('/cust/industry/create', params).then((res) => {
            this.$message.success('新增成功')
            this.$emit('update:visible', false)
            this.$emit('refreshData', this.level, this.parentRow)
          }).catch(() => {})
          break;
        }
        case 'edit': {
          // 更新企业行业信息
          params =  Object.assign(params, { id: this.id })
          http.post('/cust/industry/update', params).then((res) => {
            this.$message.success('修改成功')
            this.$emit('update:visible', false)
            this.$emit('refreshData', this.level, this.parentRow)
          }).catch(() => {})
          break;
        }
        case 'del': {
        // 删除企业行业信息
          http.post('/cust/industry/delete', { id: this.id }).then((res) => {
            this.$message.success('删除成功')
            this.$emit('update:visible', false)
            this.$emit('refreshData', this.level, this.parentRow)
          }).catch(() => {})
          break;
        }
        default:
          break;
      }
    },

    closeHandle() {
      this.dataFormVisible = false
      if (this.dialogStu === 'add' || this.dialogStu === 'edit' || this.dialogStu === 'del') { // 编辑或者删除 清除表单数据 新增保留
        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;
}
.el-dialog__wrapper {
  ::v-deep .el-dialog__title {
    font-family: 'SourceHanSansCN';
  }
}
</style>
