<template>
  <div class="dashboard-container">
    <div class="search-content">
      <el-input v-model="queryParams.dictName" style="width: 220px;padding-left:20px" placeholder="请输入字典名称" />
      <el-select v-model="queryParams.status" clearable placeholder="请选择状态">
        <el-option v-for="item in statusOptions" :key="item.value" :label="item.label" :value="item.value" />
      </el-select>
      <div class="search" @click="handleSearch">搜索</div>
      <div class="reset" @click="reset">重置</div>
    </div>
    <div style="margin-top: 15px;background:#fff;padding:20px">
      <div class="table-content">
        <div style="width: 100%;height: 30px;">
          <div class="addBtn" @click="addDepartMenDict">
            <span class="icon font_family">&#xe604;</span>
            新增
          </div>
          <div class="addBtn" @click="handleDelete">
            <span class="icon font_family">&#xe607;</span>
            批量删除
          </div>
          <div class="addBtn" style="margin-right:0px" @click="exportOut">
            <span class="icon font_family">&#xe605;</span>
            导出
          </div>
        </div>
        <el-table ref="multipleTable" :data="departMentData" tooltip-effect="dark" style="width: 100%"
          @selection-change="handleSelectionChange">
          <el-table-column type="selection" width="55" align="center" />
          <el-table-column prop="dictId" label="字典编号" align="center" width="100" />
          <el-table-column prop="dictName" label="字典名称" align="center" width="220" />
          <el-table-column prop="dictType" label="字典类型" align="center" width="210">
            <template slot-scope="scope">
              <span style="color:blue;cursor: pointer;" @click="toTypeDetail(scope)">{{ scope.row.dictType }}</span>
              <!-- <router-link :to="'/system/department-dict/type/index/' + scope.row.dictId" class="link-type"> -->
              <!-- <span>{{ scope.row.dictType }}</span> -->
              <!-- </router-link> -->
            </template>
          </el-table-column>
          <el-table-column prop="status" label="状态" align="center" width="170">
            <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" />
          <el-table-column prop="createTime" label="创建时间" align="center" width="130" />
          <el-table-column label="操作" align="center" width="200" fixed="right">
            <template slot-scope="scope">
              <div class="operateBtn" style="display:flex">
                <div style="width:100px;margin-left:50px;font-size:14px;color: #2766DD;cursor: pointer;"
                  @click="updateDepart(scope.row)">修改</div>
                <div style="width:100px;margin-right:50px;font-size:14px;color: #2766DD;cursor: pointer;"
                  @click="deleteDepartType(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>
    </div>
    <el-dialog :title="title" :visible.sync="dialogFormVisible" width="636px">
      <el-form ref="form" :model="form" :rules="rules">
        <el-form-item label="字典名称" label-width="80px" prop="dictName">
          <el-input v-model="form.dictName" autocomplete="off" placeholder="请输入字典名称" />
        </el-form-item>
        <el-form-item label="字典类型" label-width="80px" prop="dictType">
          <el-input v-model="form.dictType" autocomplete="off" placeholder="请输入字典类型" />
        </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" autocomplete="off" placeholder="请输入备注" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <!-- <el-button class="searcha" @click="submitForm">保存</el-button>
        <el-button class="reseta" @click="closeDia">取 消</el-button> -->
        <div class="search" @click="submitForm">保 存</div>
        <div class="reset" @click="closeDia">取 消</div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getLineDataList, getAddDepart, getExportDataDepart, getDeleteDepart, getUpdateDepart } from '@/api/departMentDict'
import { mapGetters } from 'vuex'

export default {
  name: 'Home',
  computed: {
    ...mapGetters([
      'name'
    ])
  },
  data() {
    return {
      departMentData: [],
      queryParams: {
        dataType: '2',
        pageSize: '10',
        pageNum: '1',
        dictName: '',
        status: ''
      },
      form: {
        dictName: '',
        dictType: '',
        status: '',
        remark: '',
        dataType: '2'
      },
      statusOptions: [
        {
          label: '启用',
          value: '1'
        },
        {
          label: '停用',
          value: '2'
        }
      ],
      searchData: {},
      tableData: [],
      ids: [],
      total: 0,
      title: '',
      dialogFormVisible: false,
      doType: ''
    }
  },
  created() {
    this.getList()
  },
  methods: {
    toTypeDetail(scope) {
      // this.$router.push({name: 'departType'})
      this.$router.push({ name: 'lineType', query: { testQuery: scope.row.dictType } })
    },
    updateDepart(scope) {
      this.doType = 2
      this.dialogFormVisible = true
      this.title = '修改数据字典'
      this.form = JSON.parse(JSON.stringify(scope))
    },
    handleSelectionChange(val) {
      this.ids = val.map((item) => item.dictId)
    },
    handleDelete() {
      if (this.ids.length == 0) {
        this.$message({
          type: 'error',
          message: '请选择要删除的字典数据!'
        })
      } else {
        this.$confirm('确定要删除吗?', '信息提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          getDeleteDepart(this.ids).then(res => {
            if (res.code == 200) {
              this.getList(this.data)
              this.$message({
                type: 'success',
                message: '删除成功!'
              })
            } else {
              this.$message({
                type: 'error',
                message: res.msg
              })
            }
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
      }
    },
    deleteDepartType(scope) {
      this.$confirm('确定要删除吗?', '信息提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        getDeleteDepart(scope.dictId).then(res => {
          if (res.code == 200) {
            this.getList(this.data)
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
          } else {
            this.$message({
              type: 'error',
              message: res.msg
            })
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    handleCurrentChange(val) {
      this.queryParams.pageNum = val
      this.getList()
    },
    handleSizeChange(val) {
      this.queryParams.pageSize = val
      this.getList()
    },
    exportOut() {
      getExportDataDepart(this.queryParams).then(res => {
        this.exportFile(res, '数据字典数据信息')
      })
    },
    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.status = ''
      this.queryParams.dictName = ''
      this.getList()
    },
    handleSearch() {
      this.queryParams.pageNum = 1
      this.getList()
    },
    getList() {
      getLineDataList(this.queryParams).then((res) => {
        this.departMentData = res.data.records
        this.total = res.data.total
      })
    },
    submitForm() {
      if (this.doType == 1) {
        this.form.dataType = 2
        getAddDepart(this.form).then(res => {
          if (res.code == 200) {
            this.dialogFormVisible = false
            this.$message({
              message: '新增成功',
              type: 'success'
            })
            this.getList()
            this.$refs.form.resetFields()
            this.form = {}
          } else {
            this.$message({
              message: res.msg,
              type: 'error'
            })
          }
        })
      } else if (this.doType == 2) {
        getUpdateDepart(this.form).then(res => {
          if (res.code == 200) {
            this.dialogFormVisible = false
            this.$message({
              message: '修改成功',
              type: 'success'
            })
            this.getList()
            this.$refs.form.resetFields()
            this.form = {}
          } else {
            this.$message({
              message: res.msg,
              type: 'error'
            })
          }
        })
      }
    },
    addDepartMenDict() {
      this.dialogFormVisible = true
      this.title = '新增数据字典'
      this.doType = 1
      this.$refs.form.resetFields()
      this.form = {}
    },
    closeDia() {
      this.dialogFormVisible = false
      this.$refs.form.resetFields()
      this.form = {}
    }
  }
}
</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: 80px;
    background-color: #fff;
    padding-top: 20px;
    margin-top: -15px;

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

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

    .search-btn {
      margin-left: 12px;
    }
  }

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

    .addBtn {
      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;
    }

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

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

    .rightTable {
      float: right;
      width: 85%;
      background-color: #fff;

      .btn {
        margin: 20px 15px 20px;
        cursor: pointer;
        float: right;
        text-align: center;
        width: 98px;
        height: 34px;
        line-height: 34px;
        font-weight: 400;
        font-size: 14px;
        color: #fff;
        background-color: #2866DD;
      }

      .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: #2766DD;

        div {
          margin: 0 5px;
          cursor: pointer;
        }
      }

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

        .el-pagination {
          float: right;
        }
      }
    }
  }
}

.search {
  cursor: pointer;
  background-color: #2766DD;
  color: #F7F8FB;
  display: inline-block;
  width: 80px;
  height: 40px;
  border-radius: 2px;
  font-size: 14px;
  line-height: 40px;
  text-align: center;
}

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

.reset {
  cursor: pointer;
  color: #333334;
  border: 1px solid #D7D7D7;
  display: inline-block;
  margin-left: 12px;
  width: 80px;
  height: 40px;
  border-radius: 2px;
  font-size: 14px;
  line-height: 40px;
  text-align: center;
}

.reseta {
  cursor: pointer;
  color: #333334;
  border: 1px solid #D7D7D7;
  display: inline-block;
  margin-left: 12px;
  width: 80px;
  height: 40px;
  border-radius: 2px;
  font-size: 14px;
  text-align: center;
}

.searcha {
  cursor: pointer;
  background-color: #2766DD;
  color: #F7F8FB;
  display: inline-block;
  width: 80px;
  height: 40px;
  border-radius: 2px;
  font-size: 14px;
  text-align: center;
}

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

.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 200px !important;
}

.dialog-footer {
  text-align: center;
}
::v-deep .el-dialog__body {
  padding: 20px 95px !important;
}
</style>
