<template>
  <div class="full-box zhglcss" style="overflow: hidden">
    <div class="" style="width: 100%;height:100%;">
      <div class="top-tip-box t-title">当前位置：后台系统管理 > 字典管理</div>
      <div class="table-info-box">
        <div class="table-search-box onerow">
          <div class="search-info-box" style="">
            <div class="search-item">
              <div class="search-item-label">字典类型</div>
              <el-select v-model="valueType" clearable filterable placeholder="请选择" @change="typeChanged">
                <el-option label="全部" value=""></el-option>
                <el-option v-for="item in typeList" :key="item.id" :label="item.name" :value="item.id"></el-option>
              </el-select>
            </div>
            <el-button class="search-btn" type="primary" @click="searchResult">查询</el-button>
            <el-button class="operate-btn" type="primary" style="float:left" @click="showAdd">新增</el-button>
          </div>
          <div class="search-border-box">
            <div class="sbb-line"></div>
            <div class="sbb-role"></div>
          </div>
        </div>
        <div class="table-result-boxx">
          <div class="table-container-style">
            <el-table :data="tableData.list" height="200">
              <el-table-column type="index" label="序号" align="center" width="80"></el-table-column>
              <el-table-column property="name" label="字典名称" align="center" show-overflow-tooltip></el-table-column>
              <el-table-column property="typeName" label="类型" align="center" show-overflow-tooltip></el-table-column>
              <el-table-column property="sort" label="排序" align="center" width="80" show-overflow-tooltip></el-table-column>
              <el-table-column property="isDisabledStr" label="状态" align="center" width="80" show-overflow-tooltip></el-table-column>
              <el-table-column property="remark" label="备注" align="center" show-overflow-tooltip></el-table-column>
              <el-table-column property="updateTime" label="最近更新时间" align="center" width="120" show-overflow-tooltip v-if="false"></el-table-column>
              <el-table-column property="createTime" label="创建时间" align="center" width="152" show-overflow-tooltip></el-table-column>
              <el-table-column label="操作" align="center"  width="150">
                <template slot-scope="scope">
                  <div class="table-edit-btn" @click="editModule(scope.row)">修改</div>
                  <div class="table-edit-btn" @click="deleteModule(scope.row)">删除</div>
                </template>
              </el-table-column>
            </el-table>
            <el-pagination @current-change="handlePageChange" background layout="total, prev, pager, next" :total="tableData.total" :current-page="tableData.pageNum" :page-size="tableData.pageSize" :page-count="tableData.pages" style="text-align: right;"></el-pagination>
          </div>
        </div>
      </div>
    </div>

    <el-dialog :title="type==0?'新增':'修改'" :visible.sync="dialogVisible" width="450px" :close-on-click-modal=false>
      <el-form :model="addForm" :rules="addRules" ref="addForm" :label-width="formLabelWidth+'px'">
        <el-form-item label="字典名称" prop="name">
          <el-input v-model="addForm.name" clearable auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="类型">
          <el-select v-model="addForm.typeId" clearable filterable placeholder="请选择">
            <el-option  v-for="item in typeList" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="排序" prop="sort">
          <el-input v-model.number="addForm.sort" clearable auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="备注">
          <el-input type="textarea" autosize v-model="addForm.remark"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="updateModule('addForm')">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  let month = new Date().getMonth()==0?1:new Date().getMonth()+1;
  let year = month<10?new Date().getFullYear()+"-0"+month :new Date().getFullYear()+"-"+month;
  export default {
    name: 'yjManage',
    data () {
      return {
        timeFilter:[new Date().format("yyyy-")+"01",new Date(year).format("yyyy-MM")],
        dialogVisible:false,
        type:0,
        valueType:'',
        typeList: [],
        formLabelWidth: 120,
        addRules:{
          name: [
            { required: true, message: '请输入字典名称', trigger: 'blur' }
          ],
          sort: [
            { required: true, message: '请输入排序', trigger: 'blur' },
            { type: 'integer', message: '排序必须为数字值'}
          ]
        },
        addForm: {name: "",typeId: "",typeName: "",status: "正常",sort: "",remark: ""},
        tableData:{
          list: [],
          pageNum: 1,
          pageSize: 10,
          pages: 0,
          total: 0,
        },
      }
    },
    mounted (){},
    created(){
      this.getdictTypeList();
      this.getDataList();
    },
    methods:{
      searchResult(){
        this.getDataList();
      },
      getdictTypeList: function (pager) {
      let _this = this,names = _this.valueType;
      _this.tableData.pageNum = _this.$Util.isEmpty(pager) ? _this.tableData.pageNum : pager;
      _this.$http.get('/dx-economy-api/dict/dictTypeList').then(function (resp) {
        var _data = resp.data;
        if (_data.code === 200 && !_this.$Util.isEmpty(_data.data)) {
          _this.typeList= _data.data;
        } else {
          _this.$message.error(_data.message);
        }
      });
    },
      getDataList: function (pager) {
        let _this = this,_id = _this.valueType;
        _this.tableData.pageNum = _this.$Util.isEmpty(pager) ? _this.tableData.pageNum : pager;
        _this.$http.get('/dx-economy-api/dict/page', {
          params: {
            typeId: _id,
            pageNum: _this.tableData.pageNum,
            pageSize: _this.tableData.pageSize
          }
        }).then(function (resp) {
          var _data = resp.data;
          if (_data.code === 200 && !_this.$Util.isEmpty(_data.data)) {
            _data.data.list.forEach(function (i,k) {
              i.isDisabledStr = i.isDisabled == 0 ? '启用' :i.isDisabled == 1 ? '禁用':'';
            })
            _this.tableData.list = _data.data.list;
            _this.tableData.pageNum = _data.data.pageNum;
            _this.tableData.pageSize = _data.data.pageSize;
            _this.tableData.pages = _data.data.pages;
            _this.tableData.total = _data.data.total;
          } else {
            _this.$message.error(_data.message);
          }
        });
      },
      typeChanged: function () {
        this.getDataList(1);
      },
      handlePageChange: function (page) {
        this.getDataList(page);
      },
      resetForm(formName) {
        var _this = this;
        if(!_this.$Util.isEmpty(_this.$refs[formName])){
          _this.$refs[formName].resetFields();
          _this.addForm = {
            name: "",
            type: "",
            status: "正常",
            sort: "",
            remark: ""
          }
        }
      },
      showAdd(){
        this.type = 0;
        this.resetForm("addForm");
        this.dialogVisible = true;
      },
      updateModule: function (formName) {
        var _this = this;
        _this.$refs[formName].validate((valid) => {
          if (valid) {
            var _form = _this.addForm;
            _form.status = _form.status === "正常" ? "1" : "0";
            _this.typeList.forEach(function (i,k) {
              if(_form.typeId == i.id){
                _form.typeName = i.name
              }
            })
            if(_this.type === 0){ //新增
              _this.$http.post('/dx-economy-api/dict', _form).then(function (resp) {
                var _data = resp.data;
                if (_data.code === 200) {
                  _this.getDataList(1);
                } else {
                  _this.$message.error(_data.message);
                }
              });
            }else{ //  修改
              _this.$http.put('/dx-economy-api/dict/'+_form.id, _form).then(function (resp) {
                var _data = resp.data;
                if (_data.code === 200) {
                  _this.getDataList(1);
                } else {
                  _this.$message.error(_data.message);
                }
              });
            }
            _this.dialogVisible = false;
          } else {
            return false;
          }
        });
      },
      editModule: function (rowData) {
        this.type = 1;
        this.addForm = JSON.parse(JSON.stringify(rowData));
        this.dialogVisible = true;
      },
      deleteModule: function (rowData) {
        var _this = this;
        _this.$confirm('确认删除？','提示', {type: 'warning'}).then(() => {
          if(!_this.$Util.isEmpty(rowData) && !_this.$Util.isEmpty(rowData.id)){
            _this.$http.delete('/dx-economy-api/dict/'+rowData.id).then(function (resp) {
              var _data = resp.data;
              if (_data.code === 200) {
                _this.getDataList(1);
              } else {
                _this.$message.error(_data.message);
              }
            });
          }
        }).catch(() => {});
      },
    }
  }
</script>
<style></style>
<style scoped>
  .table-result-boxx{height:calc(100% - 95px);}
  .el-form-item{margin-bottom:15px;}
  .el-form-item label{width: 90px;}
  .aaa{}
  .aaa{}
</style>