<template>
  <div class="industry-total-wrapper">
    <div class=" tools-wrapper">
      <el-button size="mini" type="primary" @click="addIndusDlShow">新增</el-button>
      <el-button size="mini" :disabled="isEditAble" type="warning" @click="editIndusDlShow">编辑</el-button>
      <el-button size="mini" :disabled="isDeleteAble" type="danger" @click="deleteIndus">删除</el-button>
    </div>
    <el-row :gutter="100">
      <el-col :span="8">
        <el-card class="box-card" shadow="never">
          <div slot="header" class="clearfix">
            <el-tooltip class="item" effect="dark" content="操作应急行业">
              <span class="role-span">应急行业分配</span>
            </el-tooltip>
            <!-- <el-button
              icon="el-icon-check"
              size="mini"
              style="float: right; padding: 6px 9px"
              type="primary"
              @click="saveEmergencyIndustry"
            >保存</el-button> -->
          </div>
          <div class="checks-wrapper">
            <div v-for="item in currentEmergencyIndustry" :key="item.industryId" class="checks">
              <input type="checkbox" :checked="item.checked" @input="EmergencyIndusinput($event, item)">{{ '&nbsp;&nbsp;' + item.industryName }}
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <el-dialog
      title="新增行业"
      :visible.sync="addIndusVisible"
      width="50%"
      :close-on-click-modal="false"
      label-width="120px"
    >
      <el-form v-if="addIndusVisible" ref="addform" :model="formIndus" :rules="rules">
        <el-form-item label="选择行业类型">
          <el-select v-model="formIndus.industype" placeholder="请选择行业类型">
            <el-option label="应急行业" value="应急行业" />
          </el-select>
        </el-form-item>
        <el-form-item label="行业名称" prop="industryName">
          <el-input v-model="formIndus.industryName" />
        </el-form-item>
        <el-form-item label="行业主管部门" prop="icdId">
          <el-select v-model="formIndus.icdId" placeholder="请选择主管部门">
            <el-option v-for="item in chargeDept" :key="item.icdId" :label="item.icdName" :value="item.icdId" />
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addIndusVisible = false">取消</el-button>
        <el-button type="primary" :loading="addIndustryLoading" @click="submitAddIndus">确定</el-button>
      </div>
    </el-dialog>
    <el-dialog
      title="编辑行业"
      :visible.sync="editIndusVisible"
      width="50%"
      :close-on-click-modal="false"
      label-width="120px"
    >
      <el-form v-if="editIndusVisible" ref="editform" :model="editFormIndus" :rules="rules">
        <el-form-item label="选择行业类型">
          <el-select v-model="editFormIndus.industype" placeholder="请选择行业类型">
            <el-option label="应急行业" value="应急行业" />
          </el-select>
        </el-form-item>
        <el-form-item label="行业名称" prop="industryName">
          <el-input v-model="editFormIndus.industryName" />
        </el-form-item>
        <el-form-item label="主管部门" prop="icdId">
          <el-select v-model="editFormIndus.icdId" placeholder="请选择主管部门">
            <el-option v-for="item in chargeDept" :key="item.icdId" :label="item.icdName" :value="item.icdId" />
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="editIndusVisible = false">取消</el-button>
        <el-button type="primary" :loading="editIndustryLoading" @click="submitEditIndus">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getAllIndustry, addIndustry, editIndustry, deleteIndustry, getIndustryChargeDept } from '@/api/industry.js'
export default {
  data() {
    return {
      // 应急行业
      currentEmergencyIndustry: [
      ],
      // 控制新增行业dialog显示
      addIndusVisible: false,
      // 新增行业的表单
      formIndus: {
        industype: '应急行业',
        industryName: '',
        icdId: ''
      },
      editFormIndus: {
        industype: '应急行业',
        industryId: '',
        industryName: '',
        icdId: ''
      },
      // 控制编辑行业dialog显示
      editIndusVisible: false,
      // 控制编辑按钮的功能
      isEditAble: true,
      // 控制删除按钮的功能
      isDeleteAble: true,
      // 行业主管部门
      chargeDept: [],
      rules: {
        industryName: [
          {
            required: true,
            message: '请输入行业名称',
            trigger: 'blur'
          }
        ],
        icdId: [
          {
            required: true,
            message: '请选择主管部门',
            trigger: 'change'
          }
        ]
      },
      addIndustryLoading: false,
      editIndustryLoading: false
    }
  },
  mounted() {
    this.initEmergencyIndus()
    this.getCurAllChargeMangaer()
  },
  methods: {
    // 初始化当前应急行业
    async initEmergencyIndus() {
      this.currentEmergencyIndustry = []
      await getAllIndustry().then(res => {
        console.log(res.content, 'helloworld indus management')
        this.currentEmergencyIndustry = res.content.map(item => {
          return {
            industryId: item.industryId,
            industryName: item.industryName,
            chargeDept: item.thIndustryChargeDept,
            checked: false
          }
        })
      })
    },
    // 获取当前所有的主管部门
    getCurAllChargeMangaer() {
      getIndustryChargeDept().then(res => {
        this.chargeDept = res.content.map(item => {
          return {
            icdId: item.icdId ? item.icdId : '',
            icdName: item.icdName ? item.icdName : ''
          }
        })
      })
    },
    // 显示Dialog
    addIndusDlShow() {
      this.formIndus.industryName = ''
      this.formIndus.icdId = ''
      this.addIndusVisible = true
    },
    // 提交行业信息
    submitAddIndus() {
      this.$refs.addform.validate((valid) => {
        if (valid) {
          this.addIndustryLoading = true
          // 提交行业信息
          addIndustry(this.formIndus.industryName, this.formIndus.icdId).then(res => {
            this.$message({
              message: '添加行业成功',
              type: 'success'
            })
            this.initEmergencyIndus()
            this.addIndusVisible = false
            this.addIndustryLoading = false
          }, () => {
            this.$message.error('添加行业失败')
            this.addIndusVisible = false
            this.addIndustryLoading = false
          })
        }
      })
    },
    // 应急行业输入
    EmergencyIndusinput(event, item) {
      item.checked = !item.checked
      this.isEditAble = true
      this.isDeleteAble = true
      if (this.currentEmergencyIndustry.filter(item => item.checked).length === 1) {
        this.isEditAble = false
      }
      if (this.currentEmergencyIndustry.filter(item => item.checked).length > 0) {
        this.isDeleteAble = false
      }
    },
    // 删除行业
    deleteIndus() {
      this.$confirm('此操作不可逆, 确认删除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteIndustry(this.currentEmergencyIndustry.filter(item => item.checked).map(item => item.industryId)).then(res => {
          this.$message({
            message: '删除行业成功',
            type: 'success'
          })
          this.initEmergencyIndus()
        }, () => {
          this.$message.error('删除行业失败')
        })
      })
    },
    // 提交编辑行业
    submitEditIndus() {
      this.$refs.editform.validate((valid) => {
        if (valid) {
          this.editIndustryLoading = true
          // 编辑行业
          editIndustry(this.editFormIndus.industryId, this.editFormIndus.industryName, this.editFormIndus.icdId).then(res => {
            this.$message({
              message: '编辑行业成功',
              type: 'success'
            })
            this.initEmergencyIndus()
            this.editIndusVisible = false
            this.editIndustryLoading = false
          }, () => {
            this.$message.error('编辑行业失败')
            this.editIndusVisible = false
            this.editIndustryLoading = false
          })
        }
      })
    },
    // 编辑行业dialog显示
    editIndusDlShow() {
      this.editFormIndus.icdId = this.currentEmergencyIndustry.filter(item => item.checked)[0].chargeDept? this.currentEmergencyIndustry.filter(item => item.checked)[0].chargeDept.icdId: ''
      this.editFormIndus.industryId = this.currentEmergencyIndustry.filter(item => item.checked)[0].industryId
      this.editFormIndus.industryName = this.currentEmergencyIndustry.filter(item => item.checked)[0].industryName
      this.editIndusVisible = true
      console.log(this.editFormIndus, 'this.editFormIndus this.editFormIndus')
    }
  }
}
</script>

<style lang="scss">
  .industry-total-wrapper {
    padding: 20px;
    .tools-wrapper{
      margin: 20px 0;
    }
  }
</style>
