<template>
  <div>
    <el-form :model="listQuery" ref="queryForm" :inline="true">
      <el-form-item label="字典编码">
        <el-input
          v-model="listQuery.dicCode"
          placeholder="请输入字典编码"
        ></el-input>
      </el-form-item>
      <el-form-item label="字典值">
        <el-input
          v-model="listQuery.dicVal"
          placeholder="请输入字典值"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="getData('search')">查询 </el-button>
        <el-button @click="reset()">重置</el-button>
      </el-form-item>
      <el-form-item>
        <el-button
          v-if="status != 'code'"
          class="lake-Blue"
          type="primary"
          icon="el-icon-plus"
          @click="handleAddOrEdit(null, null, 'create', 1)"
          >新增
        </el-button>
      </el-form-item>
    </el-form>

    <el-table
      ref="table"
      v-loading="listLoading"
      :data="dicList"
      :tree-props="{ children: 'children', hasChildren: 'flag' }"
      row-key="id"
      :lazy="status !== 'code'"
      :load="load"
    >
      <template slot="empty">
        <img src="@/assets/nopage.png" alt />
        <p>暂无数据</p>
      </template>
      <el-table-column label="字典编码" v-if="status === 'code'">
        <template slot-scope="scope">
          <!-- :disabled="scope.row.invdFlag == 1" -->
          <el-radio v-model="tableRadio" :label="scope.row.dicCode"></el-radio>
        </template>
      </el-table-column>
      <el-table-column
        align="left"
        prop="dicCode"
        label="字典编码"
        v-if="status !== 'code'"
      >
      </el-table-column>

      <el-table-column
        align="left"
        prop="dicVal"
        label="字典值"
      ></el-table-column>
      <el-table-column
        align="left"
        prop="dicKey"
        label="字典key值"
      ></el-table-column>
      <el-table-column
        align="left"
        prop="invdFlag"
        label="状态"
        v-if="status !== 'code'"
      >
        <template slot-scope="scope">
          <el-tag type="danger" v-if="scope.row.invdFlag === '1'">
            停用
          </el-tag>
          <el-tag type="success" v-if="scope.row.invdFlag === '0'">
            启用
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column
        align="left"
        prop="dicDscr"
        label="字典说明"
      ></el-table-column>

      <el-table-column
        align="left"
        fixed="right"
        label="操作"
        v-if="status != 'code'"
      >
        <template slot-scope="scope">
          <el-button
            v-if="scope.row.invdFlag == '0'"
            @click.native="
              handleAddOrEdit(scope.$index, scope.row, 'create', 2)
            "
            style="color: #67c23a"
            type="text"
            icon="el-icon-plus"
            >新增</el-button
          >

          <el-button
            v-if="scope.row.invdFlag == '0'"
            @click.native="handleAddOrEdit(scope.$index, scope.row, 'update')"
            style="color: #52c8cc"
            type="text"
            icon="el-icon-edit"
            >编辑</el-button
          >

          <el-button
            v-if="scope.row.invdFlag == '0'"
            @click.native="handleDisable(scope.row)"
            style="color: #505152"
            type="text"
            icon="el-icon-circle-close"
            >停用
          </el-button>
          <el-dropdown
            @command="(command) => handleCommand(command, scope.row)"
          >
            <span class="el-dropdown-link">
              <el-button
                v-if="scope.row.invdFlag == '1'"
                style="color: #505152"
                type="text"
                icon="el-icon-d-arrow-right"
                >启用
              </el-button>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="handlEnable1">
                <i class="el-icon-circle-check el-icon--left"></i>启用(本级)
              </el-dropdown-item>
              <el-dropdown-item command="handlEnable2" divided
                ><i class="el-icon-circle-check el-icon--left"></i
                >启用(连同所有下级)
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </template>
      </el-table-column>
    </el-table>
    <!--分页-->
    <yl-pagination
      v-show="total > 0"
      :total="total"
      :page.sync="listQuery.current"
      :limit.sync="listQuery.size"
      @pagination="getData"
    />
    <div
      slot="footer"
      class="dialog-footer"
      v-if="status == 'code'"
      style="margin: 20px 0 0 0; height: 20px"
    >
      <el-button type="primary" @click="itemClick" style="float: right"
        >确认
      </el-button>
    </div>

    <!--添加/修改-->
    <el-dialog
      :title="textMap[dialogStatus]"
      :visible.sync="dialogFormVisible"
      width="420px"
      :close-on-click-modal="false"
    >
      <el-form ref="dataForm" :rules="rules" :model="temp" label-width="90px">
        <el-form-item label="字典编码" prop="dicCode">
          <el-input v-model.trim="temp.dicCode" />
        </el-form-item>

        <el-form-item label="字典键值" prop="dicVal">
          <el-input v-model.trim="temp.dicVal" />
        </el-form-item>

        <el-form-item label="字典key值">
          <el-input v-model.trim="temp.dicKey" />
        </el-form-item>

        <el-form-item label="字典说明">
          <el-input v-model="temp.dicDscr"></el-input>
        </el-form-item>

        <!-- <el-form-item label="父级编码">
          <el-input :disabled="true" v-model.trim="temp.pantId" />
        </el-form-item> -->
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button @click="commitTreeData" type="primary">确认</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  getDic,
  saveDic,
  delDic,
  setEnabled,
  setEnabledWithChild
} from "@/api/system/dic";
import ylPagination from "@/components/yl-pagination";
export default {
  components: {
    ylPagination
  },
  name: "Dic",
  props: {
    status: {
      //选中
      type: String,
      default: false
    },
    tableRadio: {
      //选中
      type: String,
      default: ""
    }
  },

  data() {
    return {
      tableRadio: "",
      pId: "",
      // 字典列表
      dicList: [],
      listQuery: {
        //条件查询
        current: 1,
        size: 10,
        dicCode: "",
        dicVal: "",
        pantId: ""
      },
      listQuery1: {
        //条件查询
        current: 1,
        size: 1000,
        pantId: ""
      },
      idArr: [],
      listLoading: false,
      temp: {},
      textMap: {
        update: "编辑",
        create: "添加"
      },
      dialogFormVisible: false, //是否对话框
      dialogStatus: "",

      statusValue: true, //表单  状态
      rules: {
        dicCode: [
          {
            required: true,
            message: "字典编码不能为空",
            trigger: "blur"
          }
        ],
        dicVal: [
          {
            required: true,
            message: "字典名称不能为空",
            trigger: "blur"
          }
        ]
      }
    };
  },

  created() {
    this.getData();
  },

  methods: {
    // 选择前缀后确认
    itemClick() {
      if (!this.tableRadio) {
        this.$message({
          message: "请先选择前缀",
          type: "info"
        });
        return false;
      }
      this.$emit("setDic", this.tableRadio);
      this.tableRadio = "";
    },

    // 懒加载
    load(tree, treeNode, resolve) {
      this.listQuery1.pantId = tree.id;
      if (this.status == "code") {
        this.listQuery1.invdFlag = "0";
      }
      getDic(this.listQuery1).then((response) => {
        resolve(response.data.records);
      });
    },

    // 重置页面
    reset() {
      this.listQuery.dicCode = "";
      this.listQuery.dicVal = "";
      this.listQuery.pantId = "";
      this.getData();
    },

    // 获取列表
    getData(type) {
      if (type == "search") {
        this.listQuery.current = 1;
      }
      this.listLoading = true;
      this.dicList = [];
      this.listQuery.pantId = "0";
      if (this.status == "code") {
        this.listQuery.invdFlag = "0";
      }
      getDic(this.listQuery).then((response) => {
        this.dicList = response.data.records;
        this.total = response.data.total;
        this.listLoading = false;
      });
    },

    //提交表单数据
    commitTreeData(dataType) {
      this.$refs["dataForm"].validate((valid) => {
        if (valid) {
          this.$confirm("确认提交", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          }).then(() => {
            saveDic(this.temp).then((response) => {
              this.pId = this.temp.pantId;
              this.dialogFormVisible = false;
              // this.getData();
              this.refreshRow();
            });
          });
        }
      });
    },

    // 增删改后刷新页面
    refreshRow() {
      if (this.pId == "0") {
        this.listQuery.pantId = this.pId;
        // 解决element el-pagination分页最后一页数据清空了页码显示正确，但是列表为空
        const totalPage = Math.ceil((this.total - 1) / this.listQuery.size);
        const currentPage =
          this.listQuery.current > totalPage
            ? totalPage
            : this.listQuery.current;
        this.listQuery.current = currentPage < 1 ? 1 : currentPage;
        if (this.status == "code") {
          this.listQuery.invdFlag = "0";
        }
        getDic(this.listQuery).then((response) => {
          this.getData();
        });
      } else {
        this.listQuery1.pantId = this.pId;
        if (this.status == "code") {
          this.listQuery1.invdFlag = "0";
        }
        getDic(this.listQuery1).then((response) => {
          this.$set(
            this.$refs.table.store.states.lazyTreeNodeMap,
            this.pId,
            response.data.records
          );
        });
      }
    },

    //修改/添加对话框
    handleAddOrEdit(index, row, type, createType) {
      if (type === "update") {
        this.temp = {
          id: row.id,
          dicCode: row.dicCode,
          dicVal: row.dicVal,
          pantId: row.pantId,
          dicDscr: row.dicDscr,
          dicKey: row.dicKey,
          diclv: row.diclv
        };
      } else {
        if (createType == 2) {
          this.temp = {
            id: "",
            dicCode: "",
            dicVal: "",
            dicDscr: "",
            pantId: row.id,
            dicKey: "",
            diclv: Number(row.diclv) + 1
          };
        } else {
          this.temp = {
            id: "",
            dicCode: "",
            dicVal: "",
            dicDscr: "",
            pantId: "0",
            dicKey: "",
            diclv: 0
          };
        }
      }

      this.dialogStatus = type;
      this.dialogFormVisible = true;
      this.$nextTick(() => {
        this.$refs["dataForm"].clearValidate();
      });
    },

    //  停用
    handleDisable(row) {
      this.$confirm("确认停用", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        let data = {
          id: row.id
        };
        delDic(data).then((response) => {
          this.$message({
            message: "操作成功",
            type: "success"
          });
          this.pId = row.pantId;
          // this.getData();
          this.refreshRow();
        });
      });
    },

    // 启用
    handleCommand(command, row) {
      this.$confirm("确认启用", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        let data = {
          id: row.id
        };
        if (command == "handlEnable1") {
          setEnabled(data).then((response) => {
            this.$message({
              message: "操作成功",
              type: "success"
            });
            this.pId = row.pantId;
            this.refreshRow();
          });
        } else {
          setEnabledWithChild(data).then((response) => {
            this.$message({
              message: "操作成功",
              type: "success"
            });
            this.pId = row.pantId;
            this.refreshRow();
          });
        }
      });
    }
  }
};
</script>

<style scoped></style>
