<template>
  <div class="dashboard-container">
    <div class="search-content">
      <el-select v-model="queryParams.dictType" placeholder="请选择字典名称" style="width: 220px" clearable>
        <el-option v-for="item in getOptionData" :key="item.dictType" :label="item.dictName" :value="item.dictType" />
      </el-select>
      <el-input style="width: 220px;" v-model="queryParams.dictLabel" placeholder="请输入字典标签" />
      <el-select style="width: 220px;" clearable placeholder="请选择状态" v-model="queryParams.status">
        <el-option v-for="item in statusOptions" :key="item.value" :label="item.label" :value="item.value" />
      </el-select>
      <div class="search-btn">
        <div class="search" @click="handleSearch">查询</div>
        <div class="reset" style="margin-right: 10px;" @click="reset">重置</div>
        <div class="reset" @click="backLaster">返回</div>
      </div>
    </div>

    <div class="table-content">
      <div style="width: 100%;height: 30px;">
        <div class="btn" @click="addDepartMenDict">
          <span class="icon font_family">&#xe604;</span>
          新增
        </div>
        <div class="btn" @click="deleteDictIds">
          <span class="icon font_family">&#xe607;</span>
          批量删除
        </div>
        <div class="btn" @click="uploadOut">
          <span class="icon font_family">&#xe605;</span>
          导出
        </div>
      </div>
      <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%"
        @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" align="center" />
        <el-table-column prop="dictCode" label="字典主键" align="center" width="100" />
        <!-- <el-table-column prop="dictLabel" label="字典名称" /> -->
        <el-table-column prop="dictType" label="字典类型" align="center" width="210" />
        <el-table-column label="字典标签" align="center" prop="dictLabel" width="150">
          <template #default="scope">
            <span v-if="scope.row.listClass == '' || scope.row.listClass == 'default'">{{ scope.row.dictLabel }}</span>
            <el-tag v-else :type="scope.row.listClass == 'primary' ? '' : scope.row.listClass">{{ scope.row.dictLabel
            }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="dictSort" label="字典排序" align="center" width="120" />
        <el-table-column prop="status" label="状态" align="center" width="100">
          <template slot-scope="scope">
            <div class="startUsing" v-if="scope.row.status == 1">启用</div>
            <div class="Deactivate" v-else>停用</div>
          </template>
        </el-table-column>
        <el-table-column prop="remark" label="备注" align="center" width="220" />
        <el-table-column prop="updateTime" label="最后更新" align="center" />
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <div class="operateBtn">
              <div style="color: #2766DD;" @click="editDict(scope.row)">修改</div>
              <div style="color: #2766DD;" @click="deleteDict(scope.row)">删除</div>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <el-row type="flex" justify="end" style="margin-top: 10px">

        <div class="pagination">
          <el-pagination :page-sizes="[10, 15, 20]" :page-size="searchData.pageSize"
            layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange"
            @current-change="handleCurrentChange" />
        </div>
      </el-row>
    </div>

    <el-dialog center width="636px" :title="title" :visible.sync="dialogFormVisible">
      <el-form ref="form" :model="form" :rules="rules">
        <el-form-item label="字典类型" label-width="80px" prop="railwayName">
          <el-input v-model="form.dictType" autocomplete="off" disabled />
        </el-form-item>
        <el-form-item label="数据标签" label-width="80px" prop="railwayCode">
          <el-input v-model="form.dictLabel" autocomplete="off" maxlength="20" placeholder="请输入数据标签" />
        </el-form-item>
        <el-form-item label="数据键值" label-width="80px" prop="railwayCode">
          <el-input v-model="form.dictValue" autocomplete="off" maxlength="450" placeholder="请输入数据键值" />
        </el-form-item>
        <el-form-item label="样式属性" label-width="80px" prop="railwayCode">
          <el-input v-model="form.cssClass" autocomplete="off" maxlength="4" placeholder="请输入样式属性" />
        </el-form-item>
        <el-form-item label="显示排序" label-width="80px" prop="railwayCode">
          <el-input v-model="form.dictSort" autocomplete="off" maxlength="4" placeholder="请输入部门排序" />
        </el-form-item>
        <el-form-item label="回显样式" label-width="80px" prop="listClass">
          <el-select v-model="form.listClass" style="width: 100%">
            <el-option v-for="item in listClassOptions" :key="item.value" :label="item.label + '(' + item.value + ')'"
              :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="字典状态" label-width="80px">
          <el-radio-group v-model="form.status">
            <el-radio :label="1">启用</el-radio>
            <el-radio :label="2">停用</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="备注" label-width="80px" prop="remark">
          <el-input v-model="form.remark" placeholder="请输入备注" autocomplete="off" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <!-- <el-button class="reset" @click="dialogFormVisible = false">取 消</el-button>
        <el-button class="search" @click="submitForm">保存</el-button> -->
        <div class="search" @click="submitForm">保 存</div>
        <div class="reset" @click="dialogFormVisible = false">取 消</div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getType, getAddData, getUpdateData, getDeleteData, getExportOutData, getNameSelectData } from '@/api/departMentDict'
import { mapGetters } from 'vuex'

export default {
  name: 'DepartType',
  computed: {
    ...mapGetters([
      'name'
    ])
  },
  data() {
    return {
      clickType: '',
      getOptionData: [],
      queryParams: {
        dataType: '',
        pageSize: 10,
        pageNum: 1,
        diceCode: '',
        dictLabel: '',
        dictType: ''
      },
      form: {
        // dictCode: '',
        dictLabel: '',
        dictValue: '',
        cssClass: '',
        listClass: "default",
        dictSort: 0,
        status: "0",
        dictType: this.$route.query.testQuery,
        remark: ''
      },
      statusOptions: [
        {
          label: '启用',
          value: '1'
        },
        {
          label: '停用',
          value: '2'
        }
      ],
      searchData: {},
      ids: [],
      tableData: [],
      total: 0,
      title: '',
      dialogFormVisible: false,
      testQuery: '',
      listClassOptions: [
        { value: "default", label: "默认" },
        { value: "primary", label: "主要" },
        { value: "success", label: "成功" },
        { value: "info", label: "信息" },
        { value: "warning", label: "警告" },
        { value: "danger", label: "危险" }
      ]
    }
  },
  created() {
    this.queryParams.dictType = this.$route.query.testQuery
    this.getTypes()
    this.getSelectNameList()
  },
  mounted() {
  },
  methods: {    
    backLaster() {
      this.$router.push({ path: '/system/department-dict' })
    },
    getSelectNameList() {
      getNameSelectData({ dataType: '' }).then(res => {  
        this.getOptionData = res.data
      })
    },
    uploadOut() {
      getExportOutData(this.queryParams).then(response => {
        // this.exportFile(response, '部门数据字典信息')


        if (res.type == "application/json") {
          const reader = new FileReader(); 
          reader.readAsText(res, 'utf-8'); 
          reader.onload = function () {
            const msg = JSON.parse(reader.result);
            if(msg.code == 200){
              this.exportFile(response, '部门数据字典信息')
            } else{
              Message({
                type: 'error',
                message: msg.msg
              });
            }      
          }
        }else{
          this.exportFile(response, '部门数据字典信息')
        }
      })
    },
    exportFile: function (obj, name = Date.now(), suffix = 'xlsx') {
      const url = window.URL.createObjectURL(
        new Blob([obj], { type: 'application/vnd.ms-excel' })
      )
      const aDOM = document.createElement('a')
      aDOM.style.display = 'none'
      aDOM.href = url
      const fileName = name + '.' + suffix
      aDOM.setAttribute('download', fileName)
      document.body.appendChild(aDOM)
      aDOM.click()
      document.body.removeChild(aDOM)
    },
    reset() {
      this.queryParams = {}
      this.queryParams.pageNum = 1
      this.queryParams.pageSize = 10
      this.getTypes()
    },
    handleSelectionChange(val) {
      this.ids = val.map((item) => item.dictCode)
    },
    deleteDictIds() {
      if (this.ids.length == 0) {
        this.$message({
          type: 'error',
          message: '请选择要删除的字典数据!'
        })
      } else {
        this.$confirm('确定要删除吗?', '信息提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          getDeleteData(this.ids).then(res => {
            if (res.code == 200) {
              this.getTypes(this.data)
              this.$message({
                type: 'success',
                message: '删除成功!'
              })
            } else {
              this.$message({
                type: 'error',
                message: res.msg
              })
            }
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
      }
    },
    deleteDict(scope) {      
      this.$confirm('确定要删除吗?', '信息提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        getDeleteData(scope.dictCode).then(res => {
          if (res.code == 200) {
            this.getTypes(this.data)
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
          } else {
            this.$message({
              type: 'error',
              message: res.msg
            })
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    submitForm() {
      if (this.clickType == 1) {
        getAddData(this.form).then(response => {
          // useDictStore().removeDict(queryParams.value.dictType);
          if (response.code == 200) {
            this.$message({
              type: 'success',
              message: '新增成功!'
            })
            this.dialogFormVisible = false
            this.form = {}
            this.getTypes();
          }
        });
      } else if (this.clickType == 2) {
        getUpdateData(this.form).then(response => {
          // useDictStore().removeDict(queryParams.value.dictType);
          if (response.code == 200) {
            this.$message({
              type: 'success',
              message: '修改成功!'
            })
            this.dialogFormVisible = false
            this.form = {}
            this.getTypes()
          }
        });
      }
    },
    handleSearch() {
      this.queryParams.pageNum = 1
      this.getTypes()
    },
    /** 查询字典类型详细 */
    getTypes() {
      // this.queryParams.dictType = this.$route.query.testQuery
      getType(this.queryParams).then(response => {
        this.tableData = response.data.records
        this.total = response.data.total
      })
    },
    addDepartMenDict() {
      this.form = {}
      this.form.dictType = this.$route.query.testQuery
      this.clickType = 1
      this.title = '添加字典数据'
      this.dialogFormVisible = true
    },
    editDict(scope) {
      this.clickType = 2
      this.title = '修改字典数据'
      this.dialogFormVisible = true
      this.form = JSON.parse(JSON.stringify(scope))
    },
    handleSizeChange(val) {
      this.queryParams.pageSize = val
      this.getTypes()
    },
    handleCurrentChange(val) {
      this.queryParams.pageNum = val
      this.getTypes()
    }
  }
}
</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 45px 30px 30px;
  }

  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}

.dashboard-container {

  .search-content {
    width: 100%;
    height: 74px;
    background-color: #fff;
    display: flex;
    align-items: center;
    padding-left: 10px;

    .el-input {
      margin: 0 10px;
    }

    .el-select {
      margin: 0 10px;
    }

    .search-btn {
      display: flex;
      align-items: center;
      height: 100%;
      margin-left: 10px;

      div {
        // margin: 0 6px;
        display: inline-block;
        width: 80px;
        height: 40px;
        border-radius: 2px;
        font-size: 14px;
        line-height: 40px;
        text-align: center;
      }

      div:hover {
        cursor: pointer;
      }

      .search {
        margin-right: 10px;
        background-color: #2766DD;
        color: #F7F8FB;
      }

      .search:hover {
        background-color: #4D85F4;
      }

      .reset {
        color: #333334;
        border: 1px solid #D7D7D7;
      }

      .reset:hover {
        color: #1F9FFF;
        border: 1px solid #1F9FFF;
      }
    }
  }

  .table-content {
    margin-top: 15px;
    width: 100%;
    background-color: #fff;
    padding: 0 20px 20px;

    .btn {
      margin: 15px 20px 15px 0;
      cursor: pointer;
      float: left;
      text-align: center;
      width: 98px;
      height: 34px;
      border-radius: 2px;
      border: 1px solid #ABC7FD;
      line-height: 34px;
      font-weight: 400;
      font-size: 14px;
      color: #2250C8;
      background-color: #E7EEFF;
    }

    .btn:hover {
      color: #FFFFFF;
      background-color: #2250C8;
      border: 1px solid #2250C8;
    }

    .btn:active {
      color: #FFFFFF;
      background-color: #194DA4;
      border: 1px solid #194DA4;
    }


    .startUsing {
      width: 54px;
      height: 24px;
      margin: 14.5px auto 0;
      line-height: 24px;
      text-align: center;
      font-size: 12px;
      color: #00974D;
      border-radius: 4px;
      background-color: #E7FAF0;
      border: 1px solid #BEFDDD;
    }

    .Deactivate {
      width: 54px;
      height: 24px;
      margin: 14.5px auto 0;
      line-height: 24px;
      text-align: center;
      font-size: 12px;
      color: #FF9933;
      border-radius: 4px;
      background-color: #FFF3E8;
      border: 1px solid #FDE6CF;
    }

    .operateBtn {
      display: flex;
      justify-content: center;
      color: #2866DD;

      div {
        font-size: 14px;
        margin: 0 5px;
        cursor: pointer;
      }
    }

    .pagination {
      margin: 10px 0;
      width: 100%;
      height: 20px;

      .el-pagination {
        float: right;
        margin: 10px 0;
      }
    }
  }
}

.search {
  background-color: #2766DD;
  color: #F7F8FB;
}

.search:hover {
  background-color: #4D85F4;
}

.reset {
  color: #333334;
  border: 1px solid #D7D7D7;
}

.reset:hover {
  color: #1F9FFF;
  border: 1px solid #1F9FFF;
  background: none;
}

.operateBtn {
  display: flex;
  justify-content: center;
  color: #2766DD;

  div {
    font-size: 16px;
    margin: 0 5px;
    cursor: pointer;
  }
}

.startUsing {
  width: 54px;
  height: 24px;
  margin: 14.5px auto 0;
  line-height: 24px;
  text-align: center;
  font-size: 12px;
  color: #00974D;
  border-radius: 4px;
  background-color: #E7FAF0;
  border: 1px solid #BEFDDD;
}

.Deactivate {
  width: 54px;
  height: 24px;
  margin: 14.5px auto 0;
  line-height: 24px;
  text-align: center;
  font-size: 12px;
  color: #FF9933;
  border-radius: 4px;
  background-color: #FFF3E8;
  border: 1px solid #FDE6CF;
}
::v-deep .el-dialog__body {
  padding: 20px 95px !important;
}
</style>
